Как устроена веб-страница: первый HTML-файл

Три языка одной страницы

Любая веб-страница — это работа трёх технологий:

В этом курсе — первые две. Браузер получает HTML-файл, читает его и рисует страницу, а CSS говорит ему, как именно её оформить.

Теги и элементы

HTML состоит из тегов — меток в угловых скобках. Большинство тегов парные:

<p>Это абзац текста.</p>

• <p> — открывающий тег: «здесь начинается абзац»;
• </p> — закрывающий, со слешем: «абзац закончился»;
• всё вместе — элемент.

Некоторые теги одиночные, у них нет содержимого и закрывающей пары. Например, перенос строки <br> или картинка <img>.

Теги можно вкладывать друг в друга, как матрёшки:

<p>Это <strong>важное</strong> слово.</p>

Главное правило вложенности: тег, открытый последним, закрывается первым.

Атрибуты

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

<a href="https://yandex.ru">Перейти на Яндекс</a>

Здесь a — ссылка, а атрибут href хранит её адрес. У каждого тега свой набор атрибутов, с самыми нужными вы познакомитесь в следующих уроках.

Скелет HTML-документа

Каждая страница начинается с одного и того же каркаса:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Моя первая страница</title>
</head>
<body>
  <h1>Привет, мир!</h1>
  <p>Это моя первая веб-страница.</p>
</body>
</html>

Разберём:

• <!DOCTYPE html> — сообщает браузеру, что это современный HTML;
• <html lang="ru"> — корень документа и язык страницы;
• <head> — служебная часть: кодировка utf-8 (чтобы русские буквы не превратились в «кракозябры») и заголовок вкладки <title>;
• <body> — всё, что видно на странице.

Первая страница своими руками

1. Установите редактор кода. Удобнее всего бесплатный VS Code, но подойдёт и Блокнот.
2. Создайте папку для проекта и в ней файл index.html.
3. Вставьте каркас выше и сохраните файл.
4. Откройте файл двойным щелчком — он откроется в браузере.

Теперь меняйте код, сохраняйте и обновляйте страницу клавишей F5: вы сразу увидите результат.

Подсмотреть у других

В любом браузере можно посмотреть, как свёрстан любой сайт. Нажмите F12 и откройте вкладку Elements: слева дерево HTML-элементов, справа — их стили. При наведении на строку кода браузер подсвечивает элемент на странице. Это лучший способ учиться: увидели интересный блок — посмотрели, как он сделан.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Обо мне</title>
</head>
<body>
  <h1>Анна Смирнова</h1>
  <p>Работаю менеджером в интернет-магазине.</p>
  <p>Учу вёрстку, чтобы делать свои сайты и перейти во фронтенд.</p>
</body>
</html>