Урок 1. Первая страница на HTML

В этом уроке появится ваша первая веб-страница. Понадобятся только редактор и браузер, интернет не нужен.

Шаг 1. Редактор

HTML-страница — обычный текстовый файл. Писать её можно в любом редакторе простого текста, но удобнее в редакторе кода: он подсвечивает теги разными цветами, сам закрывает их и подсказывает имена.

• Visual Studio Code — бесплатный, для Windows, macOS и Linux. Скачивается с официального сайта.
• Notepad++ — бесплатный, только для Windows.
• «Блокнот» в Windows или «Текстовый редактор» в Linux — тоже подойдут для первых опытов.

Шаг 2. Папка и файл

Создайте папку для сайта, например site на рабочем столе. Все файлы сайта — страницы, картинки, стили — будут лежать в ней.

В редакторе создайте новый файл (Ctrl+N) и сразу сохраните его (Ctrl+S) в эту папку под именем index.html. Расширение .html говорит системе, что это веб-страница. Имя index выбрано не случайно: так называют главную страницу сайта, и сервер в интернете открывает её первой.

Шаг 3. Код страницы

Наберите в файле:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Первая страница</title>
</head>
<body>
  <h1>Привет, мир!</h1>
  <p>Это первая страница, написанная на HTML.</p>
</body>
</html>

Сохраните файл. В VS Code набирать заготовку целиком не обязательно: в пустом файле .html наберите ! и выберите появившуюся подсказку клавишей Enter — встроенный помощник Emmet вставит заготовку сам. Поменяйте в ней lang="en" на lang="ru".

Шаг 4. Откройте в браузере

Дважды щёлкните по index.html в папке — файл откроется в браузере по умолчанию. Можно и перетащить файл в окно браузера. В адресной строке будет адрес вида file:///C:/Users/.../site/index.html: страница открыта с диска.

Теперь поменяйте текст в редакторе, сохраните файл и обновите страницу в браузере клавишей F5. Так и идёт работа: правка — сохранение — обновление. Самая частая ошибка новичка — забыть сохранить файл и удивляться, что ничего не изменилось.

Как устроена страница

HTML состоит из тегов — слов в угловых скобках. Большинство тегов парные: открывающий <p> и закрывающий </p> с косой чертой. Вместе с текстом между ними они образуют элемент — здесь абзац.

Что значит каждая строка:

• <!DOCTYPE html> — объявление: это современный HTML. Без него браузер включает режим совместимости со старыми страницами и может показывать их иначе.
• <html lang="ru"> — корневой элемент, внутри него всё остальное. lang="ru" сообщает язык страницы: по нему программы чтения с экрана выбирают произношение, а браузер и поисковики понимают, на каком языке текст.
• <head> — служебная часть, на самой странице её не видно.
• <meta charset="utf-8"> — кодировка текста. Без неё русские буквы могут превратиться в «кракозябры».
• <meta name="viewport" …> — страница подстраивается под ширину экрана телефона. Подробно — в уроке Адаптивная вёрстка.
• <title> — заголовок вкладки браузера. Его же поисковики показывают в выдаче.
• <body> — всё, что видно на странице: текст, картинки, ссылки.
• <h1> — главный заголовок, <p> — абзац (от paragraph).

Теги, атрибуты, вложенность

У тега могут быть атрибуты — дополнительные сведения в виде имя="значение" внутри открывающего тега: lang="ru", charset="utf-8". Атрибуты пишутся через пробел, значение — в кавычках.

Есть пустые теги без закрывающей пары: <meta>, <br> (перенос строки), <img> (картинка). Внутри них ничего не бывает.

Элементы вкладываются друг в друга, как коробки. Закрывать их нужно в обратном порядке: что открыто последним, закрывается первым.

<p>Это <strong>важное</strong> слово.</p>

Запись <p><strong>текст</p></strong> — ошибка: браузер постарается её понять, но результат может удивить. Отступы в начале строк ничего не меняют на странице — они нужны людям, чтобы видеть вложенность.

Ещё два правила, которые сразу пригодятся:

• Несколько пробелов и переносов строк подряд браузер показывает как один пробел. Новый абзац — это новый <p>, а не пустая строка в коде.
• Теги можно писать и большими буквами, но принято маленькими.

Комментарии

Текст между <!-- и --> браузер не показывает. В комментариях оставляют пояснения для себя или временно «выключают» кусок страницы:

<!-- Шапка сайта -->
<h1>Привет, мир!</h1>
<!-- <p>Этот абзац пока скрыт.</p> -->

Как посмотреть код любой страницы

• Ctrl+U в Chrome, Edge и Firefox открывает исходный код страницы — так можно посмотреть, как сделаны чужие сайты.
• F12 открывает инструменты разработчика: там видно, из каких элементов состоит страница, и их можно временно править прямо в браузере. Эти инструменты понадобятся во всех следующих уроках.

Частые ошибки

• Вместо страницы виден код с тегами — файл сохранён как .txt или открыт в редакторе, а не в браузере.
• Вместо русских букв «кракозябры» — нет строки <meta charset="utf-8"> или файл сохранён не в кодировке UTF-8. В VS Code кодировка видна внизу окна, щелчком по ней файл можно сохранить в другой.
• Изменения не видны — файл не сохранён или страница не обновлена (F5).
• Половина страницы пропала или стала жирной — не закрыт какой-то тег или комментарий <!--. Найдите открывающий тег без пары.

Коротко

• Страница — текстовый файл с расширением .html, главная называется index.html.
• Пишут её в редакторе кода (VS Code, Notepad++), открывают двойным щелчком в браузере, после правки — сохранить и нажать F5.
• Каркас: <!DOCTYPE html>, <html lang="ru">, в <head> — <meta charset="utf-8">, viewport и <title>, в <body> — содержимое.
• Тег открывается и закрывается (<p>…</p>), пустые теги (<br>, <img>) закрывать не нужно.
• Атрибуты — имя="значение" в открывающем теге, вложенные элементы закрываются в обратном порядке.

Проверьте себя