Obraz <img>
Mirosław Zelent
Znacznik img, z ang. image – obrazek. Znacznik img jest pojedynczy, a nie podwójny, gdyż obraz jest obiektem – nie trzeba określać gdzie się zaczyna, a gdzie kończy, ponieważ o tym decyduje rozmiar źródłowej grafiki lub ewentualnie określone przez nas właściwości CSS.
<img src="logo.jpg" alt="Pasja informatyki">
Jak wspominaliśmy w ostatnim odcinku, w HTML5 w pojedynczych znacznikach nie wstawia się już w zamknięciu kończącego znaku /
<img src="logo.jpg" alt="Pasja informatyki"/>
choć też jego obecność błędem krytycznym nie będzie – w bardzo wielu witrynach wciąż spotkamy domknięcie tagu pojedynczego znane z XHTML, czyli zawierające znak /
Atrybut src
– z ang. source – ścieżka dostępu do źródłowej grafiki. Atrybut src jest wymagany (ang. required), co wydaje się logiczne, gdyż bez źródłowego pliku graficznego ciężko mówić o istnieniu obrazu w dokumencie.
Atrybut alt
– z ang. alternative – alternatywny, tekstowy opis, który dobrze oddaje czym dana grafika jest, w sensie: co na niej się znajduje. Jest to również atrybut wymagany. Dlaczego atrybut alt jest według standardu koniecznie potrzebny? Otóż jeśli grafika załaduje się nam prawidłowo, to w zasadzie można uznać taki opis za zbędny i tylko niepotrzebnie zajmujący miejsce w kodzie. Natomiast pamiętajmy – na naszą stronę trafią także użytkownicy, którzy wyłączyli w swojej przeglądarce ładowanie obrazów, bądź są osobami słabowidzącymi, korzystającymi z czytników witryn. Wówczas taki alternatywny opis, zapewniający słowną reprezentację zawartości obrazka, pomaga im bardziej komfortowo naszą witrynę przeglądać!
Czasami spotkamy się także z zapisem pustej wartości atrybutu alt:
<img src="logo1.jpg" alt="COMPANYNAME"> <img src="logo2.jpg" alt="">
W tym przypadku nasze logo składa się z dwóch plików – wówczas tylko raz wpiszemy altem informacje że mamy tu do czynienia z logiem. Dlaczego tylko raz? Cóż, byłoby to irytujące dla kogoś, kto np. tylko słucha naszej witryny czy ogląda ją w terminalu, żeby dwa razy słyszeć bądź zobaczyć to samo. Trzeba się po prostu (z empatią) przyjrzeć kontekstowi, w jakim dana grafika występuje. Jeśli z kontekstu wynika, że ten obraz jest naprawdę mało istotny, a alternatywny opis tylko dublował by to, co już znajduje się jako tekst w kodzie, to warto pozostawić wartość atrybutu alt pustą.
W znaczniku img możemy także zdefiniować atrybuty określające na sztywno rozmiar obrazu – width i height, czyli odpowiednio szerokość i wysokość:
<img src="logo.jpg" alt="Pasja informatyki" width="200" height="150">
Oczywiście biorąc pod uwagę, iż zazwyczaj interesuje nas rozdzielenie treści witryny od jej wyglądu, to lepiej byłoby takie wymiary (jeśli już musimy to zrobić) określić w arkuszu stylów CSS. Pamiętajmy też, iż podając szerokość i wysokość obrazu w atrybutach HTML wewnątrz tagu, nie piszemy już (jak to ma miejsce w CSS) końcówki px – jak widać w wartości podajemy jedynie liczbową wartość.
Polecamy: Sekurak Academy 2024
Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp do materiałów z edycji Sekurak Academy z roku 2023! Przy zakupie możecie skorzystać z kodu: pasja-akademia w koszyku, uzyskując rabat -30% na bilety w wersji "Standard" - warto korzystać! Więcej szczegółów znajdziecie tutaj.
Książka: Wprowadzenie do bezpieczeństwa IT
Niedawno wystartował dodruk świetnej, rozchwytywanej książki pt. "Wprowadzenie do bezpieczeństwa IT, Tom I" (około 940 stron). Mamy dla Was kod: pasja (wpisz go w koszyku), dzięki któremu otrzymacie 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla naszych Widzów! Jest to pierwszy tom serii o ITsec, który wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!
Pomóż dzieciom
Polska Akcja Humanitarna od wielu lat dożywia dzieci. Prosimy, poświęć teraz dosłownie chwilę i pomóż klikając w oznaczony strzałką zielony brzuszek Pajacyka. Dziękujemy!
Komentarze
Czy macie jakieś pytania, sugestie, uwagi? A może zauważyliście literówkę albo błąd? Dajcie koniecznie znać w komentarzach! Dziękujemy Wam za poświęcony na to czas!
Disqus