Aula 57 - Imagens como Elemento da Página

Introdução

As imagens são elementos fundamentais em páginas Web. Elas ajudam a transmitir informações, melhorar a aparência visual e tornar a navegação mais agradável para o usuário.

📌 A tag responsável por inserir imagens em HTML é a tag <img>.

Inserindo uma Imagem

Para exibir uma imagem em uma página utilizamos a tag <img>.

<img src="paisagem.jpg" alt="Paisagem">

O navegador carrega o arquivo informado e exibe a imagem na página.

Estrutura Básica

Parte	Função
img	Tag utilizada para exibir imagens.
src	Localização do arquivo da imagem.
alt	Texto alternativo para acessibilidade.

Exemplo Completo

<img src="logo.png"
alt="Logo da Empresa">

O navegador irá:

Localizar o arquivo logo.png.
Carregar a imagem.
Exibir a imagem na página.

Onde as Imagens São Utilizadas?

Logotipos
Banners
Galerias de fotos
Produtos de lojas virtuais
Ícones
Ilustrações
Portfólios

Imagem Local

Quando a imagem está na mesma pasta do site, basta informar o nome do arquivo.

<img src="foto.jpg" alt="Foto">

Estrutura:

projeto/
├─ index.html
└─ foto.jpg

Imagem em Subpasta

É comum organizar imagens em uma pasta específica.

<img src="imagens/foto.jpg"
alt="Foto">

Estrutura:

projeto/
├─ index.html
└─ imagens/
   └─ foto.jpg

Imagem Externa

Também é possível carregar imagens hospedadas em outros servidores.

<img src="https://site.com/imagem.jpg"
alt="Imagem Externa">

⚠️ Caso a imagem seja removida do servidor externo ela deixará de ser exibida.

Boas Práticas

Utilizar imagens otimizadas.
Adicionar sempre o atributo alt.
Utilizar formatos modernos como WEBP.
Evitar imagens muito pesadas.
Organizar arquivos em pastas.

Erros Comuns

Erro	Problema
Nome incorreto	A imagem não aparece.
Caminho errado	Arquivo não encontrado.
Sem atributo alt	Prejudica acessibilidade.
Imagem muito grande	Página lenta.

Resumo

Elemento	Função
<img>	Inserir imagem.
src	Informar localização.
alt	Texto alternativo.

🖼️ Imagens como Elemento da Página