Лабораторная работа № 10 (к § 29 и 30) Знакомство с НТМL

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

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

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

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

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

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

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

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

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

Заголовки и абзацы помогают организовать смысл страницы, а не просто изменить вид букв. Элементы <h1>–<h6> обозначают заголовки разных уровней, а <p> — отдельный абзац; для смыслового выделения текста можно использовать, например, <strong>. Такая разметка помогает браузеру и другим программам понять, какую роль играет каждый фрагмент.

Ссылку создают тегом <a>, а изображение добавляют тегом <img>. В обоих случаях браузеру нужен адрес ресурса: для ссылки его записывают в атрибуте href, для изображения — в атрибуте src. Адрес помещают именно в атрибут, потому что он является характеристикой элемента, а не видимым содержимым страницы.

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

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

Разбор задач

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

1. Создайте текстовый файл и запишите корневые теги <html> и </html>.
2. Между ними добавьте <head> и </head>, а внутри — <title>Моя страница</title>.
3. После области head добавьте <body> и поместите между ним и закрывающим тегом абзац: <p>Текст страницы.</p>.
4. Закройте body, сохраните файл с расширением .html и откройте его в браузере.

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

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

1. Внутри <body> запишите заголовок, например <h1>Моя тема</h1>.
2. Первый и второй фрагменты заключите каждый в отдельные теги <p> и </p>.
3. Внутри нужного абзаца оберните ключевое слово в <strong> и </strong>.
4. Проверьте, что выделение не выходит за границы абзаца, а теги расположены в правильном порядке.

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

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

1. Составьте каркас с областями head и body, а внутри body добавьте заголовок и несколько парных элементов <p>.
2. В нужном месте добавьте тег изображения с адресом файла в атрибуте src, например <img src="photo.jpg">.
3. Создайте ссылку с помощью <a href="адрес">Источник</a>, указав адрес веб-ресурса в href.
4. Закройте парные элементы в обратном порядке, сохраните документ и откройте его в браузере.

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

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

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

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

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

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

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

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

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

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

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