1. Анатомія або структура HTML-
документу
• <!DOCTYPE html>
• <html> <head>
• <meta charset="utf-8">
• <title>My test page</title>
• </head>
• <body> <p>This is my page</p> </body>
</html>
2. Коментар до тегів
• <!DOCTYPE html>: Доктайп (тип документу).
• В ті часи, коли HTML тільки зароджувався (близько
1991/2), доктайпы (doctypes) використовувалися як
посилання на набір правил, яким HTML-сторінка
повинна була слідувати, щоб вважатись написаною
хорошим HTML-кодом, що може означати
автоматичну перевірку помилок та інші корисні
речі. Доктайп приблизно такий вигляд:<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
3. Коментар
• Проте в наші дні ніхто справді не дбає про
них, і вони насправді є лише історичним
артефактом, який потрібно включити в
документ, щоб той правильно
працював . <!DOCTYPE html> це
найкоротший рядок символів, який
вважається валідним доктайпом; це все, що
дійсно потрібно знати.
4. • <html></html>:
• Елемент <html>. Цей елемент огортає весь зміст
(контент) на всій сторінці, іноді його називають
кореневим (root) елементом.
• <head></head>:
• Елемент <head>. Цей елемент діє як контейнер для
всього матеріалу, який ви хочете включити в
сторінку HTML, але який не є вмістом, що ви
надаєте для перегляду відвідувачам вашої
сторінки. Він включає в себе такі речі, як ключові
слова та опис сторінки, які ви хочете відобразити в
результатах пошуку, CSS, щоб стилізувати вміст
сторінки, оголошення підтримуваного набору
символів
5. • <meta charset="utf-8">:
• Цей елемент встановлює в якості
символьного кодування для вашого
документу UTF-8, що включає більшість
символів з переважної більшості письмових
мов людей. По суті, це дає змогу обробляти
будь-який текстовий вміст, який ви можете
додати до документу. Немає причин не
встановлювати таке кодування, і це
допоможе уникнути деяких проблем
пізніше.
6. • <title></title>:
• Елемент <title>. Цей елемент встановлює назву
вашої сторінки, що є заголовком, який
відображається на вкладці веб-браузера, на
якій завантажується сторінка, і
використовується для опису сторінки під час
додавання/уподобання її.
• <body></body>:
• Елемент <body>. Цей елемент
містить весь контент, який ви хочете показати
веб-користувачам під час відвідування вашої
сторінки, незалежно від того, чи це є текст,
зображення, відео, ігри, відтворювані звукові
доріжки тощо.
7. <img src="images/firefox-icon.png"
alt="Моє тестове зображення">
• цей елемент вставляє зображення на сторінку в тому місці, це воно
має з'явитися. Це відбувається за допомогою атрибута src (source —
джерело), який містить шлях до зображення.
• Також ми додали атрибут alt (alternative). У цьому атрибуті потрібно
вказувати альтернативний текст-опис зображення для тих випадків,
коли користувачі не зможуть побачити картинку, наприклад, через те,
що:
• Мають порушення зору. Користувачі з порушенням зору часто
використовують скрін-рідери, які читають описи зображень.
• Щось пішло не так при завантаженні зображення. Спробуйте
навмисно змінити шлях до зображення в атрибуті src, щоб він став
неправильним. Якщо ви тепер перезавантажите сторінку, ви побачите,
що на місці зображення буде текст:
•
8. Розмітка тексту
Заголовки
• <h1>Мій головний заголовок</h1>
• <h2>Мій важливий заголовок</h2>
<h3>Мій підзаголовок</h3>
• <h4>Мій менш важливий
підзаголовок</h4>
9. Параграфи
• елемент <p> містить частину тексту, яка
становить один абзац. Параграфи
використовуються дуже часто, особливо
при розмітці звичайного текстового
контенту:
• <p>Це один параграф.</p>
10. Списки
• Найпоширеніші типи списків - це нумерований
і ненумерований списки:
• Ненумерований список — це перелік, у якому
порядок пунктів не суттєвий, наприклад,
список покупок. Такий список загортається в
елемент <ul>.
• Нумерований список — це перелік, у якому
порядок пунктів має значення, наприклад,
рецепт приготування. Такий список
загортається в елемент <ol>.
11. Списки
• Кожен пункт всередині списку загортається
в свій окремий елемент <li> (list item).
• перетворити такий параграф у список:
• <p>Mozilla — це глобальна спільнота
технологів, мислителів і творців, які
працюють разом...</p>
12. Списки
• <p>Mozilla — це глобальна спільнота</p>
<ul> <li>технологів</li>
• <li>мислителів</li>
• <li>творців</li>
• </ul> <p>які працюють разом... </p>
13. Посилання
• Посилання дуже важливі — це те, що
робить мережу мережею! Щоб додати
посилання, потрібно використовувати
елемент <a> ("a" скорочено від "anchor" —
якір).
• <a href="https://www.mozilla.org/en-US/ab
• out/manifesto/">Mozilla Manifesto</a>
14. Зауваження
• Не пропускайте частину https:// чи http://
на початку адреси, так званий протокол,
інакше результати можуть бути
неочікуваними. Після того, як елемент
доданий, клікніть на посилання і
переконайтеся, що вас відправило туди,
куди ви хотіли.
