Поняття про мову розмічання гіпертекстового документа

HTML

Офіційний логотип HTML5

HTML (англ. HyperText Markup Language — мова розмітки гіпертексту) — стандартизована мова розмітки документів для перегляду веб-сторінок у браузері. Веб-браузери отримують HTML документ від сервера за протоколами HTTP/HTTPS або відкривають з локального диска, далі інтерпретують код в інтерфейс, який відображатиметься на екрані монітора.

Елементи HTML є будівельними блоками сторінок HTML. За допомогою конструкцій HTML, зображення та інші об'єкти, такі як інтерактивні форми, можуть бути вбудовані у візуалізовану сторінку. HTML надає засоби для створення структурованих документів, позначаючи структурну семантику тексту, наприклад заголовки, абзаци, списки, посилання, цитати та інші елементи. Елементи HTML окреслені тегами, написаними з використанням кутових дужок. Теги на кшталт <img /> чи <input /> безпосередньо виводять вміст на сторінку. Інші теги, такі як <p>, оточують текст і надають інформацію про нього, а також можуть включати інші теги як піделементи. Браузери не показують теги HTML, але використовують їх для інтерпретації вмісту сторінки.

Тег, теги, іноді теґ (англ. tag — «іменована позначка, ярлик», читається /tæg/; більш правильна назва — дескриптор) в SGML (HTML, WML, AmigaGuide, мовах сімейства XML) — елемент мови розмітки гіпертексту. Текст, який міститься між початковим і кінцевим тегом, відтворюється і розміщується відповідно до властивостей, вказаних у початковому тезі.

В HTML можна вбудовувати програми, написані на скриптових мовах, наприклад JavaScript, які впливають на поведінку та вміст вебсторінок. Включення CSS визначає вигляд і компонування вмісту. World Wide Web Consortium (W3C), який супроводжує стандарти HTML та CSS, заохочує використання CSS над явним презентаційним HTML з 1997 року1).

HTML впроваджує засоби для:2)

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

Документ HTML

HTML-код веб-сторінки опрацьовується браузером. Браузер відображає текст і вміст уставлених нетекстових об’єктів, їх форматування відповідно до визначеної структури.

Розмітка

Розмітка в HTML складається з чотирьох основних компонентів: елементів (та їхніх атрибутів), базових типів даних, символьних мнемонік та декларації типу документа.

Загальна структура

Документ HTML 5.2 складається з трьох частин:

  1. Декларація типу документа (англ. Document type declaration, Doctype), на початку документа, в якій визначається тип документа (DTD).
  2. Шапка документа (знаходиться в межах елемента head), в якій записано загальні технічні відомості або додаткова інформація про документ, яка не відтворюється безпосередньо в браузері;
  3. Тіло документа (може знаходитися в елементі body), в якому міститься основна інформація документа.

Нижче наведено приклад загальної структури HTML-документа: 

<! DOCTYPE html> 
<html>
   <head>
      <title>Назва</title>
   </head>
   <body>
      <p> Hello world!</p>
   </body>
</html>

Де:
тег <title> відображає у заголовку браузера ім'я поточного html-документа. Тег <title> - обов'язковий тег і має бути присутнім на кожній веб-сторінці. Він повинен бути розташований всередині контейнера head.

тег <p> визначає текстовий абзац.

Елементи

Елементи являють собою базові компоненти розмітки HTML. Кожен елемент має дві основні властивості: атрибути та вміст (контент). Існують певні настанови щодо кожного атрибута та контенту елемента, які треба виконувати задля того, щоб HTML-документ був визнаний валідним.

У елемента є початковий тег, який має вигляд <element-name>, та кінцевий тег, який має вигляд </element-name>. Атрибути елемента записуються в початковому тегу одразу після назви елемента, контент елемента записується між його двома тегами. Наприклад: 

<element-name element-attribute="attribute-value">контент елемента</element-name>

.

Деякі елементи, наприклад br, не містять контенту, тож і не мають кінцевого тегу. Елемент може не мати початкового та кінцевого тегу (наприклад, елемент head), проте він завжди буде представлений в документі. Нижче зазначені деякі типи елементів розмітки HTML.

Елементи структурної розмітки застосовуються задля опису семантики тексту, іншими словами ці елементи описують призначення тексту свого контенту. Вони не зазначають ніякого спеціального (візуального) відтворення тексту, проте більшість браузерів мають стандартні стилі форматування для кожного елемента. Для подальшого стилізування тексту рекомендується використовувати Каскадні таблиці стилів (CSS). Наприклад:

1. Фрагмент HTML-розмітки документа

<h1>Давньогрецькі боги</h1>
<p><strong>Посейдон</strong> — володар світових вод, Океану, в латинян йому відповідав <em>Нептун</em>, у слов'ян — <em>Цар Моря, Цар Морський, Водяник</em>.</p>

2. Відтворення в браузері

Давньогрецькі боги

Посейдон — володар світових вод, Океану, в латинян йому відповідав Нептун, у слов'ян — Цар Моря, Цар Морський, Водяник.

