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.
Nintendo Wii
Nos primeiros oito dias após o lançamento do console Nintendo Wii foram vendidas 600 mil unidades. Isso equivale a quase um por segundo e estes incríveis números são referentes às vendas apenas nos EUA!
Final Fantasy
O famoso título Final Fantasy, da Square Enix, tem este nome exatamente porque se tratava da última esperança da empresa, que estava à beira da falência quando o lançou. Clique aqui e conheça detalhes dessa história.
Muitos aplicativos
Instalar vários aplicativos com o mesmo propósito, como editores de texto, reprodutores de músicas ou vídeos e até programas antívirus sobrecarregam o seu sistema operacional e ainda ocupam espaço desnecessário em seu HD. Tenha apenas um bom programa para cada função.
Space Invaders
O título Space Invaders, lançado em 1980, fez tanto sucesso em todo o mundo que as pessoas compravam o console Atari apenas para poderem jogá-lo em casa. Saiba mais sobre este incrível título clicando aqui.