Каждая страница в браузере собирается из элементов HTML, подобно строительным блокам. Блоки текста, картинок, кнопок, ссылок и других элементов которые мы видим повседневно - все это элементы страниц сайтов. Каждый элемент описывается на языке разметки HTML. И сами файлы имеют расширение .html. Когда мы открываем любую страницу в интеренет именно она в первую очередь загружается и показывается в браузере.
Сам по себе файл HTML - это набор текста с раширением .html, в котором пишется код HTML. Для того что бы разобраться как устроен HTML давайте я покажу пример ниже.
Эта кнопка создана с помощью HTML, а код ниже описывает ее. Если написать такой код в файле HTML, то эта кнопка окажется там.
<button>Это кнопка</button>
Давайте обратим наше внимание на угловые скобки - они называются html тегами. Теги - это описание элементов на странице сайта. В нашем случает тег - <button> описывает простую кнопку.
Теги всегда парные, первый тег всегда открывающий <button>, внутри "находится текст" и закрывающий </button>.
Ниже представлен простой пример полного файла index.html. Внутри него создана кнопка "Нажми меня".
На другой код пока не обращайте внимания мы вернемся к нему позже, а пока рассмотри целостность всего файла html и как он выглядит изнутри.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Кнопка</title>
</head>
<body>
<!-- Вот наша кнопка -->
<button>Нажми меня</button>
</body>
</html>
Вы можете самостоятельно создать файл на рабочем столе вашего компьютера сделать ему расширение .html и пока вы не научились пользоваться редактором кода, откройте файл через блокнот, вставьте код выше и попробуй изменить название кнопки. После сохраните файла и откройте его в браузере просто нажав на него.
И так подытожим:
- Каждая страница сайта - это файл с расширением .html
- HTML файл - набор кода самого html
- HTML состоит из набора определенных тегов.
Попробуйте самостоятельно добавить другие теги:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Базовые HTML теги</title>
</head>
<body>
<!-- Заголовки -->
<h1>Это заголовок H1</h1>
<h2>Это заголовок H2</h2>
<!-- Абзац текста -->
<p>Это обычный абзац текста. Здесь может быть любая информация.</p>
<!-- Ссылка -->
<a href="https://example.com">Перейти на сайт</a>
<!-- Картинка -->
<img src="https://via.placeholder.com/150" alt="Пример изображения">
<!-- Список (ненумерованный) -->
<ul>
<li>Пункт списка 1</li>
<li>Пункт списка 2</li>
</ul>
<!-- Кнопка -->
<button>Нажми меня</button>
<!-- Горизонтальная линия -->
<hr>
<!-- Пример выделения текста -->
<strong>Жирный текст</strong> и <em>курсив</em>.
</body>
</html>