Мета роботи

Вивчення основних тегових елементів і атрибутів мови гіпертекстової розмітки HTML. Отримання практичних навиків з розробки HTML-документів з використанням тегових елементів форматування і розміщення текстової, графічної, табличної інформації, впровадження гіпертекстових посилань і закладок. Опанування основних принципів розробки і організації WEB-сайтів.

10.2. Теоретичні відомості

Абревіатура HTML розшифровується як HyperText Markup Language, або мова гіпертекстової розмітки, за допомогою якої розробляються HTML-документи. Такі документи зазвичай зберігаються в текстовому форматі і повинні мати наступні розширення *.htm або *.html (правильно *.html), тому створювати HTML-документи можна в будь-якому текстовому редакторі (блокноті), при цьому зберігаючи створені документи з розширенням *.html. Для перегляду HTML-документів використовуються програми браузери, в яких здійснюється трансляція тегов HTML-документа і в результаті у вікні браузера користувача відображається інформація, що відформатована відповідним чином. В теперішній час, найбільш поширеними браузерами вважаються Internet Explorer, Opera та Mozilla Firefox.

10.3. Основні поняття гіпертекстової розмітки документів HTML.

HTML-документи складаються з набору тегов, елементів та їх атрибутів:

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

елементомназивається сукупність відкривального та закривального тегів і його змісту. Вмістом елемента може бути не тільки простий текст, а і вкладені в нього інші елементи.

атрибут– це властивість елемента. Атрибути записуються в початковому тегі елемента і визначають зовнішній вигляд вмісту. Атрибути елемента задаються у відкривальному тегі і розділяються між собою пропуском. Формат атрибута складається з імені атрибута і привласненого йому значення, взятого в подвійні (“ ”) лапки.

Сукупність елементів і атрибутів формують HTML-документ і дозволяють вивести у вікно браузера текстову, графічну, табличну, а також з елементами відео- і аудіоінформацію, яка відформатована. Елементи мови HTML повинні представлятися в одному з наступних форматах:

<ім’я_тега атрибут1=“значення” атрибут2=“значення” …> Зміст </ім’я_тега>

<ім’я_тега атрибут1=“значення” атрибут2=“значення” …>

Імена тегів рекомендується записувати маленькими латинськими буквами. Початковий тег елемента повинен починатися символом “<”, за яким слідує ім'я тега і далі, якщо необхідно, список атрибутів і закриваючий символ “>”. Тег, який завершує елемент повинен оформлятися символами “</” за яким слідує ім'я тега з символом “>”. Атрибути в закривальному тегі не містяться.

Всі елементи HTML крім html, head, title, meta, script, style мають наступні атрибути:

id – унікальний ідентифікатор елемента в HTML-документі;

style – визначає інформацію про стиль поточного елемента;

class – клас стилю в таблиці стилів CSS;

title – спливаюча підказка елемента.

Сукупність HTML-документів на певну тематику, при цьому зв'язаних між собою гіпертекстовими посиланнями, є WEB-сайтом. Зберігання як текстової, так і графічної інформації в одному каталозі може істотно ускладнити розробку WEB-сайта. Для вирішення цього завдання необхідно розробити структуру папок й імен HTML-документів. Така папка й імена HTML-документів наочно проілюстровані на прикладі електронної книги у форматі HTHL (рис. 10.1).

Рис. 10.1. Структура сайта електронної книги у форматі HTML

Всі папки і HTML-документи розташовані в основному каталозі «site». Там же розташований і головний html-файл сайта – «index.html». Далі розбиття відбувається за розділами: папки «Glava01» і «Glava02» в яких поміщаються HTML-документи відповідного розділу «Glava01.html» і папки малюнків «Image». Основний принцип структуризації такого типу сайта полягає в тому, щоб документи, що знаходяться в підпапках, якомога менше залежали від документів, що розташовані у батьківських папках.

Структура HTML-документа

Будь-який HTML-документ має задану структуру, яка представлена на рис. 10.2.

1. Перший тег HTML-документа <html>.

2. Розділ заголовка (визначуваного елементом head):

