§ 8. Вёрстка web-страниц

Определения и обозначения

Вёрстка web-страницы — подготовка её структуры и расположения элементов с помощью разметки. Элементами могут быть заголовки, абзацы, ссылки и изображения. Разметка нужна, чтобы браузер понял, какие части есть на странице и как их показывать.

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

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

Атрибут — дополнительная характеристика тега, которая задаёт его свойство или связывает его с нужным ресурсом. Например, атрибут ссылки может содержать адрес страницы, на которую она ведёт. Без подходящего атрибута браузер не узнает, куда должна вести ссылка или откуда загрузить изображение.

Как это устроено

Браузер отображает страницу, опираясь на её разметку: исходный код описывает элементы, а браузер преобразует их в видимое содержимое. Код сам по себе обычно состоит из текста и служебных записей, поэтому человеку важно различать их назначение. Браузер читает эти записи и решает, где разместить заголовок, абзац или ссылку. Именно поэтому одна и та же строка текста может выглядеть по-разному в зависимости от окружающих тегов.

Парные теги отмечают начало и конец элемента, а непарные используются самостоятельно. Закрывающий тег обычно отличается от открывающего косой чертой перед именем, например у абзаца есть открывающая и закрывающая записи. Эта пара задаёт границы содержимого: браузер понимает, к какому элементу относится текст между ними. Непарный элемент не охватывает фрагмент текста, поэтому отдельная закрывающая запись ему не требуется.

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

Атрибуты записывают в открывающем теге и используют, например, чтобы задать ссылке адрес или изображению путь к файлу. Так браузер получает не только сведения о типе элемента, но и данные, необходимые для его работы. Значение атрибута указывают после знака равенства, обычно в кавычках. Если атрибут записан не в том месте или не имеет нужного значения, связь с адресом или файлом не сработает.

Разметка определяет, какие элементы есть на странице и как они связаны; корректная структура помогает браузеру правильно её отобразить. Браузер не угадывает намерение автора, а разбирает полученные записи по правилам. Поэтому даже при наличии всех нужных слов ошибки в тегах могут изменить границы и связи элементов. Проверка структуры помогает найти такие ошибки до того, как страница будет опубликована.

Основные элементы HTML-разметки

Сначала определите, что требуется добавить на страницу, и найдите в таблице подходящий тип элемента. Затем проверьте, нужны ли ему открывающий и закрывающий теги и какие сведения требуется передать атрибутом. Пример вложенного элемента показывает, что внутренняя пара тегов должна полностью находиться внутри внешней.

Разбор задач

1. Найти парные теги и текст между ними

Условие: в HTML-фрагменте требуется найти парные теги и определить, какой текст они охватывают. Например, дан фрагмент <p>Начало <b>важный текст</b> конец</p>. Сначала ищем записи с одинаковым именем и проверяем, есть ли у одной из них косая черта.

1. Сравним теги: <p> и </p> имеют одинаковое имя, поэтому образуют пару. Границы этого элемента проходят от открывающего тега до закрывающего. Между ними находятся слова «Начало», «важный текст» и «конец».
2. Теперь проверим <b> и </b>. Это тоже парные теги, расположенные внутри абзаца. Они охватывают только слова «важный текст», а не весь текст абзаца.

Ответ: парные теги — <p> и </p>, а также <b> и </b>. Текст внутри абзаца — «Начало важный текст конец», внутри выделенного элемента — «важный текст». При поиске границ ориентируйтесь на совпадение имён тегов и их порядок.

2. Составить разметку заголовка, абзаца и ссылки

Условие: нужно описать страницу с заголовком, абзацем и ссылкой на указанный адрес. Для каждого фрагмента выбираем тег по его назначению, а для ссылки указываем адрес. Пусть заголовок — «Полезный ресурс», текст абзаца — «Откройте страницу», а адрес — https://example.org.

