Основи HTML

План уроку:

• Концепція тегу і атрибуту.

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

• Поняття блокових та рядкових тегів.

• Теги логічної та фізичної розмітки.

• Службові символи.

• Валідація сторінок HMTL.

Про HTML

HTML – (від англ. HyperText Markup Language – мова розмітки гіпертексту) – стандартизована мова розмітки документів у Всесвітньому павутинні.

Більшість веб-сторінок містять опис розмітки HTML. Мова HTML інтерпретується браузерами; отриманий в результаті інтерпретації форматований текст відображається на екрані монітора комп'ютера або мобільного пристрою.

HTML 2.0 – 24 листопада 1995

HTML 3.2 – 14 січня 1997

HTML 4.0 – 18 грудня 1997

HTML 4.01 – 24 грудня 1999

HTML 5.0 – 28 грудня 2014

HTML 5.1 – 1 листопада 2016

Правила

• Усі теги та їх атрибути мають бути набрані у нижньому регістрі.

• Значення будь-яких атрибутів необхідно укладати у лапки.

• Потрібно закривати всі теги, навіть такі, яким не зіставлено тег, що закриває.

• Повинна дотримуватися правильної вкладеності тегів.

• Не можна використовувати скорочені атрибути тегів.

• Замість атрибуту name слід вказувати id.

• Слід визначати DTD за допомогою елемента <!DOCTYPE>

DOCTYPE

DTD – document type definition – опис типу документа

Існує кілька видів <!DOCTYPE>, вони різняться залежно від версії HTML, на яку орієнтовані.

Рядкові елементи

Поняття рядкового елементу

Рядковими називаються елементи, які є частиною іншого елементу і використовуються, як правило, для зміни частини тексту або його логічного форматування. До малих елементів можна віднести: <a>, <span>, <code>

Рядкові елементи можуть застосовуватися для зміни положення шарів.

Різниця між блоковими та малими елементами:

• Рядкові елементи можуть містити лише дані та інші малі елементи.

• Блокові розміщуються з нового рядка, малі ж такого ефекту не мають.

• Ширина малих елементів визначається за їх вмістом, відступами та кордонами.

До малих елементів належать теги <a>, <span>, теги фізичної та логічної розмітки, а також деякі теги, що з'явилися в HTML5.

<a> – тег <a> є контейнером, весь текстовий вміст цього тега є посиланням. У тега є наступні атрибути: href, name, target, title и т.д.

<span> – тег призначений визначення малих елементів документа. За допомогою цього тегу можна виділити частину інформації всередині інших тегів та встановити для неї свій стиль.

Вкладення Блокових та Рядкових елементів

Під час вкладення HTML-тегів потрібно пам’ятати таке емпіричне правило:

• І блокові, і рядкові елементи можуть бути вкладені в блокові елементи

• Рядковий елемент може бути вкладений у блоковий і рядковий елемент

• Блоковий елемент не може бути вкладений у рядковий елемент

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

Теги та спецсимволи

Фізичне форматування тексту – це надання тексту деяких візуальних відмінностей.

Теги фізичного формування:

Теги логічної розмітки

Логічне форматування тексту – форматування тексту, призначене для зручності роботи з ним пошукових систем та інших програм, наприклад, різних читалок.

Теги логічного формування:

Валідація

Валідація – це перевірка документа на відповідність веб-стандартам та виявлення існуючих

помилок. Валідним є такий веб-документ, який пройшов подібну процедуру і не має зауважень

щодо коду. Код веб-сторінки повинен підкорятися певним правилам, які називаються специфікацією,

її розробляє W3 Консорціум за підтримки розробників браузерів.

http://validator.w3.org – ресурс організації W3C для валідації сторінок

Q&A 

Дякую всім за заняття!🙌🏻

❗️🎓Урок 6. Основи HTML

❗️🖥 Матеріали до уроку

❗️📖 Домашня робота до уроку

Нагадую, що дедлайн здачі домашніх робіт – до наступного уроку.

Якщо виникають складнощі, пишіть, допоможу із задоволенням 😌

Запис лекції тренер опублікує трохи пізніше 🖥

Не забудьте повторити матеріал та підготуватися до наступного уроку📚

Успіху і до зустрічі!🤩