a. Назва документа eлемент title.

b. Спеціальна група елементів meta, призначена для опису і індексування документа пошуковими машинами, а також для правильного відображення змісту сторінки у браузері.

c. Елемент style задає правила таблиць стилів документа.

d. Розділ змісту HTML-документа визначається елементом body. У разі формування фреймової структури сторінки використовується елемент frameset.

3. Кінцевий тег HTML-документа </html>.

 

<html> <head> <title> Назва документа </title>   Текст заголовку HTML-документа </head> <body> Частина сторінки, що відображається </body> </html>

Рис. 10.2. Структура HTML-документа

Приклад. HTML-документ з повною структурою документа.

<html>

<head>

<title>Перший приклад HTML-документа</title>

<meta http-equiv="Content-Language" content="ru">

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<meta name="description" content="">

<meta name="keywords" content="Web-сторінка, HTML-документ, Internet Explorer">

<style>

p.normal

{

text-align: center;

font-family: Tahoma;

font-size: 14pt;

font-style: italic;

font-weight: bold

}

</style>

</head>

<body>

<p class="normal">Це Ваш перший HTML-документ !!!!</p>

</body>

</html>

Результат цього HTML-документа при перегляді в браузере Internet Explorer представлений на рисунку. 10.3.

Рис 10.3. Простий HTML-документ з назвою «Перший приклад
HTML-документа» і з відформованим змістом

10.3.1. Елементи розділу заголовка <head> … </head>.

У розділі заголовка повинна розміщуватися інформація, що описує основні властивості всього документа в цілому:

зазначення назви HTML-документа у заголовку браузера

вказівка кодування сторінки;

перерахування ключових слів, для індексації і реєстрації в пошукових системах;

опис таблиць стилів.

Елемент title.

Назва HTML-документа в заголовку браузера задається за допомогою елементу <title></title>.

Приклад. Використання елемента title.

<head>

<title>Мій перший HTML-документ</title>

</head>

В результаті отримаємо відображення назви HTML-документа в назві Internet Explorer, що наведено на рис. 10.4.

Рис 10.4. Використання елементу title

Елемент meta.

Група інструкцій <meta> призначена в основному для опису і індексування документа пошуковими машинами. Всі дані тегов meta не видно в процесі проглядання документа. Елементи <meta> вносяться до розділу заголовка гіпертекстового документа всередину блока <head>...</head>. Формат елемента складається тільки з початкового тегу <meta>. Кінцевого тега </meta> у цього елемента немає, він заборонений.

Приклад. Призначення кодування HTML-документа

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Windows-1251">

Такий вид тега meta використовується браузером для правильного відображення змісту сторінки і для правильного визначення пошуковою машиною мовного кодування HTML-документа.

Приклад. Стислий опис HTML-документа.

<META name="description" content="Мій перший HTML-документ">

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

Приклад. Список ключових слів, що описують HTML-документ.

<meta name="keywords" content="Web, павутина, пошук, Internet Explorer">

Задається список термінів і ключових слів, які є головним інструментом, за індексування HTML-документа пошуковою машиною. Довжина змісту тегов meta "keywords" не повинна перевищувати 1000 символів.

Приклад. Вказання мови кодування тексту HTML-документа

<meta http-equiv="Content-Language" content="ru">

Тепер напишемо HTML-документ. Запустимо програму «Блокнот». У вікні, що з'явилось, напишемо наступний текст HTML-документа. Результат наведено на рис. 10.5

Приклад. Вказання мови кодування тексту HTML-документа

<html>

<head>

<title>Мій перший HTML-документ</title>

<meta http-equiv="Content-Language" content="ru">

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<META name="description" content="Мій добрий HTML-документ">

<meta name="keywords" content="перша сторінка, HTML-документ">

</head>

<body>

<p>Mій перший HTML-документ !!!!</p>

</body>

</html>

Рис. 10.5. Мій перший HTML-документ

В браузері Internet Explorer отримаємо наступне представлення цього HTML-документа, що наведене на рисунку 10.6.

Рис. 10.6. Відображення HTML-документа в браузері
Internet Explorer

