§ 25. Текстовые веб-страницы

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

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

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

служит открывающим тегом.

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

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

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

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

Парные теги состоят из открывающей и закрывающей частей: например,

Текст

. Закрывающий тег отличается косой чертой перед именем и показывает границу элемента, поэтому браузер понимает, к какой части текста относится разметка. Одиночный тег обозначает элемент, которому не нужна отдельная закрывающая часть; например, br задаёт перенос строки.

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

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

Атрибуты уточняют свойства элемента и располагаются внутри открывающего тега, после имени тега. Имя атрибута связывается с его значением знаком равенства; значение часто заключают в кавычки. Например, href у тега a задаёт адрес перехода, а текст между открывающим и закрывающим тегами становится видимой частью ссылки. Такое устройство позволяет отделить назначение элемента от конкретных данных, которые ему нужны.

Основные элементы текстовой веб-страницы

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

Разбор задач

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

1. Поместите текст заголовка между тегами h1 и /h1.
2. Каждый из двух фрагментов текста заключите в отдельную пару тегов p и /p.
3. Проверьте, что теги закрыты в том порядке, в котором были открыты.

Ответ: <h1>Моя страница</h1> <p>Первый абзац.</p> <p>Второй абзац.</p>. В примере закрывающий тег каждого элемента соответствует открывающему. Два абзаца записаны отдельно, поэтому браузер воспринимает их как разные части текста.

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

1. Добавьте заголовок в парные теги h1.
2. Создайте абзац в парных тегах p.
3. Внутри абзаца или отдельно разместите ссылку: у тега a укажите href со значением адреса, а между тегами a и /a напишите текст для нажатия.
4. Сверьте адрес и убедитесь, что он находится внутри открывающего тега a.

Ответ: <h1>Полезный сайт</h1> <p>Перейдите на <a href="https://example.com">сайт</a>.</p>. Браузер покажет заголовок и абзац, а слово «сайт» будет ссылкой. При нажатии браузер использует адрес из href.

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

1. Откройте список тегом ul, а каждый пункт оформите тегом li.
2. Внутри нужного li разместите ссылку a с атрибутом href и текстом между тегами ссылки.
3. Закройте сначала a, затем li и в последнюю очередь ul.
4. При проверке сопоставьте каждую открывающую и закрывающую часть и найдите атрибуты, оказавшиеся за пределами открывающего тега.

Ответ: <ul><li>Материал: <a href="https://example.com">перейти</a></li><li>Другой пункт</li></ul>. Если, например, закрыть ul раньше li, нарушится порядок вложенности. Проверка от внутреннего элемента к внешнему помогает обнаружить такую ошибку до открытия страницы в браузере.

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

• Путать тег с атрибутом: тег задаёт элемент, а атрибут уточняет его свойства. Ошибка возникает, когда названия вроде a и href считают командами одного типа. Проверьте себя: тег стоит перед атрибутом, а имя атрибута и его значение находятся внутри открывающего тега.

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

• Закрывать вложенные теги не в обратном порядке. Это случается, если ориентироваться только на то, какой тег был замечен последним, а не на структуру элементов. Проверьте порядок: последним закрывается тот элемент, который был открыт первым; внутренний элемент всегда закрывают раньше внешнего.

• Записывать значение атрибута вне открывающего тега или без связи с его именем. Например, адрес ссылки не сработает как задумано, если написать его рядом с тегом a, но не указать через href. При проверке найдите открывающий тег, имя атрибута, знак равенства и его значение; все они должны образовывать единую запись.

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

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

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

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

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