Aula 05 - Imagens e SVG 🖼️

Objetivo

Objetivo: Aprender a inserir conteúdos visuais de forma otimizada utilizando a tag <img> e compreender os benefícios dos gráficos vetoriais (SVG).

1. A Tag de Imagem 📷

Diferente das tags de texto, a tag <img> é auto-contida (não tem fechamento) e depende de atributos para funcionar.

Anatomia básica:

<img src="foto.jpg" alt="Descrição da imagem">

src (Source): O caminho para o arquivo da imagem.
alt (Alternative Text): O texto que descreve a imagem para cegos e motores de busca. Obrigatório!

2. Formatos de Imagem na Web 📂

Escolher o formato certo garante que o seu site carregue rápido.

Formato	Tipo	Uso Recomendado
JPG	Raster	Fotos com muitas cores e detalhes.
PNG	Raster	Imagens que precisam de transparência.
WebP	Raster	Formato moderno, super leve (Google).
SVG	Vetor	Logos, ícones e ilustrações simples.

3. O Poder do SVG ⚡

SVG (Scalable Vector Graphics) não é feito de pixels, mas de fórmulas matemáticas.

Infinitamente escalável: Você pode aumentar o tamanho o quanto quiser e ele nunca fica "pixelado".
Super leve: Geralmente são apenas algumas linhas de código.
Editável com CSS: Podemos mudar a cor de um SVG via código!

Exemplo de código SVG (Um círculo):

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

4. Caminhos de Arquivo 🛣️

Saber organizar suas imagens em pastas é essencial:

$ mkdir meu-site
$ cd meu-site
$ mkdir assets
$ touch index.html
$ # Mova suas imagens para a pasta 'assets'

Como linkar no HTML:

<img src="assets/meu-logo.svg" alt="Logo da Empresa">

5. Visualizando a Hierarquia 📊

graph TD
    DIR[Pasta Raiz] --> HTML[index.html]
    DIR --> ASSETS[Pasta assets]
    ASSETS --> IMG1[foto.webp]
    ASSETS --> IMG2[icon.svg]
    HTML -.-> |src| IMG1
    HTML -.-> |src| IMG2

6. Prática: Galeria de Fotos 🚀

Crie uma pasta para o projeto.
Crie uma pasta chamada imagens.
Baixe ou salve uma imagem qualquer dentro dela.
No seu index.html, insira a imagem usando o caminho correto.
Adicione um atributo width="300" para controlar o tamanho.

7. Mini-Projeto: Perfil com Avatar 👤

Crie uma página de perfil.
Insira uma imagem circular (svg) ou uma foto sua.
Use tags semânticas (<header>, <main>).
Crie uma lista de suas redes sociais abaixo da foto.
Capriche no alt da sua foto de perfil!

8. Exercícios Progressivos 📝

Básicos

Qual a diferença entre os atributos src e alt?
Por que a tag <img> não tem fechamento?

Intermediários

Cite uma vantagem do formato SVG sobre o JPG.
O que acontece com o site se você linkar uma imagem de 10MB diretamente na Home?

Desafio 🧠

Pesquise como transformar uma imagem em um link (hyperlink). Escreva o código necessário para realizar essa tarefa.

Próxima Aula: Vamos organizar dados complexos com Tabelas! 📊