Imagens

As imagens desempenham um papel crucial em melhorar o apelo visual e transmitir informações nas páginas da web. No HTML, as imagens são inseridas usando a tag <img>.

Inserindo Imagens

A tag <img> é usada para inserir imagens em um documento HTML. Ao contrário da maioria das tags HTML, a tag <img> não possui uma tag de fechamento e é auto-fechada.
Exemplo:

No exemplo acima:

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

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

Atributos da Imagem

1. src: Especifica a fonte (URL) do arquivo de imagem. Este atributo é necessário para a tag <img> exibir a imagem;
2. alt: Fornece texto alternativo para a imagem. O texto especificado no atributo alt é exibido se a imagem não puder ser carregada ou para fins de acessibilidade. É essencial para usuários que possam estar usando leitores de tela ou para 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. Muitas vezes é 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 da 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 mais informações sobre a imagem.

Tutorial em Vídeo