2. Повторение HTML

Контейнеры

Контейнеры - представляют собой элементы, которые используются для группировки и организации содержимого веб-страницы. Они позволяют структурировать информацию, придавать ей семантическое значение и облегчают процесс стилизации и форматирования через CSS.

Обычно контейнеры определяются парой дескрипторов: открывающий дескриптор (<tag>) и закрывающий дескриптор (</tag>), где tag - это название контейнера. Каждый контейнер имеет свое назначение и особенности использования

<div> - универсальный контейнер, который не имеет собственного семантического значения и часто используется для группировки элементов с целью их стилизации или размещения на странице. Пример:
```
<div class="container">
  <p>Это содержимое div-контейнера</p>
</div>
```
<header> - предназначен для обозначения вводной части страницы или раздела, обычно содержит логотип, навигацию, заголовки и другую важную информацию. Пример:
```
<header>
  <h1>Заголовок страницы</h1>
  <nav>
    <ul>
      <li><a href="#">Главная</a></li>
      <li><a href="#">О нас</a></li>
      <li><a href="#">Контакты</a></li>
    </ul>
  </nav>
</header>  
```
<section> - используется для определения самостоятельного раздела контента, например, статьи, главы или блока информации. Пример:
```
<section>
  <h1>Раздел 1</h1>
  <p>Это содержимое первого раздела</p>
</section>
```
<article> - применяется для выделения отдельных статей, новостей, постов и другого контента, который может быть повторно использован или распространен. Пример:
```
<article>
  <h1>Статья о HTML контейнерах</h1>
  <p>Здесь содержится текст статьи</p>
</article>
```
<aside> - используется для выделения контента, имеющего косвенное отношение к основному содержимому страницы, например, боковых панелей, рекламы или цитат. Пример:
```
<aside>
  <p>Это боковая панель с дополнительной информацией</p>
</aside>
```
<figure> и <figcaption> - предназначены для встраивания медиа-контента (изображений, видео) с возможностью добавления подписи через <figcaption>. Пример:
```
<figure>
  <img src="example.jpg" alt="Пример изображения">
  <figcaption>Это пример изображения</figcaption>
</figure>
```
<iframe> - используется для встраивания внешних веб-страниц или контента в текущий документ. Пример:
```
<iframe src="https://example.com" width="600" height="400" frameborder="0"></iframe>
```

Понимание и правильное использование HTML контейнеров играет ключевую роль в создании хорошо структурированных и визуально привлекательных веб-страниц.

Задание

Откройте редактор исходного-кода Microsoft Visual Studio Code, расположенный в панели Пуск в директории Visual Studio Code (Не перепутайте с IDE Visual Studio 20?? - разницы не будет, но редактор будет запускаться дольше)
Сохраните документ разметки HTML по пути \gamma\students$\vp??a\vp??a-????? в директории «Веб-разработка» и сохраните его с таким наименованием «Фамилия И. – Лекция №1.html»
После откройте данный файл через Веб-обозреватель (Mozilla Firefox, Google Chrome, Яндекс Браузер и т.д.);

Создайте веб-страницу, посвящённую вашему любимому литературному произведению, используя только HTML. Ваша страница должна включать следующие элементы:

Заголовок: Используйте дескрипторы <h1> и </h1> для создания заголовка страницы, который отражает название вашего любимого произведения.
Краткое описание: Опишите, почему вам нравится это произведение, используя дескрипторы <p> и </p>.
Персонажи: Перечислите главных персонажей произведения, используя дескрипторы <ul> и </ul> для создания списка. Внутри каждого элемента списка используйте дескрипторы <li> и </li> для описания персонажа.
Сюжет: Расскажите о сюжете произведения, используя дескрипторы <article> и </article> для каждой ключевой сцены.
Цитаты: Вставьте цитаты из произведения, используя дескрипторы <blockquote> и </blockquote>.
Отзывы читателей: Добавьте раздел с отзывами читателей о произведении, используя дескрипторы <section> и </section> для каждого отзыва. Внутри каждого отзыва используйте дескрипторы <p> и </p> для текста отзыва.
Ссылки на ресурсы: Добавьте ссылки на ресурсы, связанные с вашим любимым произведением, используя дескрипторы <a> и </a>. Заключение: Завершите вашу страницу кратким заключением, используя дескрипторы <p> и </p>.

Обратите внимание, что это задание направлено на практику использования основных дескрипторов HTML без применения CSS для стилизации.