Итак, ты хочешь изучить HTML.
Отлично.
Это значит, что ты готов узнать, как строятся сайты, почему браузеры показывают вещи именно так, а не иначе, и почему каждый веб-разработчик хотя бы раз в жизни писал:
<h1>Привет, мир!</h1>
и чувствовал себя странно могущественным.
HTML — это фундамент интернета.
Без HTML сайты были бы как дома без стен, книги без страниц или кофе без кофеина.
Технически возможно.
Эмоционально неприемлемо.
Что такое HTML?
HTML означает HyperText Markup Language.
Звучит сложно.
Но спокойно.
HTML — это просто язык, который используют для структурирования веб-страниц.
Он говорит браузеру, чем является каждая часть страницы:
- это заголовок,
- это абзац,
- это ссылка,
- это изображение,
- это список,
- это форма,
- это кнопка,
- а это, скорее всего, место, где кто-то забыл закрыть тег.
HTML на самом деле не “программирует” поведение.
Он описывает контент.
Думай об HTML как о скелете сайта.
CSS делает его красивым.
JavaScript делает его интерактивным.
А HTML говорит:
“Вот контент. Пожалуйста, покажи его как нормальную веб-страницу.”
Очень спокойно.
Очень важно.
Очень недооценено.
Почему стоит изучать HTML?
Потому что веб-разработка начинается с HTML.
Перед тем как создавать красивые layouts, анимации, dashboard’ы, веб-приложения, API и кнопки, которые делают подозрительно умные вещи, нужно понять структуру страницы.
HTML — это первый кирпич.
И да, он может выглядеть простым.
Но простое не значит ненужное.
Дом тоже начинается с кирпичей.
Если, конечно, ты не строишь его исключительно из уверенности в себе, что я не рекомендую.
HTML помогает понять, как на самом деле работают сайты.
Он даёт контроль над контентом.
Позволяет создавать настоящие страницы.
И даёт прекрасную возможность сказать:
“Я сам создал эту страницу.”
Это прекрасное предложение.
Даже если первая версия выглядит так, будто её проектировал сонный принтер.
HTML дружелюбен к начинающим
Хорошая новость: HTML — одна из самых простых технологий для старта.
Тебе не нужна высшая математика.
Тебе не нужен очень мощный компьютер.
Тебе не нужно понимать алгоритмы, базы данных или почему JavaScript иногда ведёт себя как енот внутри клавиатуры.
Можно начать с обычного текстового редактора и браузера.
И всё.
Например:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Моя первая страница</title>
</head>
<body>
<h1>Привет, веб!</h1>
<p>Это моя первая HTML-страница.</p>
</body>
</html>
Сохрани файл.
Открой его в браузере.
Бум.
У тебя есть веб-страница.
Маленькая?
Да.
Красивая?
Возможно, ещё нет.
Твоя?
Абсолютно.
И это важно.
HTML придаёт контенту смысл
HTML нужен не только для того, чтобы бросить текст на страницу.
Он также придаёт смысл.
Например, заголовок — это не просто большой текст.
Это заголовок.
Абзац — это не случайная группа слов.
Это абзац.
Ссылка — это не просто синий подчёркнутый текст из древнего интернета.
Это связь с другой страницей.
HTML придаёт контенту структуру и смысл.
Это важно для:
- браузеров,
- поисковых систем,
- инструментов доступности,
- screen reader’ов,
- пользователей,
- и будущего тебя, который откроет файл через три месяца и спросит, что прошлый ты имел в виду.
Хороший HTML делает страницу легче для чтения, понимания, стилизации и поддержки.
Плохой HTML иногда тоже работает.
Но держать ноутбук на одном колене, пока пьёшь кофе, тоже иногда работает.
Это не значит, что это хорошая идея.
HTML-теги: кирпичики страницы
HTML строится из тегов.
Теги обычно идут парами:
<p>Это абзац.</p>
Первый тег открывает элемент.
Второй тег его закрывает.
Очень вежливо.
Очень организованно.
В основном.
Некоторые теги не требуют закрытия, например изображения:
<img src="kot.jpg" alt="Очень серьёзный кот">
Браузер читает эти теги и строит страницу.
Ты пишешь инструкции.
Браузер их выполняет.
Обычно.
Если что-то выглядит странно, есть большая вероятность, что ты забыл закрыть тег, и браузер теперь вежливо импровизирует.
Браузеры многое прощают.
Иногда слишком многое.
Как учитель, который пропускает тебя дальше, но смотрит с разочарованием.
Что можно создать с HTML?
С помощью HTML можно создать структуру почти любой веб-страницы.
Можно строить:
- персональные страницы,
- посты блога,
- landing pages,
- страницы курсов,
- портфолио,
- документацию,
- простые сайты,
- формы,
- навигационные меню,
- галереи изображений,
- и первую версию практически любого веб-проекта.
Сам HTML не сделает сайт элегантным.
Это территория CSS.
Сам HTML не сделает сайт интерактивным.
Это территория JavaScript.
Но без HTML нечего стилизовать и не с чем взаимодействовать.
HTML — это сцена.
Всё остальное выступает на ней.
О чём этот курс?
Этот курс HTML создан для настоящих начинающих.
Не для “начинающих”, которые уже знают пять фреймворков и casually говорят что-то вроде:
“Мне просто нужна стратегия semantic markup для этого компонента.”
Нет.
Для настоящих начинающих.
Для людей, которые хотят понять, как работают веб-страницы с нуля.
В этом курсе ты научишься:
- что такое HTML,
- как устроен HTML-документ,
- как работают заголовки и абзацы,
- как создавать ссылки,
- как добавлять изображения,
- как строить списки,
- как создавать таблицы,
- как работают формы,
- как inputs собирают информацию,
- как semantic 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>Мой сайт</title>
</head>
<body>
<h1>Добро пожаловать на мой сайт</h1>
<p>Здесь начинается моё путешествие в веб-разработку.</p>
<a href="https://example.com">Посетить другой сайт</a>
</body>
</html>
Она может выглядеть скромно, но уже содержит важные части:
<!DOCTYPE html>говорит браузеру, что ты используешь современный HTML.<html>охватывает всю страницу.<head>содержит информацию о странице.<body>содержит то, что люди действительно видят.<h1>создаёт главный заголовок.<p>создаёт абзац.<a>создаёт ссылку.
Это начало.
Ещё не glamour.
Но очень мощно.
Как маленький трактор.
Почему HTML всё ещё важен
Некоторые люди думают, что HTML — это “слишком базово”.
Эти люди ошибаются.
Вежливо, но ошибаются.
Современная веб-разработка всё ещё зависит от HTML.
React использует JSX, который очень похож на HTML.
Next.js рендерит HTML.
Astro генерирует HTML.
Браузеры понимают HTML.
Поисковые системы читают HTML.
Screen reader’ы зависят от хорошо написанного HTML.
Каждый сайт, который ты посещаешь, в какой-то форме построен на HTML.
Так что да, HTML — это основа.
Но основа как фундамент дома.
Проигнорируй её — и рано или поздно что-то рухнет.
Возможно, layout.
Возможно, твоя уверенность.
Типичные ошибки начинающих
Во время изучения HTML ты, скорее всего, сделаешь несколько классических ошибок.
Можешь забыть закрыть тег.
Можешь поставить элементы в странных местах.
Можешь использовать шесть тегов <br> вместо нормальных отступов.
Можешь добавить изображение и удивляться, почему оно не показывается.
Можешь создать ссылку, которая не ведёт абсолютно никуда.
Это нормально.
Каждый разработчик когда-то писал хаотичный HTML.
Некоторые до сих пор пишут.
Но с практикой ты начнёшь писать более чистую и осмысленную структуру.
Твои страницы будет легче стилизовать.
Контент будет иметь больше смысла.
А у браузера будет меньше причин импровизировать как джазовый музыкант в панике.
Для кого этот курс?
Этот курс для тебя, если:
- ты совсем новичок в веб-разработке,
- хочешь создать свой первый сайт,
- хочешь понять, как устроены веб-страницы,
- уже пробовал HTML, но хочешь более понятное объяснение,
- хочешь изучить основу перед CSS и JavaScript,
- хочешь курс для начинающих, который не относится к простым вопросам как к преступлению.
Простые вопросы — это хорошо.
Простые вопросы — это способ учиться.
Каждый эксперт когда-то спрашивал:
“Почему это не видно в браузере?”
Потом обновил страницу 17 раз и понял, что файл не был сохранён.
Традиция.
Почему начинать с HTML?
Потому что HTML быстро даёт уверенность.
Ты можешь создать что-то видимое за несколько минут.
Для начинающего это очень важно.
Ты не просто изучаешь теорию.
Ты строишь.
Даже маленькая страница приносит удовольствие, когда ты сделал её сам.
А когда ты понимаешь HTML, CSS становится легче.
JavaScript становится понятнее.
Фреймворки имеют больше смысла.
Весь веб начинает выглядеть менее загадочным.
Всё ещё хаотичным.
Но менее загадочным.
Это прогресс.
Готов начать?
HTML — это первый настоящий шаг в веб-разработку.
Он достаточно простой, чтобы начать.
Достаточно важный, чтобы относиться к нему серьёзно.
И достаточно полезный, чтобы сопровождать тебя всё время, пока ты создаёшь сайты.
В конце этого курса ты поймёшь, как устроены веб-страницы и как создавать собственные страницы с нуля.
Возможно, ты не станешь веб-волшебником за одну ночь.
Но перестанешь видеть сайты как магию.
И это уже очень хорошее начало.
Начни курс HTML
Готов создать свои первые настоящие веб-страницы?
Ты можешь начать полный курс HTML здесь:
Возьми ноутбук.
Возьми любопытство.
Возьми терпение.
И да, будь готов всё равно помогать бабушке с Wi-Fi.