HTML-TRAIN

01 — Что такое HTML

Язык разметки веба

Прежде чем писать код — нужно понять, что вообще такое HTML и зачем он нужен.

Что такое HTML?

Основное понятие

▶

HTML (HyperText Markup Language) — это язык разметки. Не язык программирования! Это важно понять. HTML не думает, не считает, не принимает решений. Он просто описывает структуру страницы.

Представь, что веб-страница — это лист бумаги. HTML говорит браузеру: вот заголовок, вот абзац, вот картинка, вот список. Браузер читает HTML и показывает всё это на экране.

💡

HTML создал Тим Бернерс-Ли в 1991 году. С тех пор он является основой каждой веб-страницы в интернете — без исключений.

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

Браузер и теги

▶

HTML работает через теги — специальные обозначения, которые пишутся в угловых скобках < >. Теги — это команды браузеру: "покажи это как заголовок", "это абзац", "здесь картинка".

Большинство тегов парные: есть открывающий тег и закрывающий. Закрывающий пишется со слешем внутри:

пример тегов
<p>Это абзац текста</p>
<h1>Это заголовок</h1>
<strong>Жирный текст</strong>

✓

Текст между открывающим и закрывающим тегом называется содержимым тега. Браузер применяет смысл тега к этому содержимому.

02 — Структура

Скелет HTML-страницы

Каждый HTML-файл начинается и заканчивается одинаково. Вот стандартный шаблон.

index.html — базовая структура
<!DOCTYPE html>
<html lang="ru">

  <head>
    <meta charset="UTF-8">
    <title>Название вкладки</title>
  </head>

  <body>
    <!-- Весь видимый контент сюда -->
    <h1>Привет, мир!</h1>
  </body>

</html>

DOCTYPE и <html>

Самое начало файла

▶

<!DOCTYPE html> — это не тег, это объявление. Оно говорит браузеру: "этот файл написан на современном HTML5". Всегда пишется самой первой строкой.

<html> — корневой тег. Всё содержимое страницы находится внутри него. Атрибут lang="ru" сообщает поисковикам и программам чтения экрана, на каком языке страница.

⚠

Не забывай закрывать тег </html> в самом конце файла. Незакрытые теги могут ломать страницу!

Два главных раздела

▶

<head> — невидимая "голова" страницы. Здесь хранятся настройки: название вкладки, кодировка, подключение шрифтов и стилей. Пользователь это не видит.

<body> — "тело" страницы. Всё, что должно отображаться в браузере — текст, картинки, кнопки, видео — пишется внутри <body>.

<head>

Метаданные, невидимые пользователю

<title>

Название во вкладке браузера

<meta>

Кодировка, описание для SEO

<body>

Весь видимый контент страницы

03 — Основные теги

Текст, заголовки, списки

Изучи теги, которые используются на каждом сайте.

Заголовки h1–h6

Иерархия текста

▶

HTML предоставляет шесть уровней заголовков. <h1> — самый главный и крупный, <h6> — самый мелкий. На странице обычно один <h1> — это главный заголовок, как название статьи.

заголовки
<h1>Главный заголовок страницы</h1>
<h2>Раздел статьи</h2>
<h3>Подраздел</h3>
<h4>Ещё меньше</h4>

✓

Поисковики (Google) очень любят правильную иерархию заголовков. Это важно для SEO — продвижения сайта в поиске.

Абзацы и текст

p, strong, em, br

▶

Для обычного текста используй тег <p> (paragraph — абзац). Каждый абзац оборачивается в свой <p>.

форматирование текста
<p>Обычный абзац текста.</p>

<p>Здесь есть <strong>жирный</strong> текст.</p>

<p>А это <em>курсив</em>.</p>

<p>Первая строка<br>Вторая строка</p>

<p>

Абзац

Жирный (важный) текст

<em>

Курсив (выделение)

<br>

Перенос строки (одиночный)

Списки

ul, ol, li

▶

В HTML два вида списков. Маркированный — с точками, без порядка (<ul>). Нумерованный — с цифрами, по порядку (<ol>). Каждый элемент списка — тег <li>.

списки
<!-- Маркированный список -->
<ul>
  <li>Яблоко</li>
  <li>Банан</li>
  <li>Апельсин</li>
</ul>

<!-- Нумерованный список -->
<ol>
  <li>Шаг первый</li>
  <li>Шаг второй</li>
</ol>

04 — Медиа и ссылки

Картинки, ссылки и блоки

Без этих тегов не обходится ни один современный сайт.

Атрибуты тегов

Дополнительные настройки

▶

Атрибуты — это дополнительные параметры, которые пишутся внутри открывающего тега. Они дают тегу больше информации: куда ведёт ссылка, какой адрес у картинки, какой стиль применить.

