Tag HTML <img>

Exemplos de HTML Tag Img são o tópico da postagem de hoje. Com fé razoável, satisfará as demandas educacionais.

A tag HTML <img> é usada para inserir uma imagem em uma página da web.

Pode inserir imagens das seguintes maneiras:

Example:

1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<body>
<img src="https://mrexamples.com/wp-content/uploads/2023/03/79f12b03b5c281678959d0019cc90405.jpg" alt="boy enjoying with friends" width="400" height="450">
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Alinhamento de imagem usando CSS:

Example:

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<body>
<img src="https://mrexamples.com/wp-content/uploads/2023/03/png-transparent-cheers-of-beer-draught-beer-keg-homebrewing-gesture-food-hand-beer-bottle.png" alt="cheers Together" width="58" height="58" style="vertical-align:bottom">
<img src="https://mrexamples.com/wp-content/uploads/2023/03/png-transparent-cheers-of-beer-draught-beer-keg-homebrewing-gesture-food-hand-beer-bottle.png" alt="cheers Together" width="58" height="58" style="vertical-align:middle">
<img src="https://mrexamples.com/wp-content/uploads/2023/03/png-transparent-cheers-of-beer-draught-beer-keg-homebrewing-gesture-food-hand-beer-bottle.png" alt="cheers Together" width="58" height="58" style="vertical-align:top">
<img src="https://mrexamples.com/wp-content/uploads/2023/03/png-transparent-cheers-of-beer-draught-beer-keg-homebrewing-gesture-food-hand-beer-bottle.png" alt="cheers Together" width="58" height="58" style="float:right">
<img src="https://mrexamples.com/wp-content/uploads/2023/03/png-transparent-cheers-of-beer-draught-beer-keg-homebrewing-gesture-food-hand-beer-bottle.png" alt="cheers Together" width="58" height="58" style="float:left">
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Usando CSS, defina uma borda para a imagem:

Example:

1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<body>
<img src="https://mrexamples.com/wp-content/uploads/2023/03/png-transparent-cheers-of-beer-draught-beer-keg-homebrewing-gesture-food-hand-beer-bottle.png" alt="Cheers Emoji" width="58" height="58" style="border:4px solid blue">
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Para definir a margem superior inferior para uma imagem (via CSS), siga estas etapas:

Example:

1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<body>
<img src="https://mrexamples.com/wp-content/uploads/2023/03/png-transparent-cheers-of-beer-draught-beer-keg-homebrewing-gesture-food-hand-beer-bottle.png" alt="Cheers Emoji" width="58" height="58" style="vertical-align:middle; margin:25px 0px">
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Margem a parte superior e inferior da imagem (com CSS):

Example:

1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<body>
<img src="https://mrexamples.com/wp-content/uploads/2023/03/png-transparent-cheers-of-beer-draught-beer-keg-homebrewing-gesture-food-hand-beer-bottle.png" alt="Cheers Emoji" width="58" height="58" style="vertical-align:middle;margin:44px 0px">
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Você pode inserir imagens de uma pasta ou site diferente seguindo estas etapas:

Example:

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
<body>
<img src="https://mrexamples.com/wp-content/uploads/2023/03/dancing-banana.gif" alt="Dancing Banana" width="300" height="140">
<img src="https://mrexamples.com/wp-content/uploads/2023/03/dancing-banana.gif" alt="Dancing Banana" width="350" height="230">
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Uma imagem pode ser hiperlink seguindo estas etapas:

Example:

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<a href="https://mrexamples.com">
<img src="https://mrexamples.com/wp-content/uploads/2023/03/dancing-banana.gif" alt="mrexamples.com" width="80" height="120">
</a>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Veja como você pode criar uma área clicável em um mapa de imagem. Há um hiperlink para cada região:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<body>
<img src="https://mrexamples.com/wp-content/uploads/2023/03/download.png" alt="Home" usemap="#homemap" width="350" height="310">
<map name="homemap">
<area shape="rect" coords="34,44,270,350" alt="Laptop" href="laptop.htm">
<area shape="rect" coords="290,172,333,250" alt="Tablet" href="tablet.htm">
<area shape="circle" coords="337,300,44" alt="Soda Can" href="soda.htm">
</map>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Veja como você pode usar max-with com CSS para uma tag <img> :

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<style>
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<img src="https://mrexamples.com/wp-content/uploads/2023/03/Elon_Musk_Royal_Society_crop2.jpg" alt="Elon mUsk">
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Índice-

