Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda Trabalhando com Imagens em HTML | Imagens e Mídia
Fundamentos de HTML

bookTrabalhando com Imagens em HTML

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:
index.html

index.html

copy

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

1. Qual tag é usada para inserir imagens em um documento HTML?

2. Qual atributo é obrigatório para a tag <img> exibir a imagem?

3. O que o atributo alt fornece para uma imagem?

4. O que acontece se a imagem especificada no atributo src não puder ser carregada?

question mark

Qual tag é usada para inserir imagens em um documento HTML?

Select the correct answer

question mark

Qual atributo é obrigatório para a tag <img> exibir a imagem?

Select the correct answer

question mark

O que o atributo alt fornece para uma imagem?

Select the correct answer

question mark

O que acontece se a imagem especificada no atributo src não puder ser carregada?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 3. Capítulo 1

Pergunte à IA

expand

Pergunte à IA

ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

Suggested prompts:

Can you explain more about the `alt` attribute and why it's important?

How do I use a local image instead of an online image in my HTML?

What happens if I don't specify the width and height attributes for an image?

Awesome!

Completion rate improved to 3.13

bookTrabalhando com Imagens em HTML

Deslize para mostrar o menu

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:
index.html

index.html

copy

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

1. Qual tag é usada para inserir imagens em um documento HTML?

2. Qual atributo é obrigatório para a tag <img> exibir a imagem?

3. O que o atributo alt fornece para uma imagem?

4. O que acontece se a imagem especificada no atributo src não puder ser carregada?

question mark

Qual tag é usada para inserir imagens em um documento HTML?

Select the correct answer

question mark

Qual atributo é obrigatório para a tag <img> exibir a imagem?

Select the correct answer

question mark

O que o atributo alt fornece para uma imagem?

Select the correct answer

question mark

O que acontece se a imagem especificada no atributo src não puder ser carregada?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 3. Capítulo 1
some-alt