2.13. Основы языка разметки гипертекста

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

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

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

Тег — команда разметки, заключённая в угловые скобки, например <p>. Открывающий тег начинает элемент, а закрывающий, обычно с косой чертой, обозначает его конец: </p>. Такая пара помогает браузеру определить, к какой части текста относится заданное оформление и назначение.

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

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

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

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

У HTML-документа есть общая структура: объявление типа документа, корневой элемент, служебная часть и часть с содержимым. В служебной части head находятся сведения о документе, в том числе title — заголовок вкладки браузера. Сам видимый текст, заголовки и другие элементы размещают в body. Такое разделение нужно, чтобы браузер отличал информацию о документе от того, что следует показать на странице.

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

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

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

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

Разбор задач

1. Найти границы элементов абзаца и заголовка

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

1. Находим <h1>: это открывающий тег заголовка.
2. Текст «План работы» относится к заголовку, а </h1> отмечает его конец.
3. Затем находим <p> и относим к абзацу текст «Сначала читаем условие».
4. Тег </p> показывает конец абзаца; после него этот элемент завершён.

Ответ: заголовок начинается с <h1> и заканчивается </h1>, абзац — с <p> и заканчивается </p>. Сначала определяем пары тегов, затем читаем текст между каждой парой.

2. Дополнить документ заголовком вкладки и абзацем

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

1. Проверяем, что документ начинается с объявления типа и содержит корневой элемент html.
2. Внутри head добавляем парный элемент <title>Мой сайт</title>.
3. Внутри body помещаем <p>Добро пожаловать!</p>.
4. Закрываем элементы body и html, чтобы обозначить границы частей и всего документа.

Ответ: структура может выглядеть так: <!DOCTYPE html><html><head><title>Мой сайт</title></head><body><p>Добро пожаловать!</p></body></html>. Заголовок окажется на вкладке, а приветствие — в видимой области страницы.

3. Добавить ссылку и изображение

Условие: к странице нужно добавить ссылку на адрес https://example.org и изображение из файла photo.jpg. Для каждого элемента требуется выбрать подходящий тег. Затем надо проверить, что адрес записан именно в атрибуте открывающего тега.

1. Для перехода используем тег a, потому что он обозначает гиперссылку.
2. В открывающем теге задаём href="https://example.org", а между тегами помещаем текст ссылки: <a href="https://example.org">Сайт</a>.
3. Для картинки используем тег img и указываем файл в src: <img src="photo.jpg">.
4. Сверяем написание имени файла с заданным: путь должен вести к нужному изображению.

Ответ: запись ссылки — <a href="https://example.org">Сайт</a>, запись изображения — <img src="photo.jpg">. Тег задаёт тип элемента, а значение атрибута указывает браузеру конкретный адрес или файл.

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

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

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

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

Считать, что тег ссылки сам создаёт переход или тег изображения сам находит картинку, — значит забыть об адресе ресурса. Например, тег a без href не указывает, куда вести пользователя, а img без src не содержит пути к файлу. Эта ошибка возникает, когда форму элемента принимают за полный набор необходимых данных. Проверь, указан ли адрес в нужном атрибуте и совпадает ли он с требуемым.

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

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

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

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