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

Контейнеры

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

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

  1. <div> - универсальный контейнер, который не имеет собственного семантического значения и часто используется для группировки элементов с целью их стилизации или размещения на странице. Пример:

    <div class="container">
      <p>Это содержимое div-контейнера</p>
    </div>
  2. <header> - предназначен для обозначения вводной части страницы или раздела, обычно содержит логотип, навигацию, заголовки и другую важную информацию. Пример:

    <header>
      <h1>Заголовок страницы</h1>
      <nav>
        <ul>
          <li><a href="#">Главная</a></li>
          <li><a href="#">О нас</a></li>
          <li><a href="#">Контакты</a></li>
        </ul>
      </nav>
    </header>  
  3. <section> - используется для определения самостоятельного раздела контента, например, статьи, главы или блока информации. Пример:

    <section>
      <h1>Раздел 1</h1>
      <p>Это содержимое первого раздела</p>
    </section>
  4. <article> - применяется для выделения отдельных статей, новостей, постов и другого контента, который может быть повторно использован или распространен. Пример:

    <article>
      <h1>Статья о HTML контейнерах</h1>
      <p>Здесь содержится текст статьи</p>
    </article>
  5. <aside> - используется для выделения контента, имеющего косвенное отношение к основному содержимому страницы, например, боковых панелей, рекламы или цитат. Пример:

    <aside>
      <p>Это боковая панель с дополнительной информацией</p>
    </aside>
  6. <figure> и <figcaption> - предназначены для встраивания медиа-контента (изображений, видео) с возможностью добавления подписи через <figcaption>. Пример:

    <figure>
      <img src="example.jpg" alt="Пример изображения">
      <figcaption>Это пример изображения</figcaption>
    </figure>
  7. <iframe> - используется для встраивания внешних веб-страниц или контента в текущий документ. Пример:

    <iframe src="https://example.com" width="600" height="400" frameborder="0"></iframe>

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

Задание

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

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

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

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