Dominando as Legendas de Figuras HTML

Introdução

A tag HTML <figcaption> é usada para fornecer legendas para o conteúdo dentro do elemento <figure>. Neste laboratório, você aprenderá como usar a tag <figcaption> para adicionar legendas às suas imagens.

Nota: Você pode praticar a codificação em index.html e aprender Como Escrever HTML no Visual Studio Code. Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Adicionando a Imagem e a Legenda

Abra o arquivo index.html no seu editor de texto preferido e escreva a estrutura HTML básica. Adicione a declaração <DOCTYPE>, as tags <html>, <head> e <body>.

Dentro da tag <body>, crie um elemento <figure> com uma tag de imagem dentro. Você pode usar qualquer imagem de sua escolha. Por exemplo:

<figure>
  <img src="your-image-url-here" alt="Your image description" />
</figure>

Agora, adicione uma tag <figcaption> imediatamente após a tag <img> para fornecer uma legenda para a imagem. Por exemplo:

<figure>
  <img src="your-image-url-here" alt="Your image description" />
  <figcaption>Image caption goes here</figcaption>
</figure>

Salve suas alterações no arquivo index.html e abra-o no seu navegador web. Você agora deve ver a imagem com sua legenda abaixo dela.

Estilizando a Legenda

Por padrão, a tag <figcaption> é um elemento de nível de bloco (block-level element) que ocupa toda a largura do elemento pai. Você pode estilizar a legenda usando CSS para ajustar seu posicionamento, fonte, cor, etc.
Adicione o seguinte código CSS à seção <head> do seu arquivo index.html para alterar a fonte, o tamanho da fonte e a cor da legenda:

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

Você também pode alterar a posição da legenda usando CSS para ajustar as propriedades de margem (margin) e preenchimento (padding) da tag <figcaption>. Por exemplo:

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

Adicionando Múltiplas Imagens e Legendas

Você pode adicionar múltiplas imagens e legendas a uma única página web repetindo os passos anteriores. Basta criar um novo elemento <figure> com uma tag <img> e uma tag <figcaption> para cada imagem.
Salve suas alterações no arquivo index.html e atualize a página web. Você agora deve ver todas as suas imagens com suas legendas abaixo delas.

Resumo

A tag HTML <figcaption> é uma ferramenta poderosa para fornecer legendas de imagem em suas páginas web. Ao usar esta tag, você pode tornar suas imagens mais acessíveis e fáceis de usar para seu público. Não se esqueça de estilizar suas legendas usando CSS para que elas também tenham uma ótima aparência!