Znacznik obrazu <img> - właściwości

  • Praktyczne zadania
  • Teoria
  • Pomoce do ćwiczeń 

Znacznik <img> w kontekście struktury HTML

🔹 1. Teoria

Znacznik <img> (image) służy

do osadzania obrazów w dokumencie HTML.
Nie jest znacznikiem zamykanym (tzn. nie wymaga </img>), ponieważ nie zawiera treści wewnętrznej.

Składnia podstawowa:

<img src=”adres_obrazu.jpg” alt=”Opis obrazu”>

Najważniejsze atrybuty HTML

AtrybutOpisPrzykład
srcŹródło obrazu (ścieżka lub URL)src="images/logo.png"
altTekst alternatywny wyświetlany, gdy obraz się nie załaduje; ważny dla dostępności (np. czytniki ekranowe)alt="Logo firmy"
widthSzerokość obrazu w pikselach lub procentachwidth="200"
heightWysokość obrazu w pikselach lub procentachheight="100"
titleDodatkowy opis (tooltip po najechaniu kursorem)title="Kliknij, aby powiększyć"
loadingOkreśla sposób ładowania obrazu: lazy (leniwe ładowanie) lub eagerloading="lazy"
srcsetZbiór różnych wersji obrazu dla responsywności (np. różne rozdzielczości)srcset="img-480.jpg 480w, img-800.jpg 800w"
sizesOkreśla, jak duży obraz powinien być użyty w danym rozmiarze ekranusizes="(max-width: 600px) 480px, 800px"
crossoriginOkreśla zasady CORS przy wczytywaniu obrazucrossorigin="anonymous"
referrerpolicyKontrola wysyłania nagłówka referrerreferrerpolicy="no-referrer"

Praktyczne uwagi:

  • Używaj zawsze alt — poprawia SEO i dostępność.

  • Stosuj loading="lazy" dla optymalizacji wydajności.

  • Używaj srcset i sizes dla stron responsywnych.

  • Warto opakować <img> w <figure> i dodać <figcaption> dla podpisu:

<figure>
<img src=”kot.jpg” alt=”Czarny kot na parapecie”>
<figcaption>Czarny kot na parapecie</figcaption>
</figure>

🟢 Zadanie 1: Twój pierwszy obraz

Cel: Wstaw dowolny obraz na stronę.

Instrukcja:

  1. Utwórz dokument HTML o nazwie obraz1.html.

  2. Wewnątrz <body> dodaj obraz korzystając ze znacznika <img>.

  3. Użyj atrybutów src, alt i title.

Przykład (do wzoru, nie kopiuj dosłownie):

<img src="kot.jpg" alt="Czarny kot na parapecie" title="Mój kot">

🟢 Zadanie 2: Obraz z internetu

Cel: Wstaw obraz przy użyciu zewnętrznego adresu URL.

Instrukcja:

  1. Znajdź w sieci dowolny obraz (np. logo, krajobraz).

  2. Skopiuj jego pełny adres URL (kończący się na .jpg, .png, .gif).

  3. Wstaw obraz używając tego adresu w src.

🟢 Zadanie 3: Kilka obrazów na jednej stronie

Cel: Wyświetl kilka obrazów w jednym dokumencie HTML.

Instrukcja:

  1. Utwórz 3–4 znaczniki <img> pod sobą.

  2. Każdy niech ma inny obraz i opis w alt.

  3. Dodaj prosty nagłówek <h2> nad nimi np. „Moje ulubione zdjęcia”.

🟢 Zadanie 4: Obraz o określonych wymiarach

Cel: Poznać działanie atrybutów width i height.

Instrukcja:

  1. Wstaw dowolny obraz.

  2. Dodaj atrybut width="200" i height="150".

  3. Obserwuj, jak zmienia się proporcja (spróbuj zmienić tylko jeden z wymiarów).

🟢 Zadanie 5: Galeria miniatur

Cel: Stworzyć prostą galerię kilku małych obrazków.

Instrukcja:

  1. Dodaj 4–6 obrazków w jednej linii.

  2. Możesz użyć bardzo prostego CSS:

     
    <style>
    img { width: 100px; height: auto; }
    </style>

  3. Obrazy mogą przedstawiać np. różne krajobrazy lub zwierzęta.

🟢 Zadanie 6: Obraz jako link

Cel: Użyć obrazu jako klikalnego odnośnika.

Instrukcja:

  1. Owiń <img> w znacznik <a>.

  2. Po kliknięciu obraz powinien przenosić użytkownika np. na stronę Google.

Przykład:

 
<a href="https://www.google.com">
<img src="logo.png" alt="Logo Google">
</a>

🟢 Zadanie 7: Obrazy w tabeli

Cel: Wstawić kilka obrazów do komórek tabeli.

Instrukcja:

  1. Utwórz tabelę HTML (<table>, <tr>, <td>).

  2. Wstaw po jednym obrazie do każdej komórki.

  3. Dodaj podpisy w sąsiednich komórkach (np. nazwa zwierzęcia, miejsca).

Przykład (schemat):

 
<table border="1">
<tr>
<td><img src="pies.jpg" alt="Pies" width="150"></td>
<td>Pies</td>
</tr>
<tr>
<td><img src="kot.jpg" alt="Kot" width="150"></td>
<td>Kot</td>
</tr>
</table>

🟢 Zadanie 8: Obraz z tekstem opisowym

Cel: Połączyć obraz z podpisem za pomocą <figure> i <figcaption>.

Instrukcja:

  1. Użyj struktury:

     
    <figure>
    <img src="drzewo.jpg" alt="Drzewo w parku">
    <figcaption>Drzewo w parku jesienią</figcaption>
    </figure>

  2. Dodaj kilka takich zestawów, np. dla różnych pór roku.

🟢 Zadanie 9: Atrybut loading

Cel: Zobaczyć działanie leniwego ładowania obrazów.

Instrukcja:

  1. Stwórz stronę z kilkoma dużymi obrazami (np. 5–6).

  2. W niektórych dodaj loading="lazy", w innych loading="eager".

  3. Otwórz stronę i obserwuj, które obrazy ładują się najpierw.

Kontakt: mgzsp22@gmail.com

© 2025. Wszystkie prawa zastrzeżone.

error: Content is protected !!