Введение в HTML: что такое HTML, где и зачем используется

🌐 HTML — язык, который строит интернет

HTML (HyperText Markup Language) — это скелет любой веб-страницы. Без него не было бы ни блогов, ни интернет-магазинов, ни даже этой страницы!

Простым языком:
HTML — это инструкция для браузера, где и как отображать текст, картинки, кнопки и другие элементы.

🔍 Как работает HTML?

Браузер (Chrome, Safari и др.) читает HTML-код и рисует страницу. Например:

<!DOCTYPE html>
<html>
<head>
    <title>Мой первый сайт</title>
</head>
<body>
    <h1>Привет, мир!</h1>
    <p>Это мой первый HTML-документ. 🎉</p>
</body>
</html>

Что здесь происходит?
- <!DOCTYPE html> — сообщает браузеру, что это современный HTML.
- <html> — корневой элемент страницы.
- <head> — техническая информация (название, стили, скрипты).
- <body> — видимая часть страницы.
- <h1>, <p> — заголовок и абзац (об этом дальше).

🏗️ Основные строительные блоки

HTML состоит из тегов — команд в угловых скобках (< >). Большинство тегов парные:

<открывающий_тег> содержимое </закрывающий_тег>

Примеры популярных тегов:
- <h1>...</h1> — заголовок (от h1 до h6, где h1 — самый важный).
- <p>...</p> — абзац.
- <a href="https://example.com">Ссылка</a> — гиперссылка.
- <img src="cat.jpg" alt="Кот"> — изображение.

🌍 Где используется HTML?

Веб-сайты — от простых блогов до сложных сервисов (YouTube, Wikipedia).
Веб-приложения — Gmail, Trello, онлайн-банки.
Электронные письма — да, HTML есть даже в вашей почте!
Мобильные приложения — многие используют HTML через фреймворки (React Native, Ionic).

Факт: HTML работает на 99% устройств с интернетом — от холодильников до космических спутников! 🛰️

🛠️ Практика: создаём первую страницу

1. Откройте блокнот (или VS Code) и вставьте код:

<!DOCTYPE html>
<html>
<head>
    <title>Мой питомец</title>
</head>
<body>
    <h1>Мой кот — пушистый комок счастья</h1>
    <img src="https://placekitten.com/400/300" alt="Котёнок">
    <p>Любит спать на клавиатуре и смотреть в окно.</p>
    <a href="https://ru.wikipedia.org/wiki/Кошка">Узнать больше о котах</a>
</body>
</html>

2. Сохраните файл как cat.html и откройте его в браузере.

Что получилось:
- Страница с заголовком, картинкой, текстом и ссылкой.
- placekitten.com — сервис-заглушка для изображений котов.

💡 Почему HTML — это легко?

Не требует установки — пишите код даже в телефоне!
Мгновенный результат — сохранили файл → открыли в браузере.
Логичная структура — теги интуитивно понятны (<video> для видео, <ul> для списков).

Совет от Данилы Бежина:

«Работайте с реальными проектами сразу. Например, сверстайте резюме или страницу любимого фильма. Так учиться в 10 раз интереснее!»

📈 Что дальше?

С HTML вы уже можете:
- Создавать текстовые страницы.
- Добавлять изображения и ссылки.
- Структурировать контент.

Код — это свобода. Дерзайте! 🚀