• Теория
  • Теория

«Шапка» сайта

В этом тренажёре мы будем верстать страницу «The Great Keksby». Вот так она будет выглядеть в итоге.

Тренажёр разбит на несколько частей. Сначала мы будем заниматься разметкой, то есть писать HTML-код, пока полностью не опишем все объекты на странице. Затем будем строить сетки, работать с оформлением текстов, изображениями и фонами. А в самом конце «отшлифуем» мелкие детали.

И в этой, первой, части наша задача — разметить главные блоки графического макета.


Познакомимся с новым парным тегом div. Этот тег обозначает просто универсальный «блок» или «контейнер». Мы будем использовать его очень часто, особенно для разметки крупных блоков на странице. Правда, каждый раз будем задавать этому тегу «говорящий» класс, объясняющий его назначение.

В этом задании мы «обрисуем» шапку сайта:

The Great Keksby
Блоки шапки

Для шапки используем класс page-header, что обозначает «шапка страницы». Внутри шапки выделим ещё два крупных блока:

  1. .header-top — верхняя часть шапки, общий контейнер для логотипа и меню;
  2. .promo — промо-блок для рекламных предложений.

В заданиях мы будем подсказывать, где необходимо открыть, а где закрыть теги. Подсказки эти будут в виде HTML-комментариев на вкладке index.html.

Хотите начать карьеру веб-разработчика? Записывайтесь на профессию «Фронтенд-разработчик», которая стартует 15 апреля 2024. Всего от 5 790 ₽в месяц.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Кексби. Знакомство» тренажёра «Великий Кексби, этап 1» можно после регистрации и оформления подписки.