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

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

HTML (HyperText Markup Language) – это язык разметки, который используется для создания веб-страниц. Он не является языком программирования в строгом смысле, а служит для описания структуры и содержимого страницы, определяя, как информация будет отображаться в браузере. HTML позволяет разметить текст, изображения и другие элементы, делая веб-страницы понятными как для браузеров, так и для поисковых систем.

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

`) и закрывающий тег (например, `

`). Большинство тегов имеют парную структуру, где открывающий тег указывает начало элемента, а закрывающий – его конец.

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

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

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

Теги управляют отображением содержимого, сообщая браузеру, как интерпретировать текст. Например, тег `

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

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

HTML-документ имеет четкую структуру, начинающуюся с тега ``. Внутри тега `` находятся два основных раздела: `

` и ``. `` содержит метаданные о документе, такие как заголовок страницы (отображается во вкладке браузера), кодировку символов и другие служебные данные. `` содержит видимое содержимое страницы, которое отображается в окне браузера.

Основные теги HTML для работы с текстом

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

Разбор задач

Задача 1: Написать HTML-код для отображения заголовка уровня 2, абзаца текста и ссылки на сайт example.com.

1. Определите, какие теги вам нужны: для заголовка – `

   `, для абзаца – `

   `, для ссылки – ``.

2. Создайте открывающий и закрывающий теги для каждого элемента.
3. В теге `` добавьте атрибут `href` со значением `"https://www.example.com"`.
4. Внутри тега `` добавьте текст ссылки, например, "Перейти на example.com".

Ответ:

Заголовок второго уровня

Это абзац текста.

Перейти на example.com

Задача 2: Используя HTML создать заголовок третьего уровня с текстом 'Моя страница'.

1. Выберите тег `

   ` для заголовка третьего уровня.

2. Заключите текст 'Моя страница' в открывающий и закрывающий теги `

   `.

Ответ:

Моя страница

Задача 3: Написать HTML-код для отображения списка из трех элементов.

1. Выберите тег `
   • ` для неупорядоченного списка или `
   1. ` для упорядоченного.
2. Внутри выбранного тега добавьте три тега `
3. ` для каждого элемента списка.
4. Добавьте текст каждого элемента списка внутрь соответствующих тегов `
5. `.

Ответ:

• Первый элемент
• Второй элемент
• Третий элемент

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

Неправильное закрытие тегов: Забывание закрывающего тега (например, `

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

Использование устаревших тегов: Некоторые теги, такие как ``, считаются устаревшими и заменяются CSS-стилями. Использование устаревших тегов может привести к непредсказуемому отображению страницы в разных браузерах. Стремитесь использовать современные подходы.

Неправильное вложение тегов: Теги должны быть вложены друг в друга правильно, чтобы не нарушить структуру документа. Например, нельзя вложить тег `` внутрь тега ``, если нужно, чтобы текст был одновременно жирным и курсивом. Нужно использовать оба тега вокруг текста.

Ошибки в атрибутах: Опечатки или неправильные значения атрибутов (например, `serc` вместо `src`) приводят к тому, что элементы не отображаются или отображаются некорректно. Будьте внимательны при написании атрибутов и их значений.

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

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

CSS: Язык стилей, позволяющий управлять внешним видом веб-страниц, дополняя HTML. HTML определяет структуру, а CSS – оформление.

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

• HTML – это язык разметки, а не язык программирования.
• Каждый HTML-документ должен начинаться с объявления ``.
• Тег `` является корневым элементом HTML-документа.
• Атрибуты тегов расширяют возможности тегов.
• Важно правильно закрывать все теги.
• Современные веб-страницы используют HTML5 – последнюю версию HTML.
• HTML-документы читаются браузерами сверху вниз.