HTML (HyperText Markup Language)

Table of Content

Стандарти HTML

На даний момент співіснують декілька стандартів різновидів HTML:

  1. HTML
  2. XHTML
  3. HTML 5 (Нова версія)

Для перших 2-ох різновидів існують по декілька варіантів. Виходячи з цього виникає проблема показати браузеру в якому стандарті оформлено надісланий йому документ. Це робиться за допомогою так званого <DOCTYPE>, що визначається в першому рядку документа.
DOCTYPE – це набір параметрів, що характеризує певний документ, який в свою чергу визначає правила побудови інших документів певного типу. Стосовно HTML мова йде про те, що описуються або визначаються правила побудови згідно певного стандарту. Формат DOCTYPE є наступним:

<!DOCTYPE_Елемент-верхнього-рівня_Публічність_"Реєстрація//Організація//Тип//Ім'я//Мова"_"URL">

  • Елемент верхнього рівня – кореневий елемент в документах тип яких описується (HTML).
  • Публічність – Визначає чи є документ відкритим (public) чи приватним (private).
  • Реєстрація (+ або -) – визначає чи зареєстрована організація розробник DTD документа в організації міжнародної стандартизації ISO.
  • Організація – назва організації, що розробила документ.
  • Тип – тип документа
  • Ім'я – ім’я документа
  • Мова – мова документа
  • URL – адреса місце знаходження документа

Приклад: DOCTYPE для DTT документа, що описує HTML документи стандарта HTML4 у варіанті строгого синтаксису:

<!DOCTYPE HTML PUBLIC "-//w3C//DTD//HTML4//EN" "http://www.w3c.org/TR/html4/strict.dtd">,
отже наведений DOCTYPE описує параметри DTD документа, що виражає специфікаю HTML4 документацію в строгому синтаксисі. `

Для HTML 5 DOCTYPE виглядає наступним чином:

<!DOCTYPE HTML>

Зазначимо, що для стандартів HTML4 та XHTML існують 3 варіанти:

  1. Строгий синтаксис
  2. Перехідний синтаксис
  3. Синтаксис з фреймами.

Другий та третій варіанти існують лише для вирішення проблем сумісності. Рекомендованим є лише строгий синтаксис. У випадку коли DOCTYPE передбачає лише використання строгого синтаксиса браузер працює в стандартному режимі з чітким дотриманням правил HTML та CSS. Коли DOCTYPE визначає не строгий синтаксис браузер переходить в так званий сумісний режим, якому він не дотримується чіткого виконання вказаних правил. Тому результат розбору такого документа може бути різним для різних браузерів. В сумісному режимі браузер буде також працювати якщо не вказано взагалі.

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

HTML документ має ієрархнічну побудову та скаладається з HTML документів. В свою чергу cтруктура HTML елемента має наступний вигляд.

відкриваючий тег
вміст
закриваючий тег

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

<div class="test">вміст</div>

Атрибути описують певні властивості html елемента та мають наступний вигляд: ім'я=значення, (class="div", colspan="2") в певних випадках значення можна вказувати без лапок. За умови, що атрибутів декілька вони розділяються проміжками. У випадку коли вміст елементу відсутній можна використовувати скорочену форму: <ім'я атрибути/>
Імена елементів та атрибутів у HTML не чутливі до регістру але бажано в якийсь єдиний спосіб.

Кореневим елементом для кожного документа є <html> в свою чергу він включає в себе 2 елементи <head> та <body>. Основна частина розмітки документа міститься у середині елемента <body>. Елемент <head> в свою чергу є контейнером для так званих заголовочних документів. Отже загальна структура набуває такого вигляду:

<!DOCTYPE ...>
     <html>
          <head>
               Заголовочні елементи
          </head>
          <body>
               ...
          </body>
     </html>

Класифікаця HTML елементів
Серед великого набору HTML документів виділяють 3 види:

1. Заголовочні елементи.
2. Блокові елементи
3. Строкові елементи

Заголовочні елементи

Заголовочні елементи мають в якості контейнера елемент та призначений для:

  1. Встановлення зв’язків даного документа з зовнішніми ресурсами.
  2. Визначення зовнішнього виду (стилі) та поведінки документа (скрипти) включаючи взаємодію з користувачем.
  3. Визначення мета даних, що описують документ.

Прикладами заголовочних елементів є:

  • <title> – містить заголовок документу, що з’являється у рядку заголовка відповідного вікна
  • <meta> – призначений для різного виду мета даних.
  • <link> – встановлює зв’язки документа з зовнішніми ресурсами.
  • <style> – служить для визначення зовнішніх таблиць стилів, що описують форматування (вигляду) документа.
  • <script> – є контейнером для скриптів.

Елементи title та meta відіграють важливу роль у SEO оптимізації. Оскільки мета дані, що задаються з їх допомогою використовуються пошуковою системою.

Блокові та строкові елементи.

Блокові та строкові елементи відрізняються:

  1. Моделлю вмісту
  2. Способом відображення (розміщення)

З точки зору моделі вмісту

  1. Блокові елементи можуть контейнерами для будь-яких інших в тому числі для і для строкових елементів.
  2. Строкові елементи інакше вони називаються inline елементи не можуть вміщувати блокові елементи.

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

Загальні атрибути елементів

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

  1. id – за допомогою цього атрибута елементові можна співставити деякий унікальний ідентифікатор. Значення атрибутів елементів id для різних атрибутів не можуть повторюватись. Наявність двох id однакових можуть призвести до непередбачуваних проблем.
  2. class – за допомогою цього атрибута окремі елементи, що мають однакові позначення об’єднуються в групи(класи) для забезпечення певної однакової поведінки або зовнішнього вигляду.
  3. onxxx – набір атрибутів, що починаються з префікса “on” після якого йде деяка змістовна частина назви. Ця змістовна частина відповідає певній події. А самі атрибути такого типу дозволяють співставити цій події відповідні обробники щодо даного елементу.

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *

Navigation