§ 29. Основы HTML

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

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

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

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

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

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

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

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

Парный тег обозначает начало и конец элемента: открывающий тег задаёт начало, а закрывающий с косой чертой — конец. Одиночный тег, например img или br, не окружает текст и поэтому используется без парного завершения. Вложенные элементы закрывают в обратном порядке: если внутри body открыт p, сначала закрывают p, затем body.

Атрибуты изменяют поведение элемента, потому что передают браузеру дополнительные параметры. У ссылки a атрибут href задаёт адрес перехода, у изображения img атрибут alt описывает картинку, если она не загрузилась или недоступна для просмотра, а у title задаётся название страницы во вкладке браузера. Значение атрибута обычно заключают в кавычки, чтобы браузер правильно определил его границы.

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

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

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

Разбор задач

Страница с заголовком и двумя абзацами

Условие: составить страницу с заголовком первого уровня и двумя абзацами текста. Сначала нужно определить общую структуру документа, а затем поместить видимые элементы внутрь body.

1. Записать объявление типа документа и открыть корневой элемент html.
2. Внутри html создать head с парным элементом title, затем открыть body.
3. В body разместить h1 с названием страницы и два элемента p с текстом абзацев.
4. Закрыть p, h1, body и html в обратном порядке.

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

Список и ссылка

Условие: создать маркированный список из трёх пунктов и добавить ссылку на заданный адрес. Для списка выбираем ul, потому что порядок пунктов не имеет значения, а каждый пункт оформляем тегом li.

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

Ответ: на странице появятся три пункта с маркерами и кликабельный текст. Если переход не работает, сначала проверяют значение href и наличие кавычек.

Страница об объекте

Условие: оформить страницу о выбранном объекте с заголовками, абзацами, изображением с альтернативным текстом и ссылкой на источник. Здесь нужно объединить несколько видов элементов, сохранив их смысловую и техническую вложенность.

1. В head задать название страницы с помощью title, а в body разместить h1 и дополнительные заголовки h2.
2. Под каждым заголовком написать один или несколько абзацев p, чтобы разделить сведения по смыслу.
3. Добавить img с атрибутами src и alt; в src указать путь к файлу, а в alt — понятное описание изображения.
4. Создать a с href, ведущим на источник, затем сохранить файл и проверить все элементы в браузере.

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

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

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

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

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

В href или src можно указать неправильный адрес либо забыть кавычки вокруг значения. Ошибку часто обнаруживают только после открытия страницы, когда ссылка не ведёт к цели или изображение не загружается. Сверьте путь посимвольно и проверьте, что значение полностью заключено в кавычки.

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

До изучения HTML нужно уметь работать с текстовым редактором, файлами и папками, а также понимать назначение расширений. HTML-файл сохраняют как обычный текстовый документ с расширением .html и открывают браузером.

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

Знания HTML понадобятся при изучении CSS и JavaScript, создании веб-сайтов и публикации веб-страниц в Интернете. HTML задаёт основу, CSS отвечает за оформление, а JavaScript добавляет интерактивность.

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

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