HTML-документ и первые данные каталога
Начнём каталог курсов с HTML-документа: зададим язык, метаданные и первые видимые элементы.
В этой серии мы постепенно соберём самостоятельную страницу layout-lab. Она покажет шесть учебных курсов ProfessorWeb, их описания и число уроков. Сначала разберём содержание, затем добавим CSS и научимся управлять расположением блоков. JavaScript, поиск и серверная обработка здесь не нужны: задача серии состоит в том, чтобы понять поведение разметки и стилей до подключения других инструментов.
Для работы достаточно текстового редактора и браузера. Создайте папку layout-lab, внутри неё файлы index.html и styles.css. Первый хранит документ, второй пока оставьте пустым. Полные снимки проекта после каждого урока подготовлены в учебных исходниках; конечное состояние не следует копировать вместо первого шага, иначе будет трудно отделить действие одного свойства от остальных.
Документ, который читает браузер
HTML описывает структуру содержимого. Заголовок, абзац и ссылка имеют разный смысл, даже если CSS позднее сделает их похожими. Браузер разбирает текст и создаёт дерево элементов. Это дерево служит основой отображения и взаимодействия. Поэтому файл нельзя рассматривать как набор строк, которые просто рисуются одна под другой: вложенность тоже является частью результата.
Поместите в index.html полный документ:
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Каталог курсов — layout-lab</title>
<meta name="description" content="Учебный каталог курсов ProfessorWeb.">
<link rel="stylesheet" href="styles.css">
</head>
<body class="layout-lab">
<h1>Учимся создавать сайты</h1>
<p>Выберите курс и последовательно разберите его примеры.</p>
<h2>Статический сайт из Markdown</h2>
<p>12 уроков</p>
</body>
</html>При открытии файла ожидается страница с двумя заголовками и двумя абзацами. Текст в title должен появиться в названии вкладки, а не над первым заголовком. Пустой файл стилей не добавит оформление, поэтому вид зададут обычные правила браузера. Различия шрифтов на разных системах на этом шаге нормальны: собственный шрифт и размеры мы ещё не определяли.
Верхняя строка задаёт современный режим обработки документа. Элемент html объединяет всё дерево; его язык выбран по основному тексту страницы. head хранит сведения о документе и связи с ресурсами, body содержит видимые данные. В нашем примере обе части указаны явно, чтобы читатель мог видеть границу между ними. Корневой элемент и применение lang описаны в справочнике MDN.
Теги, атрибуты и содержимое
Рассмотрим первый заголовок как отдельный элемент. Открывающий тег сообщает, что начинается h1, закрывающий завершает его, между ними находится текст. У элемента может быть несколько атрибутов. Например, у body атрибут class содержит имя, по которому позднее выберем страницу в CSS. Само имя layout-lab не является встроенной командой браузера и пока ничего не меняет.
Отступы внутри файла нужны вам, чтобы читать структуру. Они не превращают каждый пробел в видимый отступ страницы. Если поставить десять пробелов перед словом в обычном абзаце, браузер обычно покажет один промежуток. Для компоновки будут использоваться CSS-свойства, а не цепочки пробелов. Это полезно усвоить сразу: исходный файл и результат его отображения связаны, но их геометрия не совпадает.
Измените число уроков с двенадцати на тринадцать и сохраните файл. После обновления вкладки ожидается новое число. Затем поменяйте только title: видимый каталог останется прежним, изменится название вкладки. Эти два небольших изменения показывают разные роли содержимого и метаданных. Не нужно угадывать, что именно обновилось: сравнивайте конкретный участок страницы, который должен зависеть от изменённой строки.
Заголовки h1 и h2 задают уровни, а не обязательные размеры шрифта. Здесь первый сообщает тему всей страницы, второй вводит курс. В следующем уроке между ними появится название раздела каталога, и название карточки перейдёт на третий уровень. Мы изменим разметку из-за структуры материала, а не ради уменьшения букв. Размеры текста затем зададим отдельно через CSS.
Кодировка и подключение файла
Сохраните оба файла в UTF-8. Указание charset должно согласовываться с реальной кодировкой файла: надпись в HTML не исправит текст, который редактор уже сохранил неправильно. Если русские буквы выглядят как случайные знаки, сначала проверьте настройку сохранения. Переписывание шрифта или добавление новых CSS-правил не устраняет ошибку кодировки.
Путь styles.css означает соседний файл относительно документа. Пока ресурс пустой, нельзя по внешнему виду понять, был ли он найден. Позднее мы зададим цвет фона и сможем увидеть действие подключения. Указание viewport подготовит документ к узким экранам, но само по себе не построит адаптивную сетку. Не следует приписывать одной строке работу, которую выполняют размеры, переносы и медиазапросы.
Имена файлов лучше сразу писать одинаково во всех местах. Styles.css и styles.css могут восприниматься как разные пути на хостинге, даже если ваша файловая система сейчас терпима к регистру. Ошибка часто обнаруживается лишь после переноса. В этой серии сохраняем нижний регистр и не меняем структуру папок без явного объяснения относительных адресов.
Исходный текст и построенное дерево
В браузере можно посмотреть исходный документ и дерево элементов в инструментах разработчика. Это разные представления: первое показывает сохранённый текст, второе — результат разбора. Если вложить абзац в другой абзац, браузер может закрыть первый раньше, чем вы ожидали. Видимая страница иногда кажется приемлемой, хотя построенное дерево отличается от записи автора. Проверять только внешний вид недостаточно.
Для самостоятельной работы замените описание курса собственным предложением, не меняя теги. Затем добавьте ещё один абзац после числа уроков. Ожидается, что каждый абзац займёт отдельный блок; никаких колонок пока нет. Если весь HTML показан как обычный текст, проверьте расширение файла и способ открытия: редактор мог сохранить index.html.txt.
Сразу договоримся, что учебный документ существует отдельно от общего шаблона ProfessorWeb. Класс layout-lab относится к нашему собственному body, а не требует менять действующий хедер сайта. Если вы вставите весь листинг внутрь уже существующего body, получится другое дерево с повторяющимися оболочками. Для такого переноса нужно взять только содержимое нужной области и отдельно согласовать стили. Пока открываем именно самостоятельный файл, чтобы результат зависел от показанного кода.
Комментарии в исходнике можно использовать для собственных заметок, но они не заменяют видимое объяснение пользователю. Браузер не покажет обычный HTML-комментарий в тексте страницы. Если нужно оставить читателю сведения о числе уроков, они должны находиться в элементе содержимого. Также не храните в комментариях то, что не хотите отдавать вместе с документом: просмотр исходника показывает их независимо от внешнего оформления. Для первого каталога комментарии вообще не обязательны.
Теперь у нас есть документ с понятной верхней и видимой частями, одним именем класса для будущих стилей и стабильными файлами проекта. Данные пока минимальны. В следующем уроке расширим их до шести курсов и построим семантическую структуру: шапку, навигацию, основное содержимое, список карточек и футер. Именно эта структура останется основой всех последующих состояний примера.