Модуль 1. Вступ до вебтехнологій. Структура HTML. Форматування тексту за допомогою HTML

1. ПЛАН КУРСУ
1. Модуль 1. Вступ до вебтехнологій. Структура HTML. Форматування
тексту за допомогою HTML (2 пари)
2. Модуль 2. Форматування за допомогою CSS. Списки. CSS-відступи та
поля (4 пари)
3. Модуль 3. Графіка у вебдизайні. Оптимізація графіки. Гіперпосилання.
Принципи навігації вебсайту (2 пари)
4. Модуль 4. Анімація в CSS3 (2 пари)
5. Модуль 5. Таблиці (2 пари)
6. Модуль 6. Позиціонування. Верстка вебсторінок блоками (2 пари)
7. Модуль 7. Адаптивний дизайн. Flexbox. Grid Layout (4 пари)
8. Модуль 8. Форми. Фрейми (2 пари )

2. Модуль 1.
Вступ до вебтехнологій.
Структура HTML.
Форматування тексту за допомогою
HTML

3. План
1. Вступ до мов розмітки. Мова розмітки гіпертексту HTML.
2. Теги – основний елемент структури HTML. Правила запису тегів і їхніх
атрибутів у стандарті HTML. Синтаксичні відмінності версій HTML.
3. Структура HTML-документа.
4. Кодування сторінки і теги <meta>
5. Класифікація тегів: лінійні і блокові.
6. Модель форматування тексту: заголовки й абзаци. Вирівнювання тексту в
блокових елементах
7. Фізичне та логічне форматування тексту.
8. Основні помилки в записах тегів.
9. Emmet. Прикладивикористання.

4. 1.1 Internet.
Інтернет - це глобальна мережа комп'ютерів та пристроїв, що взаємодіють між собою.
Базується на принципах розподіленості та стандартізації. Основні складові інтернету
включають:
• Клієнт-серверна архітектура: Комп'ютери розділені на дві групи - клієнти і сервери.
Клієнти є кінцевими користувачами які звертаються до серверів для отримання ресурсів
(веб-сторінки, файли чи послуги).
• Протоколи зв'язку: правила передачі даних між пристроями. Найважливіші з них - це
TCP/IP (Transmission Control Protocol/Internet Protocol), які забезпечують надійний обмін
інформацією між пристроями в мережі.
• IP-адресація: Кожен пристрій в інтернеті має унікальну IP-адресу, яка дозволяє
маршрутизаторам та іншим пристроям визначати, куди направляти дані.
• DNS (Domain Name System): система, яка переводить доменні імена (наприклад,
www.example.com) в IP-адреси.
• Програмне забезпечення для обміну даними: програми та служби, такі як веб-
браузери, клієнти для електронної пошти та інші, дозволяють користувачам отримувати
доступ до різних ресурсів в мережі.
• Веб-сервери: Це програми, що надають ресурси (наприклад, веб-сторінки) клієнтам за
запитами через протокол HTTP (Hypertext Transfer Protocol).
Отже: Інтернет забезпечує обмін даними та доступ до різноманітних ресурсів у всьому світі.
Розподілена природа мережі робить її стійкою та ефективною.

5. 1.2 Мова розмітки гіпертексту HTML
HTML - це стандартна мова розмітки для створення веб-сторінок.
HTML розшифровується як Гіпертекстова Мова Розмітки (HyperText Markup Language);
HTML-код описує структуру веб сторінок за допомогою розмітки;
HTML-елементи представляють собою «теги»;
HTML-тегами можуть бути: "Заголовок", "Параграф", "Таблиця", «Маркований список»
і т.д.;
Браузери розуміють теги завдяки процесу, який називається парсинг HTML-документа.
Під час парсингу браузер аналізує HTML-код, розпізнає його структуру та інтерпретує
теги для правильного відображення вмісту на екрані.

