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

🤔 Що таке HTML?

HTML (HyperText Markup Language) — це мова розмітки, яка використовується для створення структури веб-сторінок. Це не мова програмування — HTML просто описує, з яких елементів складається сторінка.

Уяви, що ти будуєш будинок:

🏗️ HTML — це каркас будинку (стіни, кімнати, двері)
🎨 CSS — це дизайн інтер'єру (кольори, шрифти, розташування)
⚡ JavaScript — це електрика та автоматика (інтерактивність)

🦉

Кудик каже:

HTML — це фундамент веб-розробки! Кожен сайт, який ти бачиш — Facebook, Google, YouTube — починається з HTML. Без нього не існує жодної веб-сторінки!

📜 Коротка історія HTML

1991

HTML 1.0

Тім Бернерс-Лі створив першу версію HTML у CERN для обміну науковими документами

1997

HTML 4.0

Додано підтримку CSS, скриптів та фреймів. Став стандартом на багато років

2014

HTML5

Сучасний стандарт з підтримкою відео, аудіо, canvas, семантичних тегів

🔮

Сьогодні

HTML5 постійно оновлюється. Це "живий стандарт", який розвивається разом з вебом

⚙️ Як працює HTML?

HTML використовує теги — спеціальні команди в кутових дужках < >. Теги кажуть браузеру, як відображати контент.

🏷️ Анатомія HTML тегу

Структура тегу

відкриваючий тег        вміст         закриваючий тег
       ↓                   ↓                  ↓
     <p>          Привіт, світе!          </p>
       ↑                                      ↑
  кутові дужки                       слеш = закриття

                            

📝 Основні правила

1️⃣

Парні теги

Більшість тегів мають відкриваючу <tag> та закриваючу </tag> частини

2️⃣

Одиночні теги

Деякі теги самозакриваються: <br>, <img>, <input>

3️⃣

Вкладеність

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

4️⃣

Регістр

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

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

Атрибути додають додаткову інформацію до тегів:

Приклади атрибутів

1
2
3
4
5
6
7
8
9
10
11
<!-- Посилання з атрибутом href -->
<a href="https://koodi.com">Перейти на Koodi</a>

<!-- Зображення з атрибутами src та alt -->
<img src="photo.jpg" alt="Опис фото">

<!-- Елемент з класом та id -->
<div class="container" id="main">
    Контент
</div>

💡

Запам'ятай!

Атрибути завжди пишуться у відкриваючому тезі. Формат: назва="значення". Значення беруться в лапки (подвійні або одинарні).

✨ Магія Emmet: що робить "!"

У VS Code є вбудований інструмент Emmet, який дозволяє писати HTML блискавично швидко. Найкорисніша команда — це ! (знак оклику).

🚀 Як це працює?

1

Створи HTML файл

Створи новий файл з розширенням .html (наприклад, index.html)

2

Напиши ! та натисни Tab

Просто введи символ ! і натисни клавішу Tab

3

Магія! ✨

VS Code автоматично згенерує повну базову структуру HTML5 документа!

📄 Що генерує "!" (Emmet)

index.html — Результат команди !

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

🔍 Розберемо кожен рядок

<!DOCTYPE html>

Декларація типу документа. Каже браузеру, що це HTML5 документ. Завжди йде першим рядком! Це не тег, а інструкція для браузера.

<html lang="en">

Кореневий елемент. Все інше знаходиться всередині цього тегу. Атрибут lang="en" вказує мову сторінки (для України зміни на lang="uk").

<head>...</head>

Голова документа. Містить метадані, які не відображаються на сторінці: заголовок, кодування, підключення CSS/JS, SEO-інформацію.

<meta charset="UTF-8">

Кодування символів. UTF-8 підтримує всі мови світу, включаючи українську 🇺🇦. Без цього кирилиця може відображатися кракозябрами!

<meta name="viewport" content="...">

Налаштування viewport. Робить сторінку адаптивною для мобільних пристроїв. Без цього сайт буде занадто дрібним на телефонах!

<title>Document</title>

Заголовок сторінки. Відображається у вкладці браузера та в результатах пошуку Google. Зміни "Document" на назву своєї сторінки!

<body>...</body>