10.3.2. Елементи основного розділу HTML-документа

Оформлення HTML-документа без використання всієї палітри кольорів не було б таким інформативним і таким, що запам'ятовується, тому необхідно використовувати описи основних кольорів і їх коду в кодуванні RRGGBB (червоний, зелений, синій).

Таблиця 10.1

Колірні імена і RRGGBB значення

Назва імені кольорів	Коди кольорів	Палітра кольорів
Black	Чорний	"#000000"
Silver	Срібло	"#C0C0C0"
Gray	Сірий	"#808080"
Green	Зелений	“#008000"
Lime	Вапно	"#00FF00"
Olive	Маслиновий	"#808000"
White	Білий	"#FFFFFF"
Yellow	Жовтий	"#FFFF00"
Maroon	Темно-бордовий	"#800000"
Navy	Темно-синій	"#000080"
Red	Червоний	"#FF0000"
Blue	Синій	"#0000FF"
Purple	Фіолетовий	"#800080"
Teal	Чирок (зеленувато-синій)	"#008080"
Fuchsia	Фуксія	"#FF00FF"
Aqua	Аква	"#00FFFF"

 

Елемент body.

Фактично елемент body – це найважливіша частина HTML-файла, оскільки до неї включено весь текст, що відображається на сторінці, зображення і мультимедіа або посилання на них. Атрибути цього елемента впливають на представлення документа в цілому. У табл. 10.2 наведені основні атрибути елемента body.

Таблиця 10.2

Список основних атрибутів елемента bogy

Елементи	Призначення елемента
bgcolor	Встановлює колір фону документа, використовуючи значення кольору у вигляді RRGGBB. bgcolor="yellow" або bgcolor="#FFFF00"
background	Указує на url-адрес зображення – фону документа. Браузер автоматично повторює малюнок, заповнюючи ним весь простір елемента (сторінки)
text	Встановлює колір тексту документа, використовує значення кольору у вигляді RRGGBB. text="green" або text="#008000”

Закінчення таблиці 10.2

link	Встановлює колір гіперпосилань, використовує значення кольору у вигляді RRGGBB. link="red” або link="#FF0000"
vlink	Встановлює колір гіперпосилань, які вже відвідали, використовує значення кольору у вигляді RRGGBB.
alink	Встановлює колір гіперпосилань під час натиснення
bgproperties=fixed	Фонове зображення прокручуватися не буде

Таблиця 10.3

Елементи фізичного форматування тексту

Eлементи	Дія елемента над блоком тексту	Приклад використання
<b>	Виділяє текст напівжирним шрифтом	<b>текст жирний</b>
<i>	Виділяє текст курсивним шрифтом	<i>текст курсив</i>
<u>	Дозволяє вивести підкреслений текст	<u> підкреслений</u>
<s>	Дозволяє вивести перекреслений текст	<s> перекреслений</s>
<big>	Відображає текст збільшеним шрифтом (щодо поточного)	<big>збільшений </big>
<small>	Відображає текст зменшеним шрифтом (щодо поточного)	<small>маленький</small>
<sub>	Відображає текст у вигляді нижнього індексу	H<sub>2</sub>O
<sup>	Відображає текст у вигляді верхнього індексу	X<sup>3</sup>+x=0
<tt>	Відображає текст моноширинним шрифтом	<tt> моноширинним </tt>
<var>	Використовується для позначення в тексті змінних	<var> variable1 </var>

 

Всі ці елементи фізичного форматування можна вкладати один в іншій і при цьому досягатиметься комбінований ефект форматування тексту. Наприклад, документ з одночасним форматуванням тексту напівжирним, підкресленим, курсивом, великого розміру з використанням нижнього і верхнього регістрів матиме вигляд:

<p>Рівняння <i>n</i>-степеня<big><b> <i>xⁿ</i> + a₁<i>x^n</i>-1 +...+ a_<i>n</i> = 0 </b>
</big></p>

Застосувати всі ці елементи форматування можна в одному HTML-документі, і при цьому можна додати пару своїх комбінацій фізичного форматування. Приклад математичного рівняння наведено на рисунку 10.7.

