Основний приклад для розглянутих вище тегів
Лабораторна робота №1
“Вивчення структури побудови HTML сторінок, базові теги.”
Ціль. Створення простої Web сторінки з використанням списків, таблиць, гіперпосилань.
1. Обов'язкова структура документа.
При побудові будь-якої HTML сторінки важливо знати її структуру, що в основному складається з елемента верхнього рівня HTML, розділу HEAD, зовнішнього заголовка TITLE і власне кажучи тіла документа BODY.
1.1.HTML - елемент верхнього рівня
Ціль
По суті, файл HTML у цілому є елементом HTML. Звичайно, початковий і кінцевий теги не обов'язкові
Основний синтаксис
<HTML>
заголовок і тіло документа
</HTML>
1.2. HEAD
Почнемо з найпростішого HTML документа, що містить тільки простий текст Добрий вечір. У HTML файлі змісту обов'язково повинний передувати розділ HEAD, який мінімально може складатися з двох конструкцій. Тоді код HTML можна представити так:
<HTML> <HEAD> <TITLE> Добрий вечір </TITLE> </HEAD>
<BODY> Добрий вечір </BODY> </HTML>
В результаті на екрані браузера з'явиться фраза Добрий вечір
1.3. TITLE - "зовнішній" заголовок (титул)
Ціль
Для завдання обов'язкового "зовнішнього" заголовка документа.
Основний синтаксис
<TITLE>послідовність символів</TITLE>
Приклади
<TITLE>Документ</TITLE>
1.4. BODY (ТІЛО) - тіло документа
Ціль
Основна структура документа HTML завжди складається з заголовка і тіла. Немає необхідності явно поміщати тіло в BODY елемент, однак роблячи так, можна специфікувати атрибути, що впливають на представлення документа в цілому (наприклад, установити фонове зображення чи колір).
Основний синтаксис
<BODY>тіло документа</BODY>
Можливі атрибути (Немає в HTML 2.0!)
| ім'я атрибута | можливі значення | зміст |
| BGCOLOR | Кольорова специфікація | фоновий колір документа |
| специфікація | Кольорова специфікація | колір тексту документа |
| LINK | Кольорова специфікація | колір не відвіданого гіпертекстового зв’язку |
| специфікація | Кольорова специфікація | колір для відвіданого гіпертекстового зв’язку |
| ALINK | Кольорова специфікація | колір для активного гіпертекстового зв’язку; використовується для виділення тексту зв'язку на момент, коли користувач натиснув на зв'язок |
| BACKGROUND | URL | URL фонового образу |
Приведений нижче приклад показує використання приведених вище основних тегів, і атрибутів тегу BODY.
<HTML> <HEAD> <TITLE> Приклад </TITLE> </HEAD>
<BODY
BGCOLOR=AQUA
TEXT="#848484"
LINK=RED
VLINK=PURPLE
ALINK=GREEN
>
<H1>Документ приклада</H1>
<P> Цей документ написань
<A HREF="http://www.demon.com”>demon.com </A>.
</P>
</BODY>
</HTML>
Рис. 1.1. Приклад у браузері.
2. Організація змісту - заголовки (headings), абзаци (paragraphs), списки (lists)
Як правило, Ваш документ складається з частин, що, у свою чергу, теж поділяються на частині і т.д. У HTML такий поділ робиться з використанням заголовків різного рівня. Частини самого нижнього рівня в цій ієрархії складаються з одного чи декількох абзаців. На додаток до простих абзаців і деяких спеціальних видів абзаців HTML 3.2 підтримує списки і таблиці, які можна представити, як подібні до абзаців. Внутрішня структура абзаців і подібних їм елементів складається з тегів текстового рівня. /1/
2.1. H1, H2, H3, H4, H5, H6 - заголовки
Ціль
Визначити заголовок. Існує шість рівнів від H1 (найбільш важливий) до H6 (найменш важливий).
Основний синтаксис
<Hn>заголовок тексту</Hn>
де n приймає значення 1, 2, 3, 4, 5 чи 6.
Можливі атрибути.
| ім'яатрибута | можливі значення | зміст |
| ALIGN | LEFT, CENTER, RIGHT | вирівнювання заголовка |
За замовчуванням - вирівнювання по лівому краю, однак це може бути перекрито включенням елементів DIV чи CENTER.
Приклад:
<H1 ALIGN=CENTER>Хто це?</H1>
<H2>Чужий</H2>
<H3>Свій</H3>
Для роботи з текстовими блоками служать наступні теги рівня абзацу:
· простий абзац: P
· цитування, що представляється як окремий абзац: BLOCKQUOTE
· адреса автора інформації - окремий абзац: ADDRESS
· елемент, що зберігає компонування рядків і пробілів попередньо отформатованого тексту, PRE
2.2. P - звичайний абзац
Ціль
Представлення звичайного текстового абзацу.
Основний синтаксис
<P>абзац тексту</P>
Можливі атрибути
| ім'яатрибута | можливі значення | зміст |
| ALIGN | LEFT, CENTER, RIGHT | вирівнювання абзацу |
За замовчуванням - ліве вирівнювання, однак це може бути перекрито включенням елемента DIV чи CENTER.
2.3. BLOCKQUOTE(БЛОК ЦИТУВАННЯ) - довге цитування
Ціль
Представити (у типовому варіанті - довгу) цитату, як блок цитування (на противагу коротким цитатам, вставленим у текст абзацу).
Основний синтаксис
<BLOCKQUOTE>
текст цитати
</BLOCKQUOTE>
2.4. ADDRESS (АДРЕСА) - інформація про автора інформації
Ціль
Надати контактну інформацію про автора поточного документа (тобто документа, в якому знаходиться елемент).
Основний синтаксис
<ADDRESS>адресна інформація<ADDRESS>
Приклад.
Дуже проста адресна інформація, що містить тільки E-mail адресу (адреса електронної пошти) автора:
<ADDRESS>
<P>
Demon@rambler.ru
</P>
</ADDRESS>
2.5. PRE – текст, що відформатовано
Ціль
Представити текст із використанням пробілів й перекладів строк для наступного відображення його на екрані. Це потрібно, коли використовується тільки текстова інформація, і ми хочемо покласти її на сторінку Web, віддаючи перевагу обраному компонуванню. Текст також може бути представлений так, як він формується комп'ютерним висновком.
Основний синтаксис
<PRE>
текст, що відформатовано
</PRE>
Можливі атрибути
| ім'яатрибута | можливі значення | Зміст | примітки |
| WIDTH | Ціле | ширина тексту в символах | практично не підтримується |
Значення WIDTH повинно бути більше, ніж довжина самого довгого рядка. Атрибут WIDTH повинний забезпечувати браузер інформацією, щоб вибрати шрифт придатного розміру чи скорегувати відступи для представлення тексту в необхідному виді. /1/
Приклад: Таблиця ASCII і адреса автора з цитатою
<BLOCKQUOTE>
Таблицю потрібно розуміти !!!
</BLOCKQUOTE>
<PRE>
! " # $ % & ' () * +, -. /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~
</PRE>
<ADDRESS>
<P>
Demon@rambler.ru
</P>
</ADDRESS>
Рис. 1.2 .Відображення на екрані.
Для представлення елементів у формі списку служать теги списків. За допомогою списків зручно розташувати послідовність інформації у зручному для вас виді. /3/
Списки
· простий неупорядкований список: UL, LI
· стиснутий список, розташованих в одному рядку образів: MENU, LI
· список малих образів: DIR, LI
· упорядкований список: OL, LI
· дефінітивний список (список міток): DL, DT, DD
3.1. LI – елемент списку
Ціль
Для представлення елемента в списку.
Основний синтаксис
<LI>зміст елемента списку</LI>
Кінцевий тег </LI> завжди може бути опущений, що звичайно і робиться.
Зміст
Блокові і текстові елементи. Елементи заголовків і ADDRESS не дозволені.
Приклади
Короткий приклад:
<LI>Перелік</LI
3.2. UL - неупорядковані (ненумеровані) списки
Ціль
Для представлення інформації у формі списку без нумерації елементів.
Основний синтаксис
<UL>
<LI> елемент списку 1
<LI> елемент списку 2
...</UL>
Можливі атрибути
| ім'яатрибута | Можливі значення | зміст |
| TYPE | DISC, SQUARE, CIRCLE | за замовчуванням буклет стиль для елементів |
| COMPACT | COMPACT | скорочена відстань між елементами |
Значення за замовчуванням буклет стиля звичайно залежить від рівня вкладеності списків.
Приклад:
Складові частини
<UL>
<LI> Колесо <LI> Ручка <LI> Болт
</UL>
3.3. MENU (МЕНЮ) - ненумеруємий список меню подібних форм
Ціль
Представити інформацію в меню подібному форматі.
Основний синтаксис
<MENU>
<LI> елемент списку 1
<LI> елемент списку 2
...
</MENU>
Можливі атрибути
| ім'яатрибута | можливі значення | зміст |
| COMPACT | COMPACT | скорочені проміжки між елементами |
Приклади
<MENU>
<LI> Десять
<LI> Двадцять
<LI> Тридцять
<LI> Сорок
<LI> П'ятдесят
<LI> Шістдесят
</MENU>
Рис 1.3. Ненумеруємий список меню подібних форм
3.4. DIR - ненумерований список у директорії
Ціль
Представити інформацію у форматі, прийнятому для представлення директорії.
Основний синтаксис
<DIR>
<LI> елемент списку 1
<LI> елемент списку 2
...
</DIR>
Можливі атрибути
| ім'яатрибута | можливі значення | зміст |
| COMPACT | COMPACT | скорочений проміжний простір |
Приклад алфавіту:
<DIR>
<LI>A
<LI>B
<LI>C
<LI>D
<LI>E
<LI>F
<LI>G
<LI>H
<LI>I
<LI>J
<LI>K
<LI>L
<LI>M
<LI>N
<LI>O
<LI>P
<LI>Q
<LI>R
<LI>S
<LI>T
<LI>U
<LI>V
<LI>W
<LI>X
<LI>Y
<LI>Z
</DIR>
Рис 1.4.Приклад ненумерованого списку в директорії
3.5. OL - упорядковані (нумеровані) списки
Ціль
Для представлення інформації у виді упорядкованого (нумерованого) списку.
Основний синтаксис
<OL>
<LI> елемент списку 1
<LI> елемент списку 2
...
</OL>
Можливі атрибути
| ім'яатрибута | можливі значення | зміст |
| TYPE | 1, a, A, i, I | стиль нумерації |
| START | ціле | початкова цифра послідовності |
| COMPACT | COMPACT | скорочена відстань між елементами |
Зміст значень TYPE наступний:
| Type | Стиль нумерації | Перші кілька цифр |
| звичайні (арабські) числа | 1, 2, 3, ... | |
| a | Латинське написання на нижньому регістрі | a, b, c, ... |
| A | Латинське написання на верхньому регістрі | A, B, C, ... |
| i | Римські цифри на нижньому регістрі | i, ii, iii, ... |
| I | Римські цифри на верхньому регістрі | I, II, III, ... |
Приклад, в якому використані римські цифри:
<P> Римські справи
</P>
<OL TYPE=I>
<LI> <I>-ae</I>, eg <I>terra:terrae</I>
<LI> <I>-i</I>, eg <I>annus:anni</I>
<LI> <I>-is</I>, eg <I>labor:laboris</I>
<LI> <I>-us</I>, eg <I>fructus:fructus</I>
<LI> <I>-ei</I>, eg <I>dies:diei</I>. </OL>
Рис.1.5. Приклад упорядкованого списку.
3.6. DL - дефінітивні чи описові списки
Ціль
Дати список визначень для термінів, список описів чи іншу інформацію, зв'язану з іменами чи фразами.
Основний синтаксис
<DL>
<DT>термін 1<DD>визначення терміну 1
<DT>термін 2<DD>визначення терміну 2
...
</DL>
Зміст
DT і DD елементи.
Елементи DL повинні бути спарені з відповідними елементами DD. Безліч елементів DT може бути при єдиному елементі DD. Тобто кілька термінів можуть мати одне і теж визначення. Документ не повинний містити кілька послідовних елементів DD.
Приклад:
<DL>
<DT>Вася, Дмитрик
<DD>От <I> Дмитрик Вася </I>.
<DT> Дмитрик Вася
<DD>От <I> Вася, Дмитрик </I>.
</DL>
Рис 1.6. Приклад описового списку
Таблиці.
У HTML можна без особливих труднощів будувати свої таблиці в тому же представленні, як і на папері чи в Word. Структура таблиць у HTML включає рядки і стовпці, що можуть мати заголовки (headers - імена, титули, пояснення). Таблиця в звичайному варіанті представляється в природному виді, з узгоджено розташованими стовпцями. Для цього використовуються наступні теги: TABLE, CAPTION, TR, TH, TD./3/
4.1. TABLE-таблиці
Ціль
Для представлення табличної інформації, тобто структури, подібної матричній.
Основний синтаксис
<TABLE>
рядки таблиці (TRелементи)
</TABLE>
Можливі атрибути
| ім'я атрибута | можливі значення | зміст |
| ALIGN | LEFT, CENTER, RIGHT | горизонтальне вирівнювання всієї таблиці |
| WIDTH | Специфікація | ширина всієї таблиці |
| BORDER | Ціле | ширина рамки в пикселях |
| CELLSPACING | Ціле | проміжок між осередками в пикселях |
| CELLPADDING | Ціле | проміжок між змістом осередку і рамкою навколо осередку в пикселях ("набивання") |
Приклад таблиці із заданими параметрами:
<TABLE ALIGN=CENTER WIDTH="80%" BORDER=1 CELLSPACING=10 CELLPADDING=3>
<CAPTION>Список країн</CAPTION>
<TR>
<TD>Туреччина</TD>
<TD>Росія </TD>
<TD>Україна </TD>
<TD>Швеція </TD>
<TD>Лівія </TD>
</TR>
</TABLE>
Рис. 1.7. Приклад таблиці із заданими параметрами
4.2. CAPTION (ЗАГОЛОВОК) - заголовок для таблиці
Ціль
Представити заголовок таблиці.
Основний синтаксис
<CAPTION>текст</CAPTION>
Можливі атрибути
| ім'яатрибута | можливі значення | зміст |
| ALIGN | TOP, BOTTOM | Розміщення заголовка щодо таблиці ( угорі чи внизу таблиці) |
4.3. TR - табличний рядок
Ціль
Для представлення рядка таблиці.
Основний синтаксис
<TR>заголовок осередків (THелементи) і дані осередків (TDелементи)</TR>
У принципі, кінцевий тег </TR> може бути опущений, але робити так не рекомендується, тому що при цьому деякі браузери (включаючи Netscape) можуть представляти таблицю невірно.
Можливі атрибути
| ім'яатрибута | Можливі значення | зміст |
| ALIGN | LEFT, CENTER, RIGHT | горизонтальне вирівнювання в осередку |
Приклади
<TR><TD>3.70 <TD>4.69 <TD>8.02 </TR>
4.4. HR - зміна розділу (горизонтальна риса)
Ціль
Позначити зміну розділу.
Типове відображення
Горизонтальна риса (на повну ширину екрана - за замовчуванням). До і після тега HR браузер автоматично додає тег P, тому немає необхідності у формуванні незаповненого вертикального простору до і після риси.
В мовних програмах перегляд тегів спрацьовує як пауза. /1/
Основний синтаксис
<HR>
Можливі атрибути (Немає в HTML 2.0!)
| ім'яатрибута | Можливі значення | зміст |
| ALIGN | LEFT, RIGHT, CENTER | горизонтальне вирівнювання риси |
| NOSHADE | NOSHADE | задає відображення риси в одному кольорі (без відтінків) |
| SIZE | ціле | висота риси в пикселях |
| WIDTH | специфікація ширини | ширина риси |
Приклади
<P>
Деякий текст
</P>
<HR>
<P>
Інший текст
</P>
5. Розмітка тексту - виділення шрифту.
Логічна розмітка в порівнянні з фізичною
Існує два головних класи текстової розмітки: логічна і фізична. Логічна розмітка показує роль текстового сегмента, наприклад, велику значимість у порівнянні зі звичайним текстом чи те, що даний сегмент є цитатою. Фізична розмітка зв'язана з представленням тексту в спеціальній манері, наприклад, з використанням шрифтів чи спеціального виду підкреслення.
5.1. B - жирний шрифт
Ціль
Представити текст виділеним (жирним) шрифтом.
Основний синтаксис
<B>текст</B>
5.2. STRONG - сильне підкреслення
Ціль
Для сильного підкреслення.
Основний синтаксис
<STRONG>текст</STRONG>
5.3. I - курсив
Ціль
Представлення тексту курсивом.
Основний синтаксис
<I>текст</I>
5.4. EM - підкреслення
Ціль
Підкреслити (виділити).
Основний синтаксис
<EM>текст</EM>
5.5. FONT (ШРИФТ) - розмір і колір шрифту
Ціль
Специфікувати розміри шрифту (відносно до інших розмірів), його колір, чи і те й інше разом.
Основний синтаксис
<FONT SIZE=n>текст</FONT>
чи
<FONT COLOR=кольорова специфікація>текст</FONT>
Можливі атрибути
| ім'яатрибута | можливі значення | зміст |
| SIZE | рядок | розмір шрифту; цифра в діапазоні 1 - 7 або ціле зі знаком, наприклад, "+1" чи "-2" |
| COLOR | кольорова специфікація | Колір елемента FONT |
Приклади
Це - деякий текст:
<FONT SIZE=-1>Деякий текст дрібним шрифтом </FONT>.
<P>
Це - спроба представити текст більш рельєфно: жирним шрифтом, з підкресленням, шрифтом великого розміру і червоним кольором:
<B><U><FONT SIZE=7 COLOR=RED>Деякий текст</FONT></U></B>
5.6. BASEFONT (БАЗОВИЙ ШРИФТ) - розмір базового шрифту
Ціль
Специфікація розміру основного шрифту (щодо інших розмірів).
Основний синтаксис
<BASEFONT SIZE=n>
Можливі атрибути
| ім'яатрибута | можливе значення | зміст |
| SIZE | рядок | розмір шрифту (1 - 7) |
Приклади
<P>Звичайний текст</P>
<BASEFONT SIZE=5>
<P>Текст - 5 <FONT SIZE=1>текст</FONT>
текст - 5</P>
5.7. BIG (ВЕЛИКИЙ) - великий шрифт
Ціль
Представлення тексту великим шрифтом.
Основний синтаксис
<BIG>текст</BIG>
Це <BIG>велика</BIG> машина
Приклад різноманітних шрифтів
<FONT SIZE=-1>Дрібний </FONT>
<B><U><FONT SIZE=8 COLOR=BLUE>Великий синій</FONT></U></B>
<I>Курсив</I>
<STRONG>Підкреслений<STRONG>
<BIG>Просто великий</BIG>
Рис.1.8. Різноманітність шрифтів.
6. Зв'язок
Для того щоб зв'язати різні сторінки чи вказати різні посилання служать зв'язки.
Зв'язок (часто називані гіперзв'язками) є особливістю, що виправдовує наявність частини HT в абревіатурі HTML (HyperText Markup Language - Мова розмітки гіпертексту).
Технічно зв'язки специфіковані використанням A-елементів (anchor - якір), і ці питання обговорені в описі тегу A.
Ціль
Щоб установити гіперзв’язки (hyperlinks) і "якоря" (anchors) для них, тобто визначити, яке слово чи інша конструкція в документі забезпечує зв'язок з ресурсом (наприклад, з файлом HTML), чи специфікувати, що поточне місце екрана може використовуватися з даним ім'ям, як прапорець для таких зв'язків (у тому же чи іншому документі). /3/
Основний синтаксис
<A HREF="ціль">текст якоря</A>
чи
<A NAME="ім'я"></A>
Можливі атрибути
| ім'яатрибута | можливі значення | зміст |
| NAME | рядок символів | ім’я для зв’язаного "кінця" |
| HREF | URL | мережна адреса для зв'язаного ресурсу |
| REL | рядок | вказівка зв'язку вперед |
| REV | рядок | вказівка зворотнього зв'язку |
| TITLE | рядок | заголовок для зв'язаного ресурсу |
Приклад:
<P>Посилання для деякого документа
<A HREF="Demon.html">demon.</A>.
Рис. 1.9. Посилання
Основний приклад для розглянутих вище тегів
<HTML>
<HEAD> <TITLE> Основний приклад 1 </TITLE> </HEAD>
<BODY
BGCOLOR=yellow
TEXT="#848400"
LINK=RED
VLINK=PURPLE
ALINK=GREEN >
<H1 ALIGN=CENTER> <FONT SIZE=10>Розробка HTML сторінок </FONT></H1>
<BLOCKQUOTE>
<BIG>
Головні кроки
</BLOCKQUOTE> <STRONG>
<MENU>
<LI> Обов'язкова структура
<LI> Інформаційний зміст
<LI> Оригінальність
<LI> Компактність обсягу
</MENU>
<TABLE ALIGN=CENTER WIDTH="60%" BORDER=3 CELLSPACING=10 CELLPADDING=4>
<CAPTION><FONT SIZE=5 color=blue>Представлення даних у табличній формі, список серверів</FONT></CAPTION>
<TR>
<TD><BIG><A HREF="Yahoo.com">Yahoo</A></TD>
<TD><BIG><A HREF="Rambler.ru">Rambler</A> </TD>
<TD><BIG><A HREF="Apex.dp.ua">Apex</A> </TD>
<TD><BIG><A HREF="Yandex.ru">Yandex</A></TD>
</TR>
</TABLE>
<ADDRESS>
<P>
Адреса: Дмитрик@rambler.ru
</P>
</ADDRESS>
</BODY> </HTML>
Рис.1.10. Основний приклад