Slike · Kodiraj z Martinom

Dodaj fotografije in slike na svojo spletno stran – in se nauči, kako jih urejeno shraniti v mapo.

Pokažem ti: oznaka za sliko

Sliko dodaš z oznako <img>:

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

Dve stvari sta vredni razlage:

src (source) pove, kje je slika. Tukaj: v mapi images, datoteka school.jpg.
alt (alternative) je besedilni opis slike. Prikazuje se, če se slika ne naloži, in jo berejo bralniki zaslona za slepe. Vedno jo izpolni – to je vljudno in standard pri profesionalcih.

Opazi še eno stvar: <img> nima zapiralne oznake. Ničesar ne ovije, samo vstavi se – nekatere oznake delujejo tako.

💡

Kje dobiti slike? Lastne fotografije (prosi starša, da ti jih pošlje na računalnik), lastne risbe skenirane ali fotografirane – ali brezplačne slike s strani kot pixabay.com. Ne jemlji kar slik iz Googla – večina pripada nekomu in je brez dovoljenja ne smeš uporabljati.

Urejeno: mapa za slike

V VS Code znotraj mape my-website ustvari novo mapo z imenom images (ikona mape s plusom zgoraj levo).
Vanjo kopiraj 2–3 slike. Lahko jih celo povlečeš neposredno v VS Code.
Preimenuj jih preprosto: male črke, brez šumnikov, brez presledkov. Nekaj kot school.jpg, field.jpg, trip-mountains.jpg. Prihranilo ti bo veliko težav.

Zdaj si na vrsti 💪

Na stran dodaj vsaj dve sliki, ki ustrezata vsebini (morda eno tik pod glavnim naslovom in eno v poglavju).

🏫 Šolska spletna stran – rešitev

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

🙋 Osebna spletna stran – rešitev

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

🌍 Potopisni dnevnik – rešitev

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

⚽ Klubska spletna stran – rešitev

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

⚠️

Se slika ne prikaže? Preveri: 1) ime v kodi se točno ujema z imenom datoteke (tudi velike/male črke!), 2) slika je res v mapi images, 3) nisi pozabil shraniti in osvežiti strani. Več pomoči v poglavju Ko nekaj ne deluje.

✅

Preveri se: Na strani vidiš svoje slike. Morda so prevelike ali čudno raztegnjene – to je v redu, velikost bomo uredili, ko pridemo do CSS.

Kaj si vzameš iz te lekcije

Oznaka <img src="..." alt="..."> vstavi sliko – nima zapiralne oznake.
alt opisuje sliko z besedami. Vedno jo izpolni.
Slike hrani v mapi images, poimenovane preprosto: male črke, brez presledkov in šumnikov.