Теги форматування

<H1> ... </H1>–<H6> ... </H6>

Теги виду <Hi> (де i–цифра від 1 до 6) описують заголовки шести різних рівнів. Заголовок першого рівня–самий крупний, шостого рівня–самий дрібний.

<P> ... </P>

Така пара тегів описує абзац. Все, що знаходиться між <P> і </P>, сприймається як один абзац.

Теги <Hi> і <P> можуть містити додатковий атрибут ALIGN ("вирівнювати"), наприклад:

<H1 ALIGN=CENTER> Вирівнювання заголовку по центру</H1>

або

<P ALIGN=RIGHT> Зразок абзацу з вирівнюванням по правому краю </P>

Приклад 2. У редакторі Notepade створіть файл sample2.htm з таким вмістом:

<html> <head> <title>Приклад 2</title> </head> <body> <H1 ALIGN=CENTER>Продовження!</H1> <H2>Це складніший приклад HTML–документа</H2> <P>Тепер ми знаємо, що абзац можна вирівнювати не тільки вліво, </P> <P ALIGN=CENTER> але й по центру </P> <P ALIGN=RIGHT> або по правому краю.</P> </body> </html>

Перегляньте файл sample2.htm у браузері Internet Explorer.

Непарні теги та &–послідовності

<BR>

Цей тег використовується для переходу на новий рядок, не перериваючи абзац .

Приклад 3. У редакторі Notepade створіть файл sample3.htm з таким вмістом:

<html> <head> <title>Приклад 3</title> </head> <body> <H1>Деякі положення</H1> <H2>РћСЃРЅРѕРІРё роботи</H2> <P>HTML–файли розробляються РЅР° локальному РґРёСЃРєСѓ <BR> Іншими словами, РєРѕРјРї'ютер, РЅР° СЏРєРѕРјСѓ виконуються роботи може С– РЅРµ мати підключення РґРѕ Інтернет<BR> *.htm–файл може бути одночасно відкритий С– Сѓ Notepad (або WordPad), С– Сѓ Internet Explorer. <BR> Для того, щоб побачити Р·РјС–РЅРё, що зроблені Сѓ текстовому редакторі, Сѓ Internet Explorer, застосовується команда Обновить <BR> В</body></html>

<HR>

Тег <HR> описує горизонтальну лінію.

Тег може включати атрибути SIZE (визначає товщину лінії в пікселях) і/або WIDTH (визначає розмах лінії в процентах від ширини екрана).

Приклад 4. У редакторі Notepade створіть файл sample4.htm колекції горизонтальних ліній з таким вмістом:

 

<html> <head> <title>Приклад 4</title> </head> <body> <H1>Колекція горизонтальних ліній</H1> <HR SIZE=2 WIDTH=100%><BR> <HR SIZE=4 WIDTH=50%><BR> <HR SIZE=8 WIDTH=25%><BR> <HR SIZE=16 WIDTH=12%><BR> </body> </html>

&–послідовності

