Мова HTML підтримує шість рівнів заголовків документів. Вони позначені тегами від <Н1>...</Н1> до <Н6>...</Н6>. На екрані ці заголовки відображаються різними шрифтами (зазвичай напівжирними). Хоча в мові HTML є теги форматування, які можуть змінювати зображення шрифту, користуватися ними для заголовків не рекомендовано.
Текст, що міститься всередині тегу заголовка, відображатиметься відповідно до його рівня. Найвищий рівень має заголовок Н1, найнижчий — Н6. Текст заголовка може бути вирівняний по центру, за правим або лівим краєм — для цього використовують атрибут ALIGN. Наприклад: <Н2 ALIGN=center \ right \ left текст заголовка </Н2> (тут символ \ означає можливість вибору між значеннями center, right або left).
На рис. 2.1 показано заголовки різних рівнів.
Рис. 2.1. Заголовки різних рівнів та відповідні їм теги
Для визначення звичайних абзаців у мові HTML використовують теги <Р> і </Р>. Текст, розміщений між ними, власне і буде одним абзацом. При цьому слід пам'ятати, що всі «зайві» пропуски між словами і переходи на новий рядок під час відтворення HTML-документа браузер ігнорує. Коли браузер відтворює веб-сторінки, абзаци відділяються один від одного за допомогою відступів. У разі переходу на новий рядок без створення абзацу використовується одинарний тег <BR>. Розділювачами в тексті можуть також бути горизонтальні лінії, які візуально відділяють різні частини документа, — їх створюють за допомогою одинарного тегу <HR>.
Кольори та зображення для всього документа і його тла задають за допомогою тегу <BODY>. Він може мати такі атрибути:
♦ BACKGROUND="URL" — замість URL вказують адресу малюнка, який має бути тлом для сторінки;
♦ BGCОLОR=значення — задає колір, який має бути фоновим для документа;
♦ ТЕХТ=значення — задає колір тексту;
♦ LINK=значення — визначає колір гіперпосилань у документі;
♦ ALINK=значення — задає колір гіперпосилань під час клацання;
♦ VLINK=значення — задає колір переглянутих гіперпосилань.
Браузер перетворює текст HTML-документа під час його виведення на екран, тобто ігнорує зайві пропуски, символи табуляції, символи кінця рядка, форматує текст відповідно до використаних тегів. Проте іноді виникає потреба у тому, щоб помістити в документ відформатований текст, для якого браузер повинен зберегти всі пропуски, навіть якщо кілька пропусків розміщені один за одним, знаки переносу на інший рядок, табуляції та інші символи форматування. Для цього використовують тег <PRE>Tекст</PRE>. Втім, якщо браузер зустріне в такому тексті теги розмітки, вона буде відповідним чином застосована.
2.Введення і форматування тексту.
Текст у HTML-документах форматують за допомогою відповідних тегів. У табл. 2.1 наведено теги, які використовують для форматування символів, та заданий ними ефект.
Теги
Ефект
Приклад
<B> та </В>
Напівжирне накреслення
bold
<I> та </I>
Курсивне накреслення
Italic
<U> та </U>
Підкреслене
underlined
<S> та </S>
Перекреслене
striken
<SUP> та </SUP>
Верхній індекс
aaaaaaaaaasuperscript
<SUB>та /SUB>
Нижній індекс
aaaaaaaaaasubscript
Окрім цього, можна визначати різні параметри шрифту. Зокрема, за допомогою тегу <BASEFONT> задають гарнітуру (рисунок), розмір і колір шрифту. Цей тег одинарний, діє на весь текст, розміщений нижче, і має такі атрибути.
♦ FACE="значення" — гарнітура. Якщо зазначеної гарнітури на комп'ютері користувача немає, то текст буде оформлено з використанням гарнітури за умовчанням. В атрибуті FACE іноді записують через кому кілька гарнітур, тоді браузер вибирає гарнітури за списком: за відсутності першої використовує другу і т. д. Значення атрибута слід подавати в лапках.
♦ FACE=значення — розмір шрифту (ціле число від 1 до 7).
♦ COLOR=значення — колір шрифту. Як значення кольору можна використовувати назви кольорів англійською мовою, такі як red, green, blue тощо, або шістнадцяткові значення (записані в шістнадцятковій системі числення), що починаються з символу # і послідовно задають червоний, зелений та синій кольори, які мають бути змішані для отримання потрібного. Наприклад, #FF0000, #008000, #0000FF тощо. Для оформлення сайту зазвичай використовують набір кольорів, який називають безпечною палітрою. Він складається з 216 елементів. Особливістю безпечних кольорів є те, що вони не змінюються у разі відображення різними браузерами або на різних моніторах, тобто ця палітра забезпечує найточнішу передачу на різних моні торах того, що задумав веб-дизайнер. Якщо будь-яка з трьох складових шістнадцяткового значення відрізняється від 00, 33, 66, 99, СС чи FF, то колір не є безпечним. Значення атрибутів SIZE та COLOR можна записувати без лапок.
Гарнітуру, розмір та колір шрифту для фрагмента тексту задають за допомогою тегу <FONT АТРИБУТИ>Текст</FONT>. Атрибути цього тегу такі самі, як у тегу <BASEFONT>, за винятком атрибута SIZE: його значення зі знаком мінус (або плюс) означає, що розмір шрифту буде зменшено (чи збільшено) на відповідну величину відносно заданого за умовчанням або у тегу <BASEFONT>. Значення без знака задає абсолютний розмір шрифту.
Є й інші теги, які можна застосовувати для зміни параметрів тексту.
• <BIG>Teкст</BIG> — збільшення розміру шрифту. Розмір символів тексту збільшується на одиницю відносно поточного рівня.
• <SMALL>Teкст</SMALL> — зменшення розміру шрифту. Розмір символів зменшується на одиницю відносно поточного рівня.
• <ЕМ>Текст</ЕМ> — виділення важливих фрагментів тексту. Текст відображатиметься курсивом.
• <DEL>Teкст</DEL> — створення перекресленого тексту. Текст буде перекреслено горизонтальною лінією.
Цікавого оформлення веб-сторінці надає пара тегів <MARQUEE> та </MARQUEE> — вони додають до веб-сторінки «рухомий рядок» із тексту, розташованого між ними.
4. Списки і робота з ними.
Для подання тексту в структурованому вигляді, коли кожен абзац виділено за допомогою позначки або номера, призначені списки. У HTML-документах використовують три види списків:
• невпорядкований (маркований);
• упорядкований (нумерований);
• список визначень.
У невпорядкованому списку для виділення елементів використовуються певні позначки (крапки, квадрати тощо). Починається такий список із тегу <UL>, а закінчується — </UL>. Кожний елемент списку починається з тегу <LI>. Тег <UL> може мати атрибут TYPE, який визначає форму позначки. Цей атрибут набуває таких значень:
• disk — зафарбоване коло;
• circle — коло;
• square — маленький чорний квадрат.
В упорядкованому списку всі елементи пронумеровані. Починається список із тегу <OL>, а закінчується — </OL>. Кожний елемент такого списку також починається з тегу <LI>. Тег <OL> може мати атрибут TYPE, який визначає тип нумерації. Цей атрибут набуває таких значень:
♦ А — велика літера;
♦ а — мала літера;
♦ І — велика римська цифра;
♦ і — мала римська цифра;
♦ 1 — арабська цифра.
У разі потреби за допомогою атрибута START можна задати відмінний від одиниці початковий номер елемента, наприклад <0L TYPE="I" START="5">, Нумерований список, початковий елемент якого позначено латинською літерою Е, яка є п'ятою в алфавіті, описують так:
Список визначень (definition list) порівняно з маркованим або нумерованим має дещо складнішу будову. Кожен елемент такого списку складається з двох частин: терміна та його визначення. У такий спосіб можуть бути оформлені словники та термінологічні довідники. Однак цей тип списку використовують рідко, і тому описувати його докладніше не будемо.
Розглянемо приклади використання різних типів списків.
5.Додавання і зміна гіперпосилань
Гіперпосилання — це вказівка для браузера, до якого об'єкта у межах або поза межами HTML-документа він має звернутися. За допомогою гіперпосилань користувачі можуть переходити з однієї веб-сторінки на іншу, завантажувати файли тощо. Як гіперпосилання може були оформлений фрагмент тексту або графічний об'єкт. Коли веб-сторінка відображаються у вікні браузера, текстове посилання зазвичай виділено синім кольором і підкресленням. Для переходу в місце, на яке вказує посилання, користувачу достатньо клацнути його текст.
Для створення гіперпосилання необхідно використовувати теги <А> та </А>, визначивши для тегу <А> атрибут HREF. Його значенням має бути адреса URL, на яку вказує посилання. Текст посилання розташовують між тегами <А> і </А>.
Якщо веб-сторінка, на яку вказує посилання, розміщена на іншому веб-сайті, то значенням атрибута HREF має бути повна URL- адреса з назвою протоколу включно; такі посилання називають зовнішніми. Якщо ж гіперпосилання вказує на іншу сторінку того самого сайту, то для пошуку документа достатньо задати лише відносний шлях; таке посилання називають внутрішнім.
Гіперпосилання може вказувати на певне місце всередині сторінки , якщо туди попередньо вбудувати якір-мітку. Для визначення якоря також використовують теги <А> і </А>, але замість атрибута HREF задають атрибут NAME, значенням якого має бути ім'я якоря. Воно може складатися з літер та цифр, але не повинно містити символів пробілу. Якщо на сторінці є кілька міток, то всі вони повинні мати різні назви.
Для створення посилання на встановлений якір потрібно у тегу <А> зазначити його ім'я в кінці адреси URL після імені документа, відокремивши його символом #. Символ # вказує на те, що після нього записано назву мітки, а не ім'я файлу.
Посилання на мітку всередині поточного документа задають так:
<А HREF="#назва_мітки">Текст посилання</А>.
Якщо в атрибуті HREF задати адресу електронної пошти зі словом mailto: перед нею, то після вибору такого посилання можна надіслати електронний лист, де в полі Кому буде записано цю адресу.
6.Використання таблиць в HTML-документі
У найпростішій таблиці інформація розміщена у комірках, утворених у результаті поділу прямокутника на стовпці та рядки. У більшості комірок зберігаються дані, деякі комірки, зазвичай розміщені у верхній або боковій частині таблиці, містять заголовки. У HTML-документах таблицю заповнюють зліва направо, комірку за коміркою, починаючи з лівого верхнього кута і закінчуючи правим нижнім.
Створення таблиці
Для створення таблиці використовують чотири елементи. Таблицю описують за допомогою тегів <TABLE>...</TABLE>; вона повинна мати один або кілька рядків <TR>...</TR>, у кожному з яких може міститися заголовок <ТН>...</ТН> або дані <TD>...</TD>.
За умовчанням таблиця має невидимі межі комірок. Для того щоб зробити їх видимими, використовують атрибут BORDER, який має цілочислове значення, що визначає товщину рамки в пікселах, наприклад <TABLE BORDER=5>.
Таблиця може мати заголовок, який задається тегами <CAPTION> та </CAPTION>. Тег <CAPTION> може містити атрибут ALIGN з одним із значень top або bottom, які визначають розташування заголовка відповідно перед таблицею або після неї (за умовчанням встановлено значення top). Наприклад, <CAPTION ALIGN= >Розклад уроків</САРТІО^.
Кожний рядок таблиці починається з тегу <TR> і закінчується тегом </TR>. Якщо рядок містить заголовки стовпців таблиці, то використовують теги <ТН> і </ТН>, якщо ж дані — то <TD> і </TD>.
Встановлення ширини таблиці та комірок
Розглянемо далі, як настроювати ширину всієї таблиці, а також окремих комірок. Зауважимо, що ширина всіх комірок в одному стовпці однакова, а в одному рядку може бути різною. Ширину таблиці задають атрибутом WIDTH у тегу <TABLE>, а комірки — за допомогою того самого атрибута у тегу <TD> або <ТН>. Ширину таблиці можна визначати як у пікселах, так і у відсотках від ширини вікна, а комірки — у пікселах або у відсотках від ширини таблиці.
Вся таблиця має ширину 500 пікселів. Ширина комірки з текстом «Класи» становить 50 % від ширини всієї таблиці, а комірки з текстом «10-А» — 250 пікселів. Комірка з текстом «10-Б» теж завширшки 250 пікселів (хоча для неї ширину не було задано), оскільки вона розташована в одному стовпці з попередньою.
Форматування тексту та оформлення рамок таблиці
Текст всередині комірок можна вирівнювати як по горизонталі, так і по вертикалі. Горизонтальне вирівнювання вмісту всього рядка задають за допомогою атрибута ALIGN у тегу <TR>; цей самий атрибут у тегах <TD> або <ТН> в окремих комірках виконує таку саму роль. Атрибут ALIGN може набувати значень center, right, left або justify, які задають вирівнювання вмісту таблиці відповідно по центру, за правим чи лівим краєм або за шириною. Приклади тегів <TR> та <TD> із використанням вирівнювання: <TR ALIGN = right>; <TD ALIGN = center>l. Алгебра</TD>.
Вертикальне вирівнювання задають у тегах <TR>, <TD> або <ТН> за допомогою атрибута VALIGN, який може набувати значень top, bottom та middle, що визначають вирівнювання відповідно за верхнім та нижнім краєм і по центру.
Для оформлення зовнішньої рамки таблиці можна використовувати атрибут FRAME тегу <TABLE>. Його значення визначають, що браузер відображатиме:
♦ box — всі чотири сторони рамки;
♦ above — лише верхню межу рамки;
♦ below — лише нижню межу;
♦ lhs — лише ліву межу;
♦ rhs — лише праву межу;
♦ hsides — верхню й нижню межі рамки;
♦ vsides — ліву й праву межі рамки;
♦ void — зовнішня рамка не відображатиметься.
Відображення розділювальних ліній між стовпцями та рядками таблиці визначають за допомогою атрибута RULES тегу <TABLE>.
Він може набувати таких значень:
♦ all — відображати всі вертикальні та горизонтальні лінії;
♦ rows — лише горизонтальні лінії між рядками;
♦ cols — лише вертикальні лінії між стовпцями;
♦ none — не показувати розділювальних ліній.
Під час відображення веб-сторінок браузер розміщує елементи на екрані один за одним у тому порядку, в якому вони записані у HTML-документі. Для позиціювання елементів розроблено спеціальні засоби мови HTML, проте часто для цього використовують
Контрольні питання:
1. Поясніть поняття гіпертекстова технологія?
2. Прокоментуйте структуру HTML-документа.
3. Що називається тегом? Які види тегів використовує мова HTML?
4. Які теги використовують для форматування тексту?
5. Як створити гіперпосилання в документі?
6. Які програми використовують для роботи зз гіпертекстовими документами?
7. Як створити таблицю в гіпертекстовому документі?
