Пошаговый разбор задачи и готовый HTML-документ

Цель задачи: понять, как оформить страницу согласно упомянутым правилам браузерной стилизации (заголовок H1, цитаты с элементом cite, разделение абзацев пустыми строками и списки UL/OL с маркерами и номерами).

Шаги решения

• Шаг 1. Определить структуру документа:
  • Заголовок уровня 1 (H1) в начале.
  • Параграфы (p) с пустыми строками между ними в исходном коде.
  • Цитата с использованием блока blockquote и элемента cite для источника (цитата внутри блока обычно отображается курсивом).
  • Неупорядованный список (ul) с маркерами.
  • Нумерованный список (ol) с номерами.
• Шаг 2. Написать HTML-документ, который демонстрирует эти элементы и текстовую подсказку, соответствующую образцу.
• Шаг 3. Прокомментировать, что делает каждый элемент и почему он демонстрирует указанные правила оформления.

Готовый HTML-документ (код)

Некоторые правила ОФОРМЛЕНИЯ

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

Так, заголовок первого уровня H1 выводится крупным жирным шрифтом, цитаты

цитаты CITE – курсивом

Источник

абзацы отделяются друг от друга пустыми строками,

элементы списка UL снабжаются маркерами,

элементы списка OL – номерами.

• UL — элементы списка снабжаются маркерами

1. OL — элементы списка нумеруются

Пояснения к коду

• и задают стандарт HTML5 и язык документа.

• Некоторые правила ОФОРМЛЕНИЯ

  демонстрирует заголовок первого уровня, который браузеры отображают крупным и жирным шрифтом.

• …

  — параграфы. В исходном коде между параграфами есть пустые строки, что соответствует требованию о разделении абзацев пустыми строками.

• с вложенным демонстрирует оформление цитаты: сам текст внутри блока, а источник в элементе , который браузерами обычно отображается курсивом.

• с
  • и
    с
    1. показывают соответственно маркированный и нумерованный списки. Это иллюстрирует требование, чтобы UL имел маркеры, а OL — номера.

  Если нужно адаптировать стиль под конкретный класс/уровень подготовки, скажите класс или предмет — скорректирую уровень сложности и примеры.