05.pdf

Rozdział 5.

Obrazy w dokumencie HTML

Gdzie wstawia ć obrazy?

Strona bez obrazów to smutna strona. Nawet strony traktuj ą ce o super powa Ŝ nej tematyce zyskuj ą

na atrakcyjno ś ci, gdy znajdzie si ę na nich cho ć by malutki obrazek. Obrazy mo Ŝ na wstawia ć w

odr ę bnym akapicie, wewn ą trz tekstu lub w obszarze nagłówka – wystarczy umie ś ci ć znacznik

<img> wewn ą trz odpowiedniego elementu. Je ś li chcesz, by obraz ubarwił nagłówek, umie ść

znacznik <img> mi ę dzy znacznikami nagłówka.

Obrazy mo Ŝ na wstawia ć na stronie bezpo ś rednio lub zast ę powa ć je poł ą czeniami prowadz ą cymi

do odpowiednich plików. W tym drugim przypadku mówimy o obrazach zewn ę trznych. Maj ą c do

dyspozycji poł ą czenie czytelnik sam podejmuje decyzj ę , czy chce zobaczy ć obraz.

Obraz mo Ŝ e tak Ŝ e stanowi ć tło strony, lecz tym nie b ę dziemy si ę tutaj zajmowa ć . W rozdziale 4.

znajdziesz par ę przykładów stosowania obrazów jako tła.

Jak ą posta ć ma element img?

Zacznij od tego, aby zobaczy ć jak to robi ą inni. Przejrzyj zasoby sieciowe, wy ś wietl postaci

ź ródłowe stron WWW i przygl ą dnij si ę znacznikowi <img > , bowiem on wła ś nie pozwala na

wstawianie obrazów. Znacznik ten jest pusty – oznacza to, Ŝ e nie posiada znacznika

zamykaj ą cego, ale ma szereg atrybutów, które kontroluj ą sposób prezentacji obrazu na stronie.

Atrybuty te zostały zgromadzone w tabeli 5.1. Najwa Ŝ niejszym z nich jest atrybut src . Umo Ŝ liwia

on okre ś lenie ulokowania obrazu i zdefiniowanie jego nazwy. Wygl ą da to mniej wi ę cej tak:

<img src=" url ">.

Dlaczego mniej wi ę cej? Bo dokładna posta ć tego wyra Ŝ enia zale Ŝ y od tego, gdzie umie ś ciłe ś

obraz, oraz od jego formatu (to znaczy typu pliku).

Co jest warto ś ci ą atrybutu src?

Warto ś ci ą atrybutu src jest adres URL, który okre ś la ulokowanie obrazu – inaczej mówi ą c jest to

adres, pod którym obraz jest dost ę pny. Je ś li wi ę c obraz o nazwie obraz.gif jest przechowywany

w katalogu images witryny www.mojastrona.com , to bezwzgl ę dny adres URL b ę dzie miał

posta ć http://www.mojastrona.com/images/obraz.gif . Adres wzgl ę dny zale Ŝ e ć b ę dzie

natomiast od ulokowania pliku html. Wi ę cej informacji na temat adresowania znajdziesz w

rozdziale 6. po ś wi ę conym poł ą czeniom.

Jak przegl ą darka zinterpretuje znacznik <img>?

Przegl ą darka wstawi obraz w miejscu, w którym umieszczony został element img . Je ś li znacznik

<img> zostanie umieszczony mi ę dzy dwoma akapitami (definiowanymi za pomoc ą elementów p),

to najpierw wy ś wietlony zostanie tekst pierwszego akapitu, potem obraz, a za nim tekst drugiego

akapitu (patrz wydruk 5.1 i rysunek 5.1).

Je ś li obraz si ę nie pojawia, sprawd ź poprawno ść podanej nazwy, a je ś li plik nie znajduje si ę w tym

samym katalogu co strona, poprawno ść ś cie Ŝ ki dost ę pu.

Wydruk 5.1. Wstawiamy obrazy

<html>

<head>

<title>Zwierzaki</title>

</head>

<body>

Lwa, tygrysa, panterę, geparda i

jaguara nazywamy <big>wielkimi kotami</big>. NaleŜą do

gromady ssaków, rzędu drapieŜnych, rodziny kotowatych (Felidae).

Do tej rodziny naleŜą teŜ małe koty: puma, ryś,

ocelot, serwal. W sumie rodzina kotowatych obejmuje 40

gatunków zwierząt. Samce są większe od samic. Wszystkie mruczą, gdy są

zadowolone. Rozzłoszczone - powarkują, prychają. Tylko wielkie koty

potrafią ryczeć.

Kot domowy najprawdopodobniej pochodzi od dwóch gatunków: od

kota nubijskiego (Felis silvestris lybica) i od

azjatyckiego kota stepowego (Felis silvestris ornata).

Do dziś nie wiadomo dokładnie kiedy i jak kot stał się

zwierzęciem domowym. Jednak najczęściej wymienia się okres około 5000 lat

temu. Miało to miejsce w dolinie Nilu.

</body>

</html>

Rys. 5.1.

Obraz wstawiono

mi ę dzy dwoma

akapitami tekstu

Jaki powinien by ć format wstawianych obrazów?

Sk ą d wzi ąć obrazy? Poszukaj ich w swoich zasobach, w sieci (pami ę taj ą c o prawach autorskich!)