1. Для заголовка выбираем тег заголовка, например <h1>, и заключаем текст между открывающей и закрывающей записями. Это обозначает главный заголовок страницы. Запись будет такой: <h1>Полезный ресурс</h1>.
2. Текст пояснения помещаем в парные теги абзаца. После этого определяем, что ссылка должна охватывать слова «Откройте страницу», а адрес передаётся через атрибут href. Получаем запись <p><a href="https://example.org">Откройте страницу</a></p>.

Ответ: разметка состоит из <h1>Полезный ресурс</h1> и <p><a href="https://example.org">Откройте страницу</a></p>. Заголовок и абзац не перепутаны, а ссылка находится внутри абзаца. Адрес записан в открывающем теге ссылки как значение атрибута.

3. Исправить ошибки в HTML-фрагменте

Условие: во фрагменте перепутаны уровни вложенности, пропущен закрывающий тег и неверно записан атрибут ссылки. Например, дано: <p>Текст <a href https://example.org>перейти</p>. Нужно проверить и границы элементов, и запись адреса. Исправления удобно выполнять по одному, чтобы видеть причину каждой ошибки.

1. У ссылки есть открывающий тег, но нет закрывающего </a>. Добавляем его после слова «перейти», поскольку ссылка охватывает именно это слово. Иначе граница ссылки не будет обозначена явно.
2. Атрибут href записан без знака равенства и значения в кавычках. Правильная форма — href="https://example.org", причём она должна находиться внутри открывающего тега ссылки. Так браузер сможет распознать адрес назначения.
3. Проверяем вложенность: ссылка открыта внутри абзаца, значит, её нужно закрыть раньше абзаца. После исправления сначала стоит </a>, затем </p>. Такой порядок соответствует порядку открытия элементов.

Ответ: <p>Текст <a href="https://example.org">перейти</a></p>. Здесь атрибут записан внутри открывающего тега, а оба парных элемента закрыты. Сначала заканчивается ссылка, помещённая внутрь абзаца, затем сам абзац.

Типичные ошибки

Пропускать закрывающий тег у парного элемента — значит не обозначить, где заканчивается его содержимое. Так бывает, когда автор замечает открывающую запись, но забывает проверить её пару. Браузер может неверно определить границы текста и включить в элемент следующий фрагмент. Самопроверка: для каждого парного тега найдите закрывающий с тем же именем.

Нарушать вложенность — значит закрыть внешний элемент раньше внутреннего или пересечь границы тегов. Ошибку допускают, когда ориентируются только на предполагаемый внешний вид, а не на порядок записей. Браузер может разобрать такую структуру иначе, чем ожидалось. Проверьте код по правилу: последним открытый элемент закрывается первым.

Записывать атрибут вне открывающего тега или без нужного значения — ошибка, из-за которой браузер не может применить свойство. Часто атрибут воспринимают как отдельную команду и ставят рядом с тегом, а не внутри него. Тогда, например, ссылка может остаться без адреса. Проверьте, что атрибут находится между угловыми скобками открывающего тега и имеет значение после знака равенства.

Считать HTML обычным текстом или языком программирования — значит путать содержимое страницы с правилами его описания. Такое представление возникает потому, что код содержит слова, похожие на команды. Однако HTML задаёт структуру документа, а не выполняет алгоритмы и вычисления. Для самопроверки спросите себя, описывает ли запись элемент страницы или задаёт последовательность действий.

Связь с другими темами

Перед изучением вёрстки полезно уметь работать с текстовым редактором и различать имя файла и его расширение. Эти навыки пригодятся при создании и сохранении HTML-файла: расширение помогает понять, к какому типу он относится. Разметка применяется при создании сайтов и становится основой для дальнейшего знакомства с CSS и JavaScript. CSS отвечает за оформление, а JavaScript добавляет интерактивность; браузер получает файлы страницы через интернет и отображает их пользователю.

Что запомнить

• HTML описывает структуру и содержание web-страницы.
• Тег записывается в угловых скобках.
• У парного тега есть открывающая и закрывающая записи.
• Вложенные теги должны быть расположены корректно.
• Атрибут уточняет свойства элемента и записывается в открывающем теге.
• Браузер интерпретирует разметку и отображает страницу.