Первая HTML-страница: от пустого файла до браузера
Создаём папку проекта, сохраняем index.html и проверяем минимальную страницу без сервера.
Подготовьте рабочую папку
Для начала нужны обычный редактор текста и браузер. Создайте папку first-site, а внутри — файл index.html. Убедитесь, что система показывает расширения файлов: index.html.txt останется текстовым файлом, даже если значок выглядит похожим.
Не используйте для HTML текстовый процессор с оформлением документов. В код не должны попадать скрытые стили и служебная разметка. Сохраняйте файл в UTF-8, чтобы русские буквы отображались правильно.
Добавьте структуру
В документе разделены служебная область head и видимая область body. Название вкладки задаёт title, основной заголовок — h1. Они могут быть близки по смыслу, но это разные элементы. Начните с короткой страницы о вашем учебном проекте.
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Мой учебный сайт</title>
</head>
<body>
<main>
<h1>Привет, веб!</h1>
<p>Я учусь создавать понятные страницы.</p>
</main>
</body>
</html>Откройте и измените страницу
Сохраните файл и откройте его в браузере. Пока адрес начинается с file:, документ находится только на вашем компьютере. Измените заголовок в редакторе, сохраните файл и обновите вкладку. Сохранение и обновление — два отдельных действия.
Если виден исходный код вместо страницы, проверьте расширение и способ открытия. Если изменения не появились, убедитесь, что редактируете тот же файл, который открыт в браузере.
Проверьте результат
- Вкладка показывает название из title.
- Русские буквы читаются без искажений.
- На странице один основной заголовок и абзац.
- Смена текста проявляется после сохранения и обновления.
Далее разберём структуру содержимого. Подробности каркаса есть в статье о теге html.