Знайомство з мовою HTML
HTML - це мова розмітки, яка представляє прості правила оформлення і компактний набір структурних і семантичних елементів розмітки (тегів). HTML дозволяє описувати спосіб представлення логічних частин документа (заголовки, абзаци, списки і т.д.) і створювати веб-сторінки різної складності.
Спочатку мова HTML (HyperText Markup Language) була задумана і створена як засіб структурування та форматування документів без прив'язки до засобів відображення. В ідеалі, гіпертекстовий документ повинен однаково виглядати на різних пристроях (монітор ПЕОМ, екран ПДА або мобільного телефону, принтер, медіа-проектор і т.п.).
Розробкою специфікацій мови HTML і затвердженням їх в якості офіційних стандартів займається Консорціум всесвітньої павутини (W3C). Крім W3C, в розвитку мови беруть участь IT-компанії і спільнота розробників.
Офіційною специфікації HTML 1.0 не існує. До 1995 року існувало безліч неофіційних вказівок для використання HTML, що з'явилися в ході браузерних воєн.
- RFC 1866 - HTML 2.0, схвалений як офіційний стандарт 22 вересня 1995 року;
- HTML 3 (березень 1996) - не знайшла підтримки у розробників
- HTML 3.2 - 14 грудень 1997 року;
- HTML 4.0 - 18 січень 1997 роки (багато успадковані елементи були відзначені як застарілі і нерекомендовані до використання (англ. Deprecated).);
- HTML 4.01 - 24 січень 1999 року (версія включала малопомітні, але істотні зміни в порівнянні з попередньою);
- ISO / IEC 15445: 2000 (ISO HTML, заснований на HTML 4.01 Strict) - 15 травня 2000 року.
- HTML 5 - розроблений і прийнятий W3C спільно з спільнотою WHATWG.
HTML не є мовою програмування, але веб-сторінки можуть містити вбудовані або файли програми на скриптових мовах (в першу чергу Javascript) і програми-аплети на мові Java.
елементи гіпертексту
Структура HTML-документа
HTML-документ складається з тексту, який являє собою інформаційний вміст і спеціальних засобів мови HTML - тегів розмітки, які визначають структуру і зовнішній вигляд документа при його відображенні браузером. Структура HTML-документа (рис. 1) досить проста:
- Опис документа починається з вказівки його типу (секція DOCTYPE).
- Текст документа вміщують в тег <html>. Текст документа складається з заголовка і тіла, які виділяються відповідно тегами <head> і <body>.
- У заголовку (<head>) вказують назву HTML-документа і інші параметри, які браузер буде використовувати при відображенні документа.
- Тіло документа (<body>) - це та частина, в яку обгортується власне вміст HTML-документа. Тіло включає призначений для відображення текст і керуючу розмітку документа (теги), які використовуються браузером.
Наявність секції DOCTYPE дозволяє вказати браузеру, який тип документа йому належить розбирати, тобто, які вимоги потрібно виконувати при обробці гіпертексту.
Заголовок призначений для розміщення метаінформації, яка описує веб-документ як такий.
Блок <body> містить те, що потрібно показати користувачеві: текст, зображення, впроваджені об'єкти тощо.
Приклад HTML.
<html>
<head>
<title>Володар перстенів</title>
</head>
<body>
<h2>Пролог</h2>
<h3>Про гобітів</h3>
У цій книзі йтиметься здебільшого про хобітів, і з її сторінок читач довідається чимало про їхню ...і т. д.
<h1>БРАТСТВО ПЕРСНЯ</h1>
<h2>КНИГА ПЕРША</h2>
<h3>I Довгоочікувана гостина</h3>
<h3> ...і т. д.</h3>
<h3>XII Втеча до броду</h3>
<h2>КНИГА ДРУГА</h2>
<h3> ...і т. д.</h3>
</body>
</html>
DOCTYPE
Секція DOCTYPE вказує браузеру тип документа і версію використаного мови розмітки. Тут також вказується назва і область видимості опису цієї мови і адреса файлу dtd (document type definition).
Приклади DOCTYPE:
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Frameset // EN" "http://www.w3.org/TR/html4/frameset.dtd">
Гіпертекстовий документ в форматі HTML 4.01, що містить фрейми.
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
Гіпертекстовий документ в форматі HTML 4.01 із суворим синтаксисом (тобто не використані застарілі і не рекомендовані теги).
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">
Гіпертекстовий документ в форматі HTML 4.01 з нестрогим ( «перехідним») синтаксисом (тобто використані застарілі або які не рекомендовані теги і атрибути).
<! DOCTYPE HTML>
Ще не стандартизоване оголошення для документів HTML5.
Стандарт вимагає, щоб секція DOCTYPE була присутня в документі, тому що це дозволяє прискорити і поліпшити обробку гіпертексту. Це досягається за рахунок того, що браузер може не робити припущень про те, як інтерпретувати теги, а звіритися зі стандартним визначенням (файлом .dtd). Детальний опис DOCTYPE - на сайті Консорціуму W3C.
Мета-теги
Мета-тег HTML - це елемент розмітки html, що описує властивості документа як такого (метадані). Призначення мета-тега визначається набором його атрибутів, які задаються в тезі <meta>.
Мета-теги розміщують в блоці <head> ... </ head> веб-сторінки. Вони не є обов'язковими елементами, але можуть бути дуже корисні.
Приклад опису метаданих:
<Head>
<Meta name = "author" content = "рядок"> - автор веб-документа
<Meta name = "date" content = "дата"> - дата останнього зміни веб-сторінки
<Meta name = "copyright" content = "рядок"> - авторські права
<Meta name = "keywords" content = "рядок"> - список ключових слів
<Meta name = "description" content = "рядок"> - короткий опис (реферат)
<Meta name = "ROBOTS" content = "NOINDEX, NOFOLLOW"> - заборона на індексування
<Meta http-equiv = "content-type" content = "text / html; charset = UTF-8"> - тип і кодування
<Meta http-equiv = "expires" content = "число"> - управління кешуванням
<Meta http-equiv = "refresh" content = "число; URL = адреса"> - перенаправлення
</ Head>
Теги
Тег (html-тег, тег розмітки) - керуюча символьна послідовність, яка задає спосіб відображення гіпертекстової інформації.
HTML-тег складається з імені, за яким може слідувати необов'язковий список атрибутів. Весь тег (разом з атрибутами) полягає в кутові дужки <>:
<Імя_тега [атрибути]>
Як правило, теги є парними і складаються з початкового та кінцевого тегів, між якими і можна відслідковувати. Ім'я кінцевого тега збігається з ім'ям початкового, але перед ім'ям кінцевого тега ставиться коса риска / (<html> ... </ html>). Кінцеві теги ніколи не містять атрибутів. Деякі теги не мають кінцевого елемента, наприклад тег <img>. Регістр символів для тегів не має значення.
Приклади часто використовуваних тегів HTML:
<html> ... </ html> - контейнер гіпертексту
<head> ... </ head> - контейнер заголовка документа
<title> ... </ title> - назва документа (те, що відображається в заголовку вікна браузера)
<body> ... </ body> - контейнер тіла документа
<div> ... </ div> - контейнер загального призначення (структурний блок)
<hN> ... </ hN> - заголовок N-ного рівня (N = 1 ... 6)
<p> ... </ p> - основний текст
<a> ... </a> - гіперпосилання
<ol> ... </ ol> - нумерований список
<ul> ... </ ul> - маркований список
<li> ... </ li> - елемент списку
<table> ... </ table> - контейнер таблиці
<tr> ... </ tr> - рядок таблиці
<td> ... </ td> - елемент таблиці
<img> ... </ img> - зображення
<form> ... </ form> - форма
<i> ... </ i> - відображення тексту курсивом
<b> ... </ b> - відображення тексту напівжирним шрифтом
<em> ... </ em> - виділення (курсивом)
<strong> ... </ strong> - посилення (напівжирним шрифтом)
<br> - примусовий розрив рядка
Теги можуть бути вкладені, при цьому форматування внутрішнього тега має перевагу перед зовнішнім. При використанні вкладених тегів їх потрібно закривати, починаючи з самого останнього і рухаючись до першого:
<! - Список як приклад використання вкладених тегів ->
<Ol>
<Li> Приклад </ li>
<Li> Другий елемент списку </ li>
</ Ol>
<Div>
<H2> Тема другого рівня </ h2>
<P> і основний текст </ p>
всередині логічного блоку
</ Div>
Примітка: Браузери зазвичай лояльно ставляться до відсутності кінцевих тегів у парних елементів і більш-менш правильно відображають парні елементи рівня блоку (p, li і т.п.), особливо в простих веб-документах. Проте, рекомендується стежити за наявністю закривають тегів і використовувати їх, щоб уникнути помилок при відтворенні документа.
Повний список тегів можна знайти в документації на відповідну версію мови HTML (див., Наприклад HTML 3.2, HTML 4.01, XHTML 1.1 та ін.).
Атрибути
Атрибути - це пари виду «властивість = значення», уточнюючі уявлення відповідного тега:
<Тег атрибут = "значення"> ... </ тег>
Атрибути вказують в початковому тегу, кілька атрибутів поділяють одним або декількома пропусками, табуляцією або символами кінця рядка. Значення атрибута, якщо таке є, слід за знаком рівності, хто стоїть після імені атрибута. Порядок запису атрибутів у тегу не важливий. Якщо значення атрибута - одне слово або число, то його можна просто вказати після знака рівності, не виділяючи додатково. Всі інші значення необхідно брати в лапки, особливо якщо вони містять кілька розділених пробілами слів.
Примітка: Не дивлячись на необов'язковість лапок, їх все ж варто завжди використовувати.
Атрибути можуть бути обов'язковими і необов'язковими. Необов'язкові атрибути можуть бути опущені, тоді для тега застосовується значення цього атрибута за замовчуванням. Якщо не вказано обов'язковий атрибут, то вміст тега швидше за все буде відображено неправильно.
Короткий список деяких часто використовуваних атрибутів і їх можливих значень:
style = "опис_стилів" - локальні стилі
src = "адреса" - адреса (URI) джерела даних (наприклад картинки або скрипта)
align = "left | center | right | justify" - вирівнювання, за замовчуванням left (по лівому краю)
width = "число" - ширина елемента (в пікселях, піках, поинтах і ін.)
height = "число" - висота елемента (в пікселях, піках, поинтах і ін.)
href = "адреса" - гіперпосилання, адреса (URI) на який буде виконаний перехід
name = "ім'я" - ім'я елемента
id = "ідентифікатор" - унікальний (в межах веб-сторінки) ідентифікатор елемента
size = "число" - розмір елемента
class = "ім'я_класу" - ім'я класу у вбудованій або пов'язаної таблиці стилів
title = "рядок" - назва елемента
alt = "рядок" - альтернативний текст гіперпосилання
Гіперпосилання - це особливим чином позначений фрагмент веб-сторінки (текст, зображення та ін.), Який пов'язаний з іншим документом. Для вказівки гіперпосилань використовується тег <a>. Гіперпосилання дозволяють переміщатися між пов'язаними веб-сторінками.
<a href="http://example.com/"> Приклад </a>
<a href="ftp://example.com/archive.tar.gz"> Завантажити файл </a>
<a href="mailto://user@mail.example.com" title="Обратная связь"> user@mail.example.com </a>
Перехід за посиланнями можна виконувати як на цілі документи, так і на спеціальним чином помічені (іменовані) фрагменти тексту:
<a name="якорь"> Прив'язка до фрагменту тексту </a>
<a href="#якорь"> Посилання на якір </a>
Посилання можуть бути абсолютними і відносними.
Абсолютні посилання вказують, як правило, на зовнішній ресурс. Для них потрібно вказувати повний шлях:
<a href="http://example.com/page.html"> Абсолютне посилання </a>
<a href="http://example.com/images/figure1.gif"> Посилання на сторінку в каталозі </a>
Відносні посилання, навпаки, використовують для переходу на внутрішні сторінки сайту. Для них потрібно вказувати шлях щодо посилається:
<a href="/index.html"> Посилання на сторінку в кореневому каталозі </a>
<a href="page.html#seg1"> Посилання на фрагмент сторінки в поточному каталозі </a>
<a href="images/figure1.gif"> Посилання на сторінку в підкаталозі поточного каталогу </a>
<a href="/docs/manual.html"> Посилання на сторінку в підкаталозі кореневого каталогу </a>
<a href="../files/index.html"> Посилання на сторінку в вищележачому каталозі </a>
Спеціальні символи
Крім тегів, в HTML-документах можуть бути присутніми і спеціальні символи.
Наприклад, © - знак авторського права. Для відображення спеціальних символів використовується мнемонічний або числовий код виду & ім'я; або & # NNNN ;, де NNNN - код символу в Юникоде в десяткової системі числення. Наприклад: & amp; (Числовий код ©) - амперсанд (&), & lt; - символ «менше» (<) і & gt; - символ «більше» (>), & laquo; - ліва друкарська лапки ( «) і т.д.
Коментувати...