[Aula 10] Como Colocar Imagens no HTML: A Tag IMG na Prática

Описание: Bem-vindo à décima aula do nosso curso completo de HTML para iniciantes! Até agora, nosso site era formado apenas por textos, mas hoje tudo muda: vamos dar vida e cor às nossas páginas aprendendo a inserir imagens como um verdadeiro desenvolvedor web!

Começamos a aula com uma viagem no tempo para entender por que a internet dos anos 90 não usava imagens (alguém aí lembra da internet discada de 56k?) e como a evolução da rede nos permite criar sites ricos e visuais hoje em dia. Em seguida, aproveitamos o poder do Visual Studio Code para gerar a estrutura completa do nosso arquivo em um piscar de olhos usando o atalho de preenchimento automático.

Colocando a mão na massa, você vai aprender a usar a tag IMG e o atributo essencial SRC para buscar e exibir fotos na sua tela. Vou te ensinar a ajustar perfeitamente a largura (WIDTH) e a altura (HEIGHT) em porcentagem ou pixels para que suas fotos não fiquem esticadas ou deformadas. Também vamos cobrir a importância do atributo ALT para a acessibilidade (leitores de tela) e o atributo TITLE para criar textos explicativos que aparecem ao passar o mouse. E, para fechar com chave de ouro, mostro como transformar qualquer imagem em um botão clicável usando links!

📌 O que você vai aprender nesta aula:
Como usar o recurso de autocompletar do VS Code para criar a estrutura HTML instantaneamente.
O que é a tag self-closing IMG e como utilizar o atributo SRC (Source).
Como manter a proporção das imagens ajustando os atributos WIDTH (largura) e HEIGHT (altura).
A importância vital do atributo ALT (Texto Alternativo) para acessibilidade e SEO.
Como criar "tooltips" (dicas de tela) flutuantes usando o atributo TITLE.
Como aninhar uma imagem dentro da tag A para transformá-la em um link interativo.

🔔 O visual do seu projeto está ficando incrível! Se você conseguiu colocar a sua primeira imagem na tela, deixe o seu like, inscreva-se no canal e ative as notificações. Na próxima aula, vamos aprender a organizar dados criando tabelas estruturadas. Te espero lá!