As imagens adicionam vida às suas páginas da web e chamam a atenção dos espectadores. As legendas fornecem informações extras sobre suas imagens da Web, mas podem ser difíceis de adicionar a páginas da Web sem habilidades avançadas em HTML e CSS. Aqui está um método confiável para adicionar uma legenda simples, mas atraente, a uma imagem que fica com a imagem onde quer que você a mova na página da web.
Etapas para uma legenda de imagem HTML
-
Adicione uma imagem à sua página da web.
-
No HTML da sua página da Web, coloque uma tag div ao redor da imagem:
-
Adicione um atributo de estilo à tag div:
style = ""> -
Configure a largura do div para a mesma largura da imagem, com a propriedade style width:
-
Para legendas um pouco menores que o texto ao redor, adicione uma propriedade de tamanho de fonte ao estilo div:
-
As legendas ficam melhores se estiverem centralizadas abaixo da imagem, portanto, adicione uma propriedade de alinhamento de texto ao atributo style:
-
Por fim, adicione um pouco mais de espaço entre a imagem e a legenda, adicionando um atributo de estilo à imagem com uma propriedade de estilo bottom-padding:
style = "padding-bottom: 0.5em;" />
-
Em seguida, adicione a legenda de texto diretamente abaixo da imagem:
Faça o upload da página da Web para o seu servidor e teste-a em um navegador.
Dicas de legenda
- As dimensões do CSS podem ter muitas medições diferentes, portanto, você geralmente deve incluir o tipo de medição. Por exemplo:
largura: 100px; No entanto, as dimensões da imagem HTML estão sempre em pixels, então você deixa a medição desativada.
width = "100"
- Se você fizer a largura da div maior que a largura da imagem, a legenda poderá aparecer ao lado da imagem. Se é isso que você quer, adicione um
tag diretamente antes da legenda e depois da tag da imagem.
