Como colocar uma legenda sob uma imagem em HTML




A linguagem de programação HTML Web não oferece uma tag específica para adicionar uma legenda a uma imagem. Enquanto ele tem uma marca de legenda, é para adicionar um rótulo a uma mesa - não para imagens. Há duas maneiras de criar uma imagem com uma legenda que está separada do seu texto. Você pode usar uma tag div, que é leve e altamente personalizável, com CSS, ou você pode usar uma tabela, que requer mais código, mas cria um estilo imediato da estrutura.

Usando um div

Passo 1

Crie a sua tag div e colocar a sua imagem dentro dele. Se você está indo estar usando imagens múltiplas em todo o site, use uma classe CSS. Poderia ser algo como isto:

div class = legenda

img src = http://www.yourdomain.com/image.jpg alt = Imagem

Passo 2

Adicionar uma quebra de linha - br - e digite a legenda abaixo da imagem. Feche a div. Seu código HTML deve ficar assim:

div class = legenda

img src = http://www.yourdomain.com/image.jpg alt = Imagebr

Legenda da imagem.

/ Div

Passo 3

Criar o estilo para a classe de legenda no seu CSS. O básico para uma legenda deve incluir texto centrado menor e abaixo da imagem, bem como uma margem ao redor da imagem para que o texto não correr para a legenda. Se você quiser texto ao redor da imagem e legenda, você também vai precisar de um carro alegórico. A sua legenda CSS poderia ser assim:

. Caption {

margin: 5px;

text-align: center;

font-style: italic;

font-size: 12px;

float: left;

}

Usando uma tabela

Passo 1

Iniciar uma tabela com uma linha (tr) com uma célula (td). Comece com a sua imagem. Isso seria algo parecido com isto:

tabela

tr

tdimg src = http://www.yourdomain.com/image.jpg alt = Imagem/td

/ Tr

Passo 2

Crie outra linha com um celular para a sua legenda e fechar sua tabela, assim:

tabela

tr

tdimg src = http://www.yourdomain.com/image.jpg alt = Imagem/td

/ Tr

tr

tdImage legenda./td

/ Tr

/ Tabela

Passo 3

Adicione uma classe para uma tabela todo o seu (tabela class = legenda) ou para seu celular legenda (td class = legenda). Cabe a você se você deseja simplesmente estilo de texto abaixo da imagem, ou aplicar um estilo a toda a tabela. Você poderia aplicar o mesmo estilo CSS para a legenda da tabela, como você faria com um div.

Dicas

Se você quer que sua legenda acima da imagem, basta colocar a legenda acima da imagem.

Se você quiser usar o CSS para escalar sua imagem, você pode usar CSS para fazer isso também. Por exemplo, se você queria que cada imagem na classe de legenda a ser 200px de largura, sem afetar outras imagens na página, o CSS ficaria assim:

. Legenda img {width: 200px;}

Aviso

A marca não irá trabalhar com sua mesa se você quiser a legenda abaixo da imagem, que só se aplica a legenda para o topo da tabela.



Veja também: