Imagens em HTML

Com a HTML você pode exibir imagens em um documento.

Exemplos

Inserir imagens
Este exemplo demonstra como exibir imagens na suaa página Web.

Inserir imagens de diferentes locais
Este exemplo demonstra como exibir imagens de um outro diretório ou outro servidor na sua página Web.

(Você pode encontrar mais exemplos no final desta página.)

A Tag Image e o Atributo Src

Na HTML, as imagns são definidas com a tag <img>

A tag <img> é vazia, o que significa que ela somente atributos e não tem tag de fechamento

Para exibir uma imagen em uma página, você necessita usar o atributo src. Src significa "source" [fonte]. O valor do atributo src é a URL da imagem que você quer exibir na sua página.

A sintaxe para definir uma imagem é:

<img src="url">

O URL aponta para o local onde a imagem está armazenada. Uma imagem denominada "boat.gif" localizada no diretório "images" em "www.w3schools.com" tem o URL: http://www.w3schools.com/images/boat.gif.

O navegador põe a imagem onde a tag image osorre no documento. Se você coloca uma tag image enter dois parágrafos, o navegador mostra o primeiro parágrafo, depois a imagem, e então o segundo parágrafo.

O Atributo Alt

O atributo alt é usado para definir um "texto alternativo" para uma imagem. O valor do atributo alt é um texto definido pelo autor:

<img src="boat.gif" alt="Big Boat">

O atributo "alt" diz ao leitor o que ele ou ela está perdendo numa página se o navegador não pode carregar imagens. O navagador irá então exibir o texto alternativo em vez da imagem. É uma boa prática incluir o atributo "alt" para cada imagem numa página, para melhorar a exibição e a utilidade do seu documento para pessoas que têm navegadores somente de texto.

Observações Básicas - Dicas Úteis

Se um arquivo HTML contém dez imagens - onze arquivos são necessários para exibir a página direito. Carregar imagens leva tempo, assim meu melhor conselho é: Use iamgens com cuidado.

Mais Exemplos

Imagem de fundo
Este exemplo demonstra como adicionar uma imagem de fundo em uma página HTML.

Alinhar imagens
Este exemplo semonstra como alinhar uma imagem dentro do texto.

Deixe a imagem flutuar
Este exemplo demonstra como deixar uma imagem flutuar à esquerda ou à direita de um parágrafo.

Ajustar imagens para diferentes tamanhos
Este exemplo demonstra como ajustar imagens para diferentes tamanhos.

Exibir um texto alternativo para uma imagem
Este exemplo demonstra como exibir um texto alternativo para uma imagem. O atributo "alt" diz para o leitor o que ele ou ela está perdendo numa página se o navegador não pode carregar imagens. É uma boa prática incluir o atributo "alt" para cada imagem numa página.

Fazer um hipervínculo com uma imagem
Este exemplo demonstra como usar uma imagem como vínculo.

Criar uma mapa de imagem
Este exemplo demonstra como criar uma mapa de imagem, com regiões clicáveis. Cada uma das regiões é um hipervínculo.

Transformar uma imagem em um mapa de imagem
Este exemplo demonstra como trnsformar uma imagem em um mapa de imagem. Você verá que se mover o mouse sobre a imagem, as coordenadas serão mostradas na barra de estatus.

Tags de Imagem