lub zeskanuj co ś – obrazy powinny by ć w formacie GIF lub JPEG (innymi słowy rozszerzenie

nazwy pliku powinno by ć .gif lub .jpg ). Zapisz je w tym samym katalogu, w którym zapisany

jest plik html zawieraj ą cy Twoj ą stron ę – to upro ś ci znacznie definiowanie atrybutu src lub w

osobnym katalogu, podrz ę dnym wzgl ę dem katalogu przechowuj ą cego pliki Twojej strony WWW

(patrz informacja zamieszczona powy Ŝ ej).

Co to jest GIF?

Najpopularniejszym formatem plików graficznych do zastosowa ń w Internecie jest format GIF

(Graphics Interchange Format). Obrazy GIF s ą interpretowane niemal przez wszystkie typy

przegl ą darek (oczywi ś cie zawsze s ą wyj ą tki).

Obrazy GIF najbardziej nadaj ą si ę do szkiców i prostych ilustracji (do fotografii stosuj format

JPEG , o którym pó ź niej). Format GIF pozwala równie Ŝ wybra ć liczb ę kolorów. Pami ę taj, Ŝ e im

wi ę cej kolorów, tym wi ę kszy plik. Pliki GIF mo Ŝ na jednak poddawa ć kompresji. Inna zaleta

formatu GIF to mo Ŝ liwo ść zdefiniowania obrazu jako prze ź roczystego.

Co to jest JPEG?

Drugim na li ś cie formatów plików graficznych stosowanych w Internecie jest format JPEG (Joint

Photographics Experts Group). Format JPEG to najlepszy wybór dla prezentacji fotografii.

Stosowany do szkiców i prostych ilustracji spowoduje pojawienie si ę na obrazach rozmy ć (nasz ą

one nazw ę artefaktów), z których na pewno nie byłby ś zadowolony, oraz zupełnie zb ę dny przyrost

wielko ś ci pliku. Za to fotografie zapisane w formacie JPEG wygl ą daj ą wspaniale.

Czy sam obraz wystarczy?

Sam obraz, nawet najwspanialszy, to za mało. Musisz pomy ś le ć o tych, którzy wył ą czyli opcj ę

ładowania obrazów oraz tych, cho ć nielicznych, którzy nie korzystaj ą z przegl ą darek graficznych.

Je ś li wstawiasz w swoim dokumencie obrazy, powiniene ś zaopatrzy ć je w tekst alternatywny .

Informuje on u Ŝ ytkowników o tre ś ci obrazu, je ś li przegl ą darka z jakich ś wzgl ę dów go nie

wy ś wietla. Strona pozbawiona grafiki straci niew ą tpliwie na atrakcyjno ś ci, ale znacznie

wa Ŝ niejsze jest to, Ŝ e nie ucierpi przekaz informacji. Cho ć ogl ą daj ą cy Twoj ą stron ę nie b ę d ą

obrazów widzie ć , dowiedz ą si ę przynajmniej co przedstawiaj ą .

Jak doda ć tekst alternatywny?

Dodanie tekstu alternatywnego umo Ŝ liwia atrybut alt znacznika < img >. Atrybut ten działa w ten

sposób, Ŝ e wstawia na miejsce obrazu co ś , co jest go w stanie zast ą pi ć w tych przegl ą darkach,

które nie mog ą go obsłu Ŝ y ć (patrz rysunek 5.2) . Tekst ten jest przydatny tak Ŝ e wówczas, gdy

przegl ą darka wy ś wietla obrazy – nie zawsze bowiem s ą one oczywiste dla ogl ą daj ą cego (czy kto ś

sam domy ś li si ę , Ŝ e zwierzak na obrazie to Twoja maskotka?).

Rys. 5.2.

Je ś li przegl ą darka

nie mo Ŝ e

wy ś wietli ć

obrazu, zast ę puje

go tekstem

alternatywnym

Aby zaopatrzy ć obraz w tekst alternatywny, wy ś wietl kod ź ródłowy tworzonej strony w oknie

edytora – mo Ŝ esz skorzysta ć z przykładu zaprezentowanego na wydruku 5.1. Zdefiniuj tekst

alternatywny opisuj ą cy obraz i dodaj do znacznika < img > atrybut alt . Przypisz mu jako warto ść

tekst alternatywny:

<img src="images/lampart.gif" alt=”To jest mój malutki kotek :)”>.

Zapisz plik i zobacz jak wygl ą da w przegl ą darce (patrz rysunek 5.3).

Rys. 5.3.

Obraz

zaopatrzono w

tekst alternatywny

Tekst alternatywny pojawi si ę nad obrazem, gdy przesuniesz nad niego wska ź nik myszki.

Jak wstawi ć obrazy w nagłówkach?

Wró ć my do naszej strony testowej o zwierzakach i dodajmy nagłówki anonsuj ą ce omawian ą

tematyk ę . Du Ŝ e zwierzaki prezentowane b ę d ą z pomoc ą nagłówka h1 , a dla małych

zarezerwujemy nagłówek h2 . Aby prezentacja lepiej przemawiała do wyobra ź ni, oprócz samego

tekstu, umie ś cimy w elementach h1 i h2 obrazy.

Wy ś wietl kod ź ródłowy tworzonej strony w oknie edytora. Umie ść znaczniki < img SRC=" url ">

w obr ę bie elementów h1 i h2 . Na wydruku 5.2 odpowiednie fragmenty kodu zaznaczono

czcionk ą pogrubion ą . Zapisz plik i zobacz jak wygl ą da Twoja strona (patrz rysunek 5.4).

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: