Imagens HTML

As imagens podem tornar seus sites muito cativantes e provar muito benéficos para melhorar a experiência do usuário. Eles são a maneira mais comum e conveniente de chamar a atenção do usuário, porque a natureza humana prefere imagens sobre o texto. Esta postagem foi projetada para esclarecer seus leitores sobre imagens HTML em profundidade. Esta postagem abrange os seguintes tópicos:

1. Adicione imagens ao seu site
2. Alterar a altura e a largura das imagens
3. Adicionando imagens de um sub-dobrador
4. Adicionando imagens de outro site
5. Usando imagens como um link

Vamos começar.

1. Adicione imagens ao seu site

As imagens podem ser incluídas em um site usando a tag. A tag está vazia e consiste apenas em atributos e não tem tag de fechamento.

Sintaxe
A tag tem a sintaxe mencionada abaixo.

Os atributos da tag são explicados abaixo.

Atributo src
Este atributo descreve o caminho da imagem.

Atributo alt
Ele fornece um nome alternativo da imagem. Essa alternativa aparece quando, devido a algum motivo, a imagem falha em carregar. O nome alternativo deve descrever a imagem.

Exemplo
No exemplo a seguir, estamos adicionando uma imagem de luzes do norte em uma página da web usando a tag. Simplesmente damos o caminho da imagem ao atributo src e um nome alternativo para a imagem, caso a imagem não carregue.

Aprendendo imagens HTML

Saída

A imagem da Northern Lights foi incorporada na página da web.

Agora, por caso, a imagem não carrega devido a algum erro, é assim que o nome alternativo aparece na página da web em vez da imagem.

2. Alterar a altura e a largura das imagens

Os atributos de altura e largura são usados ​​para alterar a altura e a largura das imagens.

Exemplo
Suponha que você queira mudar a altura e a largura de uma imagem HTML.

Aprendendo imagens HTML

Definimos a largura da imagem para 300 e altura para 400.

Saída

A largura e a altura da imagem foram ajustadas.

Outra maneira de ajustar a largura e a altura das imagens HTML é usando o atributo de estilo.

Exemplo
No exemplo a seguir, o atributo de estilo está sendo usado para definir a largura e a altura da imagem.

Aprendendo imagens HTML

Definimos a largura da imagem para 300px e altura para 150px.

Saída

A largura e a altura da imagem foram alteradas.

3. Adicionando imagens de um sub-dobrador

Se suas imagens forem salvas em uma pasta diferente, você deverá adicionar o caminho dessa pasta no atributo src da tag.

Exemplo
Neste exemplo, a imagem “pássaro.JPG ”é colocado em um sub-dobrador“ imagens ”, então estamos dando o caminho dessa pasta no atributo SRC da tag.

Aprendendo imagens HTML

A imagem está presente em um sub-dobrador, como mostrado abaixo.

Saída

A imagem foi incorporada na página da web que estava presente em um sub-dobrador.

4. Adicionando de outro site

Para incorporar imagens de outro site, você simplesmente fornece o URL da imagem no atributo src da tag.

Exemplo
No exemplo seguinte, uma imagem está sendo incorporada ao Google.com o site usando o URL.

Aprendendo imagens HTML

Saída

Imagem do Google.com o site foi incorporado.

5. Usando imagens como um link

As imagens HTML podem ser usadas como links e, para esse fim.

Exemplo
No exemplo a seguir, a imagem está sendo usada como um link para outro site.

Aprendendo imagens HTML

Saída

Clique na imagem e o site será aberto cujo link foi fornecido no atributo href da tag.

O site foi aberto após clicar na imagem.

Conclusão

As imagens podem ser incorporadas nos sites usando a tag html. É uma etiqueta vazia com apenas dois atributos que são; src e alt. O atributo SRC aceita o caminho da imagem e Alt serve como um nome alternativo, caso a imagem não carregue, além disso, a largura e a altura da imagem podem ser ajustadas de acordo com o desejo. As imagens podem ser incorporadas em outros sites e podem ser usadas como links. Este post discute as imagens HTML em detalhes com a ajuda de exemplos.