3.1. Создание HTML-документа в редакторе Блокнот

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

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

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

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

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

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

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

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

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

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

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

Основные элементы простого HTML-документа

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

Разбор задач

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

Условие. Создать в Блокноте HTML-документ с заголовком страницы и одним абзацем текста, сохранить его как index.html и открыть в браузере. Сначала нужно отделить название вкладки от содержимого самой страницы. Для этого пригодится базовая структура из html, head и body.

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

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

Добавить заголовок, абзацы и перенос строки

Условие. В готовую страницу нужно добавить заголовок первого уровня, два абзаца и перенос строки в указанном месте. Здесь важно решить, где требуется отдельный смысловой блок, а где — только новая строка. Заголовок обозначается h1, абзацы — p, а br переносит строку внутри содержимого.

1. Найдите body и поместите туда заголовок: <h1>Моя страница</h1>. Он должен быть внутри body, потому что это видимое содержимое.
2. Запишите первый и второй абзацы отдельными парами тегов p. Так браузер воспринимает их как два самостоятельных блока, а не как один общий текст.
3. Внутри нужного фрагмента вставьте br в том месте, где требуется перенос строки. Не заменяйте им абзац, если смысл текста требует разделить его на два блока.
4. Сохраните изменения и обновите страницу в браузере. Сравните расположение строк и убедитесь, что заголовок стоит отдельно, а абзацы не слились.

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

Список и гиперссылка

Условие. Создать страницу со списком из трёх пунктов и гиперссылкой на заданный сайт. Список должен находиться в body, а у ссылки должен быть указан адрес назначения. Поэтому нужно сочетать элементы списка с тегом a и атрибутом href.

1. Выберите тип списка: ul создаёт маркированный список, а ol — нумерованный. Запишите выбранный тег внутри body, чтобы список появился на странице.
2. Добавьте три пункта, каждый в паре тегов li, например <li>Первый пункт</li>. Закройте каждый пункт и список, чтобы обозначить границы всех элементов.
3. В нужном месте создайте ссылку: <a href="https://example.com">Перейти на сайт</a>. Замените адрес в кавычках на заданный, а текст между тегами — на понятное название ссылки.
4. Сохраните файл и откройте его в браузере. Проверьте, что отображаются все три пункта, а переход по ссылке ведёт на заданный адрес.

Ответ. На странице отображается список из трёх пунктов и текст гиперссылки. Атрибут href задаёт адрес, а текст внутри тега a виден посетителю и служит областью перехода. Если ссылка не работает, сверьте адрес и кавычки.

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

Файл сохраняют как обычный текстовый документ .txt вместо .html, потому что не проверяют расширение или не замечают, что редактор добавил его автоматически. В таком случае браузер может открыть содержимое как текст, а не обработать разметку. Проверьте полное имя файла в папке и убедитесь, что окончание — .html.

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

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

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

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

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

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

• HTML-документ является обычным текстовым файлом с разметкой.
• Основная структура документа включает html, head и body.
• Теги записывают в угловых скобках.
• Парные теги имеют открывающую и закрывающую части.
• Атрибуты уточняют свойства HTML-элементов.
• Для просмотра результата HTML-файл открывают в браузере.
• При сохранении документа важно использовать расширение .html и подходящую кодировку.