§ 1. Создаём первую web-страницу

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

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

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

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

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

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

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

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

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

Теги <h1> и <p> обозначают заголовок и абзац, то есть разные смысловые части текста. Они не просто делают буквы крупнее или добавляют отступ: разметка сообщает, как устроен документ. Это важно, потому что страница становится понятнее и человеку, и программам, которые её обрабатывают. Для заголовка вкладки предназначен другой элемент — <title> внутри <head>.

Чтобы сделать первую страницу, наберите разметку в текстовом редакторе и сохраните документ с расширением HTML. Расширение помогает системе и браузеру распознать тип файла, а не принять его за обычный текст. Затем откройте файл в браузере и проверьте результат. Если отображение не совпало с ожиданием, вернитесь к исходному коду: ошибка часто связана с пропущенным тегом или неверным расположением элемента.

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

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

Разбор задач

Задача 1. В исходном коде пропущены закрывающие теги абзаца и заголовка. Нужно восстановить разметку так, чтобы границы элементов были понятны браузеру. Допустим, дан фрагмент: <h1>Мой город, <p>Он стоит у реки. Найдите, где должны появиться закрывающие записи. Сначала определите, какой текст относится к заголовку, а какой — к абзацу.

1. У заголовка начало отмечено тегом <h1>, поэтому закройте его после слов «Мой город» записью </h1>.
2. Абзац начинается с <p> и содержит предложение «Он стоит у реки». После него поставьте </p>.
3. Проверьте, что элементы не перекрывают друг друга: сначала завершается заголовок, затем начинается абзац.

Ответ. Корректный фрагмент: <h1>Мой город</h1> <p>Он стоит у реки.</p>. Закрывающий тег должен соответствовать открывающему по имени, а косая черта показывает конец элемента. Такая проверка помогает увидеть пропуск до открытия страницы.

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

1. Начните документ с объявления типа, затем откройте корневой элемент <html>.
2. В области <head> разместите пару <title>Мой край</title>, потому что это название вкладки.
3. Откройте <body>, добавьте <h1>Природа края</h1> и два отдельных элемента <p> для текстов о лесах и реках.
4. Закройте элементы в обратном порядке вложенности: сначала body, затем html.

Ответ. В body должны находиться один заголовок и два абзаца, каждый со своей парой тегов. В head находится название «Мой край», а не текст рассказа. Так браузер сможет показать нужную надпись во вкладке и правильно организовать содержимое страницы.

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

1. Проверьте, что файл сохранён с расширением HTML, а не как обычный текстовый документ.
2. Если речь о названии вкладки, найдите <title> и убедитесь, что он находится внутри <head>.
3. Если речь о заголовке на странице, поместите текст между <h1> и </h1> внутри <body>.
4. Сохраните исправления и снова откройте файл в браузере, чтобы проверить результат.

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

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

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

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

Считают, что <title> и <h1> решают одну задачу, потому что оба элемента связаны с заголовком. Но первый задаёт название страницы во вкладке, а второй — главный заголовок в её содержимом. Проверьте расположение: title должен находиться в head, а h1 — в body. Если надпись не там, где нужно, вероятно, выбран не тот тег.

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

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

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

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

• HTML описывает структуру веб-страницы с помощью разметки.
• Теги заключают в угловые скобки.
• Парный тег состоит из открывающего и закрывающего тегов.
• Содержимое страницы размещают в области <body>.
• Название во вкладке задаёт элемент <title>, а заголовок в содержимом — <h1>.
• HTML-файл можно открыть в браузере, чтобы увидеть результат разметки.