Znacznik <img>

Słownik kwalifikacji AUD.05 - Realizacja projektów graficznych i multimedialnych

Znacznik <img> służy w HTML do wstawiania obrazów na stronę internetową. Jest to element pusty, czyli nie ma osobnego znacznika zamykającego, np. nie zapisuje się </img>.

Podstawowa składnia

<img src="grafika/logo.png" alt="Logo firmy">

Najważniejsze atrybuty znacznika <img> to:

  • src - wskazuje ścieżkę do pliku graficznego,
  • alt - zawiera tekst alternatywny opisujący obraz,
  • width - określa szerokość obrazu,
  • height - określa wysokość obrazu.

Atrybut src

Atrybut src jest obowiązkowy, ponieważ informuje przeglądarkę, skąd ma pobrać obraz. Może wskazywać plik lokalny lub adres internetowy.

<img src="zdjecia/produkt.jpg" alt="Zdjęcie produktu">
<img src="https://example.com/baner.png" alt="Baner reklamowy">

Atrybut alt

Atrybut alt jest bardzo ważny. Wyświetla się, gdy obraz nie zostanie załadowany, a także jest odczytywany przez czytniki ekranu. Poprawia dostępność strony i pomaga użytkownikom z niepełnosprawnościami.

Przykład zastosowania

<figure>
  <img src="obrazy/plakat.jpg" alt="Plakat wydarzenia kulturalnego">
  <figcaption>Plakat promujący wydarzenie</figcaption>
</figure>

W pytaniach egzaminacyjnych należy pamiętać, że do dodawania obrazka na stronę służy znacznik <img>, a nie <map>, <input> ani <select>.