Урок 1

Урок 1: Основи HTML – Ваш перший крок до панування в Інтернеті (Тепер із Caddy сервером!)

Ласкаво просимо, майбутній володар Інтернету! Сьогодні ми зануримось у захоплюючий світ HTML – тої самої таємної зброї, на якій будується кожен сайт. Ви створите свою першу веб-сторінку (так, це насправді!) і, якщо захочете бути ще крутішими, ми навіть покажемо, як розмістити її локально за допомогою Caddy. Але не хвилюйтесь, Caddy – це не обов’язковий інструмент для вивчення HTML, він тут лише для того, щоб ви виглядали ще крутіше. Готові? Тож почнімо!

Крок 1: Що таке HTML?

HTML (Hypertext Markup Language) – це основа кожного вебсайту. Це мова, яка говорить браузерам, як відображати текст, зображення та посилання. Уявіть собі, що це рецепт для вашого сайту: ви додаєте інгредієнти (контент), а HTML показує браузеру, як це приготувати правильно.

Тепер, коли ви знаєте, що таке HTML, давайте закатаємо рукави та почнемо будувати вебсторінку!

Крок 2: Пишемо HTML (Обирайте свій улюблений текстовий редактор)

Перед тим як почати писати код, вам потрібне місце, де ви будете писати свій HTML. Можете відкрити VIM (якщо почуваєтесь як командний лінійний ніндзя), або скористатися VS Code, якщо хочете більш сучасне середовище з великою кількістю функцій. По суті, будь-який текстовий редактор підійде — навіть Notepad, якщо вас тягне до ностальгії (але краще обрати щось із підсвіткою синтаксису, щоб життя було трохи простішим).

Ось базова структура HTML-документа:

<!DOCTYPE html>
<html>
<head>
    <title>Ваша перша вебсторінка</title>
</head>
<body>
    <h1>Привіт, світ!</h1>
    <p>Дивіться, я вже кодую і обслуговую свою сторінку, як профі!</p>
</body>
</html>

Що тут відбувається?

<!DOCTYPE html>: Це говорить браузеру, що документ написаний на HTML5.
<html>: Це як затишна обгортка для всього вашого коду. Усе йде всередину.
<head>: Тут зберігається вся інформація за лаштунками (наприклад, назва сторінки — не дуже цікаво, але важливо).
<title>: Це те, що буде відображатися на вкладці браузера.
<body>: Тут міститься весь видимий контент — текст, зображення тощо.

Тепер, коли у вас є перша вебсторінка, давайте піднімемо ставки та розмістимо її локально!

Крок 3: Встановлюємо Caddy (Бо ви – крутезний)

Чому саме Caddy?

Вам не потрібен Caddy для вивчення HTML, але це крутий спосіб побачити вашу вебсторінку на локальній мережі. Подумайте про це як про останній штрих, який робить вас ще більш вражаючим кодером. До того ж, його надзвичайно просто налаштувати.

Встановлення Caddy на Ubuntu

Оновіть систему:

sudo apt update && sudo apt upgrade -y

Встановіть Caddy:

Введіть цю просту команду:

sudo apt install caddy

Перевірте, чи працює:

caddy version

Ви повинні побачити номер версії. Успіх!

Встановлення Caddy на Arch Linux

Оновіть систему:

sudo pacman -Syu

Встановіть Caddy:

Встановіть Caddy за допомогою pacman:

sudo pacman -S caddy

Перевірте встановлення:

caddy version

Вуаля! Caddy встановлений на Arch Linux. Тепер давайте використаємо його для обслуговування вашої вебсторінки.

Крок 4: Запускаємо вашу першу HTML-сторінку за допомогою Caddy

Створіть директорію для вашого HTML-файлу:

mkdir ~/my-website
cd ~/my-website

Створіть ваш перший HTML-файл:

Збережіть цей код як index.html у вашій папці ~/my-website:

<!DOCTYPE html>
<html>
<head>
    <title>Моя перша сторінка на Caddy</title>
</head>
<body>
    <h1>Ласкаво просимо на мою першу сторінку</h1>
    <p>Ця сторінка обслуговується за допомогою Caddy. Круто, чи не так?</p>
</body>
</html>

Запустіть Caddy:

Перейдіть до вашої папки із сайтом і введіть:

caddy file-server --listen :8080

Caddy тепер обслуговує вашу сторінку на порту 8080. Давайте її переглянемо!

Перегляньте вашу сторінку:

Відкрийте браузер і перейдіть на адресу http://localhost:8080. Ви повинні побачити вашу прекрасну вебсторінку. Гарна робота!

Крок 5: Ваше завдання – Створіть і розмістіть власну вебсторінку

Тепер настав ваш час блищати. Створіть власну вебсторінку та розмістіть її за допомогою Caddy. Додайте:

Жирний заголовок з вашим ім’ям.
Параграф, де ви пояснюєте, чому вивчаєте HTML (щоб підкорити Інтернет, очевидно).
Посилання на ваш улюблений вебсайт (тому що чому б і ні?).

Ось приклад, щоб почати:

<!DOCTYPE html>
<html>
<head>
    <title>Ласкаво просимо на мій крутий сайт</title>
</head>
<body>
    <h1>Привіт, я [Ваше ім'я]</h1>
    <p>Я вивчаю HTML, щоб створити щось велике (або принаймні не зламати свій сайт).</p>
    <a href="https://www.example.com">Погляньте на мій улюблений сайт!</a>
</body>
</html>

Знову запустіть сервер Caddy:

caddy file-server --listen :8080

Відвідайте http://localhost:8080 і насолоджуйтесь своєю роботою. Ви щойно створили та розмістили свою власну вебсторінку!

Підсумок:

Ви опанували основи HTML і створили свою першу вебсторінку.
Ви встановили та використовували Caddy для локального обслуговування вашої вебсторінки (тому що навіщо не показати, на що ви здатні?).
Пам’ятайте, Caddy – це просто для фану, він не є обов’язковим для вивчення HTML. Він тут, щоб ви виглядали ще крутіше.

Наступного разу ми дослідимо більше способів зробити ваші вебсторінки захопливими, від форматування тексту до створення списків. А поки що насолоджуйтеся своєю локально розміщеною вебсторінкою!

HTML Початківці Веб-дизайн Caddy Ubuntu ArchLinux