M. Sokół - ABC języka HTML - Rozdział V

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

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

Ŝą

gromady ssaków, rz

du drapie

nych, rodziny kotowatych (Felidae).

Do tej rodziny nale

Ŝą

małe koty: puma, ry

,

ocelot, serwal. W sumie rodzina kotowatych obejmuje 40
gatunków zwierz

t. Samce s

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

, a dla małych

zarezerwujemy nagłówek

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

tekstu, umieścimy w elementach

obrazy.

Wyświetl kod źródłowy tworzonej strony w oknie edytora. Umieść znaczniki

img SRC="url">

w obrębie elementów

. Na wydruku 5.2 odpowiednie fragmenty kodu zaznaczono

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

Wydruk 5.2. Wstawiamy obrazy w obszarze nagłówka

<html>
<head>
<title>Zwierzaki</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
</head>

<body>


<h1 align="center"><img src="images/lampart.gif" alt="Lampart" width="75"
height="100">Koty du

e</h1>

Lwa, tygrysa, panter

, geparda i

jaguara nazywamy <big>wielkimi kotami</big>. Nale

Ŝą

gromady ssaków, rz

du drapie

nych, rodziny kotowatych (Felidae).

Do tej rodziny nale

Ŝą

małe koty: puma, ry

,

ocelot, serwal. W sumie rodzina kotowatych
obejmuje 40 gatunków zwierz

t. Samce s

ksze od samic. Wszystkie

mrucz

, gdy s

zadowolone. Rozzłoszczone - powarkuj

, prychaj

. Tylko

wielkie koty potrafi

rycze

.

<!—tu wstawimy lini

poziom

-->

<hr>

<h2 align="center"><img src="images/kot.gif" alt="Kotek" width="75"
height="75"> Koty małe</h2>


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.4.

Obrazy
umieszczono w
nagłówkach

Czy mo

na wstawi

obraz w akapicie?

Jeśli chcesz wstawić obraz w odrębnym akapicie, umieść znacznik <

img

> między znacznikami

Obraz moŜe się takŜe pojawić w akapicie zawierającym tekst. Jest wówczas traktowany dokładnie
tak samo jak sam tekst. Jeśli chcesz skorzystać z tej opcji, musisz zastanowić się nad kwestią
wyrównania obrazu względem otaczającego tekstu.

W jaki sposób zastosowa

do obrazu wyrównanie?

Korektę umiejscowienia obrazu w obszarze tekstu umoŜliwia atrybut

align

. Sprawdźmy jego

działanie na prostych przykładach. Na wydruku 5.3 znajdziesz akapity tekstu, w których
wstawiono element

img

stosując do niego atrybut

align

z róŜnymi wartościami:

bottom

middle

top

. Kontrolują one pionowe połoŜenie obrazu względem tekstu, który znajduje się w

tym samym wierszu co obraz. Przeanalizuj ten kod i porównaj z zaprezentowanymi na rysunku 5.5
efektami działania.

Przećwicz sam wyrównywanie obrazów w tekście – wyświetl kod źródłowy tworzonej strony w
oknie edytora, wstaw element

img

w tekście akapitu, dodaj do znacznika

<img>

atrybut

align

przypisz mu róŜne wartości.

Wydruk 5.3. Wyrównujemy obraz względem tekstu otaczającego

<html>
<head>
<title>Sposoby wyrównania obrazu wzgl

dem tekstu</title>

bie tekstu.

Obraz
<img src ="images/kot.gif"
align="middle" width="90" height="75">
w obr

bie tekstu.

Obraz
<img src ="images/kot.gif"
align="top" width="90" height="75">
w obr

bie tekstu

Oto domy

lny sposób wyrównania - odpowiada on warto

ci bottom:

Obraz
<img src ="images/kot.gif"
width="90" height="75">
w obr

bie tekstu.

<img src ="images/kot.gif"
width="90" height="75">
Obraz przed tekstem.



