HTML с нуля: собери первую страницу

Программа

О чём будем говорить

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

Практикумы

Короткие задачи по HTML

Короткие задачи на одну тему: прочитай, повтори в песочнице и проверь результат.

Все материалы

Все материалы раздела HTML

Учебные материалы

• Блочные и строчные элементы
• Списки в HTML
• Специальные символы
• Якоря внутри страницы
• Папки проекта
• Комментарии в HTML
• Проверка разметки
• Шаблон страницы
• Карточка на HTML
• Меню из ссылок
• Шапка и подвал
• Публикация HTML-страницы

Справочник

• Тег strong
• Тег br
• Тег hr
• Тег figure
• Тег meta
• Тег link
• Тег script
• Тег fieldset
• Тег progress
• Тег meter
• Тег datalist
• Тег mark
• Тег abbr
• Тег cite

Новые темы

• Тег em в HTML

Небольшой план

От пустого файла до страницы

Подробнее

Как браузер читает HTML

Браузер не видит страницу так, как ты видишь её в редакторе. Он читает файл сверху вниз и собирает дерево элементов: документ, затем html, внутри него head и body, а уже в теле — заголовки, абзацы и ссылки. Это дерево называется DOM. Стили и скрипты потом работают именно с ним, а не с текстом файла.

Порядок в файле обычно совпадает с порядком на экране. Если блок «контакты» стоит в коде ниже блока «о себе», на странице он тоже окажется ниже, пока CSS специально не переставит его. Поэтому сначала выстрой смысл, и только потом думай о внешнем виде.

Минимальная страница, которую уже можно показать

Для первой публикации не нужна форма, слайдер и десяток секций. Достаточно понятного заголовка, двух абзацев и одного действия: ссылки, кнопки или списка. Такая страница уже отвечает на вопрос посетителя и её легко проверить.

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Аня — учебные заметки</title>
  </head>
  <body>
    <h1>Аня учится делать сайты</h1>
    <p>Здесь я собираю короткие примеры по HTML и CSS.</p>
    <h2>Сейчас в работе</h2>
    <ul>
      <li>Страница-визитка</li>
      <li>Форма обратной связи</li>
    </ul>
    <a href="/html/">Продолжить учебник</a>
  </body>
</html>

Обрати внимание: у страницы один h1, список размечен тегами, а ссылка говорит, куда она ведёт. Этого уже хватает, чтобы открыть файл в браузере и увидеть настоящую страницу.

В каком порядке проходить раздел

Начни с устройства документа, затем собери текст и ссылки. После этого добавь изображения и только потом переходи к формам. Семантику и meta-теги легче понять, когда на странице уже есть настоящее содержимое.

Справочные страницы про отдельные теги не заменяют этот маршрут. Их удобно открывать, когда в основном уроке встретился незнакомый элемент и нужно быстро посмотреть синтаксис.

Частые вопросы

Что стоит знать перед стартом