Imagens · Programa com Martin

Adiciona fotos e imagens ao teu site – e aprende a mantê-las organizadas numa pasta.

Vou mostrar-te: a etiqueta de imagem

Uma imagem é adicionada com a etiqueta <img>:

<img src="images/school.jpg" alt="Our school building">

Duas coisas a explicar aqui:

src (source) diz onde está a imagem. Aqui: na pasta images, o ficheiro school.jpg.
alt (alternative) é uma descrição em texto da imagem. Aparece se a imagem não carregar, e é lida em voz alta por leitores de ecrã para pessoas cegas. Preenche sempre – é educado e prática padrão dos profissionais.

Repara numa coisa: <img> não tem etiqueta de fecho. Não «envolve» nada, insere-se a si própria – algumas etiquetas funcionam assim.

💡

Onde arranjas imagens? As tuas próprias fotos (pede a um pai para as enviar para o computador), os teus desenhos digitalizados ou fotografados – ou imagens gratuitas de um site como pixabay.com. Não tires imagens do Google – a maioria pertence a alguém e não pode ser usada sem permissão.

Mantém tudo arrumado: uma pasta para imagens

No VS Code, dentro da tua pasta my-website, cria uma nova pasta e chama-lhe images (o ícone de pasta com um mais no canto superior esquerdo).
Copia 2–3 imagens para lá. Podes até arrastá-las diretamente para o VS Code.
Renomeia-as de forma simples: letras minúsculas, sem acentos, sem espaços. Algo como school.jpg, field.jpg, trip-mountains.jpg. Poupa-te muitas dores de cabeça.

Agora és tu 💪

Adiciona pelo menos duas imagens à tua página que combinem com o conteúdo (talvez uma logo abaixo do título principal e outra num capítulo).

🏫 Site da escola – solução

<h1>Riverside Elementary School</h1>
<img src="images/school.jpg" alt="Our school building">
<p>Welcome to our school's website.</p>

<h2>Clubs</h2>
<img src="images/gym.jpg" alt="Our gym during a floorball game">
<ul>
  <li>floorball</li>
  <li>ceramics</li>
</ul>

🙋 Site pessoal – solução

<h1>Hi, I'm Jake</h1>
<img src="images/me.jpg" alt="Me with a soccer ball">

<h2>What I Like</h2>
<img src="images/minecraft-build.jpg" alt="My castle built in Minecraft">
<p>More than anything, soccer and Minecraft.</p>

🌍 Diário de viagens – solução

<h1>Where We've Been 🌍</h1>

<h2>Last Trip: The Mountains</h2>
<img src="images/mountains.jpg" alt="View from the summit over the forest">
<p>Over the summer we hiked through the mountains.</p>

<h2>Greece 2025</h2>
<img src="images/sea.jpg" alt="A bay with crystal-clear water">

⚽ Site de clube – solução

<h1>Riverside Eagles FC</h1>
<img src="images/team.jpg" alt="Our team photo after the match">

<h2>Recent Results</h2>
<img src="images/match.jpg" alt="Owen scoring a goal against the Wildcats">

⚠️

A imagem não aparece? Verifica: 1) o nome no teu código corresponde exatamente ao nome do ficheiro (até maiúsculas/minúsculas!), 2) a imagem está mesmo na pasta images, 3) não te esqueceste de guardar e atualizar a página. Mais ajuda no capítulo Quando algo não funciona.

✅

Verifica tu: Vês as tuas imagens na página. Podem estar demasiado grandes ou estranhamente esticadas – não faz mal, vamos corrigir o tamanho quando chegarmos ao CSS.

O que ficas a saber desta lição

A etiqueta <img src="..." alt="..."> insere uma imagem – não tem etiqueta de fecho.
alt descreve a imagem com palavras. Preenche sempre.
Guarda imagens numa pasta images, com nomes simples: minúsculas, sem espaços nem acentos.