НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ
HTML5. Уроки для початківців. W3Schools українською

En

HTML Вступ


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


Що таке HTML?

HTML є стандартною мовою розмітки для створення веб-сторінок.

  • HTML означає Hyper Text Markup Language (мова гіпертекстової розмітки)
  • HTML описує структуру веб-сторінок за допомогою розмітки
  • HTML-елементи є будівельними блоками сторінок HTML
  • Елементи HTML представлені тегами
  • Теги HTML позначають фрагменти змісту, такі як header (заголовок), paragraph (параграф), table (таблиця) та ін.
  • Браузери не відображають HTML теги, але використовують їх для відображення змісту web-сторінки

Простий HTML документ

Приклад

<!DOCTYPE html>
<html>
<head>
<title>Назва сторінки</title>
</head>
<body>

<h1>Мій перший заголовок</h1>
<p>Мій перший параграф.</p>

</body>
</html>
Спробуйте самі »

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

  • Оголошення <!DOCTYPE html> визначає цей документ як HTML5
  • Елемент <html> є кореневим елементом HTML сторінки
  • Елемент <head> містить мета-інформацію про HTML документ
  • Елемент <title> визначає назву HTML документу
  • Елемент <body> відображає видимий зміст HTML сторінки
  • Елемент <h1> визначає великий заголовок на HTML сторінці
  • Елемент <p> визначає абзац (параграф) в HTML документі

HTML Теги

HTML-теги - це назви елементів, оточені кутовими дужками:

<назва тегу>Тут йде зміст...</назва тегу>

  • Теги HTML зазвичай ідуть парами, наприклад, <p> і </p>
  • Першим тегом в парі є початковий тег, інший - кінцевий тег
  • Кінцевий тег записується як початковий тег, але перед назвою тега вставляється коса риска ( / слеш)

Примітка: Початковий тег також називається - відкриваючим тегом, а кінцевий тег - закриваючим тегом.


Web Браузери

Метою веб-браузера є читання HTML документів та їх відображення. Браузер не відображає самі теги HTML, але використовує їх, щоб визначити, як відобразити веб-сторінку:

Вигляд HTML-сторінки в браузері

Найбільш відомі веб-браузери: Chrome, Firefox, Opera, Edge, Internet Explorer, Safari, Brave.


Структура HTML сторінки

Нижче наведена візуалізація структури HTML-сторінки:

<html>
<head>
<title>Назва сторінки</title>
</head>
<body>
<h1>Це заголовок</h1>
<p>Це параграф.</p>
<p>Це інший параграф.</p>
</body>
</html>

Примітка: В браузері відображається тільки зміст розділу <body> (тіло веб-сторінки).


Оголошення <!DOCTYPE>

Оголошення <!DOCTYPE> - є визначення типу документа, яке допомагає браузерам правильно відображати вебсторінки. Воно повинно з'являтися тільки один раз у верхній частині вебсторінки (перед будь-якими тегами HTML).

Оголошення <!DOCTYPE> не чутливе до регістру. Можна писати як великими літерами, так і маленькими.

Оголошення <!DOCTYPE> для HTML5 має такий вигляд:

<!DOCTYPE html>

HTML Версії

З перших днів існування Інтернету було багато версій HTML:

Версія Рік
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014
HTML5.1 2015
HTML5.2 2016
HTML5.3 2017

Запитання для самоконтролю

  • Що таке HTML?
  • Що таке HTML теги?
  • Яким тегом починається кожна html-сторінка?
  • Як записується відкриття тегу за допомогою html-коду?
  • Як записується закриття тегу за допомогою html-коду?
  • Що таке веб-браузери?
  • Які ви знаєте веббраузери?
  • Що таке структура HTML-сторінки?
  • Що таке doctype?
  • Який doctype в специфікації HTML5?
  • Яка остання версія HTML?