Создание первой HTML-страницы

Чтение — около 9 минут· без учёта практики

В предыдущем уроке вы писали код в редакторе на странице учебника. Теперь создадим настоящий HTML-файл на своём компьютере — так работают с сайтами на практике. Нам понадобятся редактор Visual Studio Code (VS Code) и любой современный браузер. VS Code бесплатен и работает в Windows, macOS и Linux, поэтому шаги в редакторе одинаковы для всех систем. Действия в браузере я описываю для Google Chrome; в других браузерах названия пунктов меню могут немного отличаться. Где сочетания клавиш различаются, указан вариант для macOS.

По умолчанию интерфейс VS Code на английском языке, поэтому названия пунктов меню я привожу на русском и английском. После каждого шага указано, как проверить, что всё получилось.

Шаг 1: создайте папку проекта

Файлы сайта удобно хранить в одной папке. Создайте на компьютере папку my-site. Затем запустите VS Code и откройте эту папку: Файл → Открыть папку (File → Open Folder).

Проверка: в левой панели VS Code появилось название папки MY-SITE. Если VS Code спросит, доверяете ли вы авторам файлов в папке, ответьте «Да» (Yes, I trust the authors): папку вы создали сами.

Шаг 2: создайте файл index.html

В левой панели «Проводник» (Explorer) наведите указатель на название папки my-site и нажмите значок «Новый файл» (New File). Введите имя index.html и нажмите Enter.

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

Имя файла можно выбрать любое, на этом этапе обучения оно не имеет значения. Но главную страницу сайта обычно называют index.html: веб-сервер открывает её по умолчанию, когда в адресе не указан файл, и его настройки не нужно менять.

Проверка: в левой панели появился файл index.html, а в правом нижнем углу окна VS Code написано HTML — редактор распознал язык по расширению.

Шаг 3: напишите код страницы

Наберите в файле код ниже вручную, а не копируйте: так вы быстрее запомните структуру документа. Это новая версия страницы Тони из задания в предыдущем уроке: вместо раздела «Обо мне» — приветствие в главном заголовке.

HTML
<!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>Я карликовый пинчер и больше всего на свете люблю гулять.</p>
  </body>
</html>

Разберём код страницы:

  1. Декларация <!doctype html> включает стандартный режим отображения, а элемент <html> с атрибутом lang="ru" определяет границы HTML-кода. После закрывающего тега </html> ничего писать не нужно.
  2. В заголовочной части (от слова «голова») — между тегами <head> и </head> — находятся сведения о странице. Строка <meta charset="utf-8"> сообщает кодировку, чтобы русский текст отображался правильно. Строка с name="viewport" говорит телефонам показывать страницу в ширину экрана, а не уменьшенной копией. Элемент <title> задаёт название страницы, которое браузер покажет на вкладке.
  3. Между тегами <body> и </body> мы разместили заголовок первого уровня <h1> и абзац <p>. Видимое содержимое страницы всегда помещается внутри <body>.

Строка <!-- Видимое содержимое страницы --> — это комментарий. Всё, что находится между <!-- и -->, браузер не показывает. Комментарии оставляют пояснения для себя и других разработчиков; в коде примеров учебника они тоже встречаются. Подробно комментарии мы рассмотрим в статье «Комментарии и якоря».

Проверка: теги в коде подсвечены цветом. Подсветка помогает быстро заметить ошибку: например, незакрытая кавычка окрасит весь следующий код в цвет строки.

Шаг 4: сохраните файл

Нажмите Ctrl+S (на macOS — Cmd+S) или выберите Файл → Сохранить (File → Save). Пока файл не сохранён, рядом с его именем на вкладке VS Code виден кружок.

Проверка: кружок на вкладке исчез, а в правом нижнем углу окна написано UTF-8. VS Code сохраняет файлы в этой кодировке по умолчанию.

Что такое кодировка

Компьютер хранит текст не буквами, а числами — байтами. Кодировка — это способ записать текст последовательностью байтов. При сохранении редактор кодирует текст, а при открытии браузер декодирует его обратно. Чтобы текст отображался правильно, оба должны использовать одну и ту же кодировку.

Раньше для разных языков использовались разные кодировки: например, для русского текста в Windows — Windows-1251. Сейчас стандартом стала UTF-8 — способ записи символов Unicode, единого списка символов почти всех языков мира, математических знаков и эмодзи. Поэтому HTML-файлы сохраняют в UTF-8 и сообщают об этом браузеру строкой <meta charset="utf-8">.

Если браузер прочитает файл не в той кодировке, получится набор непонятных символов. Например, слово «Привет», сохранённое в UTF-8 и прочитанное как Windows-1251, превратится ⠫Привет» (не пытайтесь это читать:). Как это исправить — ниже, в шаге 5.

Шаг 5: откройте страницу в браузере

Откройте папку my-site в проводнике (Finder на macOS) и дважды щёлкните по файлу index.html. Страница откроется в браузере по умолчанию. Можно также перетащить файл в окно браузера.

Проверка: на странице видны ваш заголовок и абзац, а на вкладке браузера — название из <title>. На самой странице это название не появилось: <title> задаёт название документа, а не видимое содержимое. В адресной строке браузера указан путь к файлу на вашем компьютере — он начинается с file://.

Измените текст абзаца в VS Code и обновите страницу в браузере. Изменение не появилось? Браузер показывает сохранённый файл, поэтому порядок всегда такой: сохранить (Ctrl+S) → обновить страницу (F5, на macOS — Cmd+R).

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

