Wstawienie obrazu <img> do witryny

Obraz definiujemy tagiem <img> (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 końcówce tego wpisu, w standardzie HTML5 w pojedynczych znacznikach nie wstawia się już kończącego znaku /, aczkolwiek zapis znany z XHTML (czyli domknięcie tagu – wersja poniżej) wciąż często bywa stosowany i nie spowoduje błędu w przeglądarce (wynika to z przyzwyczajenia webmasterów, a przeglądarki są kompatybilne wstecznie):

<img src="logo.jpg" alt="Pasja informatyki" />

Atrybut src

Ścieżka dostępu do źródłowej grafiki (z ang. source = źródło). Atrybut src jest wymagany (ang. required), co wydaje się logiczne, gdyż bez źródłowego pliku graficznego src="logo.jpg" ciężko mówić o istnieniu obrazu w dokumencie.

Atrybut alt

Alternatywny, tekstowy opis, który dobrze oddaje czym dana grafika jest, w sensie: co na niej się znajduje (z ang. alternative = alternatywny). 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ć:

Atrybut alt

Czasami spotkamy się także z zapisem pustej wartości atrybutu alt:

<img src="logo1.jpg" alt="Nazwafirmy">
<img src="logo2.jpg" alt="">
Logo złożone z 2 obrazów

W tym przypadku nasze logo składa się z dwóch plików – wówczas tylko raz wpiszemy z użyciem alt informację, ż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ą.

Rozmiar obrazu

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ść.

Zobacz także

Daj się zaskoczyć! Poniżej wylosowałem dla Ciebie pięć wpisów z innych kategorii blogowych aniżeli ta, którą właśnie przeglądasz:

Polecamy: Mega Sekurak Hacking Party

Mega Sekurak Hacking Party

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - wpiszcie go w koszyku, dzięki czemu otrzymacie 40% zniżki na bilet standard. Więcej szczegółów znajdziecie tutaj.

Książka: Wprowadzenie do bezpieczeństwa IT

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. Proszę, poświęć teraz dosłownie chwilę i pomóż klikając w oznaczony strzałką zielony brzuszek Pajacyka. Dziękuję!

Komentarze

Disqus

Kategorie wpisów

Oto polecana książka warta Waszej uwagi.
Pełna lista polecanych książek jest tutaj.

W dniach od 09.04.2024 do 15.04.2024 trwa w Helionie promocja o nazwie "Otwórz nowy rozdział w IT". Otrzymujemy zniżki -50% zarówno na książki drukowane, jak i na ebooki. Zobacz szczegóły tutaj: trwająca promocja.

Bądź na bieżąco