Рис. 10.7. Математичне рівняння в HTML-документі

Далі розглянемо елемент <p> параграф, що часто вживається за розробки сторінок. Параграфи задаються тегами <p></p>. Елемент параграфа має атрибут align – вирівнювання параграфа щодо однієї із сторін документа, і набуває значень: left, right, center або justify. Розглянемо їх застосування детальніше.

Використовуючи атрибут align =”left“ можна вирівнювати текст по лівому краю:

<p align="left">текст</p>

Відповідно, за умови align =”right“ здійснюється вирівнювання тексту по правому краю:

<p align="right">текст</p>

Наступне значення атрибуту align =”center“ дозволяє здійснити центрівку тексту:

<p align="center">текст</p>

Останнє і часто використовуване значення атрибута align=“justify” дозволяє відформатувати текст параграфа по ширині:

<p align="justify"> Останнє і часто використовуване значення атрибуту align=“justify” дозволяє відформатувати текст параграфа по ширині.</p>

Текст в документі, якщо не задавати вирівнювання в параграфі, завжди вирівнюється за умовчанням по лівому краю. Для перенесення рядка в параграфі використовується тег <br>. На рисунку 10.8 наведено всі види вирівнювання тексту у параграфі.

Рис. 10.8. Приклад використання атрибута align зі значеннями
left, right, center та justify у елементі <p>

Елемент параграфа <p> має атрибут style. Це досить складний атрибут, що дозволяє здійснити найбільш тонку настройку оформлення відображення тексту.

Атрибут style має наступну конструкцію:

style=”[правило1: значення]; [правило2: значення];…”

Основні правила та їх значення наведені у табл. 10.4.

Таблиця 10.4

Основні правила оформлення і їх значення.

 

Правила стилю	Група властивостей шрифту
font-family	Назва шрифту: Comic Sans MS, Arial, Tahoma, Monotype Corsiva, Georgia і так далі всі шрифти які встановлені в операційній системі
font-size	Розмір шрифту. Найчастіше указується в – пунктах(pt, 1pt=1/72 дюйми), але його можна указувати і в інших одиницях вимірювання, таких як дюйми (in), сантиметри (cm), міліметри (mm), а також і пікселах (px). Назва одиниці вимірювання пишеться відразу після вказівки розміру: 12pt, 10mm, 1cm
font-weight	Жирність зображення значення normal | bold. За умовчанням застосовується normal
font-style	Курсив normal | italic. За умовчанням застосовується normal
Властивості шрифту
text-decoration	Підкреслений – underline; закреслений – line-through; риска зверху – overline; мерехтіння – blink; без прикраси – none. Можуть використовуватися як поодинці, так і групою, наприклад: text-decoration: underline overline;
font-variant	Малі прописні small-caps
text-transform	Всі прописні – uppercase, перші прописні – capitalize
Міжзнаковий інтервал
letter-spacing	Значення встановлюються в цифрах: 1pt. Розряджений міжзнаковий інтервал задається позитивним значенням “3pt”. Ущільнений міжзнаковий інтервал позначається знаком мінуса “-“ перед числом і отримуємо “-2pt”. Звичайний міжзнаковий інтервал задається значенням “0pt” і є встановленим за умовчанням
Властивості блока тексту
text-align	Вирівнювання тексту по лівому, правому краям або по ширині, або по центру виконується встановленням відповідного значення атрибута left, right, center або justify

Закінчення таблиці 10.4

Відступи оформлення блока тексту
text-indent	Перший рядок задається числовим значенням 10mm або 1cm
margin-left	Відступ зліва задається числовим значенням 10mm або 1cm
margin-right	Відступ справа задається числовим значенням 10mm або 1cm
Інтервал оформлення абзацних відступів. Задається числовим значенням 10mm або 1cm. За умовчанням вимірюється в пікселах і указується без типу розмірності.
margin-top	Перед абзацом
margin-bottom	Після абзацу
word-spacing	Між слів
line-height	Міжрядковий інтервал. Вимірюється у відсотках або разах, але можна задавати в cm, mm, in, px або pt. Одинарний 120% або 1.2 (за умовчанням) Полуторний 150% або 1.5 Подвійний 200% або 2
Колірне оформлення
color	Колір символів, див. таблицю квітів
background-image	Фоновий малюнок. Приклад: background-image:url('Паркет.bmp')
background-color	Колір фону абзацу

