6.4. Разработка Web -сайтов с использованием языка разметки гипертекста НТМL

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

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

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

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

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

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

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

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

Большинство элементов имеют открывающую и закрывающую части, потому что браузеру нужно определить границы содержимого. Например, текст между p и /p считается одним абзацем. Некоторые элементы ничего не содержат внутри, поэтому записываются как одиночные: br выполняет перевод строки, а img вставляет внешний файл изображения.

Заголовки h1–h6 показывают уровни важности, p объединяет текст в абзацы, а br переносит продолжение на новую строку. Для перечислений применяют ul с маркерами или ol с номерами, а каждый пункт помещают в li. Такая разметка создаёт логическую структуру, поэтому страницу легче читать человеку и обрабатывать браузеру.

Атрибуты изменяют поведение элементов: href связывает текст с другой страницей, src указывает источник изображения, а alt содержит его краткое описание. Ссылка позволяет перейти к связанному документу, изображение добавляет на страницу визуальную информацию. Так отдельные HTML-файлы объединяются в интерактивный сайт с текстом, переходами и иллюстрациями.

Основные HTML-теги и их назначение

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

Разбор задач

Задача 1. Минимальная HTML-страница

Нужно создать документ с заголовком вкладки, одним заголовком первого уровня и двумя абзацами. Сначала выделим обязательные части документа, затем поместим видимое содержимое в body. Заголовок вкладки запишем внутри head в элементе title.

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

Получится корректная базовая Web-страница. При открытии файла браузер покажет h1 и два абзаца, а текст title будет виден во вкладке или заголовке окна.

Задача 2. Список и перевод строки

Требуется оформить три пункта и перенести часть текста на новую строку. Для перечисления выбираем ul, потому что порядок пунктов не задан. Каждый пункт помещаем в отдельный li, а br используем только там, где нужен перенос внутри текста.

1. Откройте область body.
2. Запишите ul и вложите в него три элемента li.
3. В одном из пунктов поставьте br между двумя фрагментами.
4. Откройте файл в браузере и проверьте маркеры и перенос.

На странице появится маркированный список из трёх пунктов, а выбранная строка разделится на две. Если нужны номера, замените ul на ol.

Задача 3. Страница о школе

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

1. Положите файл изображения в нужную папку и запишите его имя в src.
2. Добавьте в alt краткое описание изображения.
3. Оберните текст названия школы в тег a и укажите адрес в href.
4. Откройте страницу и проверьте изображение и переход по ссылке.

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

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

Тег иногда записывают без угловых скобок или принимают его имя за обычный текст. Так происходит, когда забывают, что браузер распознаёт только специальную конструкцию. Проверьте, начинается ли тег с < и заканчивается >, например <p>.

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

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

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

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

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

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

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

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

• HTML описывает структуру Web-страницы, а браузер отображает результат разметки.
• Теги записывают в угловых скобках; парные теги имеют открывающую и закрывающую части.
• Основное видимое содержимое страницы находится внутри тега body.
• Атрибуты уточняют свойства тегов и записываются в открывающей части тега.
• Гиперссылка создаётся тегом a, а её адрес задаётся атрибутом href.
• Изображение вставляется тегом img; путь к файлу указывается в атрибуте src.
• Правильная вложенность тегов необходима для корректного отображения страницы.