атрибуты
<!-- атрибут = "значение" -->
<тег атрибут="значение">

<!-- Пример: ссылка с атрибутом href -->
<a href="https://google.com">Google</a>

💡

Значение атрибута всегда берётся в кавычки. У одного тега может быть несколько атрибутов одновременно.

Картинки <img>

Вставка изображений

▶

Тег <img> — одиночный (не нужен закрывающий). Он вставляет картинку. Обязательный атрибут src — это адрес (путь) к изображению. Атрибут alt — текстовое описание для слепых пользователей и если картинка не загрузилась.

картинки
<!-- Картинка из интернета -->
<img
  src="https://site.com/photo.jpg"
  alt="Описание картинки"
  width="300"
>

<!-- Локальная картинка -->
<img src="images/photo.jpg" alt="Фото">

src

Путь к изображению

alt

Текстовое описание

width

Ширина в пикселях

height

Высота в пикселях

Ссылки <a>

Гиперссылки и навигация

▶

Тег <a> (anchor — якорь) создаёт гиперссылку. Атрибут href указывает, куда ведёт ссылка. target="_blank" открывает ссылку в новой вкладке.

ссылки
<!-- Обычная ссылка -->
<a href="https://google.com">Открыть Google</a>

<!-- Открыть в новой вкладке -->
<a href="https://google.com"
   target="_blank">Google (новая вкладка)</a>

<!-- Ссылка-кнопка -->
<a href="#section">
  <button>Нажми меня</button>
</a>

Блоки и контейнеры

div, section, header

▶

<div> — универсальный блок-контейнер. Сам по себе он ничего не выглядит, но с CSS-стилями из него делают карточки, колонки, секции. Это рабочая лошадка HTML.

Семантические теги (<header>, <footer>, <section>) делают то же самое, но имеют смысловое значение — для поисковиков и доступности.

блоки
<header>
  <h1>Название сайта</h1>
</header>

<section>
  <div>
    <p>Контент раздела</p>
  </div>
</section>

<footer>
  <p>Подвал сайта</p>
</footer>

<div>

Универсальный блок

Шапка страницы

Раздел контента

Подвал страницы

<main>

Главный контент

<nav>

Навигационное меню

Кнопки <button>

Интерактивные элементы

▶

Тег <button> создаёт кнопку. Внутри можно написать любой текст или поставить иконку. Кнопки обычно делают интерактивными с помощью JavaScript, но в HTML они уже кликабельны.

кнопки
<button>Нажми меня!</button>

<button type="button">Обычная кнопка</button>

<button disabled>Неактивная кнопка</button>

✓

В нашем редакторе практики кнопки автоматически получат красивое оформление — тебе не нужно писать CSS!

✦ Финальное задание

Создай свой первый сайт

Применяй всё, что изучил. Напиши HTML-код прямо в редакторе — и сразу увидишь результат.

📝

Структура HTML

🔤

Заголовок h1

🖼

Картинка

📄

Параграф

📋

Список

🔘

Кнопки

Live

Редактор кода

Предпросмотр

Прогресс задания 0 / 6

✓

Правильная структура HTML: DOCTYPE, html, head, body

✓

Есть заголовок <h1>

✓

Есть картинка <img> с атрибутом src

✓

Есть параграф <p>

✓

Есть список <ul> или <ol> с элементами <li>

✓

Есть хотя бы одна кнопка <button>

🎉

Обучение пройдено!

Поздравляем! Ты создал свой первый настоящий сайт на HTML. Это огромный шаг — теперь ты понимаешь, как устроен интернет изнутри.

Дальше — изучи CSS для красивых стилей и JavaScript для интерактивности. Путь разработчика начат!

🏅

HTML Developer

Первый сайт создан · HTML-TRAIN

✦ Задания

5 практических заданий

Нарастающая сложность. Напиши код → ▶ Запустить → ✓ Проверить.

Выполнено0 / 5

Легко

Визитка

Создай HTML-страницу с именем, фото (<img>), кратким описанием и ссылкой.

HTML

Предпросмотр

Легко

Рецепт блюда

Заголовок, картинка, <ul> ингредиентов, <ol> шагов.

HTML

Предпросмотр

Средне

Топ-5 фильмов

<table> 5 фильмов (год, жанр, рейтинг). <header> и <footer>.

HTML

Предпросмотр

Средне

Новостной портал

<nav> + три <article> с заголовком, картинкой и текстом.

HTML

Предпросмотр

Сложно

Лендинг

Hero-секция + три блока фич + <form> с полями + <footer>.

HTML

Предпросмотр

Учи HTMLс нуля

Язык разметки веба

Скелет HTML-страницы

Текст, заголовки, списки

Картинки, ссылки и блоки

Создай свой первый сайт

5 практических заданий

Учи HTML
с нуля