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 для стилизации.