Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Структура страницы Основы 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>
    <h3>Веб-разработчик</h3>
    <p>
      <a href="mailto:alprim@grail.com">alprim@grail.com</a>,
      <a href="https://github.com/alprim">github.com/alprim</a>
    </p>
  </body>
</html>

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

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


Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Открыть доступ

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

  • 120 курсов, 2000+ часов теории
  • 900 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff

Используйте Хекслет по максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг»