Теги форматування заголовкiв.

Лабораторна робота №1

Тема: Знайомство с загальною структурою HTML-документа.

Мета:

Опанувати методику створення документа у форматі HTML.
Опанувати основнi принципи представлення iнформацiї у виглядi гiпертексту.

Основнi принципи форматування тексту за допомогою HTML.

HTML - це засiб опису структурованих документiв, який складається зi спецiальних маркуючих директив (дескрипторiв чи тегiв), за допомогою яких форматується текст.

Теги - це iнструкцiї, якi вказують броузеру, яким чином слiд вiдображати позначений ними текст. Тег завжди починається знаком “<” та закiнчується знаком “>”. Наприклад: <HTML>. При написаннi тегiв великi та маленькi лiтери не розрiзняються.

Iснують два типи тегiв. Перший тип - одноелементнi теги. Наприклад: тег <HR> - позначення горизонтальної розподiльчої лiнiї, яка проходить через весь екран.

Бiльшiсть тегiв мають параметри.

Тег <HR> має такi параметри:

ALIGN - для визначення положення розподiльчої лiнiї на сторiнцi (left, center, right).
COLOR - для визначення її кольору (reg, green, blue, yellow ...).
SIZE - для визначення вертикального розмiру розподiльчої лiнiї (у пiкселях).
WIDTH - для визначення горизонтального розмiру розподiльчої лiнiї (у вiдсотках до ширини сторiнки).

Другий тип тегiв слугує для позначення та обробки тексту. Цi теги застосовуються тiльки парами, на початку, та у кiнцi фрагменту тексту. Причому завершає текстовий блок той же тег, але вiн починається з косої риски (/). Наприклад:  Це курсив .

Теги структурного форматування (структура HTML - документу).

HTML - документ складається з заголовка та змiсту. Заголовок документу броузер вiдображає у спецiальному рядку. Змiст вiдображається у вiкнi бороузера. Загальна схема HTML - документу виглядає так:

<HTML>
<HEAD>
<TITLE> Заголовок документу </TITLE>
</HEAD>
<BODY>
. . .
 Змiст документу 
. . .
<!- Коментар, який не вiдображається броузером ->
</BODY>
</HTML>

де

<HTML></HTML> - Позначення HTML - документу. Саме цей тег вказує броузеру на те, що цей документ є HTML - документом.
<HEAD><HEAD> - Позначення заголовка HTML - документу.
<BODY><BODY> - Позначення змiсту HTML - документу.
<TITLE><TITLE> - Позначення назви HTML - документу.
 - Позначення начала та кiнця абзаца.

Повний формат тегу BODY такий:

де

BGCOLOR - Колiр фону.
ALINK - Колiр посилання на яке вказує курсор мишки.
LINK - Звичайний колiр посилання.
VLINK - Колiр “використаного” посилання (на сторiнку, яку ми вже переглядали).
TEXT - Колiр тексту.
BACKGROUND - Посилання на фоновий малюнок.
BGPROPERTIES - Визначення поведiнки фонового малюнку. FIXED - означає, що фоновий малюнок буде зафiксований у вiкнi броузера. Без цього параметру фоновий малюнок буде рухатися у вiкнi броузера разом iз текстом.
LEFTMARGIN - розмiр лiвого поля (у пiкселях).
TOPMARGIN - розмiр верхнього поля (у пiкселях).

Теги форматування абзацiв.

Абзац є основною складовою частиною HTML - документу. У процесi вiдображення тексту броузер автоматично форматує абзаци (точно так, як це робить Microsoft Word). Тому кожен абзац повинен бути позначений тегом . Бiльшiсть броузерiв автоматично видаляє зайвi промiжки мiж словами. Але якщо вам потрiбно вiдобразити вже вiдформатований текст, позначте його тегом <PRE></PRE>. Цей тег дозволяє вiдобразити текст шрифтом фiксованої ширини та зберiгає усi промiжки. Для позначення початку нового рядка у текстовому абзацi використовується тег .

Тег  має параметр ALIGN, який може приймати такi значення:

LEFT - притиснути текст до лiвого поля сторiнки
CENTER - розташувати текст по центру сторiнки
RIGHT - притиснути текст до правого поля сторiнки

Повний формат тегу P такий:
Текстова частина

Теги форматування заголовкiв.

HTML дозволяє використовувати шiсть типiв заголовкiв. Наприклад: <Hn> Текст заголовку </Hn> де n - тип заголовку (вiд 1 до 6) i, одночасно, розмiр символiв у ньому. Рiзнi рiвнi заголовкiв дозволяють побудувати документ iєрархiчно. Тобто кожен наступний рiвень iєрархiї дозволяє розподiлити документ на пiдроздiли ще дрiбнiшого рiвня.

Повний формат тегу Hn такий:
<Hn ALIGN=LEFT|CENTER|RIGHT>Змiст заголовка</Hn>

Завдання

Уважно ознайомитися з теоретичною частиною лабораторної роботи.
У редакрорі Notepad створити текстовий документ, який має внутрішню структуру HTML - документу. За зразком, що приведений вищє.
Змінити його розширення на .HTML.
Примітка: якщо у вікні видображення файлів не відображаються їх розширення, то:

Оберіть у головному меню цього вікна пункт View,
у підменю View оберіть пункт Options,
у діалоговому вікні Options оберіть закладенку View та зніміть прапорець навпроти пункту Hide file extentions for known file types.
Лівою кнопкою мишки натисніть кнопку "Ok".

Двичі натиснути на його назві лівою кнопкою мишки і запустити таким чином броузер.
Переглянути створенний вами документ у броузері.

Контрольне завдання

Розробити документ, який виглядає так само, як наведено на малюнку.

Дата добавления: 2020-01-07; просмотров: 215; Мы поможем в написании вашей работы!

Поделиться с друзьями:

Мы поможем в написании ваших работ!