Упражнение. Добавление базового кода HTML в веб-приложение

10 мин

Сейчас веб-сайт имеет пустой файл HTML. Давайте добавим в него код. Наша цель — с помощью HTML описать веб-страницу, которая должна отображаться в браузере клиентов. Было бы здорово начать с готового шаблона. К счастью, в редакторах предусмотрена возможность автоматического создания стандартной структуры HTML.

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

Добавление кода HTML

В Visual Studio Code встроена базовая поддержка программирования на HTML. Доступны такие возможности, как подсветка синтаксиса, интеллектуальное завершение с помощью IntelliSense и настраиваемое форматирование.

Откройте папку веб-сайта в Visual Studio Code, а затем откройте index.html файл, выбрав его в обозревателе.
На странице index.html введите html:5, а затем нажмите клавишу ВВОД. Код шаблона HTML5 добавляется в файл.

Примечание.

Если код шаблона HTML5 не добавлен в index.html файл, попробуйте закрыть и повторно открыть файл.

Измените код шаблона таким образом, чтобы он выглядел следующим образом. Затем сохраните файл, нажав CTRL+S в Windows или CMD+S в macOS.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>

Существуют разные версии HTML. В документе <!DOCTYPE html> указывается, что этот HTML-документ содержит код HTML5.

Хотя мы не собираемся глубоко углубиться в смысл всех HTML-элементов, мы хотим указать несколько важных элементов. Тег meta указывает сведения о метаданных , которые обычно не отображаются в средстве просмотра, если только они не просматривают исходный код в браузере. Метаэлементы или теги содержат описательную информацию о веб-странице. Метаданные помогают поисковым системам определять, какие сведения на веб-страницах должны возвращаться в результатах поиска.

Набор charset может показаться незначительным, но это важно для установления того, как компьютеры интерпретируют символы. Если метаданные для кодировки (charset) отсутствуют, это может привести к нарушению безопасности. Существует довольно немного истории и технической информации за атрибутом charset, но важный вывод из этого упражнения заключается в том, что шаблон Visual Studio Code обеспечивает некоторые разумные значения по умолчанию.

Изменение заголовка

Элемент <head> в коде HTML содержит сведения о веб-сайте, которые не отображаются на вкладке браузера.

Атрибут metadata определяет данные о HTML-документе, такие как набор символов, скрипты и браузер, в котором открывается веб-страница.

Атрибут title содержит название веб-страницы, которое отображается в верхней части окна браузера. Оно важно по множеству причин. Например, название используется поисковыми системами и отображается в них. Давайте добавим название.

Внимание

В дальнейшем многоточие (...) будет указывать на то, что до этого или после этого находится ранее объявленный код. В качестве контекста предоставлено достаточно кода для внесения необходимых изменений или обновлений. При этом копировать и вставлять многоточия в свой код не нужно.

В редакторе измените элемент <title> так, чтобы он соответствовал следующему примеру.

...
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple website</title>
...

Чтобы применить стили к элементам HTML на веб-странице, можно написать код CSS непосредственно в голове веб-страницы. Написание CSS в коде страницы HTML называется внутренним CSS. Однако рекомендуется разделять структуру HTML и стили CSS. Если код CSS вынесен на отдельную страницу, он называется внешним CSS. Лаконичный и систематизированный код проще читать. Одну внешнюю таблицу стилей можно использовать для нескольких веб-страниц. Вместо обновления каждой HTML-страницы с реплицированным кодом CSS можно внести изменения в один CSS-файл и применить эти обновления ко всем зависимым веб-страницам. Давайте свяжите с внешним CSS-файлом.

В редакторе Visual Studio Code добавьте пустую строку после <title> элемента, введите linkи нажмите клавишу ВВОД. Visual Studio Code должен добавить в файл следующую строку index.html .
```
<link rel="stylesheet" href="">
```

Измените href= на href="main.css" и сохраните файл, нажав сочетание клавиш CTRL+S в Windows или CMD+S в macOS.

...
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple website</title>
  <link rel="stylesheet" href="main.css">
</head>
...

Изменение тела

Теперь начнем заполнять элемент <body>.

Элемент <body> содержит содержимое веб-сайта, которое отображается клиентам в своих браузерах.

<body> В элементе добавьте элемент заголовка<h1>, за которым следует элемент абзаца<p>, а затем создайте неупорядоченный список<ul>, содержащий несколько элементов элемента<li> списка.

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple website</title>
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <h1>Task List</h1>
    <p id="msg">Current tasks:</p>
    <ul>
      <li class="list">Add visual styles</li>
      <li class="list">Add light and dark themes</li>
      <li>Enable switching the theme</li>
    </ul>
  </body>
</html>

Атрибут ID (используемый в <p> элементе) можно использовать для стилизации одного элемента, а атрибут класса (используемый в <li> элементе) предназначен для стилизации всех элементов одного класса.

Перед следующим шагом убедитесь, что файл сохранен, нажав сочетание клавиш CTRL+S или CMD+S.

Открытие в браузере

Вы можете выполнить предварительный просмотр веб-страницы на локальном компьютере, открыв файл HTML в браузере. Вместо адреса веб-сайта, который начинается с https://, в браузере будет указан путь к локальному файлу, который должен быть похож на C:/dev/simple-website/index.html.

Чтобы просмотреть с помощью Visual Studio Code, щелкните правой кнопкой мыши и выберите index.htmlкоманду "Открыть в браузере по умолчанию" или выберите index.html файл и используйте сочетание клавиш ALT+B.

Внимание

Если возникают проблемы, убедитесь в том, что вы щелкаете правой кнопкой мыши значок или текст с именем файла. Если появится диалоговое окно Visual Studio Code, выберите "Да", я доверяю авторам. Это функция "Доверие рабочей области", которая позволяет определить, должны ли папки проекта разрешать или ограничивать автоматическое выполнение кода. Вы только что создали файл, поэтому это безопасно.

Веб-страница открывается в браузере по умолчанию.

Просмотр страницы с помощью средств разработчика

Веб-страницу можно изучать с помощью средств разработчика в браузере. Давайте попробуем.

Откройте Средства для разработчиков, щелкнув веб-страницу правой кнопкой мыши и выбрав пункт Проверить, или воспользуйтесь следующими сочетаниями клавиш:
- Чтобы открыть инструменты для разработчика, нажмите клавишу F12.
- Нажмите CTRL+SHIFT+I в Windows и Linux или OPTION+CMD+I на компьютере Mac.
Эти сочетания клавиш работают в Microsoft Edge, Chrome и Firefox. Если вы используете Safari, см. Средства веб-разработки. При установке выберите "Параметры Safari > ", а затем нажмите кнопку "Дополнительно". В нижней части панели пометьте поле Отобразить меню разработки в строке меню. Выберите Разработка > Отобразить веб-инспектор. Дополнительные сведения см. в документации по веб-инспектору Safari.

Дополнительные сведения об открытии инструментов для разработчика и основных доступных функциях см. в статье Общие сведения об инструментах для разработчика.
Откройте вкладку Elements (Элементы).
Наведите курсор мыши на элементы HTML, отображаемые на вкладке Элементы, и разверните содержимое различных элементов.

На вкладке Элементы в средствах разработчика модель DOM отображается в том виде, в каком она показана в браузере. При отладке часто важно видеть, как браузер интерпретирует ваш исходный код.