Slike · Kodiraj s Martinom

Dodaj fotografije i slike na svoju web stranicu – i nauči ih uredno držati u mapi.

Pokazat ću ti: tag za sliku

Slika se dodaje tagom <img>:

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

Dvije stvari vrijedi objasniti:

src (source) kaže gdje je slika. Ovdje: u mapi images, datoteka school.jpg.
alt (alternative) je tekstualni opis slike. Pojavi se ako se slika ne učita, a čita ga čitač ekrana za ljude koji ne vide. Uvijek ga ispuni – to je i pristojno i standard za profesionalce.

Primijeti još jednu stvar: <img> nema zatvarajući tag. Ništa ne “omotava”, samo se ubaci – neki tagovi rade tako.

💡

Odakle uzeti slike? Svoje fotografije (zamoli roditelja da ti ih pošalju na računalo), vlastite crteže skenirane ili fotografirane – ili besplatne slike s stranice poput pixabay.com. Nemoj samo uzimati slike s Googlea – većina pripada nekome i ne smije se koristiti bez dopuštenja.

Uredno: mapa za slike

U VS Codeu, unutar mape my-website, napravi novu mapu i nazovi je images (ikona mape sa znakom plus gore lijevo).
Kopiraj 2–3 slike u nju. Možeš ih čak povući i ispustiti izravno u VS Code.
Preimenuj ih jednostavno: mala slova, bez naglasaka, bez razmaka. Nešto poput school.jpg, field.jpg, trip-mountains.jpg. Uštedjet će ti puno muke.

Sad si ti na redu 💪

Dodaj barem dvije slike na stranicu koje odgovaraju sadržaju (možda jednu odmah ispod glavnog naslova i jednu u poglavlju).

🏫 Web stranica škole – rješenje

<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>

🙋 Osobna web stranica – rješenje

<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>

🌍 Putni dnevnik – rješenje

<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">

⚽ Web stranica kluba – rješenje

<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">

⚠️

Slika se ne prikazuje? Provjeri: 1) naziv u kodu točno odgovara nazivu datoteke (čak i velika/mala slova!), 2) slika je stvarno u mapi images, 3) nisi zaboravio spremiti i osvježiti stranicu. Više pomoći u poglavlju Kad nešto ne radi.

✅

Provjeri sam sebe: Vidiš svoje slike na stranici. Možda su prevelike ili čudno rastegnute – to je u redu, veličinu ćemo popraviti kad dođemo do CSS-a.

Što ćeš ponijeti iz ove lekcije

Tag <img src="..." alt="..."> ubacuje sliku – nema zatvarajući tag.
alt opisuje sliku riječima. Uvijek ga ispuni.
Drži slike u mapi images, jednostavno imenovane: mala slova, bez razmaka i naglasaka.