Marca HTML <img>:

Uso de tags de imagem

A Tag Img <img> é utilizada para inserir uma imagem em uma página HTML .

Geralmente, as imagens não são incorporadas em páginas da web; eles estão ligados a eles. A tag <img> fornece espaço de armazenamento para a imagem referenciada.

Para utilizar a tag Img <img> , os dois atributos a seguir devem estar presentes:

src – Aponta para a origem da imagem.
alt – Fornece um texto alternativo para uma imagem se, por qualquer motivo, a imagem não for exibida

IMPORTANTE : Certifique-se de indicar também a largura e a altura de suas imagens. A página pode piscar quando uma imagem tem largura e altura definidas.

Conselho: vincular uma imagem a um documento diferente é tão fácil quanto aninhar a tag Img <img> dentro de uma tag <a> .

Lista de Atributos

Atributo	Valor	Visão geral
origem	URL	Fornece o caminho da imagem
mapa de uso	#mapname	Atribui uma imagem a um mapa do lado do cliente.
largura	píxeis	Indica a largura da imagem.
conjunto de origem	Lista de URLs	Contém uma lista de imagens adequadas para vários cenários.
ismap	ismap	Fornece um mapa de imagem do lado do servidor para uma imagem.
carregando	ansioso preguiçoso	Indica se um navegador deve carregar uma imagem imediatamente ou atrasá-la até que requisitos específicos sejam atendidos.
longdesc	URL	Fornece um URL para as informações completas de uma imagem.
política de referência	no-referrer no-referrer-quando-downgrade origem origem-quando-origem cruzada url inseguro	Determine quais dados de referência devem ser usados ao recuperar uma imagem.
alternativo	texto	Indica um texto alternativo para uma imagem.
origem cruzada	credenciais de uso anônimas	Permita que o Canvas use imagens de sites de terceiros que oferecem suporte ao acesso de origem cruzada.
altura	píxeis	Define a altura da imagem.
tamanhos	tamanhos	Define tamanhos de imagem com base em layouts de página.

Atributos

Global

Atributos globais também podem ser aceitos em HTML com a tag <img> .

Evento

Os atributos do evento também podem ser especificados em HTML com a tag <img> .

Compatibilidade do navegador

Elemento
<img>	Sim	Sim	Sim	Sim	Sim

CSS predefinido

Por padrão, muitos navegadores renderizarão os seguintes valores de elemento de imagem:

img {
display: inline-block;
}

Benefícios da tag HTML <img>

Alguns dos benefícios de usar essa tag incluem:

As imagens podem tornar as páginas da Web mais envolventes e visualmente atraentes, melhorando a experiência geral do usuário.
Como as imagens podem ser muito grandes, usar a tag <img> com os atributos apropriados pode ajudar a reduzir o tamanho do arquivo e otimizar o tempo de carregamento, melhorando o desempenho do site.
A inclusão de texto alternativo (atributo alt) com a tag <img> ajuda a tornar as imagens acessíveis a usuários que dependem de leitores de tela ou têm deficiências visuais.
Adicionar texto alternativo descritivo e usar nomes de arquivo relevantes pode ajudar os mecanismos de pesquisa a entender melhor o conteúdo de sua página da Web, melhorando potencialmente suas classificações nos mecanismos de pesquisa.
A tag <img> pode ser usada para exibir uma ampla variedade de formatos de imagem, incluindo JPEG, PNG, GIF e SVG.

Se você achou este artigo digno de conhecimento, deixe sua reação abaixo para apreciar nossos esforços ou nos fornecer um feedback para fazer melhorias neste site.

Nós valorizamos o seu feedback.

Tag HTML <img>

Example:

Example:

Example:

Example:

Example:

Example:

Example:

Example:

Example:

Uso de tags de imagem

Lista de Atributos

Atributos

Global

Evento

Compatibilidade do navegador

CSS predefinido

Benefícios da tag HTML <img>

Sentindo entediado?