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