Форматування тексту
Текст вводиться у будь-якому місці між тегами <BODY> й </BODY>.
Текст автоматично розмщується за шириною вікна броузера (рис. 17).
Якщо ж необхідно на Web-сторінці вмістити порожній рядок або встановити в потрібному місці перехід до наступного рядка, слід використовувати спеціальні теги:
теги розриву абзацу <Р> i </P>;
тег розриву рядка <BR>.
Тег розриву абзацу дає броузеру команду закінчити поточний абзац i вмістити порожній рядок перед наступним абзацом. Тег розриву рядка вказує на закінчення поточного рядка й перехід до наступного.
Зазначимо, що для тегу розриву абзацу не обов'язково використовувати закриваючий тег </Р>.
Наприклад:
<HTML>
<HEAD>
<TITLE>Використання тегів розриву рядка та абзацу </TITLE>
</HEAD>
<BODY> Teг розриву абзацу містить вказівку вставити порожній рядок перед початком наступного абзацу.
Тег розриву рядка вказує броузеру <BR> перейти на наступний рядок.
</BODY>
</HTML>
Рис. 17. Biкно броузера з введеним текстом
Текст абзацу чи заголовка може бути вирівняно: за лівим краєм, за правим краєм, за центром вікна броузера. Для вирівнювання тексту використовується параметр вирівнювання ALIGN у вигляді ALIGN=значення, де значення вказує на вирівнювання:
LEFT — за лівим краєм;
RIGHT — за правим краєм;
CENTER — за центром.
Найчастіше параметр ALIGN використовується у тегах розриву абзацу та встановлення вигляду заголовка.
Наприклад:
<HTML>
<HEAD>
<TITLE> Приклад вирівнювання тексту </TITLE>
</HEAD>
<BODY>
<Н2 ALIGN=CENTER>Розміщення заголовка тексту по центру </Н2>
<! — Наступний абзац буде вирівняно за лівим краєм — >
<Р ALIGN=LEFT>Вивчення HTML невдовзі стане таким необхідним, як уміння ввімкнути комп'ютер, скопіювати файл чи скористатися текстовим редактором. Якщо користувач yміє набирати текст, то зможе опанувати й використання HTML.
</BODY>
</HTML>
Мова HTML дає змогу виділяти фрагменти тексту напівжирним шрифтом, курсивом, підкресленням тощо. Для цього в HTML icнують спеціальні дескриптори, які називають дескрипторами cmuлів. Bci дескриптори стилів є контейнерами. Основні дескриптори стилів подано в таблиці 23.
Таблиця 23
Дескриптор |
Стиль |
Приклад |
<В> |
Напівжирний |
Напівжирний |
<І> |
Курсив |
Курсив |
<U> |
Підкреслення |
Підкреслення |
<SUB> |
Підрядковий текст |
Текстпідрядковий текст |
<SUP> |
Надрядковий текст |
Текстнадрядковий текст |
<STRIKE> |
Закреслення |
|
Наприклад (рис. 18):
<BODY>
Приклад виділення тексту <В> напівжирним шрифтом </В>. <BR>
Можна також виділити текст <І> курсивом </І>. <BR>
Особливо важливі місця можна <U> підкреслити </U>. <BR> Можна створити <SUP> надрядковий </SUP> або <SUB> підрядковий </SUB> текст. <BR>
Kpiм того, текст можна <STRІKE>перекреслити</ STRIKE>. </P>
Розмір шрифта можна виэначити за допомогою дескриптора FONT:
</BODY>
Рис. 18. Приклади виділення тексту
Списки
У будь-яких HTML-документах для покращення сприйняття тексту можна використовувати списки трьох титв:
а) послідовно нумеровані;
б) ненумеровані (з маркером позиції);
в) списки словникового типу або списки визначень.
Маркери списку можуть мати вигляд:
• — за замовчуванням (заповнені кружечки);
о — порожні кружечки (CIRCLE);
■ — квадратики (SQUARE).
Тип маркера вказується у відкриваючому тегу контейнера списку: <ULTYPE=SQUARE>.
Спосіб нумерування елементів списку вказує атрибут тегу (табл. 24).
Таблиця 24
Атрибута |
Значения |
<OL TYPE = «1»> |
Нумерування арабськими цифрами (значения за замовчуванням) |
< OL TYPE = «а»> |
Рядкові лігери |
< OL TYPE = «А»> |
Великі лігери |
< OL TYPE - «i»> |
Нумерування римськими літерами (маленькими) |
< OL TYPE = «I»> |
Нумерування римськими літерами (великими) |
За потреби можна вказати початковий номер елемента атрибутом START:
Наприклад:
<OL TYPE = «I» START = «5»>.
Можна створити нумерований та ненумерований списки (рис. 19, 20).
Фрагмент коду для створення ненумерованого списку: <UL><LI>Перший елемент списку</LI>
<LI>Перший елемент списку</LI>
<LI>Другий елемент списку</LI>
<LI>Третій елемент списку</LI></UL>
Рис. 19. Приклад ненумерованого списку
Фрагмент
коду для створення нумерованого списку:
<OL>
<LI>Перший елемент списку</LI>
<LI>Другий елемент списку</LI>
<LI>Третій елемент списку</LI>
</OL>
Рис. 20. Приклад нумерованого списку
Зручний вигляд має список словникового типу, який формується з використанням тегу <DL> (табл. 26). Тег терміна <DT>, як правило, використовується першим, а тег визначення <DD> — другим.
Приклад:
<Н1>Теги списків</Н1>
<DL><DT>Teг UL </DT>
<DD>Cтворює ненумерований список (список із маркерами) </DD>
<DL><DT>Ter OL </DT>
<DD>Створює нумерований список</DD>
<DL><DT>Ter LI </DT>
<DD>Використовується у списках для обмеження ïx елементів </DD>
<DL><DT>Ter DL </DT>
<DD>Cтворює список словникового типу</DD>
<DL><DT>Тег DT </DT>
<DD>Визначає термін у спискові словникового типу </DD>
<DL><DT> Тег DD </DT>
<DD>Визначає визначення терміну y спискові словникового типу</DD>
Рис. 21. Приклад meгів списків
Допускається довільне вкладення списків, наприклад, одним iз пунктів нумерованого списку може бути ненумерований список (або ненумерований список може містити ненумерований список з іншими маркерами).
Таблиці
Подання анформації у таблицях за зовнішнім виглядом подібне до подання інформації в таблицях текстового редактора Word, в Excel, але ïx використання набагато ширше. Вміст комірок може бути довільним, зокрема там може бути й графіка.
Опис
таблиці починається з тегу <TABLE>.
Параметри таблиці визначають теги:
ТН> — заголовка таблиці,
TR> — опису рядків,
TD> — опису даних (тобто вмісту комірок).
Наприклад (рис. 22):
<Н1>Фірма «Зодіак»</Н1>
<Н2>Прибутки i видатки за 2000 piк
(дійсні i очікувані)</Н2>
<TABLE> |
Перший рядок |
<TR> |
|
<ТН> Перший квартал </ТН> |
|
<ТН> Другий квартал </ТН> |
|
<ТН> Третій квартал </ТН> |
|
<ТН> Четвертий квартал </ТН> </TR> |
<TR> |
Другий рядок |
<TD> Прибутки 12 % (дійсні) </TD> |
|
<TD> Прибутки 10 % (дійсні) </TD> |
|
<TD> Збитки 5 % (дійсні) </TD> |
|
<TD> Прибутки 10 % (передбачувані) </TD> |
|
<TD> Збитки 5 % ( передбачувані) </TD> |
|
</TR> </TABLE> |
Рис. 22. Приклад HTML-таблиці
Заголовки у таблиці можуть розміщуватися не тільки як назви стовпчиків, а й як назви рядків. Виравнювання даних у комірках таблиці описує атрибут ALIGN тегів з дескрипторами ТН i TD. Атрибут може набувати значень LEFT, RIGHT, CENTER для вирівнювання за лівим краєм, правим краєм або за центром.
Наприклад:
• тег <ТН ALIGN= «LEFT»> вказує на вирівнювання за лівим краєм.
У цих тегах можуть розміщуватися атрибути COLSPAN i ROWSPAN, за допомогою яких будується складна таблиця.
Наприклад:
тег <ТН ROWSPAN=«3»> вказує на те, що відповідна комipкa має висоту, втричі більшу за висоту рядка;
тег <TD COLSPAN=«3»> — що комірка має ширину, втричі більшу за ширину стовпчика.
Комірки таблиці можуть бути обмежені лініями — рамками. Тег оголошення таблиці <TABLE> з атрибутом BORDER:
TABLE BORDER> та атрибут кольору ліній ... BORDERCOLOR= «#...», де колір задають шістнадцяткові коди RGB-мoдeлi.
Заголовок таблиці розмщується в контейнері між тегами <TABLE> i </TABLE> :
CAPTION>Зaгoлoвoк тaблицi</CAPTION>,