Imagens HTML
- Página Anterior Links HTML
- Próxima Página Tabelas HTML
Pode-se exibir imagens no documento usando HTML.
Exemplo
- Inserir imagem
- Este exemplo demonstra como exibir imagens em uma página da web.
- Inserir imagens de diferentes locais
- Este exemplo demonstra como exibir imagens de outros diretórios ou servidores em uma página da web.
（Mais exemplos podem ser encontrados na parte inferior dessa página)
Etiqueta de imagem (<img>) e propriedade de origem (Src)
Em HTML, a imagem é definida pela etiqueta <img>.
<img> é uma etiqueta vazia, o que significa que ela contém apenas propriedades e não possui etiqueta de fechamento.
Para exibir uma imagem na página, você precisa usar a propriedade de origem (src). src significa "origem". O valor da propriedade de origem é o endereço URL da imagem.
A sintaxe para definir a imagem é:
<img src="url" />
URL indica o local de armazenamento da imagem. Se a imagem chamada "boat.gif" estiver no diretório "images" do site www.codew3c.com, então seu URL será http://www.codew3c.com/images/boat.gif.
O navegador exibe a imagem no local onde a etiqueta de imagem está presente no documento. Se você colocar a etiqueta de imagem entre dois parágrafos, o navegador exibirá primeiro o primeiro parágrafo, então a imagem e, finalmente, o segundo parágrafo.
Substituir propriedade de texto (Alt)
A propriedade alt é usada para definir uma sequência de texto substituto预备 para a imagem. O valor do atributo de texto substituto é definido pelo usuário.
<img src="boat.gif" alt="Big Boat">
Quando o navegador não puder carregar a imagem, o atributo de texto substituto pode informar aos leitores o que foi perdido. Neste caso, o navegador exibirá este texto alternativo em vez da imagem. É uma boa prática adicionar o atributo de texto substituto a todas as imagens na página, o que ajuda a melhor exibir as informações e é muito útil para aqueles que usam navegadores de texto puro.
Atenção Básica - Dicas Úteis:
Se um arquivo HTML contiver dez imagens, então para exibir corretamente essa página, são necessários carregar 11 arquivos. Carregar imagens requer tempo, então nossa sugestão é: usar imagens com cautela.
Mais Exemplos
- Imagem de fundo
- Este exemplo demonstra como adicionar uma imagem de fundo à página HTML.
- Alinhar imagem
- Este exemplo demonstra como alinhar a imagem no texto.
- Imagem flutuante
- Este exemplo demonstra como fazer a imagem flutuar até a esquerda ou direita do parágrafo.
- Ajustar o tamanho da imagem
- Este exemplo demonstra como ajustar o tamanho da imagem.
- Exibir texto substituto para imagem
- Este exemplo demonstra como exibir texto substituto para a imagem. Quando a imagem não puder ser carregada pelo navegador, o atributo de texto substituto informa aos leitores o que foi perdido. É uma boa prática adicionar o atributo de texto substituto a todas as imagens na página.
- Fazer link de imagem
- Este exemplo demonstra como usar uma imagem como link.
- Criar mapa de imagem
- Este exemplo mostra como criar um mapa de imagem com áreas clicáveis. Cada área é um hiperlink.
- Converter imagem em mapa de imagem
- Este exemplo mostra como transformar uma imagem comum em um mapa de imagem.
Etiqueta de Imagem
| Etiqueta | Descrição |
|---|---|
| <img> | Definir a imagem. |
| <map> | Definir o mapa de imagem. |
| <area> | Definir a área clicável do mapa de imagem. |
- Página Anterior Links HTML
- Próxima Página Tabelas HTML
