Aprenda Trabalhando com Imagens em HTML

Imagens melhoram o apelo visual de uma página da web e auxiliam na comunicação de informações. Em HTML, imagens são adicionadas utilizando a tag <img>.

Inserção de Imagens

A tag <img> é autocontida e exige pelo menos dois atributos:

src: localização do arquivo de imagem;
alt: texto alternativo para acessibilidade ou quando a imagem não pode ser carregada.

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

Atributos de Imagem

src: caminho ou URL da imagem (obrigatório);
alt: texto alternativo e descrição para acessibilidade;
width: define a largura da imagem;
height: define a altura da imagem;
title: exibe uma dica de ferramenta ao passar o mouse.

index.html

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.

Tudo estava claro?

Obrigado pelo seu feedback!

Seção 3. Capítulo 1

Pergunte à IA

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

Suggested prompts:

Can you explain more about the difference between using local and online images?

What happens if I don't include the alt attribute in my image tag?

How do I make sure my images are responsive on different devices?

Awesome!

Completion rate improved to 2.86

Deslize para mostrar o menu

Imagens melhoram o apelo visual de uma página da web e auxiliam na comunicação de informações. Em HTML, imagens são adicionadas utilizando a tag <img>.

Inserção de Imagens

A tag <img> é autocontida e exige pelo menos dois atributos:

src: localização do arquivo de imagem;
alt: texto alternativo para acessibilidade ou quando a imagem não pode ser carregada.

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

Atributos de Imagem

src: caminho ou URL da imagem (obrigatório);
alt: texto alternativo e descrição para acessibilidade;
width: define a largura da imagem;
height: define a altura da imagem;
title: exibe uma dica de ferramenta ao passar o mouse.

index.html

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.

Tudo estava claro?

Obrigado pelo seu feedback!

Seção 3. Capítulo 1

Trabalhando com Imagens em HTML

Inserção de Imagens

Atributos de Imagem

1. Qual tag é utilizada 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?

Awesome!

Trabalhando com Imagens em HTML

Inserção de Imagens

Atributos de Imagem

1. Qual tag é utilizada 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?

Trabalhando com Imagens em HTML

Inserção de Imagens

Atributos de Imagem

1. Qual tag é utilizada 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?

Awesome!

Trabalhando com Imagens em HTML

Inserção de Imagens

Atributos de Imagem

1. Qual tag é utilizada 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?

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?

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?