Структура

HTML.

Скелет любого сайта — от первого тега до готового проекта.

HTML — язык разметки. Он объясняет браузеру, что на странице заголовок, что абзац, что ссылка, а что форма. Любой сайт в интернете, от школьного блога до крупного магазина, держится на HTML: стили и скрипты работают уже поверх него.

  • 100 уроков
  • 20 модулей
  • 6000 XP
Приступить → Программа курса ›
Иллюстрация курса HTML
О КУРСЕ

Зачем это нужно.

Любой сайт начинается с HTML. Не зная его, невозможно ни сверстать страницу, ни понять, почему она ведёт себя так, а не иначе. Это самый короткий путь от «я ничего не умею» до первой настоящей страницы в браузере.

Образ

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

Представь человека: у него есть скелет, одежда и мышцы. HTML — это скелет. Он задаёт, что где находится и как части связаны между собой. Одежду (внешний вид) добавит CSS, а мышцы (поведение) — JavaScript. Без скелета остальное просто не на чем держать.

РЕЗУЛЬТАТ

Чему ты научишься.

1

Размечать текст

Заголовки, абзацы, выделение, списки, ссылки и изображения — всё, из чего состоит содержимое страниц.

2

Строить структуру

Каркас документа и семантические теги: header, nav, main, section, article, footer.

3

Делать таблицы и формы

Поля ввода, подписи, флажки, выпадающие списки и встроенная проверка данных без единой строки JavaScript.

4

Подключать медиа

Аудио, видео, адаптивные изображения, iframe и векторную графику SVG.

5

Готовить сайт к людям и поиску

Мета-теги, Open Graph, favicon, основы SEO и адаптивность под телефоны.

6

Делать доступно для всех

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

ПРАКТИКА

Что ты создашь.

Сайт-визитка

Одностраница о себе: структура, контент и форма обратной связи.

Блог

Многостраничный сайт со статьями и навигацией между страницами.

Лендинг

Продающая страница с преимуществами, отзывами, ценами и формой заявки.

ПРОГРАММА

Все темы по порядку.

20 модулей, 100 уроков. Уроки открываются по очереди: следующий — после того, как закончишь текущий. Пройденные отмечаются галочкой.

1Первые шагиЧто такое HTML и как работает сайт.5 уроков
300 XP
  1. Что такое HTML и как работает сайт50 XP
  2. Первая HTML-страница50 XP
  3. Теги и элементы50 XP
  4. Атрибуты50 XP
  5. Редактор кода и DevTools100 XP
2Работа с текстомЗаголовки, абзацы, выделение и списки.5 уроков
300 XP
  1. Заголовки h1–h650 XP
  2. Абзацы и переносы строк50 XP
  3. Выделение текста: strong и em50 XP
  4. Списки: ul, ol, li50 XP
  5. Цитаты и комментарии100 XP
3Ссылки и изображенияСвязываем страницы и добавляем картинки.5 уроков
300 XP
  1. Ссылки: тег a50 XP
  2. Абсолютные и относительные пути50 XP
  3. Изображения: тег img50 XP
  4. Alt, размеры и форматы50 XP
  5. Якоря и навигация по странице100 XP
4Структура страницыИз чего состоит HTML-документ.5 уроков
300 XP
  1. Каркас документа: doctype, html, head, body50 XP
  2. Тег title и метатеги50 XP
  3. Блоки div и span50 XP
  4. Семантика: header, nav, main, footer50 XP
  5. Практика: первая полноценная страница100 XP
5Семантическая вёрсткаДелаем разметку понятной браузеру и людям.5 уроков
300 XP
  1. section, article и aside50 XP
  2. figure и figcaption50 XP
  3. Вложенность и иерархия50 XP
  4. Основы доступности50 XP
  5. Практика: страница статьи100 XP
6ТаблицыПоказываем данные в строках и столбцах.5 уроков
300 XP
  1. Таблица: table, tr, td50 XP
  2. Шапка и подвал: th, thead, tbody, tfoot50 XP
  3. Объединение ячеек: colspan и rowspan50 XP
  4. caption и доступные таблицы50 XP
  5. Практика: расписание занятий100 XP
7Формы. Часть 1Собираем данные от пользователя.5 уроков
300 XP
  1. Тег form50 XP
  2. Поля ввода: input и его типы50 XP
  3. Подписи: label50 XP
  4. textarea и select50 XP
  5. Кнопки и отправка формы100 XP
8Формы. Часть 2Проверка данных и аккуратные формы.5 уроков
300 XP
  1. Флажки и переключатели50 XP
  2. Встроенная валидация: required и pattern50 XP
  3. fieldset и legend50 XP
  4. name, value и placeholder50 XP
  5. Практика: форма регистрации100 XP
9МультимедиаЗвук, видео и графика на странице.5 уроков
300 XP
  1. Аудио: тег audio50 XP
  2. Видео: тег video50 XP
  3. picture и srcset50 XP
  4. Встраивание: iframe50 XP
  5. Векторная графика: SVG100 XP
