Что такое HTML
HTML (HyperText Markup Language) — это язык разметки веб-страниц. HTML используется для описания структуры страницы.
С помощью HTML можно: - размещать текст - добавлять изображения - создавать ссылки - делать списки - создавать таблицы - размещать формы
Важно понимать:
HTML не является языком программирования.
Он описывает структуру документа.
Что такое HTML-документ
HTML-документ — это текстовый файл с расширением:
.html
Примеры:
index.html
about.html
page.html
Браузер читает этот файл и отображает страницу.
Общая структура HTML-документа
Каждая HTML-страница имеет стандартную структуру.
<!DOCTYPE html>
<html>
<head>
<title>Название страницы</title>
</head>
<body>
</body>
</html>
Эта структура используется почти во всех веб-страницах.
Разбор структуры HTML
1 <!DOCTYPE html>
Эта строка сообщает браузеру, что используется современная версия HTML. Она должна находиться в начале документа.
2 Тег <html>
Этот тег является корневым элементом страницы.
Он содержит весь HTML-код.
<html>
</html>
3 Тег <head>
Тег <head> содержит служебную информацию о странице.
Например: - название страницы - подключение стилей - подключение скриптов - метаданные
Пример:
<head>
<title>Моя страница</title>
</head>
4 Тег <title>
Тег <title> задаёт название страницы.
Название отображается: - во вкладке браузера - в закладках - в поисковых системах
Пример:
<title>Мой первый сайт</title>
5 Тег <body>
Тег <body> содержит всё содержимое страницы.
То есть: - текст - изображения - ссылки - таблицы - формы
Пример:
<body>
<h1>Привет</h1>
<p>Это моя первая страница</p>
</body>
Пример полной HTML-страницы
<!DOCTYPE html>
<html>
<head>
<title>Мой сайт</title>
</head>
<body>
<h1>Мой первый сайт</h1>
<p>Добро пожаловать на мою страницу.</p>
</body>
</html>
Когда браузер откроет эту страницу, он отобразит: - заголовок - текст
Что такое HTML-теги
HTML-страница состоит из тегов.
Тег — это специальная команда в HTML.
Пример тега:
<p>Текст</p>
Здесь:
- <p> — открывающий тег
- </p> — закрывающий тег
- между ними располагается содержимое
Парные и одиночные теги
Парные теги
Имеют открывающий и закрывающий тег.
Пример:
<p>Текст</p>
Одиночные теги
Не имеют закрывающего тега.
Пример:
<br>
<hr>
<img>
Вложенность тегов
Теги могут находиться внутри других тегов.
Пример:
<p>
Это <strong>важный</strong> текст
</p>
Важно соблюдать правильную вложенность.
Неправильно:
<p><strong>Текст</p></strong>
Правильно:
<p><strong>Текст</strong></p>
Комментарии в HTML
Комментарии используются для пояснения кода. Они не отображаются на странице.
Пример:
<!-- Это комментарий -->
Правила написания HTML
При работе с HTML рекомендуется соблюдать правила: - писать код аккуратно - использовать отступы - правильно закрывать теги - использовать понятные названия