6. 1.3 Розвиток HTML
HTML постійно розвивається. Кожна нова версія HTML приносить покращення та доповнення, спрямовані на
полегшення розробки веб-сайтів і розширення функціоналу.
Ключові нововведення у версіях HTML:
HTML 2.0 (1995) - перша офіційна версія HTML, яка визначала базові елементи розмітки для створення простих
веб-сторінок.
HTML 3.2 (1997) - додавання нових тегів та атрибутів, таких як таблиці та форми. Вперше введено підтримку
таблиць.
HTML 4.01 (1999) - додавання семантичних елементів, таких як <header>, <footer>, <nav>. Впровадження CSS
(Cascading Style Sheets) для визначення стилів сторінки.
XHTML 1.0 (2000) - заснований на XML, що вимагало більше суворої синтаксичної правильності. Використання
коротких тегів було заборонено.
HTML5 (2014) - широкий набір нових елементів та атрибутів. Зміни в структурі документа, введення нових тегів
для аудіо, відео, форм, графіки (наприклад, <canvas>). Вбудована підтримка мультимедіа та графіки без
необхідності використання плагінів (наприклад, Adobe Flash). Підтримка локального сховища (Local Storage) для
збереження даних на боці клієнта. Адаптивність та підтримка мобільних пристроїв.
HTML Living Standard (неперервно оновлювана версія) - постійно оновлюється і розширюється для включення
нових функцій та можливостей.
Отже HTML5, зокрема, став широко використовуваною версією і стандартом для багатьох сучасних веб-проектів.

7. 1.4 Крос-браузерність
Кросбраузерність- це однакове відображення і робота сайту в різних браузерах. В різних браузерах HTML-
код може відображається по-різному. Тобто кожний переглядач має свої відмінності в інтерпретації гіпертексту,
що пов'язано з різною реалізацією рушіїв відображення.
Для покращення сумісності сторінки з різними браузерами та їх версіями може використовуватися техніка
CSS-фільтрів, яка полягає у використанні різних файлів каскадних таблиць стилів (CSS) або різних записів у CSS-
файлах залежно від типу та версії браузера.
Браузерний рушій займається завантаженням, обробкою, відображенням і розрахунками даних.
Основнірушії:
Blink - належить компанії Google, має відкритий вихідний код, входить до складу проекту Chromium.
Використовують браузери: Chrome, Opera, Vivaldi і ін.
WebKit - належить компанії Apple, має відкритий вихідний код, використовується в браузері Safari.
Gecko - належить компанії Mozilla, має відкритий вихідний код, використовується в браузерах Firefox і Tor
Browser.
EdgeHTML - належить компанії Microsoft, має програму з закритим кодом використовується в браузері Edge.
Прийшов на зміну рушію Trident (використовувався в Internet Explorer), з запуском Windows 10. 15 січня 2020
року Microsoft випустила оновлення для браузера Edge (Microsoft Edge 79 stable), в якому перейшла на
Chromium з браузерним движком Blink.

8. 1.5 W3C
W3C (англ. World Wide Web Consortium) є міжнародною
організацією, що розробляє та встановлює стандарти для всесвітньої
павутини.
Основні функції W3C включають:
• Розробка стандартів. W3C визначає і розробляє стандарти для
веб-технологій, таких як HTML, CSS, XML, та багатьох інших. Ці
стандарти допомагають забезпечити сумісність та однаковий
вигляд веб-сторінок на різних пристроях та браузерах.
• Тестування та валідація. W3C надає інструменти для тестування
та валідації веб-сторінок, щоб переконатися, що вони
відповідають встановленим стандартам (validator.w3.org).

9. 2 Теги – основний елемент структури HTML
HTML елемент визначається початковим тегом, деяким вмістом і кінцевим тегом:
<p> Мій перший параграф. </p>
Деякі HTML елементи не мають вмісту (наприклад, елемент <br>). Ці елементи
називаються порожніми елементами. Порожні елементи не мають кінцевого тега.
Деякі (поодинокі) теги можуть не зберігати в собі вміст безпосередньо. Однак їх
вміст прописується у значеннях атрибута, наприклад, тег для створення кнопки з
текстом «Кнопка» всередині.
<input type="button" value="Кнопка">
HTML-елементи можуть мати атрибути. Атрибути прописуються у початковому
тезі елемента і містять ім'я та значення. Атрибути дозволяють змінювати властивості і
поведінку елемента, для якого вони задані. В попередньому прикладі type та value –
атрибути.
Початковий тег Вміст Кінцевий тег
Атрибут Значення Атрибут Значення

10. 3 Структура HTML-документа
Елементи, що знаходяться всередині тега <html>, утворюють дерево документа,
так звану об'єктну модель документа, DOM (document object model). При цьому
елемент <html> є кореневим елементом.

11. Візуалізація структури сторінки HTML

