Obrázky · Programuj s Martinem

Přidáš na web fotky a obrázky – a naučíš se je mít hezky srovnané ve složce.

Ukaž mi to: značka pro obrázek

Obrázek se vkládá značkou <img>:

<img src="obrazky/skola.jpg" alt="Budova naší školy">

Dvě věci si tu vysvětlíme:

src (source = zdroj) říká, kde obrázek je. Tady: ve složce obrazky, soubor skola.jpg.
alt (alternative = náhradní) je popis obrázku slovy. Ukáže se, když se obrázek nenačte, a čtou ho hlasové čtečky pro nevidomé. Vždycky ho vyplň – je to slušnost i zvyk profíků.

Všimni si ještě jedné věci: <img> nemá zavírací značku. Nic „neobaluje”, jen se vloží – takové značky existují taky.

💡

Kde vzít obrázky? Vlastní fotky (popros rodiče, ať ti je pošlou do počítače), vlastní kresby naskenované nebo vyfocené – anebo obrázky zdarma ze stránky pixabay.com. Neber obrázky jen tak z Googlu – většina jich má majitele a nesmí se používat bez dovolení.

Pořádek dělá web: složka na obrázky

Ve VS Code vytvoř ve své složce muj-web novou složku a pojmenuj ji obrazky (ikonka složky s plusem vlevo nahoře).
Nakopíruj do ní 2–3 obrázky. Jde to i přetažením myší přímo do VS Code.
Přejmenuj je jednoduše: malá písmena, bez háčků, bez mezer. Třeba skola.jpg, hriste.jpg, vylet-sumava.jpg. Ušetří ti to spoustu trápení.

Teď ty 💪

Přidej na svou stránku aspoň dva obrázky tak, aby k obsahu seděly (třeba jeden hned pod hlavní nadpis a jeden do některé kapitoly).

🏫 Stránky školy – řešení

<h1>Základní škola Moravany</h1>
<img src="obrazky/skola.jpg" alt="Budova naší školy">
<p>Vítej na stránkách naší školy.</p>

<h2>Kroužky</h2>
<img src="obrazky/telocvicna.jpg" alt="Naše tělocvična při florbalu">
<ul>
  <li>florbal</li>
  <li>keramika</li>
</ul>

🙋 Osobní stránky – řešení

<h1>Ahoj, já jsem Kuba</h1>
<img src="obrazky/ja.jpg" alt="Moje fotka s míčem">

<h2>Co mě baví</h2>
<img src="obrazky/minecraft-stavba.jpg" alt="Můj hrad postavený v Minecraftu">
<p>Nejvíc ze všeho fotbal a Minecraft.</p>

🌍 Cestovatelský deník – řešení

<h1>Kam jsme vyrazili 🌍</h1>

<h2>Poslední výlet: Šumava</h2>
<img src="obrazky/sumava.jpg" alt="Výhled z Poledníku na šumavské lesy">
<p>O prázdninách jsme přešli Šumavu.</p>

<h2>Chorvatsko 2025</h2>
<img src="obrazky/more.jpg" alt="Zátoka s průzračným mořem">

⚽ Web klubu – řešení

<h1>FK Sokol Nebovidy</h1>
<img src="obrazky/tym.jpg" alt="Společná fotka našeho týmu po zápase">

<h2>Poslední výsledky</h2>
<img src="obrazky/zapas.jpg" alt="Ondra střílí gól proti Kyjovu">

⚠️

Obrázek se neukazuje? Zkontroluj: 1) jméno v kódu je úplně stejné jako jméno souboru (i malá/velká písmena!), 2) obrázek je opravdu ve složce obrazky, 3) nezapomněl(a) jsi uložit a obnovit stránku. Víc pomoci najdeš v kapitole Když něco nefunguje.

✅

Kontrola: Na stránce vidíš svoje obrázky. Jsou možná moc velké nebo divně roztažené – to je v pořádku, velikosti vyřešíme, až přijde na řadu CSS.

Co si z téhle lekce odnést

Obrázek vkládá značka <img src="..." alt="..."> – nemá zavírací značku.
alt popisuje obrázek slovy. Vyplňuj ho vždycky.
Obrázky měj ve složce obrazky a pojmenované jednoduše: malá písmena, bez mezer a háčků.