Poprawny zapis znacznika <img>, za pomocą którego można umieścić na stronie internetowej obraz rys.jpg przeskalowany do szerokości 120 px i wysokości 80 px z tekstem alternatywnym „krajobraz”, to
<img href="rys.jpg" height="120px" width="80px" info="krajobraz">
href nie wskazuje pliku obrazu, info nie istnieje, a wymiary są zamienione miejscami.<img src="rys.jpg" height="120px" width="80px" info="krajobraz">
info nie istnieje. Tekst zastępczy podaje się w alt.<img src="rys.jpg" width="120px" height="80px" alt="krajobraz">
src wskazuje plik, width 120 i height 80 ustawiają rozmiar, a alt podaje tekst zastępczy.<img image="rys.jpg" width="120px" height="80px" alt="krajobraz">
image nie istnieje w HTML. Ścieżkę do pliku obrazu podaje się w src.Pytanie z egzaminu CKE, czerwiec 2021 (arkusz E.14-SG-21.06).
Znacznik <img> wymaga atrybutu src ze ścieżką do pliku. Rozmiar ustawiają width (szerokość) i height (wysokość), a tekst zastępczy podaje się w alt. Poprawny zapis łączy wszystkie cztery we właściwych rolach: szerokość 120, wysokość 80, alt „krajobraz”.
Tekst alt wyświetla się, gdy obraz się nie wczyta, odczytują go czytniki ekranu dla osób niewidomych i wykorzystuje wyszukiwarka grafik. W HTML5 wartości width i height pisze się zwykle bez jednostki, np. <img src="rys.jpg" width="120" height="80" alt="krajobraz">, bo zawsze oznaczają piksele. Zapamiętaj kolejność słów: szerokość to width, wysokość to height.
Żeby wybrać dobrze, sprawdź każdy zapis pod trzema względami: nazwa atrybutu ze ścieżką, przypisanie wymiarów i atrybut tekstu alternatywnego.
Atrybut href należy do odnośników <a> i <link>. Znacznik <img> go nie zna, więc obraz się nie wczyta. Atrybut image w ogóle nie istnieje w HTML. W obu przypadkach przeglądarka nie wie, jaki plik pokazać.
Atrybutu info również nie ma: tekst „krajobraz” zostałby zignorowany i obraz nie miałby opisu. Do tego część zapisów przypisuje 120 px wysokości i 80 px szerokości, czyli odwraca wymiary. Obraz byłby wtedy wyższy niż szerszy, a treść wymaga odwrotnie.
Na egzaminie praktycznym brak atrybutu alt albo literówka w src to częste powody utraty punktu. Obraz bez poprawnego src w ogóle się nie wyświetli, a w jego miejscu pojawi się ikona uszkodzonego pliku.