Код любой открытой страницы можно посмотреть прямо в браузере — это полезно, чтобы сверить свой результат с готовым примером или разобраться, как устроена чужая страница:

  • Исходный код страницы: щёлкните правой кнопкой мыши по странице и выберите «Просмотр кода страницы» (View page source) или нажмите Ctrl+U (на macOS — Cmd+Option+U). Откроется HTML-код в том виде, в каком его получил браузер.
  • Инструменты разработчика: щёлкните правой кнопкой по нужному месту и выберите «Просмотреть код» (Inspect) или нажмите F12 (на macOS — Cmd+Option+I). Откроется панель, где видно, какой элемент отвечает за выбранную часть страницы. Наведите указатель на строку кода в панели — соответствующая часть страницы подсветится. С инструментами разработчика мы будем работать на протяжении всего учебника.

Код в инструментах разработчика можно временно изменить прямо в браузере, но такие правки не сохраняются в ваш файл и пропадут после обновления страницы. Чтобы изменение осталось, вносите его в VS Code.

Откройте так свою страницу index.html и найдите в коде заголовок и абзац.

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

Выберите ответ — объяснение появится сразу. Ответ можно менять.

1. Какое расширение мы используем для HTML-файлов в этом уроке?
Показать ответ

.html — По расширению .html система и редактор понимают, что это HTML-документ. Короткое .htm тоже допустимо.

2. Почему главную страницу сайта обычно называют index.html?
Показать ответ

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

3. Вы изменили текст в VS Code и обновили страницу, но изменение не появилось. В чём вероятная причина?
Показать ответ

Файл не сохранён — Браузер показывает сохранённый файл. Порядок всегда такой: сохранить, затем обновить страницу.

4. Вместо русского текста на странице непонятные символы. Что проверить в первую очередь?
Показать ответ

Строку <meta charset="utf-8"> и кодировку файла — Такие символы появляются, когда браузер читает файл не в той кодировке. Укажите UTF-8 в коде и сохраните файл в UTF-8.

5. Что покажет браузер на месте строки <!-- Видимое содержимое страницы -->?
Показать ответ

Ничего — Комментарии нужны разработчикам для пояснений в коде, на странице они не видны.

6. Вы хотите сверить свою страницу с готовым примером. Как посмотреть её HTML-код в браузере?
Показать ответ

Открыть «Просмотр кода страницы» или инструменты разработчика — «Просмотр кода страницы» показывает HTML в том виде, в каком его получил браузер, а инструменты разработчика — код выбранного элемента.

Задание

В редакторе ниже — текст статьи о карликовом пинчере — породе Тони — без разметки. Браузер показывает его одним непрерывным блоком, без отдельных заголовков и абзацев: переносы строк в исходном коде абзацы не создают. Разметьте текст:

  • «Карликовый пинчер» — заголовок первого уровня <h1>;
  • «Внешний вид» и «Характер» — заголовки второго уровня <h2>;
  • остальной текст — четыре абзаца <p>.

Выполните задание

index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Документ</title>
  </head>
  <body>
    Карликовый пинчер

    Карликовый пинчер, или цвергпинчер, — небольшая короткошёрстная собака родом из Германии. Несмотря на скромный рост, это настоящий сторож с характером большой собаки.

    Внешний вид

    Высота в холке — 25–30 см, вес по стандарту породы — 4–6 кг, хотя встречаются и более крупные собаки: Тони, например, весит 8 кг. Тело квадратного формата, сухое и мускулистое, ноги длинные, поэтому пинчер выглядит изящным и лёгким. Уши стоячие или полустоячие, глаза тёмные, овальные.

    Шерсть короткая, гладкая и блестящая, плотно прилегает к телу. Самые распространённые окрасы — чёрно-подпалый, когда на чёрном фоне есть рыжие отметины на морде, груди и лапах, и однотонный рыжий.

    Характер

    Карликовый пинчер энергичен, любопытен и бесстрашен. Он быстро учится, громко предупреждает о гостях и любит долгие прогулки и активные игры. Без движения и внимания хозяина ему скучно.
  </body>
</html>

Ожидаемый результат: на странице главный заголовок «Карликовый пинчер», под ним абзац, затем два раздела с заголовками второго уровня: в разделе «Внешний вид» два абзаца, в разделе «Характер» — один.

Продолжите в VS Code

  1. Создайте в папке my-site файл pinscher.html.
  2. Перенесите в него код из редактора выше: нажмите в редакторе кнопку «Копировать код» и вставьте код в VS Code. Можно вместо этого скачать файл кнопкой «Скачать HTML»: он сохранится под автоматическим именем, поэтому переименуйте его в pinscher.html и поместите в папку my-site — создавать пустой файл заранее в этом случае не нужно.
  3. Замените содержимое <title> на «Карликовый пинчер», сохраните файл и откройте его в браузере.

Ожидаемый результат: страница выглядит так же, как в редакторе, а на вкладке браузера написано «Карликовый пинчер». Это отдельная тренировочная страница: сохраните её рядом с проектом. В следующих уроках мы будем развивать index.html; файл pinscher.html в готовые примеры основного сайта не входит.

Если результат отличается и найти ошибку не получается, нажмите в редакторе выше «Показать решение» и сравните его со своим кодом. Затем снова скопируйте код или скачайте файл кнопкой «Скачать HTML» — теперь уже с решением.

Примеры учебника можно скачать и продолжить работу с ними в VS Code: кнопка «Скачать HTML» сохраняет автономную страницу, а «Скачать ZIP» — все страницы и ресурсы многофайлового примера. Архив нужно распаковать, сохранив структуру папок. Сохраняйте папку my-site: в следующих уроках вы будете дополнять сайт Тони.