LMMD-MUS LMMD-MUS LMMD-MUS

home HOME

HTML Básico
HTML INÍCIO
HTML & WWW
HTML Introdução
HTML Elementos
HTML Tags Básicas
HTML Formatação
HTML Entidades
HTML Links
HTML Frames
HTML Tabelas
HTML Listas
HTML Formulários
HTML Imagens
HTML Background

HTML Avançado
HTML Layout
HTML Fontes
HTML Porque 4.0?
HTML Estilos
HTML Head
HTML Meta
HTML URLs
HTML Scripts
HTML Webserver

Imagens em HTML

Anterior Próxima

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

Tag Descrição
<img> Define uma imagem
<map> Definesum mapa de imagem
<area> Define uma área dentro de um mapa de imagem


Anterior Próxima