Приклад. Застосування атрибуту style до параграфа

<p align="justify" style="color: red; background-color: #FFFF00; text-transform: capitalize; letter-spacing: 3pt; font-family: Comic Sans MS; text-indent:2px">Текст абзаца</p>.

Заголовки. Елементи h1 ... h6

У мові HTML існує шість рівнів заголовків з 1-го по 6-ий, які дозволяють розбивати інформацію HTML-документа на логічні блоки. Заголовок 1-го рівня – <h1>– є найбільш значущим і відображається великим за розміром шрифтом, з його допомогою документ розбивається на «Розділи». Далі слідує заголовок 2-го рівня, який відображається меншим розміром шрифту і визначає в документі розділи, заголовок 3-го рівня визначає параграфи і так далі. Приклад використання елемента заголовків наведено на рис. 10.9.

Приклад. Використання заголовків

<html>

<head>

<title>Приклад HTML-документа з заголовками</title>

<meta http-equiv="Content-Language" content="ru">

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<meta name="keywords" content="Заголовок, глава, параграф">

</head>

<body>

<p align="center"><b>HTML-документ з використанням заголовків.</b></p>

<h1>Заголовок 1-го рівня - це ГЛАВА</h1>

<h2>Заголовок 2-го рівня - це РОЗДІЛ</h2>

<h3>Заголовок 3-го рівня - це ПАРАГРАФ чи ПІДРАЗДІЛ</h3>

<h4>Заголовок 4-го рівня</h4>

<h5>Заголовок 5-го рівня</h5>

<h6>Заголовок 6-го рівня</h6>

</body>

</html>

Рис. 10.9. Приклад використання заголовків

Заголовки можуть використовувати атрибут align для вирівнювання тексту заголовка щодо сторінки, що підтримує значення (left, right, center, justify).

Елемент гіперпосилання <a>

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

Гіперпосилання задається тегами <a></a>і має формат:

<a href=адреса_ресурсу>Назва ресурсу або його опис</a>

Крім загальних атрибутів, eлемент a ще може мати ланцюжок наступних атрибутів:

href – адреса ресурсу, на який необхідно посилатися.

target – визначає, вікно браузера, в яке завантажується ресурс. Найчастіше використовується спільно з фреймами(вивчаються в одному з подальших занять) і може набувати наступних значень:

_blank – ресурс завантажується в нове вікно;

_parent – ресурс завантажується в батьківському вікні поточного документа;

_top – ресурс завантажується у вікні верхнього рівня фреймової структури;

_self – ресурс завантажується в поточному вікні і є значенням за умовчанням;

"ім'я вікна" – ресурс завантажується в заданому вікні (фреймі).

Способи адресації

Приділимо особливу увагу способу вказівки адреси ресурсу. Деякі типові випадки перераховані нижче:

Абсолютне локальне посилання. Указує адресу ресурсу на поточному комп'ютері і має формат

file://диск:\папка\...\папка\файл

HTTP-посилання. Указує адресу ресурсу доступного по протоколу HTTP. Використовується наступний формат:

http://хост/папка/.../папка/файл

Поштове гіперпосилання. Запускає діалогове вікно поштового клієнта для створення нового повідомлення електронної пошти. Формат поштового гіперпосилання має вигляд:

mailto:користувач@хост

Відносне посилання. Використовується для вказівки місцеположення ресурсу щодо поточної папки. Застосовуються наступні позначення:

/ – кореневий каталог web-сервера або логічного диска;

./ – поточний каталог;

../ – батьківський каталог;

папка/ – дочірній каталог.

Елемент зображення <img>

