- •Лабораторна робота №1
- •Список базових тегів html
- •Атрибути тегу body
- •Крок 1: Структура Web- сторінки
- •Крок 2: Заголовки.
- •Крок 4: Параметр горизонтального вирівнювання тексту
- •Крок 5: Форматований текст
- •Крок 6: Цитата
- •Крок 8: Шрифти
- •Крок 9: Лінії та коментарі
- •Крок 10:Колір
- •Крок 11:Колір фону
- •Крок 12: Фоновий малюнок
- •Крок 15: Фоновий малюнок
- •Крок 7: Стилі
Крок 2: Заголовки.
Відкрийте меню Вид – Просмотр HTML-кода. Яка програма відкрилась?
Внесіть зміни у тіло HTML- коду перед тегом </body>, додавши теги заголовків (те що у рамці):
<body>
Доброго дня!
Це моя перша сторінка.
<br>
Ласкаво просимо!
<H2 Align=CENTER> ВИКОРИСТАННЯ ЗАГОЛОВКІВ ДЛЯ СТВОРЕННЯ СТРУКТУРИ ДОКУМЕНТУ </H2>
<H1> Заголовок 1-го рівня, елемент H1</H1>
<H2> Заголовок 2-го рівня, елемент H2</H2>
<H3> Заголовок 3-го рівня, елемент H3</H3>
<H4> Заголовок 4-го рівня, елемент H4</H4>
<H5> Заголовок 5-го рівня, елемент H5</H5>
<H6> Заголовок 6-го рівня, елемент H6</H6>
</body>
Збережіть файл (Файл - Сохранить). Програму Блокнот можна не закривати.
Поверніться до Web – сторінки, клацнувши мишею по відповідній кнопці на панелі задач.
Оновити вигляд сторінці, обрав меню Вид – Обновить, або натиснув клавішу F5, або клацнув мишею по кнопці
на панелі інструментівЯкий тег дає самий крупний заголовок? Який менший?
Чому перший заголовок розташований по середині?
Крок 3: Символ розриву абзаців
Поверніться до файлу з HTML - кодом (клацнувши мишею по відповідній кнопці на панелі задач ) та додайте наступні рядки у кінець тіла коду (перед тегом </body>):
<h2 align=center> ВИКОРИСТАННЯ СИМВОЛІВ РОЗРИВУ АБЗАЦІВ </h2>
Можна вибрати друга і по духу брата,
Та не можна матір рідну вибирати. <P>
За тобою завше будуть мандрувати
Очі материнські і білява хата.<P>
Можна все на світі вибирати, сину,
Вибрати не можна тільки Батьківщину.
17.Збережіть текст та поновіть Web – сторінку (див. пп.11-13).
18.Скільки рядків на сторінці? Як вплинув тег <P> на розташування тексту?
Використайте теги <BR> та <P>, щоб частина сторінці мала вигляд :
Примітка: Перевірити правильне розташування тегів Ви зможете на наступному кроці.
У яки строки стиха треба додати ці теги?
Крок 4: Параметр горизонтального вирівнювання тексту
Додайте наступні рядки у кінець тіла html-коду:
<H2 Align=CENTER> ВИРІВНЮВАННЯ АБЗАЦІВ ТА ЗАГОЛОВКІВ</H2>
<P ALIGN=LEFT>
Можна вибрати друга і по духу брата, <BR>
Та не можна матір рідну вибирати. <P>
<P ALIGN=CENTER>
За тобою завше будуть мандрувати <BR>
Очі материнські і білява хата. <P>
<P ALIGN=RIGHT>
Можна все на світі вибирати, сину, <BR>
Вибрати не можна тільки Батьківщину.<BR>
Як впливає параметр Align=CENTER на розташування тексту на WEB – сторінці?
Крок 5: Форматований текст
Додайте наступні рядки у кінець тіла html-коду:
<H2 Align=CENTER> ВИКОРИСТАННЯ ТЕГУ PRE ДЛЯ СПРОЩЕННЯ ПРОЦЕДУРИ ФОРМАТУВАННЯ</H2>
<PRE>Можна вибрати друга і по духу брата,
Та не можна матір рідну вибирати.
За тобою завше будуть мандрувати
Очі материнські і білява хата.
Можна все на світі вибирати, сину,
Вибрати не можна тільки Батьківщину.</PRE>
Яки зміни на Web-сторінці? У яких випадках слід використовувати тег <PRE>?
Крок 6: Цитата
Додайте наступні рядки у кінець тіла html-коду:
<H2 Align=CENTER> ФОРМАТУВАННЯ ТЕКСТУ ЗА ДОПОМОГОЮ ТЕГУ BLOCKQUOTE </H2>
Можна вибрати друга і по духу брата, <BR>
Та не можна матір рідну вибирати. <BR>
<BLOCKQUOTE>
За тобою завше будуть мандрувати <BR>
Очі материнські і білява хата <BR>
</BLOCKQUOTE>
Можна все на світі вибирати, сину, <BR>
Вибрати не можна тільки Батьківщину.<BR>
Як виглядає цитата на сторінки?
