English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
As páginas da web coloridas e variadas que vemos hoje são devido ao efeito das imagens. No passado, todas as páginas da web na internet eram de texto puro, muito monótonas. Isso mostra a importância das imagens no design da página da web. É possível inserir imagens em páginas html, e os formatos de imagem mais comuns usados nas páginas da web são jpg, png, gif, etc.
!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Guia Básico(oldtoolbag.com)</title> </head> <body> <h2>default picture</h2> <img border="0" src="/run/html/default.jpg" alt="default" width="304" height="228"> </body> </html>Teste e veja ‹/›
Inserir imagem
Este exemplo demonstra como exibir imagens no site.
Inserir imagens de diferentes locais
Este exemplo demonstra como exibir imagens de outras pastas ou servidores no site.
(Mais exemplos podem ser encontrados na parte inferior da página.)
No HTML, as imagens são definidas pela tag <img>.
<img> é um tag vazia, o que significa que ela contém apenas atributos e não possui etiqueta de fechamento.
Para exibir imagens na página, você precisa usar o atributo de origem (src). src significa "source". O valor do atributo de origem é o endereço da URL da imagem.
A sintaxe para definir uma imagem é:
<img src="url" alt="some_text">
O URL indica a localização do armazenamento da imagem. Se a imagem "default.jpg" estiver localizada em www.w3no diretório de imagens do codebox.com, então seu URL é https://pt.oldtoolbag.com/run/html/default.jpg.
O navegador exibe a imagem no local da etiqueta de imagem no documento. Se você colocar a etiqueta de imagem entre dois parágrafos, o navegador mostrará primeiro o primeiro parágrafo, então a imagem e, por último, o segundo parágrafo.
O atributo alt é usado para definir uma sequência de texto alternativa pré-definida para a imagem.
O valor do atributo de texto alternativo é definido pelo usuário.
<img src="boat.gif" alt="Big Boat">
Quando o navegador não consegue carregar a imagem, o atributo de texto alternativo informa ao leitor o que eles perderam. Neste caso, o navegador exibirá este texto alternativo em vez da imagem. Adicionar o atributo de texto alternativo a todas as imagens da página é um bom hábito, o que ajuda a melhor exibir as informações e é muito útil para aqueles que usam navegadores de texto puro.
height (altura) e width (largura) são usados para definir a altura e largura da imagem.
Os valores padrão das propriedades são em pixels:
<img src="pulpit.jpg" alt="Pulpit rock" width="304" altura="228">
Dica: Especificar a altura e largura da imagem é um bom hábito. Se a altura e largura da imagem forem especificadas, a página será carregada mantendo o tamanho especificado. Se o tamanho da imagem não for especificado, ao carregar a página, pode haver uma quebra na disposição geral da página HTML.
Atenção: Se um arquivo HTML contiver dez imagens, para que a página seja exibida corretamente, será necessário carregar 11 um arquivo. Carregar imagens requer tempo, então nossa sugestão é: use imagens com parcimônia.
Atenção: Ao carregar a página, Preste atenção ao caminho da imagem inserida na página. Se a posição da imagem não for configurada corretamente, o navegador não será capaz de carregar a imagem e a etiqueta de imagem exibirá uma imagem quebrada.
Alinhar imagem
Este exemplo demonstra como alinhar uma imagem no texto.
Imagem flutuante
Este exemplo demonstra como fazer uma imagem flutuante à esquerda ou à direita do parágrafo.
Configurar link de imagem
Este exemplo demonstra como usar uma imagem como um link.
Criar um mapa de imagem
Este exemplo mostra como criar um mapa de imagem com uma área clicável. Cada área é um hiperlink.
| Etiqueta | Descrição |
| img | Definir a Imagem |
| map | Definir o Mapa de Imagem |
| area | Definir a Área de Clique no Mapa de Imagem |