Post

Incorporação de Imagens em HTML (IMG)

Postado em
Por Vagner Leite
3 min de leitura

Aula: **

Objetivo da Aula:

Nesta aula, você aprenderá a usar a tag <img> para incorporar imagens em suas páginas HTML. Você entenderá como especificar a fonte da imagem, adicionar textos alternativos e ajustar o tamanho das imagens.

1. O que é a Tag <img>?

Definição:

  • A tag <img> é usada para exibir imagens em uma página HTML. Diferente de outras tags HTML, a tag <img> é uma tag auto-fechante, o que significa que não requer uma tag de fechamento.

Atributos Principais:

  • src: Especifica o caminho ou URL da imagem.
  • alt: Fornece um texto alternativo que descreve a imagem (importante para acessibilidade e SEO).
  • width e height: Definem a largura e altura da imagem.

2. Sintaxe Básica da Tag <img>

Uso Básico:

1

<img src="caminho/para/imagem.jpg" alt="Descrição da Imagem">

Explicação:

  • O atributo src define onde a imagem está localizada.
  • O atributo alt descreve o conteúdo da imagem, caso a imagem não possa ser exibida.

Exemplo Prático:

1
2
3
4
5
6
7
8
9
10
11
12

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Incorporação de Imagens</title>
</head>
<body>
  <h1>Imagens em HTML</h1>
  <img src="https://www.example.com/imagem.jpg" alt="Imagem de Exemplo">
</body>
</html>

3. Atributos da Tag <img>

3.1. src (Source)

Uso:

  • Define o caminho ou URL da imagem.

Exemplo:

1

<img src="imagens/logo.png" alt="Logo da Empresa">

Explicação:

  • O caminho pode ser relativo (para imagens no mesmo diretório do site) ou absoluto (para imagens em um servidor externo).

3.2. alt (Texto Alternativo)

Uso:

  • Fornece uma descrição da imagem, útil para leitores de tela e em casos onde a imagem não pode ser carregada.

Exemplo:

1

<img src="imagens/foto.jpg" alt="Foto de um cenário de montanha">

Explicação:

  • O texto deve ser descritivo e relevante ao conteúdo da imagem.

3.3. width e height

Uso:

  • Define a largura e altura da imagem em pixels.

Exemplo:

1

<img src="imagens/foto.jpg" alt="Foto de um cenário" width="300" height="200">

Explicação:

  • Ajustar o tamanho da imagem diretamente no HTML pode ser útil para ajustar o layout da página, mas para melhor controle, considere usar CSS.

4. Práticas Recomendadas

Texto Alternativo:

  • Sempre inclua o atributo alt para melhorar a acessibilidade e fornecer uma descrição alternativa para a imagem.

Formatos de Imagem:

  • Utilize formatos de imagem adequados para a web, como JPEG para fotos e PNG para imagens com transparência.

Tamanho da Imagem:

  • Otimize o tamanho das imagens para garantir um carregamento rápido da página. Use ferramentas de compressão de imagem se necessário.

5. Exemplos de Uso

5.1. Imagem Local:

1

<img src="imagens/exemplo.jpg" alt="Imagem Local">

5.2. Imagem Externa:

1

<img src="https://www.example.com/imagem.jpg" alt="Imagem Externa">

5.3. Imagem com Tamanho Ajustado:

1

<img src="imagens/logo.png" alt="Logo da Empresa" width="150">

6. Resumo e Conclusão

  • Recapitulando:
    • A tag <img> é usada para incorporar imagens em HTML, e você pode definir o caminho da imagem com src, fornecer uma descrição com alt, e ajustar o tamanho com width e height.
  • Próximos Passos:
    • Na próxima aula, você aprenderá sobre outros tipos de mídia, como vídeos e áudios, e como integrá-los em suas páginas HTML.

Exercícios Práticos:

  1. Adicionar Imagens Locais e Externas:
    • Crie uma página HTML com imagens locais e externas. Inclua descrições alternativas apropriadas.
  2. Ajustar Tamanho da Imagem:
    • Use os atributos width e height para ajustar o tamanho das imagens em sua página.
  3. Desafio Extra:
    • Otimize imagens para melhorar o desempenho do carregamento da página e verifique como isso afeta a visualização no navegador.

Esta aula forneceu uma compreensão detalhada sobre como incorporar e gerenciar imagens em HTML, uma habilidade fundamental para criar páginas web visuais e atraentes.

voltar

ninja
ninja html tags media img
Esta postagem está licenciada sob CC BY 4.0 pelo autor.