Використовується для вставки зображень в HTML-документ. Елемент допускає вставку зображень у форматах JPEG (зокрема progressive jpeg) і Compuserve GIF (включаючи прозорі і анімації), також можна використовувати формат PNG. Елемент IMG не має кінцевого тега і задається тегом <img>.

Обов'язковим атрибутом елемента img є src. У нім указується URL‑адреса файла із зображенням.

height і width – визначають ширину і висоту зображення відповідно. Якщо вказані значення не співпадають з реальним розміром зображення, то зображення масштабується.

hspace і vspace – визначають відступ картинки (у пікселах) по горизонталі і вертикалі від інших об'єктів документа. Це необхідно в разі обтіканні зображення текстом.

align – обов'язковий атрибут. Указує спосіб вирівнювання зображення в документі. Може набувати наступних значень:

left – вирівнює зображення по лівому краю документа. Прилеглий текст обтікає зображення справа;

right – вирівнює зображення по правому краю документа. Прилеглий текст обтікає зображення зліва;

top і texttop – вирівнюють верхню кромку зображення з верхньою лінією поточного текстового рядка;

middle – вирівнює базову лінію поточного текстового рядка з центром зображення;

absmiddle – вирівнює центр поточного текстового рядка з центром зображення;

bottom і baseline – вирівнює нижню кромку зображення з базовою лінією поточного текстового рядка;

absbottom – вирівнює нижню кромку зображення з нижньою кромкою поточного текстового рядка;

alt – визначає текст, що відображається браузером на місці зображення, якщо браузер не може знайти файл із зображенням або включений в текстовий режим. Як значення задається текст з описом зображення;

border – визначає ширину рамки навколо зображення в пікселах. Рамка виникає, тільки якщо зображення є гіпертекстовим посиланням. У таких випадках значення BORDER зазвичай бувають рівними нулю.

Приклад обтікання картинки текстом

<img src="/img/picture.gif" width="45" height="53" alt="Пума" hspace="10" align="left"> Цей текст обтікає картинку справа і знаходиться від неї на відстані 10 пікселів.

Приклад використання зображення як гіперпосилання

<A HREF="carlson.html">
<IMG src="/img/button.jpg" WIDTH="70" HEIGHT="30" ALIGN="right"
BORDER="0" ALT="Емблема університету">
</A>

Елементи списків OL, UL, DL.

Існують три основні види списків в HTML-документі:

нумерований (впорядкований), елемент ol;

маркірований (неврегульований), елемент ul;

список визначень, елемент dl.

Також вирішується комбінування всіх видів списків, створення вкладених списків, використання різних елементів списків і повторення одних списків усередині інших. Для цього просто необхідно розмістити одну пару тегов відповідного елемента списку усередині другої. Для створення заголовка списку використовується спеціальна пара тегов <lh></lh>.

Створення нумерованого списку. Елемент OL

У нумерованому списку браузер автоматично вставляє номери елементів по порядку. Якщо видаляється один або декілька пунктів пронумерованого списку, то решта номерів пунктів автоматично буде перерахована.

Нумерований список визначається парою тегов <ol> і </ol>. Кожен пункт списку починається з тега <li>. Елемент OL має наступні атрибути:

Атрибут	Значення атрибуту
type	Вид лічильника A – великі латинські букви (A,B,C,...) а – маленькі латинські букви (а,b,c,...) I – великі римські цифри (I,II,III,...) i – маленькі римські цифри (i,ii,iii,...) 1 – звичайні цифри (1,2,3,...)
start	Число, з якого починається відлік start=3

Приклад створення нумерованого списку

<ol type=i start=4> <li>Проблема</li> <li>Аналіз проблеми</li> <li>Постановка задачі</li> <li>Рішення задачі</li> <li>Аналіз результату</li> <li>Вирішення проблеми</li>

iv. Проблема v. Аналіз проблеми vi. Постановка завдання vii. Рішення задачі viii. Аналіз результату ix. Вирішення проблеми

Створення маркірованого списку. Елемент UL.

У маркірованих списках браузер використовує маркери для позначки пунктів списку. Вид маркера задається в атрибутах елемента UL.

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

