Перші Кроки з HTML

Ласкаво просимо до першого уроку HTML.

Сьогодні починаємо з нуля.

Без framework-ів.

Без JavaScript.

Без складних build-інструментів.

Тільки один простий HTML-файл і браузер.

Красиво.

Підозріло просто.

Що Ти Вивчиш

У цьому уроці ти дізнаєшся:

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

Що Таке HTML?

HTML означає:

HyperText Markup Language

Звучить дуже серйозно.

Але ідея проста:

HTML описує структуру вебсторінки.

Він каже браузеру, що означає кожна частина сторінки.

Наприклад:

Це заголовок.
Це абзац.
Це посилання.
Це зображення.

HTML не робить сторінку красивою.

Це переважно робота CSS.

HTML не робить сторінку інтерактивною.

Це переважно робота JavaScript.

HTML — це скелет.

Без нього вебсторінка не має структури.

А сайт без структури — це як шафа, зібрана опівночі без інструкції.

Можливо, але небезпечно.

Створи Папку для Практики

Відкрий термінал і створи папку для практики HTML:

mkdir -p ~/html-practice
cd ~/html-practice

Тепер створи файл index.html:

touch index.html

Відкрий його у своєму редакторі.

Наприклад, якщо використовуєш VS Code:

code index.html

Або використовуй будь-який редактор, який тобі зручний.

Головне, щоб файл називався:

index.html

Це типова назва головної сторінки сайту.

Твоя Перша HTML-Сторінка

Додай цей код у index.html:

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

Збережи файл.

Вітаю.

Ти написав свою першу HTML-сторінку.

Без феєрверків.

Але браузер уже готовий.

Відкрити Сторінку в Браузері

Можна відкрити файл напряму в браузері.

Знайди файл і відкрий його.

Або з термінала, якщо твоя система це підтримує:

xdg-open index.html

Ти маєш побачити:

Привіт, HTML!
Це моя перша вебсторінка.

Браузер читає HTML і перетворює його на вебсторінку.

Це базова магія.

Не темна магія.

Просто браузерна магія.

Розуміння Коду

Подивімось на сторінку частинами.

Цей рядок каже браузеру, що це HTML-документ:

<!DOCTYPE html>

Цей рядок відкриває HTML-документ:

<html lang="uk">

Ця частина містить інформацію про сторінку:

<head>
  <meta charset="UTF-8">
  <title>Моя Перша HTML-Сторінка</title>
</head>

title показується у вкладці браузера.

Ця частина містить видимий контент:

<body>
  <h1>Привіт, HTML!</h1>
  <p>Це моя перша вебсторінка.</p>
</body>

Усе всередині body — це те, що користувач бачить на сторінці.

Заголовки й Абзаци

Тег h1 створює головний заголовок:

<h1>Привіт, HTML!</h1>

Тег p створює абзац:

<p>Це моя перша вебсторінка.</p>

HTML-теги зазвичай ідуть парами:

<p>Відкриваючий тег, контент, закриваючий тег.</p>

Відкриваючий тег:

<p>

Закриваючий тег:

</p>

Символ / означає, що елемент закінчується.

HTML любить, коли речі закриті правильно.

На відміну від деяких людей із вкладками браузера.

Зміни Контент

Тепер зміни свою сторінку:

<body>
  <h1>Мій Перший Сайт</h1>
  <p>Привіт! Я вивчаю HTML крок за кроком.</p>
  <p>Ця сторінка проста, але вона справжня.</p>
</body>

Збережи файл.

Онови браузер.

Ти маєш побачити новий текст.

Базовий workflow такий:

редагуй файл
збережи файл
онови браузер
подивись результат

Просто.

Чесно.

Без загадкової build-помилки з іншої планети.

Опціонально: Запустити Сторінку через Caddy

Відкривати файл напряму — нормально.

Але можна також запустити папку як маленький локальний сайт.

Якщо у тебе встановлений Caddy, запусти це всередині ~/html-practice:

caddy file-server --listen :8080

Потім відкрий:

http://localhost:8080

Це корисно, бо більше схоже на роботу справжніх сайтів.

Твій комп’ютер стає маленьким вебсервером.

Дуже маленьким.

Дуже гордим.

Типові Помилки

Забути Зберегти

Якщо ти змінив файл, але браузер не змінився, спочатку збережи файл.

Браузер не читає твої думки.

HTML теж.

Неправильне Розширення Файлу

Це правильно:

index.html

Це не те саме:

index.txt
index.html.txt

Файл має закінчуватися на .html.

Відсутні Закриваючі Теги

Так краще:

<p>Привіт, світе.</p>

А це вже хаос:

<p>Привіт, світе.

Браузери багато пробачають, але не зловживай їхньою добротою.

Терпеливий браузер — не причина писати хаотичний HTML.

Практика

Створи сторінку з:

одним головним заголовком;
двома абзацами;
своїм іменем або nickname;
одним реченням про те, чому ти хочеш вивчати HTML.

Приклад:

<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <title>Про Мене</title>
</head>
<body>
  <h1>Про Мене</h1>
  <p>Привіт, мене звати Viktor.</p>
  <p>Я вивчаю HTML, бо хочу створювати сайти.</p>
</body>
</html>

Зміни текст на свій.

Не просто копіюй.

HTML краще вивчається, коли пальці трохи страждають.

Міні-Завдання

Створи новий файл:

touch about.html

Всередині створи другу сторінку з:

title у вкладці браузера;
заголовком h1;
трьома абзацами;
одним реченням: “Це моя друга HTML-сторінка.”

Відкрий її в браузері.

Ти щойно створив більше ніж одну HTML-сторінку.

Небезпечний прогрес.

Підсумок

Сьогодні ти дізнався, що:

HTML означає HyperText Markup Language;
HTML описує структуру вебсторінки;
HTML-файл зазвичай закінчується на .html;
index.html часто є головною сторінкою;
head містить інформацію про сторінку;
body містить видимий контент;
h1 створює головний заголовок;
p створює абзац;
базовий workflow — редагуй, збережи, онови.

Ти створив свою першу вебсторінку.

Маленька сторінка.

Великий початок.

Наступний Урок

У наступному уроці ми уважніше розберемо структуру HTML-документа.

Зрозуміємо DOCTYPE, html, head, body, meta і чому браузери цінують хорошу структуру.