Trabalhando 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
src
: Especifica a fonte (URL) do arquivo de imagem. Este atributo é obrigatório para que a tag<img>
exiba a imagem;alt
: Fornece um texto alternativo para a imagem. O texto especificado no atributoalt
é 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;width
: Especifica a largura da imagem em pixels ou como uma porcentagem do contêiner pai;height
: Especifica a altura da imagem em pixels ou como uma porcentagem do contêiner pai;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
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?
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
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
Trabalhando 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
src
: Especifica a fonte (URL) do arquivo de imagem. Este atributo é obrigatório para que a tag<img>
exiba a imagem;alt
: Fornece um texto alternativo para a imagem. O texto especificado no atributoalt
é 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;width
: Especifica a largura da imagem em pixels ou como uma porcentagem do contêiner pai;height
: Especifica a altura da imagem em pixels ou como uma porcentagem do contêiner pai;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
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?
Obrigado pelo seu feedback!