type – визначає зовнішній вигляд маркера. За умовчанням (disc), круглий (circle) або квадратний (square). Type =“circle”.

Приклад використання списку

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>Сонячна система. Приклад використання списку</title>

</head>

<body>

<ul type="square">

<lh><i>Планети сонячною системи:</i></lh><br>

<li>Меркурій

<ul type="circle">

<li>Знаходиться на відстані 57,9 мільйонів кілометрів від сонця.</li>

<li>Діаметр 4878 км..</li>

<li>Супутників не має.</li>

</ul>

</li>

<li>Венера

<ul type="circle">

<li>Знаходиться на відстані 108 мільйонів кілометрів від сонця.</li>

<li>Супутників не має.</li></li>

</ul>

</li>

<li>Земля

<ul type="circle">

<li>Знаходиться на відстані 149.6 мільйонів кілометрів від сонця.</li>

<li>Діаметр 12 756 км..</li>

<ol>

<lh>Супутники планети</lh>

<li>Луна.</li>

</ol>

</li>

</ul>

</li>

<li>Марс

<ul type="circle">

<li>Знаходиться на відстані 227.9 мільйонів кілометрів від сонця.</li>

<li>Має два супутники:

<ol type="1">

<lh>Супутники планети</lh>

<li>Фобос.</li>

<li>Деймос.</li>

</ol>

</li>

</ul>

</li>

</ul>

</body>

</html>

<head>

Рис. 10.10. Використання списку з різними типами лічильників

Створення списку визначень. Елемент DL

Списки визначень, так звані словники спеціальних термінів, в HTML представляються особливим видом списків. Вони представляють текст у формі словарної статті, що складається з визначуваного терміну і абзацу, що розкриває його значення. Такий список зручний для складання каталогу, опису функцій підрозділів організації або словника термінів. Елемент списку визначень DLє контейнером і забезпечує відділення списку від решти тексту порожніми рядками. Усередині контейнера тегом <dt> позначається визначуваний термін, а тегом <dd> – абзац з його визначенням. На рис. 10.11 наведено приклад використання елемента DL.

Приклад створення списку визначень

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; char-set=windows-1251">

<style>

dd {font-weight: bold;}

dt{

margin-left: 20mm;

text-align: justify;

font-family: "Monotype Corsiva";}

</style>

<title>Створення спиcку визначень. Елемент DL.</title>

</head>

<body>

<p align="center"><b>Створення спиcку визначень. Елемент DL.</b></p>

<dl>

<dd>Тег</dd>

<dt>Текстова мітка певного вигляду, що відзначає межі, – початку і кінця деякого змісту. Наприклад, для позначення початку таблиці, використовується тег &lt;tabel&gt;, а для його завершения – &lt;/table&gt;.</dt>

<dd>Елемент </dd>

<dt>Називається сукупність що відкривного і закривного тегів і їх вмісту. Вмістом елемента може бути не тільки простий текст, а і вкладені в нього інші елементи.</dt>

<dd>Атрибут </dd>

<dt>Властивість елемента. Атрибути записуються в початковому тегі елемента і визначають зовнішній вигляд вмісту. </dt>

<dl>

</dl>

</dl>

</body>

</html>

Рис. 10.11. Відображення списку DL в браузері

Елемент таблиця TABLE

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

Елемент таблиця задається тегами <table>...</table>. За умовчанням таблиця не має обрамлення і роздільників. Обрамлення додається атрибутом border.

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

Комірки рядкатаблиці задаються тегами: <td>...</td>. Комірка таблиці може бути, описана тільки всередині рядка таблиці. Кожна комірка повинна бути пронумерована номером колонки, для якої вона описується. Якщо в рядку відсутні одна або декілька комірок для деяких колонок, то браузер відобразить порожню комірку. Розташування даних у комірці за умовчанням визначається атрибутами align=left і valign=middle. Дане розташування може бути виправлене як на рівні опису рядка, так і на рівні опису комірки.

Заголовоктаблиці задається тегами: <th>...</th>. Комірка заголовка таблиці має ширину всієї таблиці, текст в даній комірці має атрибут bold і align=center.