10Подключение CSS и JSСвязываем HTML со стилями и скриптами.5 уроков
300 XP
  1. Подключение стилей: link и style50 XP
  2. Встроенные стили и их минусы50 XP
  3. Подключение скриптов: script50 XP
  4. Атрибуты id и class50 XP
  5. Практика: страница со стилями100 XP
11Метаданные и SEOКак страницу находят и показывают в сети.5 уроков
300 XP
  1. Meta description50 XP
  2. Open Graph: красивые превью ссылок50 XP
  3. Favicon50 XP
  4. lang и кодировка50 XP
  5. Основы SEO100 XP
12Адаптивность в HTMLСтраница для любого экрана.5 уроков
300 XP
  1. Meta viewport50 XP
  2. Адаптивные изображения50 XP
  3. Мобильные особенности50 XP
  4. Тестирование на разных устройствах50 XP
  5. Практика: адаптивная страница100 XP
13ДоступностьСайт, которым могут пользоваться все.5 уроков
300 XP
  1. ARIA: роли и атрибуты50 XP
  2. Клавиатура и tabindex50 XP
  3. Ссылки пропуска (skip links)50 XP
  4. Контраст и читаемость50 XP
  5. Практика: проверка доступности100 XP
14Современные элементыГотовые интерактивные возможности HTML.5 уроков
300 XP
  1. details и summary50 XP
  2. Диалоги: dialog50 XP
  3. progress и meter50 XP
  4. time и mark50 XP
  5. data-атрибуты100 XP
15Организация кодаПишем HTML, который приятно читать.5 уроков
300 XP
  1. Валидация HTML50 XP
  2. Чистый код и отступы50 XP
  3. Именование классов: BEM50 XP
  4. Повторяющиеся блоки и шаблоны50 XP
  5. Структура проекта100 XP
16HTML и браузерЧто происходит под капотом.5 уроков
300 XP
  1. DOM: дерево страницы50 XP
  2. Как браузер читает HTML50 XP
  3. Быстрая загрузка: loading и defer50 XP
  4. Элемент template50 XP
  5. Практика: оптимизация страницы100 XP
17Проект 1: Сайт-визиткаСтраница о себе от идеи до результата.5 уроков
300 XP
  1. Планирование визитки50 XP
  2. Структура страницы50 XP
  3. Наполнение контентом50 XP
  4. Форма обратной связи50 XP
  5. Проверка и доработка100 XP
18Проект 2: БлогМногостраничный сайт со статьями.5 уроков
300 XP
  1. Планирование блога50 XP
  2. Главная и список статей50 XP
  3. Страница статьи50 XP
  4. Навигация между страницами50 XP
  5. Проверка и доработка100 XP
19Проект 3: ЛендингПродающая страница с формой.5 уроков
300 XP
  1. Планирование лендинга50 XP
  2. Первый экран и преимущества50 XP
  3. Блок отзывов и цен50 XP
  4. Форма заявки50 XP
  5. Проверка и доработка100 XP
20ФиналПубликация, портфолио и дальнейший путь.5 уроков
300 XP
  1. Аудит собственного проекта50 XP
  2. Публикация сайта50 XP
  3. Портфолио разработчика50 XP
  4. Что дальше: CSS и JavaScript50 XP
  5. Финальный экзамен100 XP
ДЛЯ КОГО

Подойдёт ли тебе этот курс.

Кому подойдёт

  • Тем, кто никогда не писал код
  • Тем, кто хочет делать сайты и верстать
  • Тем, кому нужна опора перед CSS и JavaScript

Что нужно знать и иметь

  • Ничего специального: достаточно уметь пользоваться браузером
  • Можно начать сразу или после «Основ программирования» (необязательно)
  • Редактор кода устанавливать не нужно — писать и проверять код можно в уроках
КАК ЭТО РАБОТАЕТ

Каждый урок — четыре шага.

Теория, вопросы, практика и итоговое задание. Рядом всегда есть помощник Nox-AI: он подскажет, но не решит за тебя.

  1. 1Теория

    Короткое объяснение с примерами.

  2. 2Проверь себя

    Вопросы на понимание.

  3. 3Практика

    Пишешь код — проверка мгновенная.

  4. 4Challenge

    Итог урока и очки XP.

Подробнее, как проходит урок ›    Что умеет Nox-AI ›

ПУТЬ

Что было до и что будет после.

← Сначала

Основы программирования

Короткий обзор: как устроен код и какое направление выбрать.

О курсе →Дальше →

CSS

Оформление: цвета, сетки, адаптивность.

О курсе →
ВОПРОСЫ

О курсе HTML.

Нужно ли знать программирование?

Нет. HTML — не язык программирования, а язык разметки, поэтому это самый мягкий старт. Курс начинается с вопроса «что такое сайт» и идёт по шагам.

Сколько уроков и как долго проходить?

Курс состоит из последовательных уроков с короткой теорией и практикой. Каждый урок открывается после предыдущего, а темп выбираешь ты — прогресс сохраняется в аккаунте.

Что делать после курса?

Следующий шаг — CSS: он оформит страницы, которые ты научишься размечать. Затем JavaScript оживит их.

Готов начать?

Открой курс и пройди первый урок. Прогресс сохраняется в твоём аккаунте.

Приступить → Путь обучения ›

Курсы