Мастерство в использовании HTML Figure Captions

Введение

HTML-тег <figcaption> используется для добавления подзаголовков к содержимому внутри элемента <figure>. В этом практическом занятии вы научитесь использовать тег <figcaption> для добавления подзаголовков к вашим изображениям.

Примечание: Вы можете практиковать программирование в index.html и изучить Как писать HTML в Visual Studio Code. Нажмите кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем можно обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/MultimediaandGraphicsGroup(["Multimedia and Graphics"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/MultimediaandGraphicsGroup -.-> html/multimedia("Multimedia Elements") html/MultimediaandGraphicsGroup -.-> html/fig_cap("Figure and Caption Association") subgraph Lab Skills html/basic_elems -.-> lab-70757{{"HTML Figure Caption"}} html/head_elems -.-> lab-70757{{"HTML Figure Caption"}} html/multimedia -.-> lab-70757{{"HTML Figure Caption"}} html/fig_cap -.-> lab-70757{{"HTML Figure Caption"}} end

Добавление изображения и подзаголовка

Откройте файл index.html в предпочитаемом текстовом редакторе и напишите базовую структуру HTML. Добавьте объявление <DOCTYPE>, теги <html>, <head> и <body>.

Внутри тега <body> создайте элемент <figure> с тегом изображения внутри. Вы можете использовать любое изображение по своему выбору. Например:

<figure>
  <img src="ваш-url-изображения-здесь" alt="Описание вашего изображения" />
</figure>

Теперь добавьте тег <figcaption> сразу после тега <img> для предоставления подзаголовка для изображения. Например:

<figure>
  <img src="ваш-url-изображения-здесь" alt="Описание вашего изображения" />
  <figcaption>Подзаголовок изображения здесь</figcaption>
</figure>

Сохраните изменения в файле index.html и откройте его в веб-браузере. Теперь вы должны увидеть изображение с подзаголовком под ним.

Стилизация подзаголовка

По умолчанию тег <figcaption> является элементом уровня блока, который занимает всю ширину родительского элемента. Вы можете стилизовать подзаголовок с использованием CSS для настройки его позиционирования, шрифта, цвета и т.д.
Добавьте следующий код CSS в раздел <head> файла index.html, чтобы изменить шрифт, размер шрифта и цвет подзаголовка:

figcaption {
  font-family: Arial, sans-serif;
  font-size: 18px;
  color: #555;
}

Вы также можете изменить позицию подзаголовка, используя CSS для настройки свойств отступов (margin) и заполнения (padding) тега <figcaption>. Например:

figcaption {
  margin-top: 10px;
  padding: 5px;
}

Добавление нескольких изображений и подзаголовков

Вы можете добавить несколько изображений и подзаголовков на одну веб-страницу, повторяя предыдущие шаги. Просто создайте новый элемент <figure> с тегами <img> и <figcaption> для каждого изображения.
Сохраните изменения в файле index.html и обновите веб-страницу. Теперь вы должны увидеть все ваши изображения с подзаголовками под ними.

Резюме

HTML-тег <figcaption> - это мощный инструмент для добавления подзаголовков к изображениям на ваших веб-страницах. Используя этот тег, вы можете сделать ваши изображения более доступными и удобными для вашего аудитория. Не забудьте стилизовать свои подзаголовки с использованием CSS, чтобы они выглядели также прекрасно!