Веб-страницы и язык разметки HTML

💻 Информатика · 10 класс

Как устроена веб-страница

Веб-страница — это документ, который отображается в браузере и может содержать текст, изображения, ссылки и другие элементы. Веб-страницы создают на языке разметки HTML — языке гипертекстовой разметки. Он описывает не внешний вид сам по себе, а структуру документа: где заголовок, где абзац, где список.

Основа языка — теги. Тег заключают в угловые скобки. Большинство тегов парные: открывающий и закрывающий, между ними помещают содержимое. Закрывающий тег отличается косой чертой.

<p>Это абзац текста.</p>

Здесь <p> открывает абзац, а </p> его закрывает.

Структура документа

Документ имеет обязательную структуру: раздел с описанием и раздел с видимым содержимым.

<html>
<head><title>Моя страница</title></head>
<body>
<h1>Заголовок</h1>
<p>Текст страницы.</p>
</body>
</html>

Раздел <head> содержит служебные сведения, например заголовок окна в теге <title>. Раздел <body> содержит то, что видит пользователь.

Основные теги

Тег	Назначение
`<h1>...<h6>`	заголовки разных уровней
`<p>`	абзац текста
`<ul>`, `<li>`	маркированный список и его пункты
`<a>`	гиперссылка
`<img>`	изображение

Гиперссылки

Гиперссылка позволяет переходить с одной страницы на другую. Её создают тегом <a>, а адрес перехода указывают в атрибуте href.

<a href="https://school.ru">Перейти на сайт</a>

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

Изображения и списки

Изображение вставляют непарным тегом <img>, а адрес файла указывают в атрибуте src. Список из пунктов создают парой тегов: внешний тег задаёт сам список, а каждый пункт оформляют тегом <li>.

<img src="foto.jpg">
<ul>
<li>первый пункт</li>
<li>второй пункт</li>
</ul>

Как браузер показывает страницу

Файл веб-страницы — это обычный текст с тегами. Браузер читает этот текст, распознаёт теги и по ним формирует наглядное изображение страницы: расставляет заголовки, абзацы, картинки и ссылки. Сами теги на экране не видны — пользователь видит лишь результат разметки. Внешний вид (цвета, шрифты, расположение) обычно задают отдельно, с помощью стилей, тогда как HTML отвечает именно за структуру.

Понятие	Что это
тег	команда разметки в угловых скобках
атрибут	параметр тега со значением в кавычках
гиперссылка	переход на другой документ

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

Кратко о главном

Веб-страницы создают на языке разметки HTML.
Теги задают структуру документа и обычно бывают парными.
Документ состоит из разделов <head> и <body>.
Гиперссылку создаёт тег <a> с атрибутом href.

← Предыдущая тема

Передача информации и помехоустойчивое кодирование