Основы языка разметки веб-страниц
💻 Информатика · 11 класс
Как устроена веб-страница
Язык разметки веб-страниц — это набор правил, по которым описывают структуру документа для браузера. Сам по себе язык не выполняет вычислений, а лишь размечает текст с помощью тегов — специальных меток в угловых скобках. Браузер читает разметку и показывает готовую страницу на экране.
Большинство тегов парные: открывающий и закрывающий. Например, тег <p> начинает абзац, а тег </p> его завершает. Содержимое между ними оформляется по смыслу тега. Есть и одиночные теги, например тег вставки изображения, которым закрывающая пара не нужна.
Структура документа
Любая страница имеет обязательный каркас: заголовочную часть с описанием документа и тело, где находится видимое содержимое. Заголовочная часть не отображается в окне, но хранит важные сведения — название вкладки и кодировку.
<html>
<head>
<title>Заголовок вкладки</title>
</head>
<body>
<h1>Главный заголовок</h1>
<p>Первый абзац текста.</p>
</body>
</html>Основные теги
| Тег | Назначение |
|---|---|
h1 ... h6 | Заголовки разных уровней |
p | Абзац текста |
a | Гиперссылка на другую страницу |
img | Вставка изображения |
ul, ol, li | Списки и их элементы |
table, tr, td | Таблицы, строки, ячейки |
Атрибуты и ссылки
Многие теги принимают атрибуты — дополнительные параметры, которые записываются внутри открывающего тега. У ссылки адрес перехода задаёт атрибут href, у картинки путь к файлу — атрибут src. Например, ссылка на другую страницу записывается так:
<a href="page2.html">Перейти дальше</a>Оформление внешнего вида — цвета, шрифты, отступы — задаёт отдельный язык стилей, а интерактивное поведение добавляют скрипты. Сама разметка отвечает только за структуру и смысл содержимого, и это разделение делает страницы понятными и удобными в сопровождении.
Как браузер показывает страницу
Когда вы открываете сайт, браузер запрашивает у сервера файл разметки, разбирает теги и строит из них внутреннее представление документа — дерево элементов. Затем он применяет стили, рассчитывает положение каждого элемента и рисует страницу на экране. Поэтому одна и та же разметка может выглядеть немного по-разному в разных браузерах и на разных экранах.
Совет. Любую страницу в интернете можно изучить: браузер позволяет посмотреть её исходную разметку. Это хороший способ учиться, разбирая, как устроены настоящие сайты.
Современные страницы делают адаптивными — они подстраиваются под размер экрана телефона, планшета или компьютера. За это отвечают стили, а правильная и осмысленная разметка остаётся основой, без которой страница не будет работать корректно ни на одном устройстве.
Частые ошибки. Забывают закрывающий тег, из-за чего страница отображается неверно. Путают порядок вложенности: теги должны закрываться в порядке, обратном открытию. Пишут содержимое вне тела документа, и оно не отображается.
Кратко о главном
- Язык разметки описывает структуру страницы тегами в угловых скобках.
- Каркас документа: заголовочная часть и тело с содержимым.
- Теги бывают парными и одиночными; атрибуты задают их параметры.
- Разметка отвечает за структуру, стили — за оформление, скрипты — за поведение.