Символи "<" і ">" сприймаються браузерами як початок і кінець HTML–тегів. Для того, щоб показати ці символи на екрані в HTML використовуються &–послідовності (символьні об'єкти або эскейп–послідовності). Браузер показує на екрані символ "<", коли зустрічається в тексті послідовність &lt;. Знак ">" – кодується послідовність &gt; (за першими буквами англійських слів greater than–більше, ніж).

Символ "&" (амперсанд) кодується послідовністю &amp;

Послідовність лапки (") кодується послідовністю &quot;

Крапка з комою – є обов'язковими елементами &– послідовності. Крім того, всі літери, що складають послідовність, повинні бути в нижньому регістрі (тобто маленькі). Використання тегів типу &QUOT; або &AMP; не допускається.

&–послідовності визначені для всіх символів з другої половини ASCII–таблиці (куди входять і російські букви). Деякі сервери не підтримують восьми бітну передачу даних, і тому можуть передавати символи з ASCII–кодами вище 127 тільки у вигляді &–послідовностей.

Коментарі

Браузери ігнорують будь–який текст, що розміщений між <!–– і ––>. Це зручно для розміщення коментарів.

<!–– Це коментар ––> 3. Форматування шрифта

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

Фізичні стилі

Під фізичним стилемприйнято розуміти пряму вказівку браузеру на модифікацію поточного шрифту. Наприклад, все, що знаходиться між тегами <B> і </B>, буде написано жирним шрифтом. Текст між мітками <I> і </I> буде написаний нахиленим шрифтом.

Текст, розміщений між тегами <TT> і </TT>, буде написаний шрифтом, що імітує друкарську машинку, тобто має фіксовану ширину символів.

Логічні стилі

РџСЂРё використанні логічних стилів автор документа РЅРµ може знати напевне, що побачить РЅР° екрані читач. РС–Р·РЅС– браузери відтворюють РѕРґРЅС– Р№ ті Р¶ теги логічних стилів по–різному. Деякі браузери ігнорують деякі мітки С– показують нормальний текст замість виділеного логічним стилем. Приклади логічних стилів.

<EM> ... </EM>

Від англійського emphasis–акцент.

<STRONG> ... </STRONG>

Від англійського strong emphasis–сильний акцент.

<CODE> ... </CODE>

Рекомендується використовувати для фрагментів РІРёС…С–РґРЅРёС… текстів.

<SAMP> ... </SAMP>

Р’С–Рґ англійського sample–взірець. Рекомендується використовувати для демонстрації взірців повідомлень, що виводяться РЅР° екран програмами.

<KBD> ... </KBD>

Р’С–Рґ англійського keyboard–клавіатура. Рекомендується використовувати для вказівки того, що потрібно ввести Р· клавіатури.

<VAR> ... </VAR>

Р’С–Рґ англійського variable–змінна. Рекомендується використовувати для написання імен Р·РјС–РЅРЅРёС….

Приклад 5. У редакторі Notepade створіть файл sample5.htm з таким вмістом:

<html> <head> <title>Приклад 5</title> </head> <body> <H1>Шрифтове виділення фрагментів текста</H1> <P> Ми знаємо, що фрагменти тексту можна виділяти <B> жирним </B> або <I> нахиленим </I> або <U>підкреслиним</U>шрифтами. Крім того, можна включати в текст фрагменти з фіксованою шириною символу <TT>(імітація друкарської машинки)</TT></P> <P>Існує ряд логічних стилів:</P> <P><EM>EM – акцент </EM><BR> <STRONG>STRONG – сильний акцент </STRONG><BR> <CODE>CODE – для фрагментів вихідних текстів</CODE><BR> <SAMP>SAMP – взірець </SAMP><BR> <KBD>KBD – клавіатура</KBD><BR> <VAR>VAR – змінна </VAR></P> </body> </html> 4. Організація тексту всередині документа

HTML дозволяє визначати вигляд цілих абзаців тексту. Абзаци можна організовувати РІ СЃРїРёСЃРєРё, виводити С—С… РЅР° екран Сѓ відформотованому вигляді тощо. Розберемо РІСЃРµ РїРѕ РїРѕСЂСЏРґРєСѓ.

Маркіровані списки: <UL> ... </UL>

Текст, розташований між мітками <UL> і </UL>, сприймається як маркірований список. Кожен новий елемент списку починається з тегу <LI>. Наприклад, щоб створити маркірований список:

· 1 елемент списку;

· 2 елемент списку;

· 3 елемент списку.

необхідно записати такий HTML–текст:

<UL> <LI>1 елемент списку; <LI>1 елемент списку; <LI>1 елемент списку; </UL>

У тега <LI> немає парного закриваючого тегу.

Нумеровані списки: <ol> ... </ol>

Текст, розташований між мітками <ol> і </ol>, сприймається як нумерований список. Кожен новий елемент списку починається з тегу <LI>. Наприклад, щоб створити нумерований список:

1 елемент списку;

2 елемент списку;

3 елемент списку.

необхідно записати такий HTML–текст:

<OL> <LI>1 елемент списку; <LI>2 елемент списку; <LI>3 елемент списку; </OL>

Приклад 6. У редакторі Notepade створіть файл sample6.htm з таким вмістом:

<html> <head> <title>Приклад 6</title> </head> <body> <H1>Створення маркірованих списків</H1> <UL> <LI>1 елемент списку; </LI> <LI>1 елемент списку; </LI> <LI>1 елемент списку; </LI></UL><H1>Створення нумерованих списків</H1> <OL> <LI>1 елемент списку; </LI> <LI>2 елемент списку; </LI> <LI>3 елемент списку; </LI></OL><DT>Списки визначень <DD>Цей вид списків складніший, ніж два попередніх, але він виглядає більш ефектно. <P>Списки можна вбудовувати один в другий, але не слід вбудовувати багато рівнів. </P> <P>Всередині елемента списку може знаходитись декілька абзаців. Всі абзаци при цьому будуть мати однакове ліве поле. </P> </DL> </body> </html> Перегляньте результат у оглядачі.Форматированный текст: <PRE> ... </PRE>

Текст, розміщений між мітками <PRE> и </PRE> (від англійського preformatted–попередньо форматований), виводиться браузером на екран як є–зі всіма пропусками, символами табуляції і кінця рядку.

Текст с отступом: <BLOCKQUOTE> ... </BLOCKQUOTE>

В Текст, розміщений РјС–Р¶ мітками <BLOCKQUOTE> С– </BLOCKQUOTE>, виводиться браузером РЅР° екран Р·С– збільшеним лівим полем.

5. Таблиці

В Таблиці потрібні для представлення інформації РІ табличному РІРёРґС–, Р° також для необхідного розміщення тексту та СЂРёСЃСѓРЅРєС–РІ.

Приклад 7. У редакторі Notepade створіть файл sample7.htm. Коментарі можна не друкувати.

<HTML> <HEAD> <TITLE>Приклад 10</TITLE> </HEAD> <H1>Найпростіша таблиця </H1> <TABLE BORDER=1> <!–Це початок таблиці–> <CAPTION> <!–Це заголовок таблиці–> У таблиці може бути заголовок </CAPTION> <TR> <!–Це початок першого рядка–> <TD> <!–Це початок першої комірки–> Перший рядок, перший стовпчик </TD> <!–Це кінець першої комірки–> <TD> <!–Це початок другої комірки–> Перший рядок, другий стовпчик </TD> <!–Це кінець другої комірки–> </TR> <!–Це кінець першого рядка –> <TR> <!–Це початок другого рядка–> <TD> <!–Це початок першої комірки–> Другий рядок, перший стовпчик </TD> <!–Це кінець першої комірки–> <TD> <!–Це початок другої комірки–> Другий рядок, другий стовпчик </TD> <!–Це кінець другої комірки–> </TR> <!–Це кінець другого рядка–> </TABLE> <!–Це кінець таблиці–> </BODY> </HTML>

Перегляньте sample7.htm у оглядачі.

Таблиця починається з тегу<TABLE>і закінчується тегом</TABLE>. Тег<TABLE>може включати атрибути:

ALIGNВстановлює розташування таблиці стосовно полів документа. Припустимі значення: ALIGN=LEFT (вирівнювання вліво), ALIGN=CENTER (вирівнювання по центрі), ALIGN=RIGHT (вирівнювання вправо). WIDTHШирина таблиці. Її можна задати в пікселях (наприклад, WIDTH=400) або у відсотках від ширини сторінки (наприклад, WIDTH=80%). BORDERВстановлює ширину зовнішньої рамки таблиці й комірок у пікселях (наприклад, BORDER=4). Якщо атрибут не встановлений, таблиця показується без рамки. CELLSPACINGВстановлює відстань між рамками комірок таблиці в пікселях (наприклад, CELLSPACING=2). CELLPADDINВстановлює відстань між рамкою комірки і текстом у пікселях (наприклад, CELLPADDING=10).

Таблиця може мати заголовок (<CAPTION> ... </CAPTION>), хоча заголовок не є обов'язковим. Тег <CAPTION> може включати атрибут ALIGN. Припустимі значення: <CAPTION

ALIGN=TOP> (заголовок міститься над таблицею) і <CAPTION ALIGN=BOTTOM> (заголовок міститься під таблицею).

Кожен рядок таблиці починається з тега<TR>і закінчується тегом</TR>. Мітка<TR>може включати наступні атрибути:

ALIGNВстановлює вирівнювання тексту в комірках рядка. Припустимі значення: ALIGN=LEFT (вирівнювання вліво), ALIGN=CENTER (вирівнювання по центру), ALIGN=RIGHT (вирівнювання вправо). VALIGNВстановлює вертикальне вирівнювання тексту в комірках рядка. Припустимі значення: VALIGN=TOP (вирівнювання по верхньому краю), VALIGN=MIDDLE (вирівнювання по центру), VALIGN=BOTTOM (вирівнювання по нижньому краю).

Кожна комірка таблиці починається з тега<TD>і закінчується тегом</TD>. Тег<TD>може включати наступні атрибути:

NOWRAPПрисутність цього атрибуту означає, що вміст комірки повинен бути показаний в один рядок. COLSPANВстановлює "розмах" комірки по горизонталі. Наприклад, COLSPAN=3 означає, що комірка простирається на три стовпчики. ROWSPANВстановлює "розмах" комірки по вертикалі. Наприклад, ROWSPAN=2 означає, що комірка займає два рядки. ALIGNВстановлює вирівнювання тексту в комірці. Припустимі значення: ALIGN=LEFT (вирівнювання вліво), ALIGN=CENTER (вирівнювання по центру), ALIGN=RIGHT (вирівнювання вправо). VALIGNВстановлює вертикальне вирівнювання тексту в комірці. Припустимі значення: VALIGN=TOP (вирівнювання по верхньому краю), VALIGN=MIDDLE (вирівнювання по центру), VALIGN=BOTTOM (вирівнювання по нижньому краю). WIDTHВстановлює ширину комірки в пікселях (наприклад, WIDTH=200).HEIGHTВстановлює висоту комірки в пікселях (наприклад, HEIGHT=40).

Якщо комірка таблиці порожня, навколо неї не малюється рамка. Якщо комірка порожня, а рамка потрібна, в комірку можна ввести символьний об'єкт &nbsp; (non–breaking space – пробіл, що не розриває,). Комірка як і раніше буде порожньою, а рамка навколо неї буде.

Будь–яка комірка таблиці може містити в собі іншу таблицю.

6. Посилання на інший документ (загальні посилання)

В HTML перехід від одного фрагмента текста до іншого задається за допомогою тега наступного вигляду:

<A HREF="[адреса переходу]">виділений фрагмент текста</A>

В якості параметра [адреса переходу] може використовуватись декілька типів аргументів. Саме найпростіше — це задати і’мя іншого HTML–документа, до якого потрібно перейти. Наприклад:

<A HREF="index.html">Перейти до головної сторінки</A>

Такі фрагменти HTML–текста, як правило, автоматично виділяються кольором або оформлюються підкреслюванням. Вищезазначене посилання при натисканні на текст "Перейти до головної сторінки" дозволить завантажити у поточне вікно документ index.html. Якщо у адресі переходу не вказаний каталог, перехід буде виконаний всередині поточного каталогу. Якщо в адресі переходу не вказаний сервер, перехід буде виконаний на поточному сервері. Якщо необхідно зіслатися на сторінку за межами поточного каталогу, але ту, що знаходиться на поточному сервері, записується:

<A HREF="../folder/index.htm">

Приклад 8. У редакторі Notepade модифікуйте файли sample1.htm– sample7.htm, додавши до них навігаційні панелі. Формування горизонтальної навігаційної панелі у документі sample1.htm може виглядати так:

…

<table>

<tr>

<td>приклад 1</td>