"Информатика (в 2-х частях)", Горячев А.В., Островский С.Л., Паволоцкий А.В., Семёнов А.А., Чернышёва Т.Л., Широков Д.В.
Веб-страница — документ, который браузер превращает в видимый пользователю сайт: показывает текст, изображения, ссылки и другие элементы. Чтобы браузер понял, где заголовок, абзац или список, страницу описывают с помощью HTML — языка разметки. В нём теги задают структуру, а атрибуты уточняют свойства элементов, например адрес ссылки или путь к изображению. Основа аккуратной страницы — правильная вложенность тегов и верно указанные адреса ресурсов.
Текст подготовлен нейронной сетью по теме параграфа и не заменяет учебник — важные факты и формулировки сверяйте с ним.
Веб-страница — документ, который отображается в браузере и может содержать текст, изображения, ссылки и другие элементы. В отличие от листа обычного текста, она может быть интерактивной: по ссылке пользователь переходит к другому ресурсу. Понятие веб-страницы нужно, чтобы понимать, что именно создают при работе с HTML.
HTML — язык разметки, задающий структуру и содержание веб-страницы. Разметка помогает браузеру различать заголовки, абзацы, списки и другие части документа. HTML нужен не для набора команд, которые пользователь видит как текст, а для описания того, как устроена страница.
Тег — специальная конструкция HTML, обозначающая начало, конец или отдельный элемент страницы. Обычно тег записывают в угловых скобках, например <p> обозначает начало абзаца. Теги нужны, чтобы браузер распознал назначение фрагментов документа и показал их соответствующим образом.
Атрибут — параметр тега, уточняющий его свойства или задающий дополнительные данные. Например, внутри тега ссылки атрибут может содержать адрес, куда нужно перейти. Атрибуты нужны, когда одного обозначения типа элемента недостаточно и браузеру требуется дополнительная информация.
Веб-страница состоит из структурированных элементов, потому что браузеру нужно отличать заголовок от обычного текста, а ссылку — от подписи к изображению. Если оставить только сплошной текст, программа не сможет надёжно определить назначение каждого фрагмента. Разметка задаёт эти роли, поэтому браузер может расположить содержимое и сделать нужные части интерактивными.
Когда пользователь открывает HTML-файл или веб-адрес, браузер получает текст кода и разбирает его по правилам HTML. Он распознаёт теги и атрибуты, определяет отношения между элементами, а затем строит отображение страницы. Код при этом не обязательно показывается посетителю: браузер использует его как инструкцию, чтобы подготовить видимый результат.
Многие элементы записывают парными тегами: открывающий отмечает начало, а закрывающий — конец элемента. Например, текст между тегами абзаца воспринимается как один абзац, а не как отдельная команда. Некоторые элементы не обрамляют содержимое и поэтому записываются без пары; их назначение понятно и без закрывающего тега.
Теги можно вкладывать: например, список может содержать пункты, а внутри пункта может находиться ссылка. Такая вложенность отражает устройство документа и помогает браузеру понять, какие элементы относятся друг к другу. Закрывающие теги ставят в обратном порядке относительно открывающих: если элемент открыт внутри другого, сначала закрывают внутренний элемент.
Атрибуты помещают в открывающий тег, чтобы передать элементу конкретные параметры. У ссылки атрибут задаёт адрес перехода, а у изображения — путь к файлу, который нужно загрузить. Если адрес указан неверно, браузер не сможет найти нужный ресурс, хотя сам тег может быть записан правильно.
В таблице сопоставлены распространённые элементы, их назначение и примерная запись. Примеры показывают общий принцип: парные теги окружают содержимое, а одиночный элемент может задаваться одним тегом. Используй таблицу как памятку, но проверяй написание имён и атрибутов при создании страницы.
| Элемент | Назначение | Пример записи | Что отображается в браузере |
|---|---|---|---|
| Заголовок страницы | Задаёт название документа, которое видно на вкладке браузера | <title>Сайт класса</title> | Название на вкладке, а не основной заголовок в тексте страницы |
| Заголовок текста | Обозначает заголовок раздела в содержимом страницы | <h1>Наш класс</h1> | Заметный заголовок на самой странице |
| Абзац | Объединяет текст в отдельный смысловой блок | <p>Текст абзаца</p> | Отдельный абзац с переносом и интервалом |
| Гиперссылка | Создаёт переход к другому адресу или документу | <a href="page.html">Раздел</a> | Кликабельный текст ссылки |
| Изображение | Подключает графический файл | <img src="photo.jpg" alt="Фото класса"> | Изображение, если файл найден и загружен |
| Нумерованный или маркированный список | Объединяет пункты в упорядоченный или маркированный перечень | <ul><li>Пункт</li></ul> | Список с маркером; нумерованный вариант использует тег <ol> |
Задача 1. Создать простую веб-страницу с заголовком и двумя абзацами текста. Сначала нужно определить, какие элементы должны быть видны посетителю, а затем поместить их в основную часть документа. Для короткого примера достаточно каркаса HTML с телом страницы.
Ответ: в теле документа находятся один заголовок и два абзаца, каждый оформлен своим элементом. Если браузер показывает текст сплошным блоком, проверь, не пропущены ли теги абзацев и не допущена ли опечатка в их написании.
Задача 2. Добавить на страницу ссылку на сайт и изображение с поясняющим текстом. Для ссылки требуется указать адрес назначения, а для изображения — расположение файла; простой поясняющий текст можно поместить рядом с ним или в отдельный абзац. Важно проверить не только теги, но и точность адресов.
Ответ: ссылка оформлена тегом a с адресом в href, а файл изображения подключён через src. Если изображение не появилось, проверь имя и расширение файла, его папку и путь относительно HTML-файла.
Задача 3. Создать главную страницу сайта класса со списком разделов и ссылками на две отдельные страницы. Такой сайт состоит не из одного длинного документа, а из нескольких HTML-файлов, поэтому сперва нужно договориться об их именах и расположении. Тогда ссылки смогут вести к нужным страницам внутри проекта.
Ответ: главная страница содержит список, а его пункты ведут на два отдельных HTML-файла. Относительные адреса работают, если файлы расположены так, как предполагает указанный путь.
Теги иногда принимают за обычный текст и удаляют из них угловые скобки. Это происходит, когда ученик сосредоточен на словах внутри кода и не замечает, что скобки отделяют разметку от содержимого. Проверь себя: открой файл в браузере и убедись, что названия тегов не выводятся как обычные слова, а нужные элементы получили оформление.
Другая ошибка — пропустить закрывающий тег или закрыть вложенные элементы не в том порядке. Так бывает, если писать разметку длинными фрагментами, не сверяя пары; браузеру становится труднее определить границы элементов. Сравни открывающие и закрывающие теги и проследи, чтобы внутренний элемент закрывался раньше внешнего.
Неверный адрес ссылки или путь к изображению оставляет элемент без нужного ресурса. Причиной часто становятся опечатка в имени, неправильное расширение файла или неверное представление о расположении папок. Проверь адрес отдельно, затем открой ссылку и убедись, что файл изображения находится по указанному пути.
Структурными тегами пытаются решить все задачи внешнего вида, хотя HTML в первую очередь описывает содержание и его устройство. Такое смешение возникает, когда оформление и разметку считают одним и тем же. Проверь себя: спроси, обозначает ли тег смысл элемента или только пытается изменить его вид; для настройки оформления обычно изучают CSS.
Для работы с веб-страницами нужны навыки работы с текстовым редактором и понимание того, как устроены файлы и папки: от этого зависят сохранение документа и путь к изображению. Тема опирается на понятия информации, файла, адреса ресурса и алгоритма, потому что создание страницы — последовательность действий с данными и адресами. Знание HTML пригодится дальше при изучении CSS, создании многостраничных сайтов и публикации веб-ресурсов, доступных другим людям.
Чем веб-страница отличается от обычного текстового файла?
Веб-страница содержит HTML-разметку, которая сообщает браузеру, где находятся заголовки, абзацы, ссылки и другие элементы. Обычный текстовый файл сам по себе такой структуры не задаёт. HTML-файл можно открыть и как текст, и в браузере, который интерпретирует его разметку.
Зачем нужны закрывающие теги?
Закрывающий тег показывает, где заканчивается элемент, например абзац или заголовок. Благодаря этому браузер понимает, к какой части текста относится разметка. Если забыть закрыть тег или нарушить порядок вложенности, страница может отображаться не так, как задумано.
Почему изображение не отображается на странице?
Чаще всего в атрибуте изображения указан неверный путь или файла нет в нужной папке. Проверь написание имени и расширения файла, а также расположение папок относительно HTML-документа. Изображение может не загрузиться и при недоступности ресурса в интернете.
Чем тег отличается от атрибута?
Тег обозначает элемент или его роль в структуре страницы, например абзац или ссылку. Атрибут записывают внутри открывающего тега, чтобы уточнить его свойства или задать дополнительные данные. Например, у тега ссылки атрибут указывает адрес перехода.
Можно ли создать веб-страницу без специального редактора?
Да, HTML-файл можно написать в обычном текстовом редакторе и сохранить с расширением .html. Специальный редактор может подсвечивать теги и помогать находить ошибки, но не является обязательным. Готовую страницу можно открыть в браузере.
Модуль 3. Web-конструирование. Основы мастерства
