Imagens

Imagens desempenham um papel fundamental em aprimorar o apelo visual e transmitir informações em páginas web. Em HTML, imagens são inseridas utilizando a tag <img>.

Inserindo Imagens

A tag <img> é utilizada para inserir imagens em um documento HTML. Diferente da maioria das tags HTML, a tag <img> não possui uma tag de fechamento e é autoencerrada.
Exemplo:

<img src="image.jpg" alt="Description of the image">

No exemplo acima:

• A tag <img> é utilizada para inserir uma imagem;
• O atributo src especifica a fonte (URL) do arquivo de imagem;
• O atributo alt fornece um texto alternativo para a imagem. Esse texto é exibido caso a imagem não possa ser carregada ou para fins de acessibilidade.

Antes de explorar um exemplo do mundo real, é importante compreender os atributos essenciais da tag img e como eles impactam seu conteúdo.

Atributos de Imagem

1. src: Especifica a fonte (URL) do arquivo de imagem. Este atributo é obrigatório para que a tag <img> exiba a imagem;
2. alt: Fornece um texto alternativo para a imagem. O texto especificado no atributo alt é exibido caso a imagem não possa ser carregada ou para fins de acessibilidade. É essencial para usuários que utilizam leitores de tela ou em situações em que a imagem não pode ser exibida;
3. width: Especifica a largura da imagem em pixels ou como uma porcentagem do contêiner pai;
4. height: Especifica a altura da imagem em pixels ou como uma porcentagem do contêiner pai;
5. title: Fornece informações adicionais sobre a imagem. Geralmente é exibido como uma dica de ferramenta quando o usuário passa o mouse sobre a imagem.
   Exemplo:

No exemplo acima:

• A tag <img> insere uma imagem em uma página web;
• O atributo src especifica a URL de origem do arquivo de imagem;
• O atributo alt define o texto alternativo para a imagem;
• O atributo width define a largura da imagem;
• O atributo height define a altura da imagem;
• O atributo title fornece informações adicionais sobre a imagem.

Tutorial em Vídeo