Основы HTML: создание простых веб-страниц
💻 Информатика · 9 класс
Основы языка HTML
HTML (язык гипертекстовой разметки) — это язык, на котором создаются веб-страницы. Он не является языком программирования: HTML только описывает структуру документа — где заголовок, где абзац, где картинка. Браузер читает эту разметку и отображает страницу так, как задумал автор.
Разметка строится из тегов — специальных команд в угловых скобках. Большинство тегов парные: открывающий <p> и закрывающий </p>, между ними находится содержимое.
Структура документа
Любая HTML-страница имеет стандартный каркас:
<!DOCTYPE html>
<html>
<head>
<title>Заголовок вкладки</title>
</head>
<body>
Содержимое страницы
</body>
</html>В разделе head размещают служебные сведения, а всё видимое содержимое — внутри body.
Основные теги
| Тег | Назначение |
|---|---|
| <h1>...<h6> | заголовки разных уровней |
| <p> | абзац текста |
| <a> | гиперссылка |
| <img> | изображение |
| <ul>, <ol>, <li> | списки и их пункты |
| <strong>, <em> | выделение жирным и курсивом |
Ссылки и изображения
Гиперссылка создаётся тегом <a> с атрибутом href, где указывают адрес перехода. Изображение вставляют тегом <img> с атрибутом src (путь к файлу):
<a href="https://example.ru">Перейти на сайт</a>
<img src="foto.jpg" alt="Описание картинки">Атрибут alt задаёт текст, который покажется, если картинка не загрузится.
Теги и атрибуты
Важно различать тег и атрибут. Тег определяет, что это за элемент (абзац, ссылка, картинка). Атрибут уточняет его свойства и пишется внутри открывающего тега в виде имя="значение". Один тег может иметь несколько атрибутов, например ссылка с адресом и подсказкой. Браузеры не показывают сами теги — они лишь управляют тем, как выглядит и ведёт себя содержимое страницы.
Списки
Маркированный список создаётся тегом <ul>, нумерованный — <ol>, а каждый пункт — тегом <li>: Пункты обоих видов списков обозначаются одинаково, а вид списка задаёт внешний тег. Списки можно вкладывать друг в друга, создавая многоуровневые перечни.
<ul>
<li>Первый пункт</li>
<li>Второй пункт</li>
</ul>Частые ошибки. Не забывайте закрывать парные теги — иначе разметка «поедет». Соблюдайте вложенность: внутренний тег закрывают раньше внешнего. Атрибуты пишут внутри открывающего тега, а их значения берут в кавычки.
Изучение HTML — это первый шаг к созданию собственных сайтов. Оформление и цвета задаются отдельным языком стилей, а интерактивность — языком программирования, но именно HTML остаётся каркасом, на котором держится любая веб-страница.
Кратко о главном
- HTML описывает структуру веб-страницы, а не программирует её.
- Разметка состоит из тегов, чаще всего парных.
- Каркас страницы: html, head с title, body с содержимым.
- Основные теги: заголовки, абзацы, ссылки, изображения, списки.
- Важно закрывать теги и соблюдать их вложенность.