Imagens são parte essencial da web, mas usá-las corretamente vai muito além de “colocar uma foto na página”.
Nesta aula, você vai aprender como inserir imagens no HTML de forma correta, acessível e organizada.
A tag <img>
Para inserir uma imagem em uma página HTML, usamos a tag <img>.
Ela é uma tag vazia, ou seja, não possui fechamento.
<img> O atributo src
O atributo src indica o caminho da imagem.
<img src="/assets/imagens/cursos-html/exemplo.jpg"> Sem o src, o navegador não sabe qual imagem carregar. Note que o atributo src nada mais é do que o caminho onde está o arquivo de imagem que deve ser carregado na página.
O atributo alt (muito importante!)
O atributo alt fornece uma descrição textual da imagem.
Ele é essencial para:
- Leitores de tela
- Acessibilidade
- Casos em que a imagem não carrega
<img src="/assets/img/cursos/html/exemplo.jpg" alt="Exemplo de imagem usada no curso de HTML" > alt vazio sem motivo. Caminhos relativos e absolutos
No HTML, o caminho da imagem pode ser:
- Relativo — depende da localização do arquivo
- Absoluto web — começa a partir da raiz do site
Exemplo de caminho absoluto web:
<img src="/imagens/natureza/paisagem.png" alt="Paisagem mostrando a natureza em montanhas"> Imagem não é decoração aleatória
No HTML, imagens fazem parte do conteúdo. Elas devem ter um propósito claro.
Exemplo completo no padrão do curso gerada pela tag
<img src="/imagens/cursos/html/imagem-exemplo.jpg" alt="Exemplo ilustrativo de imagem em uma aula de HTML">
💾🧠 Resumo da aula para nunca mais esquecer
- A tag
<img>é usada para inserir imagens - O atributo
srcdefine o caminho da imagem - O atributo
alté essencial para acessibilidade - Prefira caminhos absolutos web para evitar erros
Na próxima aula, vamos aprender sobre tabelas no HTML — e quando elas devem (ou não) ser usadas.
HARDWARE
Entendendo o seu computador
O que há dentro do meu computador?
Existem alguns componentes fundamentais presentes dentro do seu computador e é muito importante que você conheça um pouco sobre eles, seja para argumentar com algum vendedor durante a compra de um novo PC ou para identificar alguma atitude desleal de algum técnico que esteja te passando um orçamento para reparo. Na seção Raio-X aqui do Contém Bits você pode conhecer e entender mais detalhadamente sobre cada componente, ou também pode clicar abaixo no componente que deseja, para conhecê-lo melhor.
-
Gabinetes
-
Placas-Mãe
-
Processadores
-
Memória
-
Fontes
-
Drives Ópticos
-
Discos Rígidos
-
SSD
-
Placas de Som
-
Placas de Vídeo
Você Sabia?
Cuidados com o notebook
Utilizar seu notebook em camas, sofás ou qualquer superfície macia pode obstruir as entradas e saídas de ar, elevando a temperatura e provocando danos a diversos componentes. Utilize-o sempre sobre uma superfície rígida. Saiba mais aqui.
Recorde de patentes
A IBM detém o recorde de patentes em um único ano, atingindo a marca de 4186 registros no ano de 2008. Clique aqui e saiba mais sobre esta gigante do mundo da tecnologia.
River Raid
O épico jogo River Raid, do Atari, foi desenhado e boa parte de sua programação foi feita por uma mulher: Carol Shaw, uma excelente programadora e funcionária da Activision em 1982. Saiba mais sobre a história deste incrível jogo, aqui.
Ábaco
O ábaco é o dispositivo de cálculo mais antigo construído e conhecido pelo homem. Suas formas mais primitivas datam de 400 a.C. e eles foram encontrados na China e na Babilônia. Para saber mais sobre a história dos computadores, clique aqui.
Donkey Kong
A empresa Universal City Studios, detentora dos direitos autorais do King Kong, processou a Nintendo logo após o lançamento de Donkey Kong, pois segundo ela, o game violava os seus direitos. Ela venceu o processo e recebeu da Nintendo uma indenização de quase 2 milhões de dólares.