12. 4.1 <!DOCTYPE html>
Оголошення <!DOCTYPE> відповідає за тип документу, що в свою чергу впливає на
коректне відображення веб-сторінки браузером. <!DOCTYPE> повинен з’являтися
лише один раз у верхній частині сторінки (перед будь-якими тегами HTML).
Декларація <!DOCTYPE> не чутлива до регістру.
Версії DOCTYPE (https://www.w3.org/wiki/Doctypes_and_markup_styles)
Приклади використання:
DOCTYPE для HTML 5: <!DOCTYPE html>
DOCTYPE для HTML 4.01 Strict (підтримує всі актуальні для DTD HTML 4.01 елементи
та атрибути, окрім застарілих. Фреймсети не допускаються.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
DOCTYPE визначає не тільки версію HTML (наприклад, html), але і відповідний DTD-
файл (Document Type Definition, або DTD) в Інтернеті.

13. 4.2 Тег <meta>
Мета-теги — призначені для зазначення структурованих метаданих про вебсторінку (службової інформації
для браузерів та роботів пошукових систем). Впливають на різні аспекти відображення, інтерпретації та
індексації веб-сторінок браузерами та пошуковими системами.
Повідомлення браузеру відвідувача, який набір символів і яке кодування необхідно встановити на веб-
сторінці: <metacharset="UTF-8">
Налаштування параметрів відображення сторінки на мобільних пристроях:
<metaname="viewport"content="width=device-width, initial-scale=1" />
Опис вебсторінки: <metaname="description"content="Це опис вашого веб-сайту">
Зазначення ключових слів вебсторінки:
<metaname="keywords"content="ключове слово 1, ключове слово 2, ключове слово 3">
Зазначення автора вебсторінки: <meta name="author" content="Ім'я Автора">
Указання автоматичного перенаправлення сторінки (часу в секундах та адреси):
<metahttp-equiv="refresh" content="5;URL=https://www.example.com">
Зазначення сумісності з різними версіями Internet Explorer: <meta http-equiv="X-UA-Compatible"
content="IE=edge">
Відключення кешування сторінки: <metahttp-equiv="cache-control"content="no-cache">
Окремі мета-теги (наприклад expires, cache-control, refresh) встановлюються серверною частиною сайту за
допомогою відправлення відповідних заголовків HTTP-відповіді сервера.

14. Символьні підстановки
Не всі символи можна набрати на клавіатурі. Наприклад, символ зареєстрованого торгового знаку ®,
торгової марки ™, авторського права ©. Для введення подібних знаків використовують символьні підстановки.
Символьні підстановки - це спеціальні рядки, що перетворюються браузерами в символи. Підстановку в
HTML-коді можна здійснити декількома способами:
&мнемокод; - вставлення символу за його «мнемокодом», тобто іменем;
&#КОД10; - вставлення символу за його десятковим кодом;
&#xКОД16; - вставлення символу за його шістнадцятковим кодом.
Наприклад, символ авторського права © можна додати наступним чином:
&copy; чи &#169; чи &#xa9;
Тобто HTML-код :
<p> &copy; “All rights reserved” </p>
Відобразить на сторінці:
А CSS-стилі для невпорядкованого списку:
ul {
list-style-type: ' 2611';
}
Стилізують цей список таким чином:

15. Символьні підстановки
Існує офіційна сторінка W3C і сервіс від Toptal, де можна знайти HTML-коди чи
мнемоніку для будь-якого символу.
Якщо використовується CSS для відображення цих символів у HTML, то потрібно
використовувати коди сутностей CSS
Знак HTML-code CSS-code Знак HTML-code CSS-code Знак HTML-code CSS-code
® &reg; ‘ 00AE‘ © &copy; ‘ 00A9 ‘ < &lt; ‘ 003C‘
™ &trade; ‘ 2122‘ § &sect; ‘ 00A7‘ > &gt; ‘ 003E‘
☐ &#9744; ‘ 2610‘ ☑ &#9745; ‘ 2611‘ ✓ &check; ‘ 2713‘
∩ &cap; ‘ 2229 ‘ π &pi; ‘ 213C‘ × &times; ‘ 00D7‘

16. 5 Класифікація елементів. Блокові та лінійні теги
Теги HTML можна класифікувати за характером їх
відображення в структурі веб-сторінки. Дві основні категорії
тегів в цьому контексті - це лінійні (інлайнові) та блокові.
Блокові (display: block;) як правило:
- займають всю ширину доступного простору (від лівого
до правого краю).
- починаються і завершуються новим рядком.
Типовий представник блокових тегів є тег <div>
Інші блокові теги:
<address> <article> <aside> <blockquote> <canvas> <dd>
<div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form>
<h1>-<h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <p>
<pre> <section> <table> <tfoot> <ul> <video>

17. 5 Лінійні елементи
Лінійні (чи вбудовані) (display: inline;) теги не відображаються браузером з нового
рядка, під відображення таких тегів виділяється тільки частина рядка (line)
Типовим представником вбудованих тегів є тег <span>.
Інші рядкові (inline) елементи:
<a> <abbr> <b> <bdo> <br> <button> <cite> <code> <dfn> <em> <i> <img> <input>
<kbd> <label> <map> <object> <output> <q> <samp> <script> <select> <small> <span>
<strong> <sub> <sup> <textarea> <time> <tt> <var>
!!! Лінійний тег не може містити в собі блоковий тег!

18. 6 Заголовки та абзаци
Заголовки HTML позначаються тегами від <h1> до <h6>
<h1> означає найважливіший заголовок.
<h6> означає найменш важливий заголовок.
<h1>Heading 1</h1>
<h3>Heading 3</h3>
Елемент HTML <p> визначає абзац.
Абзац завжди починається з нового рядка, і браузери автоматично додають
деякий пробіл (поле) перед і після абзацу.
<p>This is a paragraph.</p>
Вирівняти текс у заголовках та абзацах можливо за допомогою CSS-
властивості text-align:
h1, p {
text-align: center;
}

19. Одинарні та подвійні лапки
Подвійні лапки навколо значень атрибутів є найпоширенішими в HTML,
але також можна використовувати одинарні лапки.
У деяких ситуаціях, коли саме значення атрибута містить подвійні лапки,
необхідно використовувати одинарні лапки:
<p title='John "ShotGun" Nelson'>
Або навпаки:
<p title="John 'ShotGun' Nelson">

20. Горизонтальні лінії та розрив рядків
Тег <hr> визначає тематичну перерву в HTML - сторінки, і найбільш часто
відображаються у вигляді горизонтальної лінії, тобто використовується для поділу
контенту (або для визначення зміни контенту) у HTML - сторінці:
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
Елемент HTML <br> визначає розрив рядка.
Тег <br> якщо потрібно почати новий рядок без початку нового абзацу.
Тег <br> порожній, це означає, що він не має кінцевого тега.

21. 8 Фізичне та логічне форматування тексту
Фізичне форматування тексту визначає способи
його відображення на екрані (жирний, курсив,
малий, ...).
Логічне форматування тексту визначає
семантичне значення тексту, вказуючи на його роль
та важливість у контексті документа.
Теги для фізичного форматування тексту:
<b> визначає жирний текст
<i> визначає текст, написаний курсивом
<small > визначає менший текст
<sub> визначає текст у нижньому індексі
<sup> визначає текст у верхньому індексі

22. 8 Фізичне та логічне форматування тексту
Теги для логічного форматування тексту:
<strong> використовується для вирізнення тексту, який
має ключовий сенс або важливість (виглядає аналогічно до
жирного)
<em> визначає тексту, який має емоційну або семантичну
важливість (виглядає аналогічно до курсиву)
<abbr> визначає абревіатуру ( наприклад HTML ).
<abbr title="HyperText Markup Language"> HTML </abbr>
<ins> визначає вставлений текст
<del> визначає видалений текст
<mark> визначає позначений/виділений текст
<dfn> використовується для побудови визначень в тексі
(виглядає як курсив)
<dfn>HTML</dfn> is the standard markup language for
creating web pages.

23. Преформатований текст та комп’ютерний код
Тег <pre> визначає попередньо відформатований текст.
Текст всередині <pre> елемента відображається шрифтом фіксованої ширини (зазвичай
Courier), і він зберігає як пробіли, так і розриви рядків
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre>
Інші теги, для представлення коду програм:
<code> визначає частину комп'ютерного коду;
<samp> визначає зразок виведення з комп’ютерної програми;
<var> визначає змінну;
<kbd> використовується для опису комбінації клавіш на клавіатурі.

24. 8 Основні помилки при написанні коду HTML
Термін Well-formed HTML вказує на те, що HTML-код відповідає основним синтаксичним правилам,
визначеним для мови розмітки та застосовується до правильно структурованого HTML-документу, який
відповідає стандартам і не має синтаксичних помилок.
Основні синтаксичні помилки при написанні HTML:
• не вказаний елемент <!DOCTYPE>
• неправильне закривання тегів ( <div><p>Це тег <p> не закритий правильно.</div>)
• відсутній кінцевий тег (<head> <title> Тема </head>)
• неправильне вкладення (<div> Неправильне <p> вкладення </div> </p>)
• порушення порядку тегів (блоковий тег розташовується всередині вбудованого:
<span><div>Текст</div></span>)
• відсутність обов’язкових атрибутів (відсутній атрибут href у тегу <a>, відсутній атрибут src у тегу <img>,)
• неправильне використання одинарних та подвійних лапок (неправильно: ' " ' " чи " ' " ', правильно: " ‘ '
" чи ' " " ')
• тег містить атрибут, в якому задано невірну кількість лапок (<p id="my_id"">).
• відсутність обов'язкового тегу в структурі елементів (пропущений тег <tr> і відразу ж після <table>
вказано <td>)
• теги або текст додаються після закритого тега </body>
• повторюється тег, який в коді повинен бути тільки один (<html> , <head> , <title>, <body>)

25. Коментарі в HTML та CSS
Для того, щоб залишити коментар в коді HTML (пояснення для себе чи для інших
розробників). Коментарі не змінюють поведінки коду сторінки.
В HTML використовують синтаксис:
<!-- Певне роз’яснення функціоналу коду сторінки -->
В CSS використовують синтаксис:
/* Певне роз’яснення функціоналу коду сторінки */
У VSCode відкриваємо меню «Edit»:
- «Toggle Line Comment (Ctrt + /)» (коментар з повного рядка коду, чи повних кількох
рядків)
- «Toggle Block Comment (Ctrt + Shift + A)» (коментар з виділеного фрагмента коду, тобто
можливо навіть з частини рядка коду)
Коментарі також використовують для тимчасового відключення певної частини коду
при його відналагодження.

26. Emmet. Створення базової структури
Щоб створити базову структуру html, напишіть символ ! і натисніть
клавішу Tab. В результаті файл заповниться таким вмістом:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body></body>
</html>

27. Emmet. Приклади використання
Дочірній елемент
Оператор >дозволяє вкладати один елемент в інший:
div>ul>li→
<div>
<ul>
<li></li>
</ul>
</div>
Сусідний елемент
Оператор +дозволяє розмістити елементи поряд один з
одним на одному рівні:
div+p+bq→
<div></div>
<p></p>
<blockquote></blockquote>
Повторення
Оператор *дозволяє визначити, скільки разів повинен
виводитись елемент:
ul>li*3→
<ul>
<li></li>
<li></li>
<li></li>
</ul>

28. Emmet. Приклади використання
Угруповання
Круглі дужки дозволяють виділити в абревіатурі окремі вітки
тегів:
div>(header>ul>li*2>a)+footer>p→
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
Вказання класу та id
Оператор . дозволяє вказати клас. Оператор # призначений
для вказання id:
div#header+div.page+div#footer.class1.class2.class3→
<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2
class3"></div>

29. Emmet. Приклади використання
Нумерація
Оператор $дозволяє створювати нумерацію. Для цього
помістіть оператор після імені елемента, імені атрибута або
значення атрибута:
ul>li.item$*3→
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
Ви можете використовувати кілька операторів $поспіль, щоб
доповнити номер нулями:
ul>li.item$$$*3→
<ul>
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
</ul>

30. Підсумок
На занятті:
Ознайомилися з тим, що собою являє InterNet
Вивчили призначення та ключові версії HTML
Взнали що таке крос-браузерність
Навчилися валідувати HTML-код
Ознайомилися з тегами (основними елементами структури HTML)
Вивчили структуру HTML-документа
Вивчили призначення оголошення <!DOCTYPE html>
Вивчили призначення тегів <meta>
Навчилися використовувати символьні підстановки
Ознайомилися з класифікацією елементів (блокові та лінійні елементи)
Навчилися використовувати теги заголовків та абзаців
Навчилися використовувати одинарні та подвійні лапки
Навчилися використовувати горизонтальні лінії та розрив рядків
Вивчили теги для фізичного та логічного форматування тексту
Навчилися використовувати преформатований текст та комп’ютерний код
Вивчили основні помилки при написанні коду HTMLКоментарі в HTML та CSS
Навчилися користуватися сніпетом Emmet

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