Структура страницы — Основы HTML, CSS и веб-дизайна

До этого момента мы рассматривали отдельные элементы. Теперь давайте посмотрим на целую HTML-страницу.

Создайте у себя на компьютере файл index.html. Вы можете использовать любой текстовый редактор, например, встроенный в Windows блокнот. Но лучше использовать специальный редактор кода, например, VS Code.

Впишите в файл такое содержимое:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

Теперь откройте файл в браузере. Вы увидите пустую страницу. Можете заглянуть в исходный код страницы — там будут те же строки кода.

Все эти элементы — обязательны.

HTML-документ должен начинаться с указания формата. Раньше там указывали версию HTML, но сегодня достаточно простого указания <!DOCTYPE html>. Мы изучаем современный стандарт HTML и не будем заботиться о поддержке старых форматов и старых браузеров.

Всё содержимое документа обёрнуто в теги <html></html>. У этого элемента могут быть атрибуты, например, такой: <html lang="ru">. Так мы можем явно предупредить браузер, что этот документ — на русском языке.

Внутри находятся два элемента: head и body. Голова и тело :). Содержание «головы» не видно на самой странице. А содержание «тела» видно.

Структура страницы в HTML

Внутри head указываются так называемые метаданные и дополнительные файлы, необходимые для документа. «Мета» означает «над», «уровнем выше». Метаданные — это данные о данных. Например, здесь можно указать заголовок страницы. Он будет выведен в окне или вкладке браузера:

<!DOCTYPE html>
<html>
  <head>
    <title>Моё резюме</title>
  </head>
  <body>
  </body>
</html>

Title — заголовок HTML-страницы

А также информацию о кодировке страницы:

<meta charset="UTF-8">

Всё, что мы делали в предыдущих уроках, помещается внутрь body. Это и есть то, что видно посетителю страницы.

<!DOCTYPE html>
<html>
  <head>
    <title>Моё резюме</title>
  </head>
  <body>
    <h1>Алексей Примадонин</h1>
    <h2>Веб-разработчик</h2>
    <p>
      <a href="mailto:alprim@grail.com">alprim@grail.com</a>,
      <a href="https://github.com/alprim">github.com/alprim</a>
    </p>
  </body>
</html>

Супер! Мы сделали полноценную страницу. Но, честно говоря, она выглядит... не очень. Пока текста мало — все более-менее нормально, но с увеличением текста и других элементов страница будет выглядеть все более неопрятной.

Пора научиться задавать стили содержимому.