Front-end com Vue 3

Aparência

Imagens (<img>) ​

As imagens são uma parte integral do design web, enriquecendo visualmente as páginas e melhorando a experiência do usuário. O HTML permite a inserção de imagens por meio da tag <img>, que possui atributos específicos para definir a fonte da imagem, suas dimensões, e, muito importante, o texto alternativo.

Explicação Teórica: Adicionando Imagens e Importância do Texto Alternativo ​

  • Adicionando Imagens: Para adicionar uma imagem a um documento HTML, utilizamos a tag <img>, especificando a localização da imagem com o atributo src. Por exemplo, <img src="caminho/para/imagem.jpg"> insere a imagem localizada no caminho especificado.
  • Texto Alternativo: O atributo alt da tag <img> é crucial para a acessibilidade e SEO (Search Engine Optimization). Ele fornece uma descrição textual da imagem para leitores de tela, utilizados por usuários com deficiência visual, e ajuda os mecanismos de busca a entender o conteúdo da imagem. Um bom texto alternativo deve descrever concisa e eficazmente o conteúdo ou função da imagem. Por exemplo, <img src="paisagem.jpg" alt="Uma bela paisagem com montanhas ao fundo e um lago à frente">.

Exemplo Prático: Adicionar uma Imagem ao Documento ​

html
<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <title>Exemplo de Inserção de Imagem</title>
  </head>
  <body>
    <h1>Inserção de Imagem no HTML</h1>
    <img src="url_da_imagem.jpg" alt="Descrição da Imagem" width="500" />
    <p>
      Acima, você vê um exemplo de como inserir uma imagem em uma página HTML.
    </p>
  </body>
</html>

Neste exemplo, uma imagem é adicionada ao documento HTML usando a tag <img>, com atributos especificando a URL da imagem, o texto alternativo, e a largura da imagem.

Atividade: Adicionar uma Imagem e Escrever Texto Alternativo ​

  1. Objetivo da Atividade: Praticar a inserção de uma imagem em uma página HTML e escrever um texto alternativo apropriado para ela.

  2. Instruções:

    • Encontre uma imagem que você gostaria de adicionar à sua página web.
    • Utilize a tag <img> para inserir a imagem na sua página.
    • Especifique o caminho correto para a imagem no atributo src.
    • Escreva um texto alternativo conciso, mas descritivo, para a imagem usando o atributo alt.

  3. Exemplo de Atividade:

html
<img
  src="caminho/para/sua_imagem.jpg"
  alt="Descrição breve e descritiva da imagem"
/>

Complete a atividade inserindo a imagem escolhida no seu documento HTML e certifique-se de fornecer um texto alternativo significativo. Isso não apenas melhorará a acessibilidade da sua página, mas também ajudará no seu posicionamento nos resultados de busca.