Obraz za tekstem
<img src ="images/kot.gif"
width="90" height="75">


</body>
</html>

Rys. 5.5.

Oto róŜne
sposoby
wyrównywan
ia obrazu
względem
otaczającego
tekstu

Jak zdefiniowa

wyrównanie obrazu wzgl

dem marginesu?

Sposób wyrównania obrazu względem marginesu takŜe kontroluje się za pomocą atrybutu

align

Jeśli nadasz mu wartość

left

, obraz zostanie wyrównany do lewego marginesu, jeśli

right

przesunięty zostanie do prawego marginesu. Innymi słowy te dwie wartości umoŜliwiają
określenie relacji między obrazem i tekstem. Jeśli obraz po lewej stronie, to tekst po prawej i
odwrotnie. Tę relację określa się teŜ mianem obłamywania tekstu.

MoŜesz teŜ wymusić umieszczenie tekstu pod obrazem – skorzystaj w tym celu z atrybutu

clear

elementu

i przypisz mu wartość

all

. Szczegóły tej operacji poznasz analizując wydruk 5.4, a

efekty zobaczysz na rysunku 5.6.

Wydruk 5.4. Wyrównujemy obraz względem marginesów

<html>
<head>
<title>Sposoby wyrównania obrazu wzgl

dem marginesu</title>

<img src="images/kot.gif" alt="Kot" width="90" height="75"
align="left">Ten tekst pojawi si

z prawej strony obrazu,

który zostanie wy

wietlony przy lewym marginesie.

<img src="images/kot.gif" alt="Kot" width="90" height="75"
align="right">Ten tekst pojawi si

z lewej strony obrazu,

który zostanie wy

wietlony przy prawym marginesie.

<img src="images/kot.gif" alt="Kot" width="90" height="75"
align="left"> Aby wymusi

umieszczenie tekstu pod obrazem,

skorzystaj z atrybutu clear elementu br i przypisz mu warto

ść

all, tak jak w tym przypadku.

</body>
</html>

Rys. 5.6.

Oto róŜne
sposoby
wyrównywan
ia obrazu
względem
marginesów

Jak dostosowa

rozmiary obrazu?

Jeśli uwaŜnie analizowałeś kod z wydruków 5.3 i 5.4, zauwaŜyłeś zapewne, Ŝe w znaczniku

img

znajdują się pewne dodatkowe atrybuty, o których nie było jeszcze mowy. To atrybuty

width

height

– definiują one szerokość i wysokość obrazu. Wartości tych atrybutów podaje się

pikselach lub w procentach wymiarów oryginalnych obrazu. W tej przykładowej definicji
znacznika

<img>

rozmiary obrazu zdefiniowano w pikselach. Na podstawie kodu z wydruku 5.5 i rysunku 5.7
moŜesz prześledzić, w jaki sposób ustawienia takie jak

width

height

wpływają na sposób

prezentacji obrazu.

Wydruk 5.5. Dostosowujemy rozmiar obrazu

<html>
<head>
<title>Dostosowywanie rozmiarów obrazu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<head>

<body>
Tu szeroko

ść

i wysoko

ść

równe 40:

<img src="images/kot.gif" alt="Kot"
width="40" height="40">


Tu szeroko

ść

i wysoko

ść

równe 80:

<img src="images/kot.gif" alt="Kot"
width="80" height="80">


Tu szeroko

ść

i wysoko

ść

równe 140:

Rys. 5.7.

Atrybuty
width i height
pozwalają
dostosować
rozmiar
obrazu

Jeśli musisz juŜ zmieniać rozmiary obrazu, pamiętaj Ŝe lepiej jest zmniejszyć obraz niŜ
powiększać. Powiększanie prowadzi do utraty jakości obrazu.

Jak doda

wokół obrazu nieco wolnej przestrzeni?

