Wstawianie ilustracji: <img/>
Ilustracje, które chcesz umieścić na stronie, powinny być zapisane w formacie JPG, PNG lub GIF. Do fotografii najlepiej nadaje się format JPG. Do ilustracji o niewielkiej liczbie kolorów lepsze są formaty PNG lub GIF. Nie umieszczaj grafiki w formacie BMP — nie nadaje się on do Internetu i spowalnia proces ładowania strony.
Klipy wideo i animacje Flash umieszcza się elementem <object>
.
Ilustracje wstawia się do dokumentu elementem <img/>
. Element ten ma zawsze być pusty i przyjmuje
następujące atrybuty:
Ścieżka do pliku: src

Zawiera ścieżkę do pliku graficznego.
Tekst alternatywny: alt
Grafiki stanowiące dekorację (np. kropki przy wypunktowaniu, zaokrąglone rożki, itp.) nie są częścią treści, ani nie potrzebują żadnego tekstu alternatywnego, dlatego należy je wstawiać za pomocą arkuszy stylów, a nie elementu <img/>
alt
zastępuje obrazek, kiedy przeglądarka nie może go wyświetlić (bo ich nie obsługuje, ma wyłączone, wystąpił błąd albo po prostu obrazek jeszcze się nie ściągnął).
Bardziej szczegółowy opis: Guidelines on alt texts in img elements
Dobranie odpowiedniego tekstu alternatywnego bywa trudne. Dobrym sposobem jest wyobrażenie sobie, że czytasz stronę znajomemu przez telefon. Gdy dojdziesz do obrazka, to co powiesz?
Jeśli na stronie jest np. znak ostrzegawczy, to właściwe będzie zastąpienie go tekstem „Uwaga!”, a nie „Żółty trójkąt z wykrzyknikiem”.
<img src="trojkat.png" alt="Żółty trójkąt z wykrzyknikiem" />
To jest ważny tekst.
<img src="trojkat.png" alt="Uwaga!" />
To jest ważny tekst.
Czasem ilustracje nie mają szczególnego znaczenia dla treści strony. Jeśli tekst bez nich nadal ma sens, to wyjątkowo można pominąć tekst alternatywny dla obrazka wstawiając pusty atrybut
alt
.
<h1>
W pustyni i w puszczy</h1>
<img src="piach_i_krzaczory.jpg" alt="" />
Nadanie stylów tekstu dla elementu <img>
określa jak będzie wyglądał tekst alternatywny.
Dodatkowe informacje o ilustracji: title
Jeśli chcesz dodać opis do ilustracji, możesz użyć atrybutu title
. Przeglądarki najczęściej wyświetlają jego zawartość jako dymek (tooltip) po najechaniu myszą nad
obrazek.
<img src="fotka.jpg"
alt="Nasza banda"
title="Zdzichu to ten po lewej" />
Wymiary obrazka: width
, height
Opcjonalnie można podać rozmiar obrazka w pikselach. Pozwoli to uniknąć efektu „skakania” strony, gdy obrazki zostają załadowane zbyt późno.
Nie używaj tych atrybutów do pomniejszania obrazków. Mimo ich obecności obrazek będzie tak samo dużo zajmował i tak samo długo będzie pobierany.
Tajemnicze odstępy poniżej obrazka
Obrazek jest elementem liniowym domyślnie umieszczanym na linii bazowej tekstu. Z tego powodu przeglądarki rezerwują dodatkowe miejsce na resztę linii tekstu (dół liter y, p, j, g, q)
pozostawiając odstęp pod obrazkiem. Jeśli chcesz tego uniknąć nadaj mu vertical-align:bottom
, które wyrówna obrazek do dołu linii lub display:block
,
które wyświetli obrazek jako element blokowy i nie będzie brać pod uwagę wysokości linii tekstu.
Cięcie obrazków na kawałki i robienie z nich mozaiki jest złym zwyczajem. W takich przypadkach najczęściej obrazek powinien być umieszczony jako tło i/lub treść powinna być nad nim pozycjonowana.
Pozycjonowanie ilustracji przy tekście
Do tego służy CSSowa właściwość float
. Odstęp między obrazkiem, a tekstem reguluje się wtedy za pomocą
margin
.
Pytania? Komentarze? Napisz na forum kursu lub edytuj tę stronę.
Zmodyfikowano: 28.07.2007, 22:06