JPG Imagens
Imagens GIF
Imagens PNG
Exemplo
<!DOCTYPE html>
<html>
<body>
<h2>Spectacular Mountain</h2>
<img src="pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;">
</body>
</html> Tente você mesmo " Sempre especifique a largura ea altura de uma imagem. Se largura e altura não são especificados, a página irá piscar enquanto as cargas de imagem.
HTML Imagens de Sintaxe
Em HTML, imagens são definidos com o <img> tag.
A <img> tag está vazio, contém apenas atributos, e não tem uma marca de fechamento.
A src atributo especifica a URL (web address) da imagem:
<img src=" url " alt=" some_text ">O alt atributo
O alt atributo especifica um texto alternativo para uma imagem, se a imagem não pode ser exibida.
O alt atributo fornece informação 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 src atributo, ou se o usuário usa um leitor de tela).
Se um navegador não consegue encontrar uma imagem, ele irá exibir o texto alt:
Exemplo
<img src="wrongname.gif" alt="HTML5 Icon" style="width:128px;height:128px;"> Tente você mesmo " O alt atributo é obrigatório. Uma página web não irá validar corretamente sem ela.
Os leitores de tela HTML
Um leitor de tela é um programa de software que pode ler o que é exibido em uma tela.
Os leitores de tela são úteis para as pessoas que são cegas, deficientes visuais, ou de aprendizagem desativado.
Os leitores de tela podem ler o alt atributo.
Tamanho da imagem - Largura e Altura
Você pode usar o style atributo para especificar a largura ea altura de uma imagem.
Os valores são especificados em pixels (use px after the value) :
Alternativamente, você pode usar width e height atributos. Aqui, os valores são especificados em pixels por padrão:
Largura e Altura ou estilo?
A largura, altura e atributos de estilo são válidos no último padrão HTML5.
Sugerimos que você use o style atributo. Ela impede estilos folhas de mudar o tamanho original de imagens:
Exemplo
<!DOCTYPE html>
<html>
<head>
<style>
img {
width:100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
</body>
</html> Tente você mesmo " Imagens em outra pasta
Se não for especificado, o navegador espera encontrar a imagem na mesma pasta que a página web.
No entanto, é comum para armazenar imagens em uma sub-pasta. Você deve, então, incluir o nome da pasta no src atributo:
Exemplo
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;"> Tente você mesmo " Imagens em outro servidor
Alguns sites armazenar suas imagens em servidores de imagem.
Na verdade, você pode acessar imagens a partir de qualquer endereço de web no mundo:
Imagens animadas
O padrão GIF permite que imagens animadas:
Exemplo
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;"> Tente você mesmo " Note que a sintaxe de inserção de imagens animadas não é diferente a partir de imagens não-animados.
Usando uma imagem como um link
Para usar uma imagem como um link, simplesmente ninho <img> tag dentro do <a> tag:
Exemplo
<a href="default.html">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a> Tente você mesmo " Adicionar "border:0;" para evitar IE9 (and earlier) de exibir uma borda ao redor da imagem.
Floating imagem
Use a propriedade CSS float para deixar o flutuador imagem.
A imagem pode flutuar para a direita ou para a esquerda de um texto:
Exemplo
<p>
<img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.
</p>
<p>
<img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.
</p> Tente você mesmo " Mapas de imagem
Use o <map> tag para definir uma imagem-mapa. Uma imagem-mapa é uma imagem com áreas clicáveis.
O name atributo do <map> tag está associada com o <img> atributo 's usemap e cria uma relação entre a imagem e o mapa.
O <map> tag contém uma série de <area> marcas, que define as áreas clicáveis na imagem-mapa:
Exemplo
<img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px;">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map> Tente você mesmo " Resumo do capítulo
- Use o HTML <img> elemento para definir uma imagem
- Use o HTML src atributo para definir o URL da imagem
- Use o HTML alt atributo para definir um texto alternativo para uma imagem, se ela não pode ser exibida
- Use o HTML width e height atributos para definir o tamanho da imagem
- Use as CSS width e height propriedades para definir o tamanho da imagem (alternatively)
- Use o CSS float propriedade para deixar o flutuador imagem
- Use o HTML <map> elemento para definir uma imagem-map
- Use o HTML <area> elemento para definir as áreas clicáveis na imagem-map
- Use o HTML <img> elemento 's usemap atribuem a apontar para uma imagem-map
Carregando imagens leva tempo. As imagens grandes podem retardar sua página. Use imagens com cuidado.
Teste-se com exercícios!
Exercício 1 » exercício 2» exercício 3 » exercício 4» exercício 5 » exercício 6»
HTML tags de imagem
| etiqueta | Descrição |
|---|---|
| <img> | Define uma imagem |
| <map> | Define uma imagem-map |
| <area> | Define uma área clicável dentro de uma imagem-map |