Тіло документа. Тут розміщується весь видимий контент: текст, зображення, кнопки, форми — все, що бачить користувач!

🦉

Кудик радить:

Завжди починай HTML файл з команди ! — це швидше та без помилок! Потім зміни lang="en" на lang="uk" та напиши свій <title>.

🎯 Інші корисні Emmet команди

div + Tab

<div></div>

p*3 + Tab

3 параграфи

ul>li*5 + Tab

список з 5 пунктів

.container + Tab

<div class="container">

#header + Tab

<div id="header">

a[href=#] + Tab

<a href="#">

img[src=x.jpg] + Tab

<img src alt>

lorem + Tab

Lorem ipsum текст

🏷️ Основні HTML теги

Давай розберемо найважливіші теги, які ти будеш використовувати постійно!

📝 Текстові теги

Текстові теги

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- Заголовки (від найбільшого до найменшого) -->
<h1>Головний заголовок (H1)</h1>
<h2>Підзаголовок (H2)</h2>
<h3>Заголовок секції (H3)</h3>
<h4>Менший заголовок (H4)</h4>
<h5>Ще менший (H5)</h5>
<h6>Найменший заголовок (H6)</h6>

<!-- Параграф тексту -->
<p>Це звичайний параграф тексту. Браузер автоматично додає відступи.</p>

<!-- Форматування тексту -->
<strong>Жирний текст (важливий)</strong>
<em>Курсивний текст (акцент)</em>
<u>Підкреслений текст</u>
<s>Закреслений текст</s>
<mark>Виділений маркером</mark>
<br> <!-- Перенос рядка -->

⚠️

Важливо про H1!

На кожній сторінці має бути тільки один тег <h1> — це головний заголовок. Він важливий для SEO (пошукової оптимізації)!

🔗 Посилання та зображення

Посилання та зображення

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- Посилання на інший сайт -->
<a href="https://google.com">Перейти в Google</a>

<!-- Посилання в новій вкладці -->
<a href="https://koodi.com" target="_blank">Відкрити Koodi</a>

<!-- Посилання на секцію сторінки -->
<a href="#contacts">До контактів</a>

<!-- Зображення -->
<img src="photo.jpg" alt="Опис зображення">

<!-- Зображення з розмірами -->
<img src="logo.png" alt="Логотип" width="200" height="100">

🖼️

Про атрибут alt

Атрибут alt обов'язковий для зображень! Він показується, якщо картинка не завантажилась, і читається скрінрідерами для людей з вадами зору.

📋 Списки

Списки

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- Маркований список (ul = unordered list) -->
<ul>
    <li>Перший пункт</li>
    <li>Другий пункт</li>
    <li>Третій пункт</li>
</ul>

<!-- Нумерований список (ol = ordered list) -->
<ol>
    <li>Крок перший</li>
    <li>Крок другий</li>
    <li>Крок третій</li>
</ol>

<!-- li = list item (пункт списку) -->

📦 Контейнери

Контейнери та семантичні теги

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- Універсальні контейнери -->
<div>Блоковий контейнер (новий рядок)</div>
<span>Рядковий контейнер (в тому ж рядку)</span>

<!-- Семантичні теги HTML5 (кращі для SEO) -->
<header>Шапка сайту</header>
<nav>Навігаційне меню</nav>
<main>Основний контент</main>
<section>Секція/розділ</section>
<article>Стаття/пост</article>
<aside>Бокова панель</aside>
<footer>Підвал сайту</footer>

<!-- Інші корисні теги -->
<hr> <!-- Горизонтальна лінія -->
<button>Натисни мене</button>

🏗️

Семантика важлива!

Використовуй семантичні теги (<header>, <main>, <footer>) замість просто <div>. Це покращує SEO та доступність сайту!

📊 Шпаргалка тегів

📝

Текст

<h1>-<h6>, <p>, <strong>, <em>, <br>

🔗

Медіа

<a>, <img>, <video>, <audio>

📋

Списки

<ul>, <ol>, <li>

📦

Контейнери

<div>, <span>, <header>, <main>, <footer>

🎨 Створюємо першу сторінку!

Тепер давай створимо справжню веб-сторінку — твою особисту візитівку!

🚀 Крок 1: Створи файл

Створи нову папку my-website
Відкрий її в VS Code
Створи файл index.html

📝 Крок 2: Напиши код

index.html — Твоя перша веб-сторінка

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🦉 Моя перша сторінка | Koodi</title>
</head>
<body>
    
    <!-- Шапка сайту -->
    <header>
        <h1>👋 Привіт, я вивчаю HTML!</h1>
        <p>Це моя перша веб-сторінка, створена на курсі Koodi</p>
    </header>

    <!-- Основний контент -->
    <main>
        <section>
            <h2>🎯 Про мене</h2>
            <p>Мене звати <strong>[Твоє ім'я]</strong>. Я вивчаю веб-розробку та мрію створювати круті сайти!</p>
            <p>Мої хобі: <em>програмування, ігри, музика</em></p>
        </section>

        <section>
            <h2>📚 Що я вивчаю</h2>
            <ul>
                <li>✅ HTML — мова розмітки</li>
                <li>⏳ CSS — стилізація сторінок</li>
                <li>⏳ JavaScript — інтерактивність</li>
                <li>⏳ Python — програмування</li>
            </ul>
        </section>

        <section>
            <h2>🔗 Корисні посилання</h2>
            <p>Де я навчаюсь:</p>
            <ul>
                <li><a href="https://koodi.com" target="_blank">Koodi — платформа для навчання</a></li>
                <li><a href="https://developer.mozilla.org" target="_blank">MDN Web Docs</a></li>
            </ul>
        </section>
    </main>

    <!-- Підвал -->
    <footer>
        <hr>
        <p>🦉 Створено з любов'ю на курсі Koodi | 2024</p>
    </footer>

</body>
</html>

👀 Крок 3: Переглянь результат

1

Спосіб 1: Просто відкрий файл

Знайди файл index.html у провіднику та двічі клікни — він відкриється в браузері

2

Спосіб 2: Live Server (рекомендовано)

Встанови розширення Live Server, потім клікни правою кнопкою на файлі → "Open with Live Server". Тепер зміни оновлюються автоматично!

🦉

Кудик радить:

Обов'язково встанови Live Server! Він автоматично оновлює сторінку при кожному збереженні. Економить купу часу!

💪 Практичні завдання

Найкращий спосіб вивчити HTML — практика! Ось завдання для закріплення:

⭐

Завдання 1: Про себе

Створи сторінку-візитівку з інформацією про себе: ім'я, хобі, улюблені фільми, цілі на рік

⭐⭐

Завдання 2: Рецепт

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

⭐⭐⭐

Завдання 3: Блог

Створи просту сторінку блогу з 3 статтями. Кожна стаття має заголовок, дату, текст та посилання "Читати далі"

🏆

Челендж: Портфоліо

Створи сторінку-портфоліо з секціями: Про мене, Мої навички, Мої проєкти, Контакти

🐛 Типові помилки новачків

Уникай цих помилок — вони трапляються майже з усіма початківцями:

❌

Незакриті теги

<p>Текст — забув </p>! Завжди закривай теги, окрім одиночних.

❌

Неправильний порядок

<p><strong>текст</p></strong> — закривай у зворотному порядку!

❌

Кілька H1

На сторінці має бути тільки один <h1>. Для підзаголовків використовуй h2-h6.

❌

Забутий alt

<img src="..."> — завжди додавай alt="" для зображень!

❌

Пробіли в назвах

my file.html — використовуй дефіс: my-file.html

❌

Кирилиця в шляхах

сторінка.html — використовуй латиницю: page.html

✅

Як уникнути помилок

VS Code підсвічує помилки! Якщо бачиш червоне підкреслення — перевір код. Також використовуй validator.w3.org для перевірки HTML.

🎯 Що далі?

Вітаю! Тепер ти знаєш основи HTML! Ось що вивчати далі:

🎨

CSS — стилізація

Навчись робити сторінки красивими: кольори, шрифти, відступи, анімації

📱

Адаптивний дизайн

Зроби так, щоб сайт виглядав добре на телефонах та планшетах

⚡

JavaScript

Додай інтерактивність: кнопки, форми, анімації, динамічний контент

🚀

Публікація

Виклади свій сайт в інтернет через GitHub Pages — безкоштовно!