1. Навіщо нам сайт на HTML?
Ласкаво просимо у захоплюючий світ веб-розробки! Сьогодні ми будемо створювати простий статичний HTML-сайт і розміщувати його на веб-сервері, який ти налаштував у попередніх лекціях. Навіть якщо ти ніколи раніше не писав HTML-код, не хвилюйся – усе буде максимально зрозуміло. Наше завдання – не лише зрозуміти основи HTML, а й навчитися робити свій сайт доступним для світу за допомогою веб-сервера.
І тепер ми зробимо наступний крок – створимо власний сайт на HTML і налаштуємо його відображення за допомогою твого веб-сервера. Готовий підкорювати веб-простір? Тоді почнемо!
HTML (HyperText Markup Language) – це основа всіх веб-сторінок. Він відповідає за структуру та вміст сайту. У стандартному HTML можна описати заголовки, текст, зображення, посилання й навіть таблиці. Він простий у вивченні, але достатньо потужний, щоб стати базою будь-якого сайту.
У реальному світі навички роботи зі статичними HTML-сторінками корисні у найрізноманітніших ситуаціях:
- Швидке створення прототипів веб-додатків.
- Написання та тестування статичних сторінок для документації.
- Підготовка базового інтерфейсу для серверних додатків.
А ще HTML – чудовий спосіб скласти резюме у формі веб-сторінки (так-так, рекрутери іноді це люблять). Ну а для нас, як програмістів, знання базового HTML просто must-have.
2. Крок 1. Основи HTML: створюємо свою першу сторінку
Програмування — це як LEGO: улюблена справа усіх поколінь. Почнемо з невеликого "цеглинки" — нашої першої веб-сторінки.
Мінімальний приклад HTML-документа
Створіть файл з ім'ям index.html у будь-якому текстовому редакторі (наприклад, nano, vim чи навіть gedit, якщо вам хочеться трохи графіки) та напишіть наступний код:
<!DOCTYPE html>
<html>
<head>
<title>Мій перший сайт</title>
</head>
<body>
<h1>Привіт, світе!</h1>
<p>Це моя перша веб-сторінка на HTML.</p>
</body>
</html>Пояснення коду
<!DOCTYPE html>– повідомляє браузеру, що ми використовуємо HTML5.<html>– відкриває весь документ. Увесь вміст сторінки знаходиться всередині цього тегу.<head>– секція для метаінформації про сайт (наприклад, заголовок сторінки, підключення стилів чи скриптів).<title>– назва сторінки, що відображається на вкладці браузера.<body>– основна секція, де розташовується увесь видимий контент.<h1>– заголовок сторінки першого рівня (чим менше цифра, тим більший заголовок).<p>– абзац тексту.
Так, це лише сім рядків, але саме вони стануть базою для вашого сайту!
3. Крок 2. Розміщуємо HTML-сайт на сервері
Тепер, коли наша сторінка готова, час показати її світу. Для цього використовуємо наш веб-сервер.
Підготовка папки сайту
Створіть директорію для зберігання файлів вашого сайту. Якщо ви, наприклад, хочете розмістити сайт на віртуальному хості з доменом example.com, то виконайте:
sudo mkdir -p /var/www/example.com
Потім перемістіть ваш файл index.html у цю папку:
sudo cp index.html /var/www/example.com/
Справжня магія починається – файл готовий до роботи.
4. Крок 3. Налаштування веб-сервера для обслуговування сайту
Конфігурація для Nginx
Відкрийте файл конфігурації віртуального хоста:
sudo nano /etc/nginx/sites-available/example.comВставте наступну конфігурацію:
server { listen 80; server_name example.com; root /var/www/example.com; index index.html; location / { try_files $uri $uri/ =404; } }Активуйте віртуальний хост та перезапустіть сервер:
sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/ sudo nginx -t sudo systemctl reload nginx
Конфігурація для Apache
Відкрийте файл конфігурації віртуального хоста:
sudo nano /etc/apache2/sites-available/example.com.confВставте наступну конфігурацію:
<VirtualHost *:80> ServerName example.com DocumentRoot /var/www/example.com <Directory /var/www/example.com> Options Indexes FollowSymLinks AllowOverride All Require all granted </Directory> </VirtualHost>Активуйте віртуальний хост та перезапустіть сервер:
sudo a2ensite example.com.conf sudo systemctl restart apache2
Перевірка сайту
Тепер відкрийте ваш браузер, введіть http://example.com (або IP-адресу вашого сервера) і насолоджуйтесь результатом. Якщо ви бачите ваше прекрасне "Привіт, світ!" – вітаю, усе працює!
5. Крок 4. Прикрашаємо наш сайт
Статика – це, звісно, добре, але трохи CSS нікому не завадить. Давайте додамо трішки стилю.
Додайте новий файл style.css у ту ж папку /var/www/example.com/:
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
color: #333;
}
h1 {
color: #ff5722;
}Тепер оновіть ваш index.html, додавши посилання на CSS:
<!DOCTYPE html>
<html>
<head>
<title>Мій перший сайт</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Привіт, світе!</h1>
<p>Це моя перша веб-сторінка на HTML.</p>
</body>
</html>Після перезавантаження сторінки ви побачите невеликі зміни у стилі. Тепер ваш сайт став трішки симпатичнішим!
6. Типові проблеми та їх вирішення
Під час роботи з веб-сайтами можна зіткнутися з рядом проблем, але не хвилюйся, ми підготувалися:
Помилка "403 Forbidden". Перевір права на папку сайту. Використовуй:
sudo chmod -R 755 /var/www/example.comПомилка "404 Not Found". Переконайся, що файли сайту знаходяться у правильній папці та мають відповідні назви.
Сайт не відображається. Перевір, що служба твого веб-сервера запущена:
sudo systemctl status nginx sudo systemctl status apache2
Тепер твій сайт доступний усім, хто знає його адресу. Хіба це не надихає? У наступних лекціях ти навчишся ще більшому: додавати HTTPS для безпеки та керувати серверними налаштуваннями.
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