Imagem no HTML
Vintage anos 70
Imagens no HTML - Tag <img> e o atributo src
Em HTML, imagens são definidas com a tag <img>.
A tag <img> é vazia, o que significa que ele contém apenas atributos, e não tem tag de fechamento.
Para exibir uma imagem em uma página, você precisa usar o atributo src. Src significa source, em português fonte. O valor do atributo src é o URL da imagem que você deseja exibir.
Sintaxe para definição de uma imagem:
<img src="url" alt="algum texto">
O URL aponta para o local onde a imagem é armazenada. Uma imagem chamado "vintage-age-1970s.jpg", localizado no diretório "images" em "wmonline.com.br" tem o URL: http://wmonline.com.br/tryit/imagens/vintage-age-1970s.jpg.
O navegador apresenta a imagem, onde a marca <img> ocorre no documento. Se você colocar uma tag de imagem entre dois parágrafos, o navegador mostra o primeiro parágrafo, em seguida, a imagem e, em seguida, o segundo parágrafo.
Imagens no HTML - o atributo alt
O atributo alt necessário especifica um texto alternativo para uma imagem, se a imagem não pode ser exibida.
O valor do atributo alt é um texto definido pelo autor:
Imagens HTML - o atributo Alt O atributo alt necessário especifica um texto alternativo para uma imagem, se a imagem não pode ser exibida. O valor do atributo alt é um texto definido pelo autor:
<img src="/tryit/imagens/sorriso.jpg" alt="Rosto sorrindo">
O atributo alt fornece informações alternativa para uma imagem se um usuário por algum motivo não pode vê-lo (por causa da conexão lenta, um erro no atributo src, ou se o usuário usa um leitor de tela).
Imagens HTML - Definir altura e largura de uma imagem
A height e width atributos são usados para especificar a altura e a largura de uma imagem.
Os valores dos atributos são especificados em pixels por padrão:
<img src="/tryit/imagens/sorriso.jpg" alt="Rosto sorrindo" width="42" height="42">
Dica: É uma boa prática para especificar a altura ea largura de atributos de uma imagem. Se esses atributos são definidos, o espaço necessário para a imagem é reservado quando a página é carregada. No entanto, sem estes atributos, o navegador não sabe o tamanho da imagem. O efeito será que o layout da página vai mudar durante o carregamento (enquanto as imagens carregar).
Observações Básicas - Dicas Úteis
Nota: Não use muitas imagens em uma mesma página, pois de demorar para carregar a página
Nota: Quando uma página é carregada, é o navegador, naquele momento, que realmente fica a imagem de um servidor web e insere-o na página. Portanto, certifique-se de que as imagens realmente ficar no mesmo lugar em relação à página da web, caso contrário, os visitantes vão receber um ícone de link quebrado. O ícone de link quebrado é exibido se o navegador não consegue encontrar a imagem.
HTML tags de imagem
| Tag | Descrição |
|---|---|
| <img> | Define uma imagem |
| <map> | Define um mapa da imagem |
| <area> | Define uma área clicável dentro de um mapa da imagem |