Разбор HTML-страницы и первые стили CSS

Индивидуальные задания

Для этой пары индивидуальные задания не опубликованы

От готовой страницы к оформлению

Третья пара веб-блока — лекция с короткими действиями в своём проекте. Вместе разберём результаты двух практик и подключим CSS.

Сегодня: понятные части страницы, цвет текста, фон и отступ от края. Сложные карточки, колонки и форму пока не создаём.

Примеры и схемы используют учебный вариант 00 «Техника дома» этой пары. Продолжайте свой VariantNN-web: тексты, подпись номера и цвета берите из личного варианта.

Откройте свой проект после второй пары.

Учебный вариант 00

Вариант 00 хранится рядом со статьёй. Вариант 00 студентам не назначается; для своей работы используйте данные своего номера.

Узнайте элементы своей работы

Что видно	Чем создано
Название во вкладке	`title` внутри `head`
Главный заголовок	`h1` внутри `body`
Текстовый абзац	`p`
Заголовок каталога	`h2`
Маркеры списка	`ul` и вложенные `li`
Переход по надписи	`a` с `href`
Картинка	`img` с `src`

Найдите каждый элемент в своём коде. head — сведения о документе, body — его видимое содержание.

Исправим повторяющиеся ошибки

Покажите преподавателю один непонятный результат. Проверьте соответствующую строку:

изображение — путь src и наличие файла;
ссылка — совпадение href="#catalog" и id="catalog";
чужое название — тексты title и h1;
неверный порядок — расположение элементов внутри body.

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

Разделим страницу по смыслу

Схема частей документа: header, main и footer; рамки показывают группы, а не оформление страницы

Элемент	Что поместим внутрь
`header`	Название, короткое пояснение и ссылку
`main`	Описание, изображение и каталог
`footer`	Подпись учебного прототипа

Рамки на схеме — пояснение. Эти теги сами не добавляют цветную рамку или фон. Видимая шапка header находится в body, а служебный head — вне него.

Оберните уже написанные элементы

Внутри своего body:

Перед h1 добавьте <header>, после абзаца со ссылкой — </header>.
Перед заголовком главной добавьте <main>, после </ul> — </main>.
Перед </body> добавьте подпись своего варианта (ниже показан общий пример 00):

<footer>
  <p>Учебный прототип · Вариант 00</p>
</footer>

Существующие тексты, изображение и список остаются внутри своих групп. Каркас и head сохраняются. Обновите страницу и проверьте ссылку: её цель catalog должна остаться.

Вот что сделает CSS

Простая страница до и после подключения CSS: меняются шрифт, цвет, фон и отступы

HTML задаёт содержание и назначение элементов. CSS описывает внешний вид. На схеме те же слова; изменились шрифт, цвет, фон и отступы.

Это посильный результат третьей пары. Сложную компоновку будем изучать позже.

Создайте и подключите style.css

Создайте файл style.css рядом с index.html. В Блокноте при сохранении: «Все файлы», UTF-8; проверьте, что нет расширения .txt.

VariantNN-web/
  index.html
  style.css
  images/

В HTML перед существующей строкой </head> добавьте:

<link rel="stylesheet" href="style.css">

rel="stylesheet" обозначает таблицу стилей, href — путь к ней. У link нет закрывающего тега. Пока файл CSS пуст, внешне ничего не изменится.

Измените цвет главного заголовка

В style.css запишите:

h1 {
  color: navy;
}

Часть	Значение
`h1`	Селектор: какие элементы выбираем
`color`	Свойство цвета текста
`navy`	Значение цвета
`{ }`, `:`, `;`	Границы правила и разделители

Проверка: сохраните оба файла, обновите страницу. Заголовок стал тёмно-синим. Текст остался прежним. Затем замените navy на #1D4ED8: это итоговый синий цвет заголовка общего примера 00, показанный на схеме.

Добавьте фон, шрифт и отступы

Ниже правила h1 в том же CSS добавьте:

body {
  font-family: sans-serif;
  color: #1E293B;
  background-color: #EFF6FF;
  margin: 24px;
}

Это цвета общего примера 00. После проверки замените color и background-color значениями «Основной текст» и «Фон» из своего листа.

font-family — семейство шрифта; sans-serif — без засечек.
color — основной цвет текста.
background-color — фон.
margin — внешний отступ от краёв; px — единица длины CSS.

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

Проверьте подключение

Если оформление не появилось:

Оба файла сохранены; в браузере открыта нужная папка проекта.
style.css в папке и в href написаны одинаково.
link находится внутри head.
В CSS есть фигурные скобки и двоеточия. Теги HTML в CSS-файле не нужны.

Измените одну надпись в HTML и одно значение цвета в CSS. Объясните разницу результатов.

Итог дня

Своя страница содержит текст, готовую картинку, список и ссылку. После лекции — смысловые группы и простое оформление.

Сохраните всю папку проекта. Сложные карточки, боковые панели, формы и действия кнопок будем осваивать по частям.