Adicionando Imagens em HTML
Imagens tornam as páginas da web mais envolventes. Você pode inserir uma imagem usando a tag <img>.
index.html
Principais atributos:
src: obrigatório. Caminho para o arquivo de imagem (absoluto ou relativo);alt: obrigatório. Texto exibido caso a imagem não possa ser carregada, também utilizado por leitores de tela;width/height: tamanho em pixels. Sem esses atributos, a imagem é exibida em seu tamanho original.
Atributo alt
O texto alt deve descrever claramente a imagem e fornecer um contexto útil.
Vamos imaginar o seguinte exemplo. Você possui uma fonte sobre corridas de cavalos. Deseja mostrar como os competidores se preparam para a corrida.
Texto alt inadequado:
index.html
Melhor texto alt:
index.html
A versão aprimorada fornece contexto real e auxilia usuários com deficiência visual a compreender o que a imagem representa.
Atributo src
O atributo src pode utilizar caminhos absolutos e relativos para especificar a localização do arquivo de imagem.
Caminho Absoluto
Uma URL completa apontando para uma imagem online.
index.html
Qualquer pessoa pode acessar a imagem através deste link completo.
Por favor, analise o exemplo real no code sandbox abaixo.
Para examinar a estrutura de pastas de arquivos, arraste o controle deslizante no lado esquerdo da interface do code sandbox. No canto superior esquerdo, você encontrará um botão de menu representado por três linhas. Ao clicar neste botão, você será direcionado para a organização das pastas de arquivos.
Caminho Relativo
Aponta para uma imagem dentro da pasta do seu projeto.
index.html
Isso significa que image.jpg está armazenado no diretório images próximo ao seu arquivo HTML.
Por favor, analise o exemplo real fornecido no code sandbox abaixo. Você encontrará a pasta images, que contém o arquivo sun.png.
Caminhos absolutos: URLs completas que funcionam de qualquer lugar da internet.
Caminhos relativos: caminhos locais do projeto usados dentro da sua própria estrutura de pastas.
1. Qual tag pode ser utilizada para inserir uma imagem em um site?
2. Qual atributo é obrigatório especificar em uma tag <img/>?
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 the difference between absolute and relative paths in more detail?
What are some tips for writing effective alt text for images?
Can you show more examples of using the img tag with different attributes?
Incrível!
Completion taxa melhorada para 2.38Adicionando Imagens em HTML
Deslize para mostrar o menu
Imagens tornam as páginas da web mais envolventes. Você pode inserir uma imagem usando a tag <img>.
index.html
Principais atributos:
src: obrigatório. Caminho para o arquivo de imagem (absoluto ou relativo);alt: obrigatório. Texto exibido caso a imagem não possa ser carregada, também utilizado por leitores de tela;width/height: tamanho em pixels. Sem esses atributos, a imagem é exibida em seu tamanho original.
Atributo alt
O texto alt deve descrever claramente a imagem e fornecer um contexto útil.
Vamos imaginar o seguinte exemplo. Você possui uma fonte sobre corridas de cavalos. Deseja mostrar como os competidores se preparam para a corrida.
Texto alt inadequado:
index.html
Melhor texto alt:
index.html
A versão aprimorada fornece contexto real e auxilia usuários com deficiência visual a compreender o que a imagem representa.
Atributo src
O atributo src pode utilizar caminhos absolutos e relativos para especificar a localização do arquivo de imagem.
Caminho Absoluto
Uma URL completa apontando para uma imagem online.
index.html
Qualquer pessoa pode acessar a imagem através deste link completo.
Por favor, analise o exemplo real no code sandbox abaixo.
Para examinar a estrutura de pastas de arquivos, arraste o controle deslizante no lado esquerdo da interface do code sandbox. No canto superior esquerdo, você encontrará um botão de menu representado por três linhas. Ao clicar neste botão, você será direcionado para a organização das pastas de arquivos.
Caminho Relativo
Aponta para uma imagem dentro da pasta do seu projeto.
index.html
Isso significa que image.jpg está armazenado no diretório images próximo ao seu arquivo HTML.
Por favor, analise o exemplo real fornecido no code sandbox abaixo. Você encontrará a pasta images, que contém o arquivo sun.png.
Caminhos absolutos: URLs completas que funcionam de qualquer lugar da internet.
Caminhos relativos: caminhos locais do projeto usados dentro da sua própria estrutura de pastas.
1. Qual tag pode ser utilizada para inserir uma imagem em um site?
2. Qual atributo é obrigatório especificar em uma tag <img/>?
Obrigado pelo seu feedback!
