Навчальний сайт

HTML — основа сучасного вебу

HTML створює структуру вебсторінки: заголовки, абзаци, списки, зображення, посилання та форми.

Теоретична частина

Що таке HTML?

Структура

HTML описує логічну будову сторінки та порядок її елементів.

Простота

Першу сторінку можна створити у звичайному текстовому редакторі.

Веброзробка

Разом із CSS та JavaScript HTML є основою сучасних сайтів.

Приклад

Базова структура документа

<!DOCTYPE html>
<html lang="uk">
<head>
    <title>Моя сторінка</title>
</head>
<body>
    <h1>Привіт, світ!</h1>
    <p>Це моя перша вебсторінка.</p>
</body>
</html>

Основні HTML-теги

Тег	Призначення	Приклад
<h1>	Головний заголовок	<h1>Заголовок</h1>
<p>	Абзац тексту	<p>Текст</p>
<a>	Посилання	<a href=”#”>Сайт</a>
<img>	Зображення	<img src=”image.jpg”>
<ul>	Маркований список	<ul>…</ul>
<button>	Кнопка	<button>Натисни</button>

Практична частина

Створи свою першу сторінку

Виконай завдання крок за кроком і закріпи основні HTML-теги на практиці.

Базова структура

Створи документ із doctype, html, head і body. Додай title.

Зміст

Додай h1, два абзаци, зображення img і посилання a.

Список і кнопка

Створи список ul з трьох пунктів і кнопку button.

Оформлення

Підключи CSS, задай кольори, відступи та адаптивність.

Шаблон для старту

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <title>Моя сторінка</title>
</head>
<body>
    <h1>Привіт, веб!</h1>
    <p>Це моя перша сторінка.</p>
</body>
</html>

Перевір себе

Тест з HTML

12 запитань для відвідувачів сайту. Обери один варіант у кожному питанні.

Дивись і повторюй

Відеоуроки українською

Добірка відео про HTML для знайомства з розміткою, тегами та першою вебсторінкою.

HTML для початківців

Знайомство зі структурою HTML-документа.

Основні HTML-теги

Практичний огляд заголовків, абзаців, посилань і списків.

Відео завантажуються з YouTube. Для перегляду потрібен інтернет.

Візуальний словник

Галерея HTML

Розглянь тематичні ілюстрації та відкрий окремі внутрішні сторінки з поясненнями.

Код і редактор

Місце, де текст перетворюється на структуру сторінки.

Семантичні елементи

Теги описують зміст і допомагають браузеру його зрозуміти.

Форми та взаємодія

HTML створює основу для полів, кнопок і користувацьких сценаріїв.

Підсторінка галереї

Основа HTML-документа

HTML має службову частину head і видимий вміст body.

Три ключові рівні

html є коренем документа, head містить метадані, а body містить елементи, які бачить відвідувач.

<html lang="uk">
  <head>...</head>
  <body>...</body>
</html>

Підсторінка галереї

Семантичні елементи

Семантичні теги пояснюють роль частин сторінки людям, пошуковим системам і допоміжним технологіям.

Елемент	Роль
<header>	Вступна частина сторінки або розділу
<nav>	Основна навігація
<main>	Головний унікальний зміст
<article>	Самостійний матеріал
<footer>	Завершальна інформація

Підсторінка галереї

HTML-форми

Форми збирають дані відвідувача за допомогою полів, списків, перемикачів і кнопок.

Основні поля

input підходить для коротких значень, textarea для розгорнутого тексту, а select для вибору варіанта.

<label for="email">Пошта</label>
<input id="email" type="email" required>
<button type="submit">Надіслати</button>

Твій навчальний профіль

Реєстрація

Заповни форму, щоб почати власний маршрут вивчення HTML.

Прозорість матеріалів

Використані джерела

Посилання, які допомогли підготувати теоретичний, практичний і візуальний матеріал.

MDN Web Docs: Основи HTML — структура документа та базові елементи.
WHATWG HTML Living Standard — специфікація HTML.
W3C: Вступ до вебдоступності.
Unsplash — фотографії для галереї.
YouTube — відеоматеріали.