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

<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>

Amp;–послідовності

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

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

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

Крапка з комою – є обов'язковими елементами &– послідовності. Крім того, всі літери, що складають послідовність, повинні бути в нижньому регістрі (тобто маленькі). Використання тегів типу &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>, виводиться браузером на екран зі збільшеним лівим полем.

Таблиці

Таблиці потрібні для представлення інформації в табличному виді, а також для необхідного розміщення тексту та рисунків.

Приклад 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).

Якщо комірка таблиці порожня, навколо неї не малюється рамка. Якщо комірка порожня, а рамка потрібна, в комірку можна ввести символьний об'єкт   (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>

<td><a href=”sample2.htm”>приклад 2</a></td><td><a href=”sample3.htm”>приклад 3</a></td></tr></table>…Зверніть увагу на те, що на сторінці не створюється посилання саме на себе.