Obrazki · Koduj z Martinem

Dodaj zdjęcia i obrazki na stronę – i naucz się trzymać je porządnie w folderze.

Pokażę ci: tag obrazka

Obrazek dodajesz tagiem <img>:

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

Dwie ważne rzeczy:

src (source) mówi, gdzie jest obrazek. Tu: w folderze images, plik school.jpg.
alt (alternative) to opis obrazka słowami. Pojawia się, gdy obrazek się nie załaduje, i czytają go czytniki ekranu dla osób niewidomych. Zawsze go wypełniaj – to grzeczność i standard u profesjonalistów.

Jeszcze jedno: <img> nie ma tagu zamykającego. Nic nie „owija” – po prostu się wstawia. Niektóre tagi tak działają.

💡

Skąd wziąć obrazki? Własne zdjęcia (poproś rodzica, żeby wysłał je na komputer), własne rysunki zeskanowane albo sfotografowane – albo darmowe z pixabay.com. Nie bierz po prostu z Google – większość należy do kogoś i nie wolno ich używać bez pozwolenia.

Porządek: folder na obrazki

W VS Code, w folderze my-website, utwórz nowy folder i nazwij go images (ikona folderu z plusem u góry po lewej).
Skopiuj do niego 2–3 obrazki. Możesz nawet przeciągnąć je prosto do VS Code.
Nazwij je prosto: małe litery, bez polskich znaków, bez spacji. Coś jak school.jpg, field.jpg, trip-mountains.jpg. Uratuje cię to przed wieloma problemami.

Teraz ty 💪

Dodaj na stronę co najmniej dwa obrazki pasujące do treści (może jeden tuż pod głównym nagłówkiem i jeden w rozdziale).

🏫 Strona szkoły – rozwiązanie

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

🙋 Strona osobista – rozwiązanie

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

🌍 Dziennik podróży – rozwiązanie

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

⚽ Strona klubu – rozwiązanie

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

⚠️

Obrazek się nie pokazuje? Sprawdź: 1) nazwa w kodzie dokładnie taka sama jak pliku (nawet wielkość liter!), 2) obrazek naprawdę jest w folderze images, 3) nie zapomniałeś zapisać i odświeżyć strony. Więcej pomocy w rozdziale Gdy coś nie działa.

✅

Sprawdź się: Widzisz obrazki na stronie. Mogą być za duże albo dziwnie rozciągnięte – to w porządku, rozmiar poprawimy, gdy dojdziemy do CSS.

Co wyniesiesz z tej lekcji

Tag <img src="..." alt="..."> wstawia obrazek – nie ma tagu zamykającego.
alt opisuje obrazek słowami. Zawsze go wypełniaj.
Obrazki trzymaj w folderze images, nazwane prosto: małe litery, bez spacji i polskich znaków.