Html img

Html img – Neste artigo veja como inserir uma imagem no HTML.

Para inserir uma imagem no HTML basta utilizar a tag img com o atributo src.

Para exibir uma imagen em uma página, você necessita usar o atributo src. 

o Src significa “source” [fonte]. O valor do atributo src é a URL da imagem que você quer exibir na sua página.

a url aponta para o local onde a imagem está armazenada.

O atributo src é obrigatório e especifica o caminho (URL) para a imagem.

Quando uma página da web é carregada o navegador obtém a imagem de um servidor da web e a insere na página html. 

Diante disso, o resultado final será:

<img src="www.site.com.br/imagens/arvore.jpg" alt="Imagem de uma árvore" width="300" height="260">

Veja mais exemplos, Para inserir uma imagem local, podemos apenas incluir o nome da imagem com sua extensão, como no exemplo abaixo:

<img src="arvore.jpg" alt="Imagem de uma árvore" width="300" height="260">
<img src="flores.jpg" alt="Imagem de Flores" width="300" height="260">

Veja as Definições e Uso da Tag Img no Html

No exemplo abaixo como a tag img é usada para inserir uma imagem em uma página html.

A Tag <img> tem dois atributos obrigatórios:

1. src – especifica o caminho para a imagem
2. alt – especifica um texto alternativo para a imagem, se a imagem por algum motivo não puder ser exibida

sempre especifique a largura e a altura de uma imagem. 

veja como você pode inserir link na imagem no html

(veja o exemplo abaixo).

   <a href="https://www.loopnerd.com.br/" title="Clique">
      <img src="arvore.jpg" alt="Imagem de uma árvore" width="300" height="260">
   </a>

   <a href="https://www.loopnerd.com.br/" title="Clique">
      <img src="flores.jpg" alt="Imagem de Flores" width="300" height="260">
   </a>

Atributos na tag img

alt – O atributo alt é obrigatório fornece um texto alternativo para uma imagem, se o usuário por algum motivo não puder visualizá-la (devido à conexão lenta, um erro no atributo src ou se o usuário usar um leitor de tela).

width – Especifica a largura de uma imagem

height – Especifica a altura de uma imagem

src – Especifica o caminho para a imagem

srcset – Especifica uma lista de arquivos de imagem para usar em diferentes situações

Veja o Resultado !

Baixar Código Veja Funcionando