Первые Шаги с HTML

Добро пожаловать в первый урок HTML.

Сегодня начинаем с нуля.

Без framework-ов.

Без JavaScript.

Без сложных build-инструментов.

Только один простой HTML-файл и браузер.

Красиво.

Подозрительно просто.

Что Ты Изучишь

В этом уроке ты узнаешь:

что такое HTML;
как выглядит HTML-файл;
как создать свою первую веб-страницу;
как открыть её в браузере;
как работают заголовки и абзацы;
почему HTML — это структура каждого сайта.

Что Такое HTML?

HTML означает:

HyperText Markup Language

Звучит очень серьёзно.

Но идея простая:

HTML описывает структуру веб-страницы.

Он говорит браузеру, что означает каждая часть страницы.

Например:

Это заголовок.
Это абзац.
Это ссылка.
Это изображение.

HTML не делает страницу красивой.

Это в основном работа CSS.

HTML не делает страницу интерактивной.

Это в основном работа JavaScript.

HTML — это скелет.

Без него веб-страница не имеет структуры.

А сайт без структуры — это как шкаф, собранный в полночь без инструкции.

Возможно, но опасно.

Создай Папку для Практики

Открой терминал и создай папку для практики HTML:

mkdir -p ~/html-practice
cd ~/html-practice

Теперь создай файл index.html:

touch index.html

Открой его в своём редакторе.

Например, если используешь VS Code:

code index.html

Или используй любой редактор, который тебе удобен.

Главное, чтобы файл назывался:

index.html

Это типичное имя главной страницы сайта.

Твоя Первая HTML-Страница

Добавь этот код в index.html:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Моя Первая HTML-Страница</title>
</head>
<body>
  <h1>Привет, HTML!</h1>
  <p>Это моя первая веб-страница.</p>
</body>
</html>

Сохрани файл.

Поздравляю.

Ты написал свою первую HTML-страницу.

Без фейерверков.

Но браузер уже готов.

Открыть Страницу в Браузере

Можно открыть файл напрямую в браузере.

Найди файл и открой его.

Или из терминала, если система это поддерживает:

xdg-open index.html

Ты должен увидеть:

Привет, HTML!
Это моя первая веб-страница.

Браузер читает HTML и превращает его в веб-страницу.

Это базовая магия.

Не тёмная магия.

Просто браузерная магия.

Понимание Кода

Посмотрим на страницу по частям.

Эта строка говорит браузеру, что это HTML-документ:

<!DOCTYPE html>

Эта строка открывает HTML-документ:

<html lang="ru">

Эта часть содержит информацию о странице:

<head>
  <meta charset="UTF-8">
  <title>Моя Первая HTML-Страница</title>
</head>

title показывается во вкладке браузера.

Эта часть содержит видимый контент:

<body>
  <h1>Привет, HTML!</h1>
  <p>Это моя первая веб-страница.</p>
</body>

Всё внутри body — это то, что пользователь видит на странице.

Заголовки и Абзацы

Тег h1 создаёт главный заголовок:

<h1>Привет, HTML!</h1>

Тег p создаёт абзац:

<p>Это моя первая веб-страница.</p>

HTML-теги обычно идут парами:

<p>Открывающий тег, контент, закрывающий тег.</p>

Открывающий тег:

<p>

Закрывающий тег:

</p>

Символ / означает, что элемент заканчивается.

HTML любит, когда вещи закрыты правильно.

В отличие от некоторых людей с вкладками браузера.

Измени Контент

Теперь измени свою страницу:

<body>
  <h1>Мой Первый Сайт</h1>
  <p>Привет! Я изучаю HTML шаг за шагом.</p>
  <p>Эта страница простая, но настоящая.</p>
</body>

Сохрани файл.

Обнови браузер.

Ты должен увидеть новый текст.

Базовый workflow такой:

редактируй файл
сохрани файл
обнови браузер
посмотри результат

Просто.

Честно.

Без загадочной build-ошибки с другой планеты.

Опционально: Запустить Страницу через Caddy

Открывать файл напрямую — нормально.

Но можно также запустить папку как маленький локальный сайт.

Если у тебя установлен Caddy, запусти это внутри ~/html-practice:

caddy file-server --listen :8080

Потом открой:

http://localhost:8080

Это полезно, потому что больше похоже на работу настоящих сайтов.

Твой компьютер становится маленьким веб-сервером.

Очень маленьким.

Очень гордым.

Частые Ошибки

Забыть Сохранить

Если ты изменил файл, но браузер не изменился, сначала сохрани файл.

Браузер не читает твои мысли.

HTML тоже.

Неправильное Расширение Файла

Это правильно:

index.html

Это не то же самое:

index.txt
index.html.txt

Файл должен заканчиваться на .html.

Отсутствующие Закрывающие Теги

Так лучше:

<p>Привет, мир.</p>

А это уже хаос:

<p>Привет, мир.

Браузеры многое прощают, но не злоупотребляй их добротой.

Терпеливый браузер — не причина писать хаотичный HTML.

Практика

Создай страницу с:

одним главным заголовком;
двумя абзацами;
своим именем или nickname;
одним предложением о том, почему ты хочешь изучать HTML.

Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Обо Мне</title>
</head>
<body>
  <h1>Обо Мне</h1>
  <p>Привет, меня зовут Viktor.</p>
  <p>Я изучаю HTML, потому что хочу создавать сайты.</p>
</body>
</html>

Измени текст на свой.

Не просто копируй.

HTML лучше изучается, когда пальцы немного страдают.

Мини-Задание

Создай новый файл:

touch about.html

Внутри создай вторую страницу с:

title во вкладке браузера;
заголовком h1;
тремя абзацами;
одним предложением: “Это моя вторая HTML-страница.”

Открой её в браузере.

Ты только что создал больше одной HTML-страницы.

Опасный прогресс.

Итог

Сегодня ты узнал, что:

HTML означает HyperText Markup Language;
HTML описывает структуру веб-страницы;
HTML-файл обычно заканчивается на .html;
index.html часто является главной страницей;
head содержит информацию о странице;
body содержит видимый контент;
h1 создаёт главный заголовок;
p создаёт абзац;
базовый workflow — редактируй, сохрани, обнови.

Ты создал свою первую веб-страницу.

Маленькая страница.

Большое начало.

Следующий Урок

В следующем уроке мы внимательнее разберём структуру HTML-документа.

Поймём DOCTYPE, html, head, body, meta и почему браузеры ценят хорошую структуру.