2 of 14

HTML (англ. Hyper Text Markup Language — мова розмітки гіпертексту) — стандартна мова розмітки документів у всесвітній павутині, яка обробляється спеціальними програмами (браузерами) і відображається у вигляді документа у зручній для людини формі.

Що таке HTML?

3 of 14

Теги — команди мови HTML.

HTML-теги — це ключові слова або символи, які записуються в кутові дужки. Визначають, де починається та де закінчується HTML-елемент

Теги бувають двох видів: парні й непарні.

Парні теги складаються з відкриваючого і закриваючого тегів. Непарний тег – лише відкриваючий.

Що таке теги?

4 of 14

Більшість тегів мають додаткові властивості або характеристики - атрибути (латин. attribuo —надавати, наділяти), які складаються з пари «назва — значення», розділених між собою знаком рівності та записаних у відкриваючому тегу відразу після назви елемента.

Артибути тегів

5 of 14

Сторінка завжди починається з відкриваючого тегу <html> та закінчується закриваючим тегом </html> і складається з двох обов’язкових блоків — голови (head) та тіла (body), які записуються послідовно.

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

Код HTML

Відображення браузером

6 of 14

В HTML існують шість рівнів заголовків, Найбільший – заголовок першого рівня, найменший – шостого. Позначаются вони відповідно <h1>… <h6>. Заголовки мають атрибут align, який визначає тип вирівнювання на сторінці і може приймати одне з чотирьох значень

Теги заголовків

Значення	Тип вирівнювання
left	За лівим краєм (за замовчуванням)
right	За правим краєм
center	По центру
justify	За шириною (за лівим і правим краєм)

7 of 14

Теги заголовків

8 of 14

Абзаци виділяються парним тегом <p> </p> (від слова «параграф»). Як і теги заголовків, тег параграфу має атрибут align.

Абзаци

9 of 14

Списки можуть бути впорядковані, тобто нумеровані, невпорядковані – марковані та багаторівневі.

Кожен елемент списку виокремлюється парним тегом <li> . Нумерований список позначаєтся парним тегом <ol>, маркований список - парним тегом <ul>.

Списки

Код HTML

10 of 14

В HTML існує спеціальний тег-контейнер для реалізації навігації по сайту - <nav>. Це парний тег, який містить навігаційні посилання.

Для посилання на іншу сторінку використовують парний тег <a>. Тег має обов’язковий атрибут href – значенням якого є назва сторінки з розширенням .html.

Навігація

11 of 14

«Теги в ряд»

12 of 14

Завдання

13 of 14

1. Чи є, на Вашу думку, тема уроку актуальною для сьогодення?

2. Що було найбільш цікавим сьогодні на уроці? А що найменш?

3. Як Ви можете використати знання, набуті на уроці, у майбутньому?

Рефлексія

14 of 14

За матеріалами конспекта і попередньої практичної роботи (створення інформаційної структури сайту) розробити код для HTML-сторінки за власною структурою. У коді має бути як мінімум по одному елементу кожного тегу, вивченого на уроці.

Домашнє завдання