На прошлом уроке мы создали основную html-структуру веб-страницы, а также подключили сторонние шрифты. Сегодня мы рассмотрим один из способов формирования структуры для контента и начнем подключать стили для визуального изменения этого контента.
Подготавливаем структуру для контента
Перед созданием контента мы должны добавить структурные теги для размещения этого контента на нашей странице. В последней версии html мы получили возможность добавлять семантику (смысл) к структуре, с помощью специальных тегов - nav, header, footer и т.д.. Мы же дополнительно добавим смысл к тегу с помощью специального названия в атрибуте class, которым мы будем пользоваться для выбора этого элемента в структуре.
Внутри тега body мы добавим следующую структуру:
- wrapper - От слова "обертка". Стандартное название для селектора родительского тега создаваемой секции.
- navbar - Навигационная панель. Дополнительно укажем на это с помощью семантического тега nav.
- logo - Определим текстовый тег h1 (Заголовок первого уровня или разряда), который будет являться логотипом нашей веб-страницы.
Далее добавим структуру для основной секции с контентом нашей веб-страницы. Для этого после* созданной навигационной панели мы напишем следующие теги:
*После закрывающего тега nav
- header - Обертка основной секции контента. Дополнительно использует смысловой тег.
- hero-card - Используем веб-компонент "карточку". Подробнее узнать, что такое веб-компоненты вы можете на специальном курсе начинающего веб разработчика от школы программирования для детей КИДКОД
- hero-title - Заголовок создаваемой "карточки"
- hero-paragraph - Основной текст
Добавляем контент
Теперь вы можете добавить любой контент в созданную структуру. Пример контента указан далее.
Внутри карточки используется не только текст, но и изображения. Как сделать разные типы карточек в современном веб дизайне, вы узнаете на следующих наших уроках.
Подключаем базовые стили
Последней темой сегодняшнего занятия будет добавление базовых css стилей для созданной структуры и контента нашей веб-страницы.
Для этого перейдите в тег head и после тега title добавьте представленные на скриншоте стили.
Стили на веб-страницу добавляются с помощью специального языка - CSS (cascading style sheets или каскадные таблицы стилей). Данный язык использует отличный от html синтаксис, но является по прежнему очень простым в использовании.
Синтаксис (правила языка) выглядит следующим образом:
- Селектор - Способ определить элемент на веб-странице. В нашем примере мы используем селектор тега body
- Открывающая фигурная скобка - Начало пространства для добавления стилей
- Свойство - Одно из возможных свойств стиля. Например: margin - это внешний отступ для элемента. *Подробнее про добавленные стили вы сможете прочитать далее.
- Двоеточие - Разделяющий знак для свойств и значений.
- Значение свойства - Одно из возможных значений применяемого свойства. Например: 100vh - это 100% видимой части отображаемой части браузера по вертикали.
- Точка с запятой - Знак, который завершает формирование пары свойств-значений. После этого знака мы можем указать новую пару свойств-значений для селектора.
- Закрывающая фигурная скобка - Завершение формирования пространства для добавления стилей к селектору.
*Важно, css стили добавляются на страницу несколькими способами. Мы используем прямое добавление в html с помощью специального тега style.
Текущий результат
Описание добавленных стилей:
- margin - Внешний отступ для контента
- background... - Свойства описывающие добавление изображения к элементу. Важно разместить добавляемое изображение на одном уровне с html файлом веб-страницы.
- height - Высота создаваемого элемента. Значение 100vh означает, что элемент (тег body) будет занимать всю видимую часть экрана браузера.
В школе программирования для детей КИДКОД вы найдете разные виды курсов, начиная от создания мультфильмов и игр, заканчивая компьютерной грамотностью. А с промо кодом "дзен" вы получите 25% скидку на первый месяц обучения в нашей школе.