Мова розмітки гіпертексту (HTML)
Основи HTML
HTML - це мова розмітки, яка використовується для розміщення елементів (тексту, картинок, кнопок, таблиць тощо) на сторінці.
HTML складається з ряду елементів, які використовують для того, щоб різні частини сторінки мали певний вид.
Цю мову створено у 1990 році Тімом Бернесом-Лі, з осені 2014 року діє стандарт цієї мови HTML5.
Основи HTML
Команди мови HTML називаються тегами, котрі бувають відкриваючими та закриваючими.
Вони записуються у кутових дужках.
Теги є скороченою назвою або абревіатурою того завдання, що має виконати браузер.
Тег у перекладі з англійської означає етикетка, ярлик, бірка.
Основи HTML
В мові HTML застосовують теги: одинарні, парні та коментарі.
Одинарні:
<br> - перенесення на новий рядок
<hr> - розділова лінія
<img> - уставляння зображення.
Парні:
<p>… </p>- тег, що позначає абзац (paragraph).
<tr>… </tr> - тег, що позначає рядок таблиці (table row).
<h1>… </h1> - тег, що позначає заголовок 1 рівня (header 1 level)
<p>Цей фрагмент є окремим рядком тексту</p>
Коментарі:
<!-- текст коментаря -->
<!-- NAVIGATION -->
Основи HTML
Структура простої веб-сторінки
Основи HTML
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Тестова сторінка</title>
</head>
<body>
<p>Моя перша сторінка</p>
</body>
</html>
посилання на набір правил doctypes, яким має слідувати HTML-сторінка, також вказівка на автоматичну перевірку помилок і інші корисні речі.
Основи HTML
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Тестова сторінка</title>
</head>
<body>
<p>Моя перша сторінка</p>
</body>
</html>
є кореневим елементом документа. Всі інші елементи містяться всередині тегів <html> ... </html>.
Основи HTML
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Тестова сторінка</title>
</head>
<body>
<p>Моя перша сторінка</p>
</body>
</html>
містить службову, довідкову та додаткову інформацію, яка призначена для браузера, пошукових систем
Основи HTML
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Тестова сторінка</title>
</head>
<body>
<p>Моя перша сторінка</p>
</body>
</html>
містить весь контент, який бачать відвідувачі - текст, зображення, відео, анімація тощо.
Основи HTML
Об'єктна модель документа
DOM (document object model)
<html> кореневий елемент,
<body> і <head> – структурний елемент
Основи HTML
У взаємодії елементів веб-сторінки задіяні "родинні стосунки" між елементами.
Відносини між множинними вкладеними елементами підрозділяються на батьківські, дочірні та сестринські.
Основи HTML
Батьківський елемент - елемент, що пов'язаний з іншими елементами нижчого рівня, і що знаходиться на дереві вище за них.
<html> є батьківським тільки для <head> і <body>.
<body> є батьківським для всіх елементів, що містяться в ньому: <h1>, <p>, <span>, <nav> і т.д.
тег <p> є батьківським тільки для <span>.
Основи HTML
Дочірній елемент - елемент, що розташований всередині іншого елементу.
елементи <h1>, <h2>, <p> і <nav> є дочірніми по відношенню до <body>
Основи HTML
Сестринський елемент - елемент, що має загальний батьківський елемент з даним, так звані елементи одного рівня.
<head> і <body> - елементи одного рівня, так само як і елементи <h1>, <h2> і <p> є між собою сестринськими.
Основи HTML
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Тестова сторінка</title>
</head>
<body>
<p>Моя перша сторінка</p>
</body>
</html>
HTML Сторінка в браузері
За допомогою SublimeText 3 створи свою першу веб-сторінку
“
”