Структура HTML-документа: Создание базовой веб-страницы

Введение

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

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

Объявление <!DOCTYPE html>
Корневой элемент <html>
Элемент <head> для метаданных
Элемент <body> для видимого контента

К концу этой лабораторной работы вы создадите с нуля полноценную, валидную и простую HTML-страницу.

Создайте объявление DOCTYPE

На этом шаге вы добавите объявление DOCTYPE, которое является самым первым элементом вашего HTML-документа. Это объявление сообщает веб-браузеру, что страница написана на HTML5. Это стандартная практика, которая гарантирует правильное отображение страницы браузером.

Сначала найдите файл index.html в файловом проводнике слева от вашего WebIDE. Щелкните по нему, чтобы открыть в редакторе.

В настоящее время файл пуст. Добавьте следующую строку кода в самое начало файла index.html:

<!DOCTYPE html>

DOCTYPE declaration

Теперь ваш файл index.html должен выглядеть следующим образом:

<!DOCTYPE html>

Эта единственная строка является отправной точкой для каждой современной веб-страницы.

Добавьте корневой элемент html с атрибутом lang

На этом шаге вы добавите элемент <html>. Этот элемент является корневым контейнером для всех остальных HTML-элементов на странице (за исключением объявления <!DOCTYPE>).

Также является хорошей практикой включать атрибут lang внутрь открывающего тега <html>. Этот атрибут указывает язык содержимого документа, что помогает поисковым системам и программам чтения с экрана. Для английского языка мы используем lang="en".

В вашем файле index.html добавьте теги <html> и </html> сразу после объявления <!DOCTYPE html>.

<!DOCTYPE html>
<html lang="en"></html>

Все остальные элементы вашей веб-страницы будут располагаться между этими двумя тегами.

Вставьте элемент head с тегом title

На этом шаге вы добавите элемент <head>. Секция <head> содержит метаданные о HTML-документе, такие как его заголовок, набор символов, стили и скрипты. Эта информация не отображается на самой веб-странице, но используется браузером.

Самым важным метаданным для начинающего является тег <title>. Текст внутри тега <title> отображается на вкладке браузера или в строке заголовка окна.

Внутри вашего элемента <html> добавьте секцию <head>. Внутри секции <head> добавьте тег <title> с текстом "My First Web Page".

Обновите ваш файл index.html следующим образом:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My First Web Page</title>
  </head>
</html>

Добавьте элемент body для контента

На этом шаге вы добавите элемент <body>. Здесь размещается весь видимый контент вашей веб-страницы, такой как заголовки, параграфы, изображения, ссылки и многое другое. Элемент <body> должен располагаться после элемента <head>, но все еще внутри элемента <html>.

Давайте добавим основной заголовок на нашу страницу, чтобы он был виден в браузере. Мы будем использовать тег <h1>, который означает "Heading 1" (Заголовок 1).

В вашем файле index.html добавьте секцию <body>. Внутри <body> добавьте элемент <h1> с текстом "Hello, World!".

Ваш полный файл index.html теперь должен выглядеть следующим образом:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My First Web Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

Это полная и корректная структура HTML-документа.

Сохраните и откройте HTML-файл в браузере

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

Простой веб-сервер уже запущен в фоновом режиме. Чтобы увидеть вашу страницу, вам нужно просто открыть соответствующую вкладку в интерфейсе LabEx.

Нажмите на вкладку Web 8080, которая находится в верхнем левом углу экрана, рядом с вкладкой "Terminal".

Вкладка Web 8080

Когда вы переключитесь на вкладку Web 8080, вы должны увидеть свою веб-страницу. На ней будет отображаться:

Текст "Hello, World!" в виде большого заголовка в основной области контента.
На вкладке браузера будет отображаться заголовок "My First Web Page".

Если вы этого не видите, вернитесь к предыдущим шагам и убедитесь, что ваш код index.html точно соответствует приведенному примеру.

Резюме

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

В этой лабораторной работе вы узнали:

<!DOCTYPE html>: Объявление, определяющее документ как HTML5.
<html>: Корневой элемент, который оборачивает весь контент на странице.
<head>: Контейнер для метаданных, таких как заголовок страницы, который не виден на самой странице.
<title>: Тег, устанавливающий заголовок вкладки браузера.
<body>: Контейнер для всего видимого контента, такого как заголовки и параграфы.

Эта базовая структура является фундаментом, на котором вы будете строить все будущие веб-проекты.