HTML - Grafiki

Grafiki są nieodłącznym elementem każdej witryny. Dodawanie ich to świetny sposób, aby urozmaicić wygląd witryny, dlatego też na praktycznie każdej stronie grafiki służą jako tło elementów. Z kolei grafiki wykorzystywane w treści strony często znacznie lepiej przekazują treść, niż czysty tekst. Niewątpliwą zaletą jest również możliwość ich wykorzystania jako odsyłaczy graficznych.

Zobacz:


Osadzanie grafiki na stronie

Do osadzania grafiki na stronie służy element img. Jest jednym z pustych elementów, nie posiada zatem zawartości, a znacznik początkowy jest też znacznikiem końcowym.

Składnia:

<img atrybut>

Samo użycie elementu nie osadza jeszcze grafiki na stronie. Aby została ona poprawnie wyświetlona wymagane jest użycie atrybutu src oraz dodatkowo atrybutu alt.

Przykład:

<img src="/bielik-w-locie.jpg" alt="Bielik w locie">
Bielik w locie
Bezpiecznymi formatami grafik, obsługiwanymi przez wszystkie przeglądarki są pliki z rozszerzeniami jpggif oraz png. Zalecane jest korzystanie wyłącznie z tych trzech formatów.

Lokalizacja grafiki - atrybut src

Na stronie można umieścić obraz znajdujący się na tym samym serwerze, ale równie dobrze może to być grafika znajdująca się gdziekolwiek w sieci. W przypadku grafiki z sieci w atrybucie src należy podać adres bezwzględny, natomiast dla grafiki w obrębie tego samego serwera wygodniejszym rozwiązaniem jest adres względny. Atrybut src jest wymagany.

Przykład:

<img src="bielik-w-locie.jpg" alt="Bielik w locie">

Opis alternatywny - atrybut alt

Atrybut alt służy do określenia tekstu alternatywnego, który wyświetli się zamiast obrazu, jeśli przeglądarka z jakiegoś powodu nie będzie go w stanie wyświetlić.

Przykład:

<img src="/bielik-w-locie.jpg" alt="Bielik w locie">

Wymiary grafiki - atrybuty height i width

Domyślnie osadzana grafika zachowuje swoje oryginalne wymiary wysokości i szerokości. Jeśli grafika ma odpowiednie rozmiary pasujące do przestrzeni na stronie, atrybuty height i width można pominąć. W takim przypadku jednak w trakcie ładowania strony, zawartość będzie się przesuwać, ponieważ różne elementy będą się ładować w różnym czasie - tekst szybciej, grafiki wolniej. Określenie wysokości i szerokości grafiki powoduje, że przeglądarka rezerwuje przestrzeń na nią, nawet jeśli nie została jeszcze pobrana w pełni albo gdy jej pobranie jest niemożliwe. Jest to szczególnie ważne, gdy grafika nie zostanie załadowana w ogóle, ponieważ unika się w tym przypadku niekontrolowanego przesuwania treści.

Wymiary grafiki liczone są pikselach i podawane bez jednostki.

Przykład:

<img src="/bielik-w-locie.jpg" alt="Bielik w locie" height="150" width="266">
Bielik w locie

Może się zdarzyć, że grafika do której się odwołujemy, ma zbyt duże wymiary, żeby pasowała do miejsca na stronie. Często dzieje się tak, gdy odwołujemy się do grafiki umieszczonej w sieci. W takim przypadku przy pomocy atrybutów height i width można grafikę przeskalować do wymaganego rozmiaru.

Przykład:

<img src="http://www.e-zoner.pl/images/html/bielik-w-locie.jpg" alt="bielik-w-locie" height="112" width="200">
bielik-w-locie

Można też podać tylko jeden z wymiarów, drugi zostanie w takim przypadku przeliczony automatycznie przez przeglądarkę.


Elementy osadzające grafikę

Tag pocz. Tag końc. Opis
<img> Określa grafikę