📘 Aula 6: Tag de Imagens & Carga de Imagens 📘

Introdução

Bem-vindo ao tutorial de HTML! Aqui você vai aprender a estrutura básica de um documento HTML e como inserir imagens na sua página.

Importante: Assistir esses videos abaixo.

  1. Quais são os formatos para imagens na Web?
  2. O tamanho das imagens importa para um site?

1. Estrutura Básica do HTML

Um documento HTML completo com a tag de imagem possui a seguinte estrutura:

HTML mínimo escrito com tag de imagem:


<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Título da Página</title>
  </head>
  <body>
    <img src="SUA IMAGEM AQUI" alt="DESCRIÇÃO DA IMAGEM AQUI">
  </body>
</html>

2. Inserindo Imagens no HTML

No HTML, usamos a tag <img> para inserir imagens. Ela possui atributos importantes:

DICA: Para inserir facilmente a tag de imagem completa, digite img dentro do corpo <body> e pressione ENTER. Assim, a linha da tag de imagem será inserida automaticamente no seu código.

Exemplo de linha completa: 

<img src="SUA IMAGEM AQUI" alt="DESCRIÇÃO DA IMAGEM AQUI">

- src: caminho da imagem (local ou URL)

- alt: descrição da imagem, útil para acessibilidade

Exemplo 1 - Inserindo uma imagem local

HTML escrito:

<img src="SUA IMAGEM AQUI" alt="DESCRIÇÃO DA IMAGEM AQUI">

Resultado visual usando uma imagem:

logo css3 120x125px
Imagem 4- CSS3-120x125px

Legenda: Logo HTML5

Exemplo 2 - Inserindo uma imagem via URL

HTML escrito:

<img src="URL DA IMAGEM AQUI" alt="DESCRIÇÃO DA IMAGEM AQUI">

Resultado visual usando uma imagem via URL:

Logo CSS3
URL link de imagem 256x256px

Legenda: Logo JavaScript