Назватаблиці задається тегами: <caption>...</caption>. Тег <caption> повинен бути присутнім усередині <table>...</table>, але зовні опису якого-небудь рядка або комірки. За умовчанням <caption> має атрибут align=top, але може бути явно встановлений в align=bottom. align визначає, де – зверху або знизу таблиці – буде поставлений підпис, при цьому підпис завжди центрований в рамках ширини таблиці. Атрибути тега <table> наведені у таблиці 10.5.

Таблиця 10.5

Основні атрибути таблиці

Атрибут	Значення
border	Даний атрибут використовується в тегі <table>. Якщо даний атрибут присутній, межа таблиці промальовувалася для всіх осередків і для таблиці. border може набувати числового значення, що визначає ширину межі, наприклад border=2
align	Якщо атрибут align присутній всередині тегів <caption> і </caption>, то він визначає положення підпису для таблиці (зверху або знизу). За умовчанням align=top. Якщо атрибут align зустрічається усередині <tr>, <th> або <td>, він управляє положенням даних в осередках по горизонталі. Може набувати значень left (зліва), right (справа) або center (по центру)
valign	Даний атрибут зустрічається всередині тегов <tr>, <th> і <td>. Він визначає вертикальне розміщення даних в комірках. Може набувати значень top (вгорі), bottom (внизу), middle (по середині) і baseline (всі комірки рядка притиснуті догори)
nowrap	Даний атрибут говорить про те, що дані в комірці не можуть логічно розбиватися на декілька рядків і повинні бути представлені одним рядком
colspan	Указує, яка кількість осередків буде об'єднана по горизонталі для вказаного комірки. За умовчанням – 1
rowspan	Указує, яка кількість осередків буде об'єднана по вертикалі для вказаної осередку. За умовчанням – 1
colspec	Даний параметр дозволяє задавати фіксовану ширину колонок або в символах, або у відсотках, наприклад, colspec="20%"

Приклад простий таблиці на мові HTML

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>Приклад простий таблиці мовою HTML</title>

</head>

<body>

<table border=1 align="center">

<caption>Проста таблиця</caption>

<tr>

<td>Рядок 1<br>Комірка 1</td>

<td>Рядок 1<br>Комірка 2</td>

<td>Рядок 1<br>Комірка 3</td>

</tr>

<tr>

<td>Рядок 2<br>Комірка 1</td>

<td>Рядок 2<br>Комірка 2</td>

<td>Рядок 2<br>Комірка 3</td>

</tr>

<tr>

<td>Рядок 3<br>Комірка 1</td>

<td>Рядок 3<br>Комірка 2</td>

<td>Рядок 3<br>Комірка 3</td>

</tr>

</table>

</body>

</html

Рис. 10.12. Результат відображення таблиці в браузері

Приклад складної таблиці з об'єднаними осередками і різним форматуванням

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>Складна таблиця</title>

</head>

<body>

<table border="3" width="438" height="244">

<caption>Складна таблиця з об'днанням комірок</caption>

<tr>

<td align="center" rowspan="2" bgcolor="#00FFFF" bordercolor="#000000">

Рядок l,2<br>Комірка 1 <br /><b>rowspan="2"</b>

</td>

<td>Рядок 1<br>Комірка 2</td>

<td align="right" bgcolor="#FF00FF" bordercolor="#FFFF00"> Рядок 1 <br>

Комірка 3<br><b>align=right</b>

</td>

</tr>

<tr>

<td valign="top">Рядок 2<br>Комірка 2<br><b>valign=top</b></td>

<td valign="bottom">Рядок 2<br>

Комірка 3<br><b>valign=&quot;bottom&quot;</b></td>

</tr>

<tr>

<td height="77">Рядок 3<br>Комірка 1</td>

<td align="center" colspan="2" bordercolor="#00FF00" height="77">

Рядок 3 Комірка 2,3<br><b>align=center</b><br /><b>colspan="2"</b>

</td>

</tr>

</table>

</body>

</html>

Рис. 10.13. Складна таблиця з об’єднанням комірок