Jeśli umieszczasz obraz bezpośrednio w tekście, warto pomyśleć o dodaniu wokół obrazu nieco
wolnej przestrzeni, aby tekst nie zlewał się z obrazem. UmoŜliwiają to dwa kolejne atrybuty
znacznika

<img>

vspace

hspace

. Pierwszy definiuje szerokość wolnego obszaru nad i pod

obrazem, a drugi wprowadza wolny obszar z prawej i lewej strony. Choć moŜesz jednocześnie
zdefiniować oba ustawienia, nie da się niestety wprowadzić wolnego obszaru tylko z jednej strony
obrazu. Oto postać znacznika <img> z atrybutami

vspace

hspace

Wolny obszar wokół obrazów takŜe moŜna zdefiniować korzystając z atrybutów

Cell Padding

Cell Spacing

(jeśli układ strony został oparty na tabeli) lub z kaskadowych arkuszy stylów.

Jak waŜne jest oddzielenie obrazu od tekstu jest pokazuje rysunek 5.8. Po odsunięciu tekstu od
obrazu, strona prezentuje się znacznie lepiej.

Rys. 5.8.

Atrybuty
vspace i
hspace
pozwalają
dodać wokół
obrazu trochę
wolnej
przestrzeni –
u góry tekst
zlewa się z
obrazem; u
dołu całość
prezentuje się
znacznie
lepiej

Jakie s

najcz

ęś

ciej stosowane atrybuty znacznika <img>?

Tabela 5.1 prezentuje niektóre z atrybutów, które moŜna stosować ze znacznikiem

<img>

Tabela 5.1 Niektóre atrybuty znacznika

<img>

Atrybut

Opis

align=”left”

Obraz jest wyświetlany przy lewym marginesie,
a tekst pojawia się obok, w obszarze między
obrazem a prawym marginesem.

align=”right”

Obraz jest wyświetlany przy prawym
marginesie, a tekst pojawia się obok, w obszarze
między obrazem a lewym marginesem.

align=”top”

Kontrolują pionowe połoŜenie obrazu względem
tekstu, który znajduje się w tym samym wierszu

align=”middle”

align=”baseline”

align=”bottom”

vspace=”piksele”

Odległość obrazu od tekstu w pionie

hspace=”piksele”

Odległość obrazu od tekstu w poziomie

longdesc=”url”

Pod wskazanym adresem URL umieszczono
długi opis obrazu.

height=”piksele|warto

ść

%”

Określa wysokość obrazu w pikselach lub w
procentach rozmiaru oryginalnego.

widght=”piksele|warto

ść

%”

Określa szerokość obrazu w pikselach lub w
procentach rozmiaru oryginalnego.

Najwa

niejsze informacje

Obrazy moŜna wstawiać w odrębnym akapicie, wewnątrz tekstu czy nawet w obszarze
nagłówka.

Wstawianie obrazów umoŜliwia znacznik

<img

>. 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 (patrz tabela 5.1).

NajwaŜniejszym z atrybutów jest atrybut

src

. UmoŜliwia on określenie ulokowania

obrazu i zdefiniowanie jego nazwy:

Przeglądarka wstawi obraz w miejscu, w którym umieszczony został element

img

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

Umieszczając na stronie obrazy naleŜy pamiętać o tekście alternatywnym. Informuje on
uŜytkowników o treści obrazu, jeśli przeglądarka obrazu z jakichś względów nie
wyświetla.

Dodanie tekstu alternatywnego umoŜliwia atrybutu

alt

znacznika <

img

Wyrównywanie obrazów w tekście i względem marginesów strony umoŜliwia atrybut

align

znacznika

<img>

. Odpowiednie wartości atrybutu podano w tabeli 5.1.

Rozmiary obrazu umieszczanego na stronie moŜna dostosowywać. SłuŜą do tego
atrybuty

width

height

– definiują one szerokość i wysokość obrazu. Wartości tych

atrybutów podaje się pikselach lub w procentach wymiarów oryginalnych obrazu.