Елементи візуальної розмітки застосовуються задля опису візуальних ефектів тексту, не зазначаючи при цьому функції тексту свого контенту. Остання чинна специфікація HTML 4.01 визначає більшість з цих елементів такими, що не рекомендується застосовувати у розмітці. Наприклад:

1. Фрагмент HTML-розмітки документа

<font size="5">Давньогрецькі боги</font><br /><b>Посейдон</b> — володар світових вод, Океану, в латинян йому відповідав <i>Нептун</i>, у слов'ян — <i>Цар Моря, Цар Морський, Водяник</i>.

2. Відтворення в браузері

Давньогрецькі боги

Посейдон — володар світових вод, Океану, в латинян йому відповідав Нептун, у слов'ян — Цар Моря, Цар Морський, Водяник.

Елементи розмітки гіпертексту застосовуються задля з'єднання частин документа з іншими документами. Наприклад:

1. Фрагмент HTML-розмітки документа

<a href="https://www.vpuhlukhiv.com.ua/">Глухівське ВПУ</a>

2. Відтворення в браузері

Глухівське ВПУ

Атрибути

Більшість з атрибутів елемента являє собою пару «назва-значення», розділених між собою знаком рівності, та записаних у початковому тегу одразу після назви елемента. Значення атрибуту може бути оточене лапками (подвійними або одиничними), також, якщо значення атрибуту складається з певних символів, його можна не виділяти лапками зліва. Проте невзяття значення атрибутів у лапки вважається небезпечним кодом. На відміну від атрибутів виду «назва-значення», є певні атрибути, що впливають на елемент, назва яких лише з'явилась в початковому тегу (наприклад, атрибут ismap елемента img).

Більшість елементів можуть мати будь-який з загальних атрибутів:

  • Атрибут id впроваджує унікальний ідентифікатор елемента по всьому документу. Доданий до URL документа, він впроваджує глобальний унікальний ідентифікатор елемента. Він може використовуватися:
    • таблицями стилів для впровадження презентаційних властивостей;
    • браузерами для фокусування уваги на певному елементі;
    • скриптами для виконання дій над елементом.
  • Атрибут title використовується для додавання пояснювального тексту для елемента. В більшості браузерів значення цього атрибуту можна побачити як підказку, що виникає при наведенні курсора на елемент.
  • Атрибут class впроваджує засіб об'єднання схожих елементів у класи. Він може використовуватися для:
    • презентаційної розмітки. Наприклад, документ може містити class=“notation”, який визначає всі елементи, у яких клас визначений як “notation”, підпорядкованими головному тексту документа. Такі елементи можна зібрати докупи і показати як виноски внизу сторінки, замість того, щоб показувати їх на тому місці, де вони з'являються в самому HTML-коді документа.
    • семантичної розмітки. Наприклад, класи використовуються у створенні мікроформатів.

Базові типи даних

Оскільки HTML є похідною мовою від SGML, усі типи даних HTML ґрунтуються на базових типах даних SGML (наприклад, PCDATA, CDATA, NAME, ID, NUMBER).

Кожен елемент має дві властивості — атрибути і вміст, які мають певні значення. Всі можливі значення цих двох властивостей прописуються відповідно до визначених у DTD типів даних. Нижче наведено кілька типів даних HTML:

  • % Color — колір sRGB, записаний у шістнадцятковому вигляді, або одне з шістнадцяти службових слів;
  • % ContentType — тип умісту/носія;
  • % Charset — таблиця кодування символів;
  • % Character — мнемоніка або окремий символ із UCS;
  • % Length — nn розмір в пікселях, nn% — у відсотках;
  • % URI — Уніфікований ідентифікатор ресурсів;
  • % Datetime — дата та час;
  • % Script — скрипт;
  • % StyleSheet — дані таблиць стилів;
  • % Text — текстові рядки.

Існують такі випадки, коли в документі потрібно використати якийсь символ, якого немає в обраній для документа кодовій таблиці. Для таких випадків можливо замінити символ на еквівалентне йому SGML-посилання на символ (мнемоніку).

Визначають кодову позицію символу із таблиці кодів UCS. Наприклад:

Мнемоніка Символ 
&lt;
 < 
&amp;
 & 
&quot;
 “
HTML 4.01 підтримує три різні набори мнемонік:
  • Мнемоніки для символів ISO 8859-1 (Latin-1)
  • Символи, математичні символи та грецькі літери
  • Мнемоніки для символів розмітки та інтернаціоналізації

Джерела

  • HTML
  • Тег
  • Інформатика (рівень стандарту): підруч. для 10-го (11-го) класу закладів середньої освіти / Й.Я. Ривкінд [та ін.]
1) , 2)
HTML & CSS - W3C.www.w3.org (англ.). Архів оригіналу за 29 листопада 2010. Процитовано 22 листопада 2017.
  • subjects/basic/informatika/base/html.txt
  • Востаннє змінено: 3 років тому
  • повз Адміністратор