HTML – 09/03/2026

Por /

Como Inserir Imagens em HTML

Inserir imagens em uma página HTML é uma tarefa simples e muito utilizada na criação de sites. Para isso, usamos a tag <img>.

1. A Tag <img>

A tag <img> é utilizada para exibir imagens em uma página web. Diferente de outras tags, ela não possui fechamento.

Estrutura básica

<img src="imagem.jpg">

Explicação

  • img → tag usada para exibir imagens
  • src → indica o caminho da imagem que será exibida

2. Exemplo Básico

<html>
<head>
<title>Exemplo de Imagem</title>
</head><body><h1>Minha Primeira Imagem</h1><img src="gato.jpg"></body>
</html>

Nesse exemplo, o navegador tentará carregar a imagem chamada gato.jpg.

3. Inserindo Texto Alternativo (alt)

O atributo alt serve para mostrar um texto caso a imagem não carregue.

<img src="gato.jpg" alt="Foto de um gato">

Isso também ajuda na acessibilidade e no SEO.

4. Definindo Tamanho da Imagem

Você pode definir largura e altura da imagem.

<img src="gato.jpg" width="300" height="200">

Explicação

  • width → largura da imagem
  • height → altura da imagem

Exemplo completo:

<img src="gato.jpg" alt="Foto de um gato" width="300">

5. Imagem Dentro de uma Pasta

Se a imagem estiver dentro de uma pasta, você deve informar o caminho.

Estrutura de pastas

site
│
├── index.html
└── imagens
      └── cachorro.jpg

Código

<img src="imagens/cachorro.jpg">

6. Usando Imagem da Internet

Também é possível usar imagens hospedadas em outros sites.

<img src="https://www.site.com/imagem.jpg">

Exemplo:

<img src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Cat03.jpg" width="300">

7. Centralizando uma Imagem

Uma forma simples é usar a tag <center> (não recomendada em HTML moderno, mas simples para iniciantes).

<center>
<img src="gato.jpg" width="300">
</center>

8. Exemplo Completo

<html>
<head>
<title>Imagens em HTML</title>
</head><body><h1>Exemplo de Imagens</h1><p>Imagem armazenada no computador:</p>
<img src="imagens/cachorro.jpg" alt="Foto de um cachorro" width="300"><br><br><p>Imagem da internet:</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Cat03.jpg" alt="Foto de gato" width="300"></body>
</html>

9. Erros Comuns

1️⃣ Caminho errado da imagem

Se o nome ou pasta estiver errado, a imagem não aparecerá.

2️⃣ Nome diferente

Arquivos são sensíveis a letras maiúsculas e minúsculas.

gato.jpg ≠ Gato.jpg

3️⃣ Arquivo não está na pasta correta

Sempre verifique a estrutura das pastas.

10. Extensões de Imagens Mais Comuns

ExtensãoUso
JPG / JPEGFotos
PNGImagens com transparência
GIFImagens animadas
SVGImagens vetoriais

ATIVIDADE

  1. Qual é a função da tag <img> em uma página HTML?
  2. O que faz o atributo src dentro da tag <img>?
  3. Por que a tag <img> é considerada diferente de muitas outras tags HTML em relação ao seu fechamento?
  4. Para que serve o atributo alt ao inserir uma imagem em HTML?
  5. Quais atributos podem ser utilizados para definir o tamanho de uma imagem em HTML?
  6. Explique como inserir uma imagem que está dentro de uma pasta chamada imagens.
  7. Como é possível inserir uma imagem que está hospedada na internet?
  8. Qual tag pode ser utilizada para centralizar uma imagem de forma simples em HTML?
  9. Cite dois erros comuns que podem impedir que uma imagem apareça em uma página HTML.
  10. Quais são algumas das extensões de arquivos de imagem mais comuns utilizadas em páginas web?

ATIVIDADE PRÁTICA DE LABORATÓRIO

  1. Utilizando o computador do laboratório, crie uma página HTML
  2. Baixe uma imagem e salve ela na mesma pasta do documento HTML e insira a imagem na página utilizando a linguagem HTML.
  3. Pesquise na internet por outra imagem qualquer e desta vez, adicione essa imagem a sua ágina HTML utilizando apenas o link de endereço da imagem, ex “https://www.g1.com/imagem.jpg”
  4. Mostre sua página ao professor.

Rolar para cima