HTML (HyperText Markup Language) — это язык гипертекстовой разметки, а не язык программирования. Созданный Тимом Бернерсом-Ли в конце 80-х — начале 90-х годов, он является основой для создания веб-документов, отображаемых в браузере. HTML представляет собой простой набор тегов, описывающих структуру веб-документа. Веб-разработка делится на два направления: front-end и back-end.
- Back-end (серверная часть): Обработка запросов на сервере. Например, отправка сообщения в социальной сети обрабатывается сервером, который ищет информацию в базе данных и отправляет ответ пользователю. Это невидимая для обычных пользователей часть.
- Front-end (клиентская часть): Внешний вид сайта, видимый пользователю. Включает HTML (структура документа), CSS (стили, оформление) и JavaScript (интерактивность).
HTML — основа любой веб-страницы.
HTML-документ
HTML-документ — обычный текстовый файл, редактируемый в любом текстовом редакторе (например, Блокнот) или специализированном редакторе кода (Visual Studio Code, Notepad++). Редакторы кода значительно удобнее и ускоряют разработку.
Основные компоненты
Основной компонент — тег, команда браузеру (например, вывести текст или картинку). Теги заключаются в угловые скобки < >. Большинство тегов парные: открывающий и закрывающий (с добавленным слешем /), например: <p>Текст</p>. Теги можно вкладывать друг в друга, соблюдая правильную вложенность. Теги могут иметь атрибуты и значения, изменяющие поведение тега. Например, атрибут bgcolor в теге <body> устанавливает цвет фона: <body bgcolor=»black»>.
Структура HTML-документа
Любой HTML-документ имеет следующую структуру:
<!DOCTYPE html>
<html>
<head>
<title>Заголовок страницы</title>
</head>
<body>
<!-- Содержимое страницы -->
</body>
</html>- <html>: Корневой элемент, обозначает весь документ.
- <head>: Метаданные о странице (заголовок, ссылки на стили и т.д.). title — текст в заголовке браузера.
- <body>: Видимое содержимое веб-страницы.
Заголовки в HTML
В HTML шесть уровней заголовков: <h1> — <h6>. Они структурируют текст и важны для поисковой оптимизации. На практике чаще используются <h1>, <h2> и <h3>.
Пример:
<h1>Заголовок 1 уровня</h1>
<h2>Заголовок 2 уровня</h2>
<h3>Заголовок 3 уровня</h3>Рассмотрены основы HTML, структура HTML-документа и заголовки. В следующих уроках продолжим изучение HTML и CSS.