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 для безопасности и управлять серверными настройками.
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