HTML, XHTML i CSS.

Nowoczesne
tworzenie stron WWW
Autor: David Schultz, Craig Cook
Tumaczenie: Rafa Joca
ISBN: 978-83-246-1498-1
Tytu oryginau: Beginning HTML with CSS
and XHTML: Modern Guide and Reference
Format: 158x235, stron: 384
Kompleksowe omwienie podstawowego budulca witryn WWW, czyli jzyka HTML
Jak zbudowany jest dokument HTML?
W jaki sposb umieszcza na stronach WWW elementy graficzne?
Jak stosowa kaskadowe arkusze stylw?

W ostatnich latach zasady tworzenia witryn WWW zmieniy si znacznie. Dynamiczny

rozwj technologii i jzykw programowania oraz wzrost wydajnoci serwerw
sprawiy, e strony internetowe stay si teraz naprawd funkcjonalne i atrakcyjne.
Jzyki, takie jak PHP i ASP, oraz technologia AJAX umoliwiy budowanie
dynamicznych witryn WWW pobierajcych dane z baz i dziaajcych jak typowe
aplikacje biurowe. Pomimo tak ogromnej rewolucji, u podstaw wszystkich serwisw
WWW nadal ley jzyk HTML. Jego znajomo jest niezbdna do zbudowania kadej
witryny WWW od najprostszej do najbardziej zoonej. Dopiero po opanowaniu jzyka
HTML i cile zwizanej z nim technologii CSS mona wykona nastpny krok.
W ksice HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW znajdziesz
omwienie wszystkich elementw najnowszej specyfikacji jzyka HTML. Czytajc j,
poznasz struktur dokumentu HTML, znaczniki oraz ich atrybuty. Dowiesz si, jak
korzysta z kaskadowych arkuszy stylw, tworzy formularze i umieszcza w
dokumentach elementy graficzne, a take multimedialne. Przeczytasz take o jzyku
JavaScript oraz przeledzisz rzeczywisty projekt witryny internetowej.

Wydawnictwo Helion
ul. Kociuszki 1c
44-100 Gliwice
tel. 032 230 98 63
e-mail: helion@helion.pl

Historia jzyka HTML

Idea rozdzielenia treci od prezentacji
Struktura dokumentw HTML i XHTML
Konstrukcja stylw CSS
Definiowanie metadanych
Znaczniki zawartoci dokumentu
Obrazy i formularze na stronach WWW
Tabele
Formatowanie elementw HTML za pomoc arkuszy stylw
Podstawy JavaScript

Zrb pierwszy krok na drodze do projektowania atrakcyjnych stron WWW

poznaj jzyk HTML

Spis treci
Podzikowania .................................................................................................................. 9
O autorach ...................................................................................................................... 11
Sowo wstpne ................................................................................................................ 13
Wprowadzenie ................................................................................................................ 15

Rozdzia 1. Zaczynamy .................................................................................... 19

Wprowadzenie do internetu i witryn WWW .................................................................. 19
Czym jest HTML? .......................................................................................................... 20
Ewolucja jzyka HTML ........................................................................................... 21
Jeden jzyk, wiele wersji .......................................................................................... 21
Jedna wersja, trzy odmiany ...................................................................................... 22
Walidacja dokumentw ............................................................................................ 23
Oddzielanie zawartoci od prezentacji ............................................................................ 24
Praca z XHTML i CSS ................................................................................................... 25
Edytor tekstu ............................................................................................................ 25
Przegldarki internetowe .......................................................................................... 26
Umieszczanie witryny na serwerze .......................................................................... 26
Wprowadzenie do adresw URL .................................................................................... 27
Skadniki adresu URL .............................................................................................. 27
Adresy pene i relatywne .......................................................................................... 29
Podsumowanie ................................................................................................................ 30

Rozdzia 2. Podstawy dokumentw HTML i arkuszy stylw ................................ 31

Elementy skadowe jzyka HTML znaczniki i atrybuty ............................................ 31
Elementy blokowe i wewntrzne .............................................................................. 33
Zagniedanie elementw ........................................................................................ 34
Znaki niedrukowane ................................................................................................. 34
Atrybuty standardowe .............................................................................................. 35
Komentarze .............................................................................................................. 37
Dokument XHTML ........................................................................................................ 37
Typ dokumentu ........................................................................................................ 38
Element html ............................................................................................................ 40
I pozostaa cz ................................................................................................... 41
Drzewo dokumentu .................................................................................................. 41
Podstawy arkuszy stylw ................................................................................................ 42
Anatomia reguy CSS ............................................................................................... 42
Selektory CSS .......................................................................................................... 43
Szczegowo i kaskadowo arkuszy stylw ........................................................ 47
Doczanie arkuszy stylw do dokumentw ............................................................ 49

HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW

Kolejno stosowania kaskady ................................................................................. 51
Dyrektywa !important .............................................................................................. 52
Formatowanie kodu CSS .......................................................................................... 53
Komentarze CSS ...................................................................................................... 54
Podsumowanie ................................................................................................................ 55

Rozdzia 3. Metadane dokumentu .................................................................... 57

Element head .................................................................................................................. 57
<head> ...................................................................................................................... 57
Elementy wspierajce ..................................................................................................... 58
<base> ...................................................................................................................... 59
<link> ....................................................................................................................... 60
<meta> ..................................................................................................................... 61
<script> .................................................................................................................... 62
<style> ...................................................................................................................... 63
<title> ....................................................................................................................... 64
Podsumowanie ................................................................................................................ 66

Rozdzia 4. Dodawanie zawartoci .................................................................... 67

Zawarto i struktura ...................................................................................................... 67
Element body .................................................................................................................. 68
<body> ..................................................................................................................... 68
Logiczne porcje .............................................................................................................. 70
<p> ........................................................................................................................... 70
Nagwki: h1, h2, h3, h4, h5 i h6 ............................................................................. 72
<blockquote> ........................................................................................................... 73
<address> ................................................................................................................. 75
<pre> ........................................................................................................................ 76
Listy ................................................................................................................................ 77
<ul> .......................................................................................................................... 77
<ol> .......................................................................................................................... 79
<li> ........................................................................................................................... 80
Lista definicji .................................................................................................................. 82
<dl> .......................................................................................................................... 82
<dt> .......................................................................................................................... 83
<dd> ......................................................................................................................... 83
Elementy dotyczce fraz ................................................................................................. 85
<em> ........................................................................................................................ 85
<strong> ................................................................................................................... 86
<cite> ....................................................................................................................... 87
<q> ........................................................................................................................... 88
<dfn> ........................................................................................................................ 89
Skrty: <abbr> i <acronym> .................................................................................... 90
Modyfikacje dokumentu: <ins> i <del> ................................................................... 91
<bdo> ....................................................................................................................... 92
Elementy zwizane z programowaniem: <code>, <kbd>, <samp> i <var> ............. 93
<br> .......................................................................................................................... 95
<hr> .......................................................................................................................... 96
Elementy do wielu zastosowa ....................................................................................... 97
<div> ........................................................................................................................ 98
<span> ...................................................................................................................... 99
Osadzanie zewntrznej treci ........................................................................................ 100
<object> ................................................................................................................. 100
<param> ................................................................................................................. 101

Spis treci

5
Elementy prezentacyjne ................................................................................................ 103
<i> i <b> ................................................................................................................ 103
<big> i <small> ...................................................................................................... 103
<tt> ......................................................................................................................... 103
<sup> i <sub> ......................................................................................................... 103
Znaki specjalne ............................................................................................................. 104
Nadawanie zawartoci stylu za pomoc CSS ............................................................... 106
Deklaracja podstawowych stylw czcionek ........................................................... 106
Style list .................................................................................................................. 111
Podsumowanie .............................................................................................................. 113

Rozdzia 5. Obrazy ......................................................................................... 115

Jak dziaaj cyfrowe obrazy? ........................................................................................ 116
Formaty obrazw przyjazne stronom WWW ......................................................... 117
Umieszczanie obrazw na stronach WWW .................................................................. 120
<img> ..................................................................................................................... 120
Obrazy w kontekcie innych elementw ................................................................ 127
Otaczanie obrazu tekstem ............................................................................................. 128
Obrazy ta ..................................................................................................................... 130
Pozycjonowanie obrazu ta ..................................................................................... 133
Podsumowanie .............................................................................................................. 135

Rozdzia 6. cza i odnoniki ......................................................................... 137

Znacznik cza .............................................................................................................. 137
<a> ......................................................................................................................... 137
Uycie elementu a ........................................................................................................ 139
cza do innych dokumentw ................................................................................ 139
cza do dokumentw w formacie innym ni XHTML ......................................... 141
cza z adresami e-mail ......................................................................................... 143
Obraz jako cze ........................................................................................................... 144
Wykorzystanie identyfikatorw .................................................................................... 145
Uycie CSS dla elementu cza .................................................................................... 146
Mapy obrazw .............................................................................................................. 149
<map> .................................................................................................................... 150
<area> .................................................................................................................... 151
Podsumowanie .............................................................................................................. 154

Rozdzia 7. Tabele ......................................................................................... 155

Podstawy tworzenia tabel ............................................................................................. 155
<table> ................................................................................................................... 156
<tr> ......................................................................................................................... 157
<td> ........................................................................................................................ 159
Przykad zastosowania tabeli ........................................................................................ 160
<caption> ............................................................................................................... 162
<th> ........................................................................................................................ 164
Zaawansowane wykorzystanie tabel ............................................................................. 166
<tbody> .................................................................................................................. 168
<thead> .................................................................................................................. 169
<tfoot> .................................................................................................................... 170
<colgroup> ............................................................................................................. 173
<col> ...................................................................................................................... 174

HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW

Wykorzystanie CSS do nadawania stylu tabelom ......................................................... 176
Dodawanie obramowania ....................................................................................... 176
Wyrwnywanie tekstu w tabeli .............................................................................. 178
Dodawanie odstpw do komrek ......................................................................... 179
Dodawanie ta do tabeli .......................................................................................... 180
Podsumowanie .............................................................................................................. 182

Rozdzia 8. Formularze ................................................................................... 183

Jak dziaaj formularze? ............................................................................................... 183
Elementy skadowe formularza .................................................................................... 184
<form> ................................................................................................................... 185
<input> ................................................................................................................... 187
<button> ................................................................................................................. 196
<select> .................................................................................................................. 198
<option> ................................................................................................................. 200
<optgroup> ............................................................................................................. 201
<textarea> ............................................................................................................... 203
Nadawanie formularzom struktury ............................................................................... 205
<fieldset> ............................................................................................................... 205
<legend> ................................................................................................................. 207
<label> ................................................................................................................... 209
Nadawanie formularzom stylw za pomoc CSS ......................................................... 211
Usuwanie obramowania z zestawu pl ................................................................... 213
Wyrwnywanie etykiet ........................................................................................... 214
Zmiana czcionki kontrolek formularza ................................................................... 215
Podsumowanie .............................................................................................................. 216

Rozdzia 9. CSS, czyli arkusze stylw ............................................................. 219

Wykorzystywanie zewntrznych arkuszy stylw ......................................................... 219
Jednostki miary ............................................................................................................. 221
Ukad graficzny ............................................................................................................ 222
Pojemniki ............................................................................................................... 222
Rozmiar i rozmieszczenie pojemnika ..................................................................... 225
Ustalanie pooenia pojemnika ............................................................................... 227
To ................................................................................................................................ 235
Nadawanie stylu tekstowi ............................................................................................. 236
Rodzaje mediw ........................................................................................................... 238
Zgodno ...................................................................................................................... 239
Podsumowanie .............................................................................................................. 240

Rozdzia 10. Podstawy wykonywania skryptw po stronie klienta ...................... 241

Czym s skrypty? ......................................................................................................... 241
Umieszczanie kodu JavaScript ..................................................................................... 242
Jzyk JavaScript ........................................................................................................... 243
Reguy skadni jzyka ............................................................................................ 244
Operatory i wyraenia ............................................................................................ 246
Instrukcje ................................................................................................................ 248
Ptle ........................................................................................................................ 254
Funkcje ................................................................................................................... 258
Tablice .................................................................................................................... 259
Tematy zaawansowane ................................................................................................. 259
Obsuga zdarze ..................................................................................................... 260
DOM ...................................................................................................................... 262
Walidacja formularzy ............................................................................................. 263
Podsumowanie .............................................................................................................. 265

Spis treci

Rozdzia 11. Tworzymy witryn od podstaw ...................................................... 267

Wprowadzenie do analizy przypadku Spaghetti & Cruft ......................................... 268
Proces projektowania .................................................................................................... 268
Krok 1. zdefiniuj cele ........................................................................................ 269
Krok 2. wymylanie architektury ...................................................................... 269
Krok 3. kreowanie szablonu .............................................................................. 270
Krok 4. wykonanie ukadu graficznego strony .................................................. 271
Krok 5. czenie wszystkich czci ................................................................... 273
Krok 6. testowanie ............................................................................................. 273
Tworzenie witryny Spaghetti & Cruft .......................................................................... 274
Tworzenie dokumentu ............................................................................................ 274
Kod nagwka strony ............................................................................................. 275
Wykonanie gwnego fragmentu strony ................................................................. 276
Tworzenie nawigacji .............................................................................................. 277
Tworzenie sloganu i stopki ..................................................................................... 278
Kompletny szablon ................................................................................................. 278
Arkusz stylw dla Spaghetti & Cruft ............................................................................ 280
Nadanie stylu ciau strony ...................................................................................... 281
Styl nagwka ......................................................................................................... 287
Ukad strony ........................................................................................................... 292
Nadawanie stylw nawigacji .................................................................................. 294
Styl stopki .............................................................................................................. 296
Tworzymy rzeczywiste strony ...................................................................................... 297
Strona z menu ......................................................................................................... 297
Strona recenzji ........................................................................................................ 301
Strona kontaktowa .................................................................................................. 303
Podsumowanie .............................................................................................................. 307

Dodatek A Lista znacznikw jzyka XHTML 1.0 Strict .................................... 309

Dodatek B Nazwy kolorw i ich wartoci ........................................................ 345
Dodatek C Znaki specjalne ........................................................................... 359
Dodatek D Poziom obsugi CSS w rnych przegldarkach .............................. 363
Skorowidz ....................................................................................................... 371

Rozdzia 5.

Obrazy
Cay rozdzia 4. zosta powicony dodawaniu treci tekstowych do stron WWW. Teraz
przejdmy do bardziej multimedialnych aspektw internetu, czyli obrazkw. Obrazy stanowi nieodczn cz wielu witryn internetowych. Czyni je atwiejszymi do zapamitania i stymuluj wizualnie. Elementy graficzne projektu strony zawieraj najczciej
logo witryny i inne motywy pozwalajce odrni dan witryn od setek innych.
Obrazy peni nie tylko funkcj dekoracyjn, ale rwnie komunikacyjn s zawartoci, ktra nierzadko lepiej ni sowa oddaje sens wypowiedzi. Zdjcia, ilustracje,
logo, ikony, mapy, wykresy i grafy to sposoby dzielenia si pomysami, ktre trudno
byoby przekaza w tekcie. Z drugiej strony warto pamita, e nie kady, kto odwiedzi witryn, bdzie w stanie zobaczy obrazy. Na barkach autora witryny spoczywa
odpowiedzialno za zapewnienie alternatywnych metod dostpu do zawartoci, np.
tekstu opisujcego zawarto lub znaczenie obrazka.
Obrazy, ktre stanowi cz zawartoci dokumentu XHTML, mona okrela za pomoc elementu img. Zostan one wywietlone przez przegldark tu obok tekstu. Do
osadzania obrazw mona rwnie uy elementu object, opisywanego w rozdziale 4.
Niestety obsuga tego sposobu wstawiania obrazw nie jest jeszcze powszechna, wic
warto pozosta przy sprawdzonym elemencie img. Pamitaj o tym, by w treci dokumentu
umieszcza jedynie obrazy informacyjne obrazy dekoracyjne okrelaj w arkuszu
CSS doczonym do strony, by odseparowa zawarto od aspektw prezentacyjnych.
W tym rozdziale zajmiemy si sposobami umieszczania obrazw na stronach WWW.
Najpierw opowiemy o podstawach dziaania i obsugi cyfrowych obrazw, wyjanimy
dziaanie elementu wewntrznego img, zapewniajcego osadzanie obrazw w zawartoci,
a na kocu przejdziemy do opisw wykorzystania arkuszy CSS do wczytywania obrazw
poprawiajcych wygld strony. Obrazy ta definiowane w CSS poprawiaj wygld strony,
ale nie wpywaj na jego struktur semantyczn.

116

HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW

Jak dziaaj cyfrowe obrazy?

Wszystko, co znajduje si w komputerze, przechowywane jest w postaci cyfrowej obrazy nie s tu wyjtkiem. Oznacza to, e obraz to tak naprawd seria zer i jedynek umieszczona w pliku. Komputer czyta tablic cyfr (kada cyfra to bit) i przeksztaca j na sygna przesyany do drugiego urzdzenia, ktre skonwertuje go w posta maych kropek
kolorowego wiata widzianego przez nasze oko czerwonych, niebieskich, szarych
itd. Plik zawiera dodatkowo instrukcje, w jaki sposb te kropki wiata (nazywane pikselami) powinny zosta uoone w mozaik, z ktrej powstanie wynikowy obraz. Poszczeglne piksele tworzce obraz atwo zauway, jeli dokadnie przyjrze si ekranowi komputera lub telewizora. Ekstremalne powikszenie prezentuje rysunek 5.1.
Rysunek 5.1.
Powikszenie
cyfrowego obrazu
uwidacznia piksele,
z ktrych si skada

Poniewa obrazy skadaj si z map bitw, nazywamy je czsto bitmapami lub obrazami rastrowymi. To wanie obrazy bitmapowe stanowi podstaw wywietlania
obrazw na stronach WWW. Zapamitanie koloru i pooenia kadego piksela zabiera
duo miejsca, szczeglnie jeli jeden obraz skada si z setek tysicy pikseli w milionach
moliwych kolorw (24-bitowy kolor oznacza ponad 16 milionw rnych kolorw).
Grafika wektorowa
Poza bitmapami istnieje jeszcze jeden sposb przechowywania cyfrowych obrazw jako
zbir instrukcji matematycznych, ktre komputer powinien wykona, aby narysowa odpowiednie ksztaty na ekranie lub papierze. Tego rodzaju obrazy nazywa si wektorowymi. Mog one by wywietlane w dowolnej rozdzielczoci bez pogorszenia jakoci i modyfikacji wygldu. Niestety, obsuga grafiki wektorowej wymaga specjalistycznego oprogramowania,
ktre nie jest doczane do wikszoci przegldarek internetowych, wic niemal wszystkie
obrazy uywane w internecie s obrazami rastrowymi.
Jaki czas temu pojawia si inicjatywa wprowadzenia grafiki wektorowej w formacie dostosowanym do uycia na stronach WWW. Jzyk SVG (skrt od ang. Scalable Vector Graphics)
wzorowany na XML nie jest jak dotd powszechnie obsugiwany przez przegldarki, wic jego
zastosowanie jest ograniczone. Wicej informacji na temat obsugi tego formatu znajduje si
na witrynie http://www.w3.org/Graphics/SVG/.

Rozdzia 5. Obrazy

117

Obrazy uywane w internecie s najczciej skompresowane w celu zmniejszenia ich

rozmiaru, by pobieranie strony WWW mogo si sprawnie odby nawet na powolnych poczeniach internetowych. Redukujc liczb kolorw lub liczb pikseli, mona
atwo zmniejszy oglny rozmiar obrazu. Jeli kiedykolwiek pobierae ogromny obraz
z internetu, doskonale zdajesz sobie spraw, e bywa to denerwujce. Gwnym celem
kompresji jest maksymalne zmniejszenie rozmiaru pliku przy jednoczesnym zachowaniu moliwie dobrej jakoci.

Formaty obrazw przyjazne stronom WWW

Obrazy kierowane do wykorzystania na stronach WWW mona kompresowa w trzech
formatach: JPEG, GIF i PNG. Kady z formatw stosuje inny mechanizm kompresji,
wic ma rne zalety i wady. Wikszo przegldarek graficznych ma wbudowane
oprogramowanie poprawnie interpretujce i renderujce tego rodzaju obrazy. Przegldarki mog nie obsugiwa innych formatw, wic warto trzyma si wspomnianych
trzech. Prawie kady program do edycji grafiki rastrowej umoliwia zapis obrazu we
wszystkich wymienionych formatach.

JPEG
JPEG to skrt od Joint Photographic Experts Group organizacji, ktra wymylia
wspomniany format. Algorytm kompresujcy redukuje rozmiar wynikowego pliku przez
prbkowanie rednich wartoci koloru pikseli i redukcj nadmiarowych pikseli. Po
dekompresji obrazu usunite piksele zostaj odtworzone na podstawie zapamitanych prbek.
Poniewa format ten powoduje utrat czci informacji, nazywamy go formatem stratnym. Obraz JPEG po dekompresji nigdy nie bdzie tej samej jakoci, co orygina.
JPEG obsuguje rne poziomy strat jakoci im niszy poziom, tym mniej pikseli
pozostaje, co zmniejsza rozmiar pliku, ale i pogarsza jako. Wysoce skompresowane
obrazy JPEG wydaj si rozmyte i zawieraj tak zwane artefakty, spowodowane algorytmem kompresji. Rysunek 5.2 przedstawia trzy wersje zdjcia Jolene po zapisaniu
z rnymi poziomami kompresji (obraz zosta powikszony dwukrotnie, by poprawi
widoczno artefaktw). Wiksza kompresja daje mniejszy rozmiar pliku, ale gorsz jako.
Co wicej, kada edycja i zapis obrazu JPEG oznacza ponown kompresj czego, co
zostao ju wczeniej skompresowane. Kada kolejna kompresja coraz bardziej pogarsza jako obrazu, podobnie jak wielokrotne kserowanie kolejnych kopii. Zawsze
warto pozostawia sobie oryginaln wersj zdjcia i kompresowa j do formatu stratnego tylko wtedy, gdy zachodzi potrzeba jego aktualizacji na witrynie.
Format JPEG zaoszczdza miejsca przez redukcj pikseli, ale rwnie zapamituje
wiele informacji o kolorze w stosunkowo niewielkim pliku, co czyni go idealnym formatem dla fotografii i innych obrazw zawierajcych duo kolorw i elementw, ktre
gadko zmieniaj odcienie. Pliki JPEG stosuj rozszerzenie .jpg lub .jpeg. Krtsza wersja
staa si najbardziej popularna, bo niektre starsze systemy operacyjne nie obsugiway
rozszerze duszych ni trzyznakowe.

118

HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW

Niska kompresja (56 kB)

rednia kompresja (12 kB)

Wysoka kompresja (5 kB)

Rysunek 5.2. Ten sam obraz JPEG z rnymi poziomami kompresji. Wersja po prawej stronie
ma najmniejszy rozmiar pliku, ale najgorsz jako

GIF
GIF to skrt od Graphic Interchange Format. W tym systemie kompresja odbywa si
przez zmniejszenie liczby kolorw uywanych w obrazie, przy zachowaniu informacji o kadym pikselu. Poniewa format GIF jest bezstratny, jest doskonay do pracy
nad logo, ikonami lub innymi grafikami, ktre maj ostre krawdzie. Obraz GIF moe
zawiera maksymalnie 256 kolorw, a gdy jest ich mniej, jeszcze bardziej poprawia
to stopie kompresji. Grafy, mapy, grafika z du liczb linii i inne obrazy z duymi
powierzchniami w jednolitym kolorze (lub tylko o kilku barwach) s przykadami obrazw doskonale nadajcych si do skompresowania algorytmem GIF.
Obrazy GIF mog zawiera obszary, ktre s przezroczyste, dziki czemu moliwe
jest wywietlenie tego, co znajduje si za nimi. Kady z pikseli albo jest w peni przezroczysty, albo cakowicie nieprzezroczysty, wic pojawi si mocno zarysowana granica na styku dwch obszarw. Wiele programw do edycji grafiki umoliwia wybranie
koloru matujcego dla przezroczystych obrazw GIF, co minimalizuje efekt ostroci
krawdzi. Rysunek 5.3 przedstawia obraz GIF na tle szachownicy. Zauwa biae obramowanie (kolor matujcy), ktre bdzie doskonale wspgrao z docelowym, biaym
kolorem ta witryny.
Kolejn ciekaw funkcj obrazw GIF jest obsuga krtkich animacji. Obraz moe
zawiera cig klatek, wywietlanych w okrelonej sekwencji, co umoliwia tworzenie
ciekawych, a czasem rwnie bardzo denerwujcych, efektw. Oczywicie kada klatka
zwiksza rozmiar wynikowego pliku GIF.
Pliki GIF stosuj rozszerzenie .gif.

Rozdzia 5. Obrazy

119

Rysunek 5.3.
Przezroczysty
obraz GIF z biaym
kolorem matujcym.
To w postaci
szachownicy
przedstawiono
jedynie w celach
demonstracyjnych

PNG
PNG (skrt od ang. Portable Network Graphic) to format wymylony jako bezpatny
nastpca opatentowanego formatu GIF, ktry dodatkowo rozwija orygina w kilku
paszczyznach. Podobnie jak GIF, PNG moe zawiera maksymalnie 256 kolorw
(tak zwany kolor 8-bitowy, poniewa 256 rnych wartoci mona zmieci w 8 bitach)
i obsuguje przezroczysto. Dziki innemu algorytmowi kompresji, w niektrych sytuacjach 8-bitowy PNG bywa mniejszy ni jego odpowiednik w formacie GIF.
Co wane, PNG wystpuje rwnie w wariancie 24-bitowym, ktry obsuguje miliony kolorw. Jest w tym wzgldzie podobny do formatu JPEG, ale charakteryzuje si
wikszymi rozmiarami plikw, bo nie stosuje stratnego algorytmu kompresji. Najwiksz zalet 24-bitowych obrazw PNG jest obsuga kanau alfa (kanau przezroczystoci), ktry stanowi jakby osobn warstw, okrelajc poziomy przezroczystoci poszczeglnych pikseli. Podczas gdy przezroczysto w obrazach GIF lub 8-bitowych PNG
jest dwustanowa, piksele w 24-bitowym PNG mog by przezroczyste tylko czciowo, co oznacza zmieszanie koloru obrazu i koloru ta w proporcjach zdefiniowanych
przez warstw alfa. Dziaanie kanau przezroczystoci przedstawia rysunek 5.4. Szachownic wida przez cz logo z elips, co zapewnia obrazowi dobre dopasowanie do
dowolnego ta.
Rysunek 5.4.
24-bitowy PNG
z kanaem
przezroczystoci.
Szachownic wida
przez czciowo
przezroczyst elips

Niestety, wiele starszych przegldarek, wczajc w to przegldarki Internet Explorer

przed wersj 7, nie obsuguje kanau przezroczystoci w 24-bitowych obrazach PNG.
Dopki starsze przegldarki nadal s popularne, naley bardzo uwaa ze stosowaniem
obrazw PNG stosujcych kana przezroczystoci.

120

HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW

Bity i bajty
Wszystkie dane w wiecie komputerw skadaj si z zer i jedynek, czyli cyfr, std nazwa
technologia cyfrowa. Zera i jedynki reprezentuj dwa stany przecznika 1 oznacza wczony, a 0 wyczony. To baza kodu binarnego, stanowicego podstaw dziaania wszystkich
komputerw. Pojedyncza cyfra nosi nazw bit, a sekwencja 8 bitw to bajt. Przy duych zbiorach bajtw stosujemy wielokrotnoci wartoci 1024; 1024 bajty to jeden kilobajt, 1024 kilobajty to jeden megabajt, a 1024 megabajty to jeden gigabajt. W ten sposb mierzymy ilo
cyfrowych danych.
Warto koloru kadego piksela obrazu bitmapowego to cig zer i jedynek. Im wicej zer i jedynek przypada na jeden piksel, tym wicej rnych kolorw mona opisa. Najprostszy obraz
moe stosowa tylko pojedyncze zero i jedynk do opisu kolorw oznacza to obraz monochromatyczny, zawierajcy tylko czer i biel. Poniewa kady bit to dwie wartoci, liczba dostpnych kolorw jest zawsze wartoci wynikajc z podniesienia liczby 2 do potgi rwnej
liczbie bitw. Dla dwch bitw na kolor mamy dostp do czterech kolorw (22) z powodu
czterech permutacji (00, 01, 10, 11). Dla czterech bitw kolorw moe by 16 (24). Dla 8 bitw 256 (28).
Obrazy GIF stosuj maksymalnie 8 bitw na piksel, wic mog stosowa najwyej 256 rnych kolorw. JPEG uywa 24 bitw na piksel, czyli obsuguje 16 777 216 rnych kolorw,
co w wielu przypadkach stanowi granic ludzkich moliwoci rozrniania kolorw. Format PNG
obsuguje wersj 8-bitow oraz 24-bitow.
W 8-bitowych obrazach GIF i PNG tylko jedna warto zostaje wskazana jako warto przezroczystoci, wic dany piksel jest widoczny lub niewidoczny. W 24-bitowym formacie PNG kademu
pikselowi przypisano osobne 8 bitw okrelajcych jego przezroczysto, wic cznie mamy
dostp do 256 poziomw przezroczystoci: od 0 oznaczajcego pen przezroczysto do
255 oznaczajcego pene krycie.

Umieszczanie obrazw
na stronach WWW
Zawarto tekstowa stanowi cz dokumentu XHTML. Otaczaj j znaczniki, informujce o znaczeniu poszczeglnych sw lub zda. Obrazy s zewntrznymi plikami
i nie stanowi czci dokumentu. Odwoania do obrazw w dokumencie XHTML
oznacza si za pomoc elementu img (lub object, cho nie jest on tak dobrze obsugiwany). Renderowanie strony zawierajcej obrazy jest dwuetapowe: najpierw przegldarka pobiera dokument XHTML, a dopiero pniej wszystkie powizane z nim obrazy. Po uzyskaniu obrazka z serwera WWW przegldarka wywietla go na ekranie.

<img>
Element img naley traktowa jako element zastpowany, poniewa on sam nigdy nie
jest wywietlany. Co wicej, element ten jest elementem pustym, wic naley go zamyka za pomoc znakw />. Element wymaga wskazania rda obrazu do wywietlenia przy uyciu atrybutu src. Podany adres URL moe by wzgldny lub peny.

Rozdzia 5. Obrazy

121

Element img wymaga rwnie wskazania atrybutu alt, zawierajcego alternatywn tre,
czyli tekst opisujcy zawarto elementu. Alternatywny tekst pojawi si na stronie, jeli
obrazek nie jest dostpny lub przegldarka nie jest w stanie wywietla obrazw. Co
wane, tekst ten pomaga zrozumie tre strony osobom niedowidzcym. Listing 5.1
przedstawia element img jedynie z atrybutami src i alt, czyli cakowitym minimum
pozwalajcym uzna go za poprawny.
Listing 5.1. Najprostsza posta elementu img
<img src="/images/pizza.jpg" alt="Pizza z sosem i oliwkami" />

Atrybuty wymagane
src okrela adres URL pliku z obrazem.
alt okrela alternatywny tekst wywietlany zamiast obrazu.

Atrybuty opcjonalne
width szeroko obrazu w pikselach.
height wysoko obrazu w pikselach.
ismap informuje, e obraz jest powizany z map po stronie serwera.
usemap identyfikuje map po stronie uytkownika.
longdesc okrela adres URL zawierajcy rozbudowany opis obrazu.

Atrybuty standardowe
class
dir
id
lang
style
title
xml:lang

Atrybut alt
Wszystkie wystpienia elementu img musz zawiera atrybut alt, zapewniajcy alternatywn tre, jeli z jakich powodw obrazek nie jest widoczny, np. uytkownik
niedowidzi, uywane oprogramowanie nie potrafi wywietla obrazw lub obraz nie
jest dostpny w podanej lokalizacji. Uycie tekstu opisujcego zawarto obrazka pozwala przekaza cho cz informacji, jeli obrazek nie jest dostpny. Atrybut alt
moe zawiera do 1024 znakw (wczajc w to spacje), ale warto by moliwie precyzyjnym. Jeli obraz jest bardzo zoony i wymaga duszych wyjanie, mona skorzysta z atrybutu longdesc.

122

HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW

Atrybut alt powinien stanowi zastpnik obrazu, gdy ten nie jest dostpny. Jeli obraz przedstawia zdjcie kota picego w koszyku, prawidowy atrybut alt powinien
zawiera tekst mj kot w koszyku lub mj szary kot pi w plecionym koszyku lub
nawet mj szary, paskowany kot pi w kuchni, w plecionym koszyku. Opis pozwala
uytkownikowi wyobrazi sobie zawarto zdjcia. Rysunek 5.5 pokazuje, w jaki sposb
przegldarka Internet Explorer reaguje, jeli obraz nie znajduje si na serwerze. Zamiast
obrazu pojawia si tre alt, ktra informuje o jego zawartoci.
Rysunek 5.5.
Przegldarka wywietli
alternatywn zawarto,
jeli obrazu nie uda
si zaadowa

Atrybut alt powinien by sensownym zastpieniem obrazu, wic unikaj niewiele mwicych tekstw w stylu firmowe logo. W atrybucie zawrzyj nazw firmy, a nie informacj o jakim logo, uyj wic tekstu w rodzaju Moja Firma, logo. Jeli obrazek
przedstawia tekst, w atrybucie alt powinna znale si tre tego tekstu.
Atrybut alt nie powinien skupia si na tym, czy brakujcy obraz zawiera logo, zdjcie,
ilustracj, portret, wykres itp. Uycie tekstu zdjcie mojego kota informuje co prawda,
e na zdjciu znajduje si kot, ale nie mwi nic o jego sytuacji i lokalizacji zdjcia,
co moe by bardzo istotne. Staraj si przekaza temat przewodni zdjcia, a nie tylko jego
zawarto. Nie stosuj nazwy pliku z obrazem jako tekstu alternatywnego, bo mojkot.jpg
niewiele mwi czytelnikowi.
Internet Explorer dla systemu Windows, najpopularniejsza na wiecie przegldarka
internetowa, z niewyjanionych przyczyn wywietla zawarto atrybutu alt jako podpowied, czyli dodatkowy tekst, pojawiajcy si po umieszczeniu kursora myszy nad
obrazem (rysunek 5.6).

Rozdzia 5. Obrazy

123

Rysunek 5.6.
Internet Explorer
dla systemu Windows
niepoprawnie
wywietla warto
atrybutu alt
jako podpowied

Z tego powodu wielu projektantw stron WWW przez lata bdnie uytkowao atrybut alt, eby wywietla dodatkowe informacje o obrazie jako podpowied: moje
ulubione zdjcie lub mj kot o imieniu Kiciu. Teksty te nie opisuj obrazu ani nie
zastpuj go, wic nie s odpowiednimi wartociami dla alt. Poniewa tylko Internet
Explorer dla Windows stosuje wywietlanie zawartoci alt jako podpowiedzi, uytkownicy stosujcy inne przegldarki nie zobacz tego komunikatu.
Atrybut title, jeli zostanie uyty, bdzie wywietlany jako podpowied w wikszoci
przegldarek graficznych. Atrybut ten jest odpowiedni do umieszczania opisu, stanowicego uzupenienie treci obrazu. Jeli zarwno alt, jak i title s dostpne dla obrazu
(listing 5.2), przegldarka Internet Explorer dla Windows zastosuje tekst zawarty w title.
Listing 5.2. Element img z opisowym atrybutem alt oraz i oglnym atrybutem title
<img src="/images/pizza.jpg" title="Nasza sawna Pizza Neapoli" alt="Caa pizza
z zielonymi oliwkami i roztopionym serem mozzarella" />

Co gorsza, niektrzy projektanci cakowicie unikaj atrybutu alt, by tylko unikn

wywietlania podpowiedzi w przegldarce Internet Explorer. Element img bez atrybutu alt nie tylko nie jest poprawny z punktu widzenia XHTML, ale rwnie utrudnia ycie osobom niedowidzcym. System czytajcy strony na gos lub przegldarka
tekstowa po prostu poinformuj o istnieniu obrazu bez adnych dodatkowych danych
lub przeczytaj zawarto atrybutu src. Pominicie alt czyni z istotnego obrazu bezwartociowy znacznik.
Informacyjny tekst alt jest szczeglnie wany, jeli obraz stanowi cz cza lub jest
przyciskiem powodujcym na przykad wysanie formularza. Tego rodzaju obrazy peni
okrelon funkcj, nie s tylko treci informacyjn. Jeli obraz stanowi cz cza,

124

HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW

zastosowanie w nim poprawnego atrybutu alt jest niezwykle istotne. Rysunek 5.7 przedstawia stron WWW z nawigacj stosujc obrazki. Odwiedzajcy z dobrym wzrokiem bez problemu skorzysta ze strony, nawet jeli nie zawiera ona atrybutw alt.

Rysunek 5.7. Witryna stosuje obrazki jako elementy wskazujce cza do innych stron.
Rysunek przedstawia wygld strony w przegldarce Firefox

Rysunek 5.8 przedstawia ten sam tekst wywietlony w przegldarce Lynx przegldarce tekstowej, ktra wywietla nazw pliku obrazu, jeli nie wskazano waciwego
opisu w atrybucie alt. Bez atrybutw alt nawigacja w tej przegldarce jest praktycznie
bezuyteczna.
Rysunek 5.8.
Przegldarka Lynx
pokazuje obrazy
bez atrybutw alt,
stosujc nazwy plikw.
Uniemoliwia to
nawigacj w witrynie,
bo wymusza
na uytkowniku
zgadywanie, gdzie mog
prowadzi cza

Rozdzia 5. Obrazy

125

Obrazy, ktre peni rol dekoracyjn, czyli nie stanowi czci rzeczywistej treci,
nadal wymagaj atrybutu alt, ale w takiej sytuacji naley uy pustej wartoci alt
(alt=""), by wskaza, e s one nieistotne. Jako dodatkowy bonus Internet Explorer
nie wywietli podpowiedzi, gdy znajdzie pusty atrybut alt.
Wiele osb niepoprawnie mwi o znaczniku alt, gdy tak naprawd ma na myli
atrybut alt. To bardzo mylce, poniewa alt nie jest i nigdy nie by znacznikiem.

Atrybut longdesc
Opcjonalny atrybut longdesc zawiera adres URL wskazujcy inn stron WWW z penym wyjanieniem znaczenia obrazu, jeli mgby on nie zmieci si w atrybucie alt.
Jest to szczeglnie przydatne dla grafw i wykresw, ktre maj zoon reprezentacj, ale mona je rwnie zaprezentowa w postaci tabeli. Listing 5.3 przedstawia
element img z atrybutem longdesc. Obraz przedstawia wykres koowy, ktry stosunkowo trudno opisa w atrybucie alt.
Listing 5.3. Element img z atrybutem longdesc
<img src="/images/piechart.gif" alt="Wykres koowy przedstawiajcy wzgldn
popularno rnych rodzajw dodatkw do pizzy" longdesc="/dodatki.html" />

Rysunek 5.9 przedstawia wykres koowy oraz te same informacje przedstawione w postaci tabeli. Dane tabelaryczne s adresowane do osb, ktre z rnych powodw nie
s w stanie obejrze i zinterpretowa wykresu. Wicej informacji na temat tabel pojawi
si w rozdziale 7.

Rysunek 5.9. Dane w postaci wykresu i ich tabelaryczny odpowiednik

Atrybuty width i height

Obraz zostanie wywietlony w przegldarce zgodnie ze swoim naturalnym rozmiarem. Poniewa jednak przegldarka pobiera obrazy po wczytaniu caego kodu HTML,
nie zna rzeczywistych rozmiarw obrazw, dopki ich nie pobierze. Po pobraniu kadego obrazu i poznaniu jego rozmiarw zmieni ukad tekstu, co moe by denerwujce,

126

HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW

jeli uytkownik rozpocz ju czytanie tekstu. Stosujc atrybuty width i height w elemencie img, informujemy przegldark, ile miejsca powinna zarezerwowa na obraz
i e ma renderowa tekst tak, jakby obraz zosta ju wczytany.
Jeli wartoci atrybutw width i height nie s takie same jak naturalne wymiary obrazu,
przegldarka przeskaluje obraz, by dostosowa go do atrybutw. Jeli tylko to moliwe, unikaj skalowania obrazw w ten sposb. Skalowanie za pomoc przegldarki
najczciej nie zapewnia najlepszej jakoci. W przypadku powikszania pojawi si
due piksele. Zmniejszanie obrazu w ten sposb nie ma duych efektw ubocznych
w kwestii jakoci, ale wymaga pobrania obrazu o penym rozmiarze, co rwnie nie
jest dobre. Najlepiej jeli atrybuty pasuj do naturalnych wymiarw obrazu. Skalowanie lepiej przeprowadza w wyspecjalizowanym programie graficznym.
Do okrelania wymiarw obrazu, mona rwnie uy waciwoci width i height
z CSS. Jeli element ma okrelone atrybuty i dodatkowo nadany styl z wymiarami,
styl CSS nadpisze wartoci okrelone przez atrybuty.

Atrybuty usemap i ismap

Mapa obrazkowa to obraz, w ktrym niektre obszary zostay oznaczone jako cza.
W ten sposb czami s tylko fragmenty obrazu, a nie jego cao. Atrybut usemap
okrela element map, ktry ma by uyty do wywietlenia mapy obrazkowej dziaajcej po stronie klienta. Atrybut ismap wskazuje uycie mapy dziaajcej po stronie
serwera (tego rozwizania naley unika z powodu braku przydatnoci dla osb niedowidzcych). Wicej informacji na temat dziaania map obrazkowych znajduje si
w rozdziale 6., opisujcym hipercza.

Wycofane atrybuty prezentacyjne

Starsze wersje HTML definioway kilka atrybutw prezentacyjnych dla elementu img,
ale zostay one wycofane na rzecz CSS. aden z tych elementw nie jest poprawny
w XHTML, ale wymieniamy je, by pokaza, jakie s ich odpowiedniki w CSS:
align okrela uoenie obrazu wzgldem otaczajcego go tekstu. Dostpnymi
wartociami s: left, right, top, middle oraz bottom. Wyrwnywanie do lewej
lub do prawej atwo uzyska za pomoc waciwoci float. Trzy pozostae
wyrwnania s dostpne za pomoc waciwoci vertical-align.
border okrela szeroko obramowania, w ktrym znajdzie si obraz,

jeli bdzie stanowi cz hipercza. Obecnie ten sam efekt udostpnia

waciwo border-width z CSS.
hspace okrela poziomy odstp po lewej i po prawej stronie obrazu.
Zosta zastpiony przez waciwoci margin-left i margin-right.
vspace okrela pionowy odstp na grze i na dole obrazu. Zosta zastpiony
przez waciwoci margin-top i margin-bottom.

Rozdzia 5. Obrazy

127

Niektre starsze dokumenty zawieraj dodatkowo atrybut lowsrc. Okrela on mniejsz

wersj obrazka, ktra bya pobierana przed rozpoczciem pobierania waciwej
wersji. Jest to jednak bardzo przestarzay atrybut, stosowany jedynie przez starsze
wersje przegldarki Netscape Navigator. Obecnie nie naley go stosowa.

Obrazy w kontekcie innych elementw

Element img jest elementem wewntrznym, wic moe znajdowa si w tym samym
wierszu co tekst. W takiej sytuacji bdzie spoczywa na dolnej krawdzi podstawy
tekstu, nazywanej lini bazow. Listing 5.4 przedstawia element img umieszczony w akapicie z tekstem (elemencie p).
Listing 5.4. Element img wraz z tekstem w jednym akapicie
<p><img src="images/pizza.jpg" width="180" height="110" alt="Zdjcie pizzy
z naszego lokalu" />
Spaghetti &#38; Cruft otworzya swoje podwoje w 1999, oferujc klientom z regionu
Riverbend pizze i makarony. Pizze wytwarzamy na miejscu rcznie, uywajc najlepszych
skadnikw, a nastpnie wypiekamy do perfekcji w piecu opalanym drewnem. Pizz
sprzedajemy w caoci lub w kawakach. Dodatkowo oferujemy j na wynos i dowozimy do
klienta.</p>

Rysunek 5.10 przedstawia wygld akapitu w przegldarce graficznej. Zauwa, e spd

obrazu znajduje si w tym samym miejscu, co linia bazowa tekstu.

Rysunek 5.10. Zauwa, e obraz zosta wywietlony w jednej linii z tekstem (zdjcie: Jeremy Keith)

Jeli obraz, tekst lub oba te elementy naraz znajduj si w elementach blokowych
(div, p itp.), gr bierze standardowe zachowanie blokw, wic obraz i tekst pojawi
si w osobnych wierszach. Listing 5.5 przedstawia t sam zawarto, ale tym razem
element img znalaz si poza akapitem we wasnym elemencie div.
Listing 5.5. Element img w elemencie blokowym div oraz tekst umieszczony w osobnym akapicie
<div><img src="/images/pizza.jpg" width="180" height="110" alt=" Zdjcie pizzy
z naszego lokalu" /></div>
<p>Pizze wytwarzamy na miejscu rcznie, uywajc najlepszych
skadnikw, a nastpnie wypiekamy do perfekcji w piecu opalanym drewnem.</p>

128

HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW

Rysunek 5.11 przedstawia wynik uzyskany w przegldarce graficznej. Obraz (a dokadniej element div) i tekst znajduj si w osobnych wierszach.

Rysunek 5.11. Elementy p i div s elementami blokowymi, wic pojawiaj si we wasnych wierszach

Wybierajc sposb umieszczenia obrazu (wewntrz lub poza otaczajcym go tekstem),

pomyl o jego znaczeniu. Czy stanowi on cz tej samej myli, ktra pojawia si
w tekcie? Jeli tak, umie go w akapicie. Jeli obraz ukazuje sytuacj luno zwizan z tekstem, warto umieci go osobno.
Pamitaj o tym, e element body moe zawiera wycznie elementy blokowe jako
swoje dzieci. Element img jest elementem wewntrznym, wic nie mona umieci go
bezporednio w elemencie body. Aby uzyska poprawny kod XHTML, musisz umieci go w elemencie blokowym.

Gdy dwa obrazy znajd si obok siebie, zachowuj si tak samo jak inne elementy
wewntrzne znajd si obok siebie w jednej linii i na tym samym poziomie. Obrazy, podobnie jak sowa, automatycznie przechodz do nastpnego wiersza, jeli si
nie mieszcz.

Otaczanie obrazu tekstem

W niezliczonej liczbie czasopism, ksiek i gazet tekst otacza obraz umieszczony w kolumnie, w taki sposb jak strumie omijajcy przeszkod. We wczeniejszych wersjach
HTML naleao zastosowa atrybut align (wycofany ju z uycia). Obecnie do uzyskania tego samego efektu suy waciwo float z CSS.
Waciwo przyjmuje trzy wartoci: left, right lub none. Gdy element staje si elementem opywanym, przesuwa si moliwie daleko w jedn ze stron (praw lub lew)
a do napotkania granicy bloku lub innego opywanego elementu. Cay tekst lub inne
elementy, ktre pojawi si po nim, bd go opyway. Domylna warto none suy
do wycofywania waciwoci float naoonej na element przez inn regu.
Listing 5.6 przedstawia kod HTML zawierajcy obraz i blok tekstu (oba elementy
znajduj si w jednym akapicie). Element img wykorzystuje atrybut class, by uatwi
dostp do niego z poziomu CSS.

Rozdzia 5. Obrazy

129

Listing 5.6. Obraz w jednym akapicie z tekstem

<p><img src="images/pizza.jpg" width="180" height="110" class="figure" alt="Zdjcie
pizzy z naszego lokalu" />
Spaghetti &#38; Cruft otworzya swoje podwoje w 1999, oferujc klientom z regionu
Riverbend pizze i makarony. Pizze wytwarzamy na miejscu rcznie, uywajc najlepszych
skadnikw, a nastpnie wypiekamy do perfekcji w piecu opalanym drewnem. Pizz
sprzedajemy w caoci lub w kawakach. Dodatkowo oferujemy j na wynos i dowozimy do
klienta.</p>

Obraz naley do klasy figure. Listing 5.7 przedstawia dla tej klasy regu CSS, ktra
wskazuje, e obraz powinien przesun si w lewo i by opywany z prawej strony.
Listing 5.7. Regua CSS dla klasy figure
.figure {
float: left;
}

Rysunek 5.12 przedstawia efekt poczonych obu fragmentw kodu. Obraz przesun
si na lew stron akapitu, a tekst go opywa.
Rysunek 5.12.
Obrazek przesun si
w lewo, wic tekst
moe go opywa

Obraz znajduje si w tej samej linijce, co tekst, ale zosta dosunity do lewej strony
i dowizany do gry wiersza, w ktrym si pojawi. Poniewa ma wikszy rozmiar
ni otaczajcy go tekst, przechodzi poniej linii bazowej. W jednym z wczeniejszych
przykadw obraz zwiksza wysoko wiersza tekstu i czyni go trudniejszym do odczytania. Aby odsun nieco tekst od obrazu, warto zastosowa margines, rozszerzajc
wczeniejsz regu CSS (listing 5.8).
Listing 5.8. Dodanie marginesw do reguy klasy figure
.figure {
float: left;
margin-right: 1em;
margin-bottom: .5em;
}

130

HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW

W tym konkretnym przypadku chcemy jedynie ustawi prawy i dolny margines, poniewa grna i lewa strona nie koliduj z adnymi innymi elementami. Pozostawienie
tych dwch krawdzi z domylnym marginesem powoduje dosunicie obrazu do niewidocznej krawdzi akapitu. Zauwa, e po wprowadzeniu zmian (rysunek 5.13) obraz
ma wicej miejsca. Tekst nadal go opywa, ale z uwzgldnieniem marginesu.
Rysunek 5.13.
Zastosowanie
marginesw dla obrazu
lepiej oddziela go
od tekstu

Obrazy ta
Stosujc waciwo background-image z CSS, bardzo atwo doda dekoracyjny obraz
na stronie, przy jednoczesnym unikaniu zamiecania go elementami prezentacyjnymi.
Tylko obrazy, ktre stanowi tre strony, powinny znale si w kodzie XHTML.
Niemale dowolnemu elementowi CSS mona nada obraz ta. To bdzie zajmowao
dokadnie tak sam przestrze jak element. Obraz ta domylnie uoy si w kafelki
w obu kierunkach, zaczynajc od lewego grnego naronika. Efekt nazywamy kafelkowaniem, bo przypomina kafelki uoone w kuchni lub azience.
Listing 5.9 przedstawia regu CSS, ktra spowoduje dodanie obrazu ta dla elementu
body. Obraz okrelono za pomoc adresu URL, stosujc sowo kluczowe url oraz nawiasy okrge.
Listing 5.9. Obraz ta zastosowany dla elementu body
body {
background-image: url(/images/background.gif);
}

Obraz ukada si w kafelki, by wypeni cae okno przegldarki po zrenderowaniu

dokumentu (rysunek 5.14).
Domylny tryb kafelkowania atwo zmieni, stosujc waciwo background-repeat,
okrelajc, e powtarzanie powinno nastpowa tylko w pionie, tylko w poziomie lub
wcale. Listing 5.10 rozszerza wczeniejsz regu, deklarujc, e obraz ta powinien
powtarza si tylko w osi X.

Rozdzia 5. Obrazy

131

Rysunek 5.14.
Obrazek ta powtarza
si w obu kierunkach
tyle razy,
ile to konieczne

Listing 5.10. Dodanie deklaracji background-repeat

body {
background-image: url(/images/background.gif);
background-repeat: repeat-x;
}

Zauwa, e na rysunku 5.15 to powtarza si tylko w poziomie.

Rysunek 5.15. To powtarzane w poziomie, ale nie w pionie

Uycie wartoci repeat-y spowoduje powtarzanie ta tylko w pionie. Listing 5.11 przedstawia zmodyfikowany kod CSS.
Listing 5.11. Warto repeat-y spowoduje powtarzanie ta w pionie
body {
background-image: url(/images/background.gif);
background-repeat: repeat-y;
}

Rysunek 5.16 przedstawia efekt wykonania modyfikacji. To powtarza si tylko w osi Y.

132

HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW

Rysunek 5.16.
Teraz to powtarza si
w pionie,
a nie w poziomie

Domyln wartoci waciwoci background-repeat jest repeat. Mona to wykorzysta do nadpisania wartoci zmienionej przez inn regu. Aby wyczy powtarzanie
ta, wystarczy uy wartoci no-repeat, co przedstawia listing 5.12.
Listing 5.12. Warto no-repeat zapobiega powtarzaniu ta
body {
background-image: url(/images/background.gif);
background-repeat: no-repeat;
}

Rysunek 5.17 przedstawia efekt dziaania wartoci no-repeat. Obraz ta pojawi si

tylko raz.
Rysunek 5.17.
Obraz ta pojawia si
tylko raz (nie jest
powtarzany)

Jeli obraz ta jest znacznie wikszy od waciwej treci, to okrela ona obszar, do ktrego zostanie przycite to. Na rysunku 5.18 to jest znacznie wiksze ni element, do ktrego zostao przypisane (element div), wic jego znaczna cz pozostaje niewidoczna.
Rysunek 5.18.
Jedynie cz obrazu
ta jest widoczna,
poniewa obraz
okaza si znacznie
wikszy ni element,
dla ktrego go
zastosowano

Rozdzia 5. Obrazy

133

Jeli element stanie si wikszy przez dodanie nowej zawartoci, zwikszenie rozmiaru tekstu lub wskazanie jawnie jego rozmiaru za pomoc CSS wicej obrazu ta
pojawi si na ekranie komputera (rysunek 5.19).
Rysunek 5.19.
Dodanie nastpnego
akapitu zwiksza
obszar obejmowany
przez to, wic wida
wicej obrazu ta

Tekst moe by trudny do odczytania, jeli obraz ta jest bardzo kolorowy i nie zapewnia odpowiedniego kontrastu z tekstem. Bd ostrony w doborze obrazw ta, by
nie pogarszay one czytelnoci tekstu.
Nie zapominaj rwnie o podaniu jednokolorowego ta (waciwo background-color),
ktre zostanie uyte, jeli obraz nie bdzie dostpny. Niech zwyke to rwnie zapewnia odpowiedni kontrast wzgldem tekstu. Wikszo przegldarek domylnie stosuje czarny tekst i biae to, ale jeli chce si zastosowa jasne to, warto dodatkowo
ustawi ciemne to. Obraz ta zawsze przykryje zwyke jednokolorowe to, ale jednokolorowe to pozostanie, gdy obrazu nie uda si wczyta.

Pozycjonowanie obrazu ta
Domylnie przegldarka dosuwa obraz ta do lewego grnego naronika elementu, do
ktrego zosta przypisany. Jest to rwnie miejsce rozpoczynania kafelkowania. Waciwo background-position steruje pooeniem pocztku obrazu ta.
Waciwo przyjmuje dwie wartoci. Pierwsza okrela pooenie w poziomie, a druga w pionie. Pooenie w pionie zawsze wystpuje jako drugie. Gdybymy podali tylko
jedn warto, zostanie ona zaklasyfikowana jako pooenie w poziomie. Listing 5.13
przedstawia kod CSS, powodujcy umieszczenie obrazu ta w prawym dolnym naroniku elementu div.
Listing 5.13. Dodanie deklaracji background-position
div {
background-image: url(/images/background.gif);
background-repeat: no-repeat;
background-position: right bottom;
}

134

HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW

Rysunek 5.20 przedstawia wynik obraz ta znajduje si teraz w prawym dolnym

naroniku tekstu. Poniewa to jest przypisane do elementu div, a element ten domylnie automatycznie dostosowuje si do dugoci tekstu, obraz ta nie znajduje si
w prawym dolnym naroniku okna, ale w prawym dolnym naroniku elementu.

Rysunek 5.20. Obraz znajduje si teraz w prawym dolnym naroniku, ale nadal si nie powtarza

Warto waciwoci background-position mona okrela na kilka sposobw: za pomoc sw kluczowych, dugoci lub procentw. Moliwymi sowami kluczowymi dla
pooenia w poziomie s left, center i right, a dla pooenia w pionie top, center
i bottom. Sowo center jest dostpne dla obu kierunkw: dla poziomu oznacza poow
szerokoci, a dla pionu poow wysokoci.
Dugo we waciwoci pooenia ta to dowolna warto liczbowa z jednostk, czyli
pikselami, milimetrami lub em. Dla dugoci 0 nie potrzeba adnej jednostki, poniewa 0px to dokadnie to samo co 0em lub 0mm. Listing 5.14 przedstawia dwie dugoci
zastosowane do pozycjonowania ta: 40 pikseli dla pooenia w poziomie i 3 em dla
pooenia w pionie.
Listing 5.14. Zastosowanie dugoci w background-position
body {
background-image: url(/images/background.gif);
background-repeat: no-repeat;
background-position: 40px 3em;
}

Rysunek 5.21 przedstawia zrenderowany wynik z obrazem ta umieszczonym 40 pikseli od grnego naronika elementu i 3 em od jego lewej krawdzi, czyli zgodnie z danymi wskazanymi w CSS.
Po podaniu pooenia w procentach przegldarka w trakcie renderingu uwzgldnia zarwno rozmiar elementu, jak i rozmiar obrazu ta. Obraz umieszczany 75% od lewej
strony elementu zostanie umieszczony w 3/4 szerokoci elementu wzgldem 3/4 rozmiaru
obrazka. Uycie wartoci 50% spowoduje uycie jako punktu referencyjnego rodka
obrazu i dodatkowo ustawienie go na rodku elementu, co ilustruje rysunek 5.22.

Rozdzia 5. Obrazy

135

Rysunek 5.21. Obraz ta umieszczony dokadnie tam, gdzie wskazuje CSS

Rysunek 5.22. Obraz ta umieszczony 50% od gry i od lewej strony spowoduje umieszczenie
obrazu ta dokadnie na rodku elementu

Opisany system mierzenia nie jest stosowany dla standardowych jednostek. One zawsze powoduj mierzenie od lewego grnego naronika elementu i lewego grnego naronika obrazu, co ilustruje rysunek 5.23.

Podsumowanie
Obrazy to bardzo wany aspekt kadej witryny internetowej, bo to one czyni j unikatow i rozpoznawaln. Co wicej, pewne zagadnienia znacznie atwiej wyrazi
grafik ni sowami. Obrazy niosce tre zwizan z witryn naley umieszcza za
pomoc elementu img i dodatkowo zawsze stosowa tekst alternatywny dla osb niedowidzcych lub systemw wyszukiwawczych. Obrazy zwizane z prezentacj nie powinny znale si w treci dokumentu, ale zosta okrelone za pomoc CSS i waciwoci

136

HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW

Rysunek 5.23. Zastosowanie dugoci powoduje uycie dokadnie tych danych,

jakie zostay wskazane w CSS. Obliczenia dotycz lewych grnych naronikw elementu i obrazu
background-image. CSS umoliwia dokadne pozycjonowanie obrazu ta oraz wpywanie na obrazy umieszczone w tekcie, tak aby lepiej integroway si z zawartoci
dokumentu.

Trzema popularnymi formatami kompresji obrazw uywanymi na stronach WWW s:

GIF, JPEG i PNG. Wykorzystuj obrazy JPEG dla zdj, obrazy GIF i 8-bitowe PNG
dla tekstu i ilustracji oraz 24-bitowe PNG dla kanau przezroczystoci.
Zapewne bardzo czsto bdziesz korzysta z elementw i waciwoci przedstawionych w tym rozdziale, aby wzbogaci szat graficzn wasnej witryny. Strony WWW
nie byyby stronami WWW, gdyby nie jeden element hipercza. To wanie nimi
zajmiemy si w nastpnym rozdziale. To dziki nim internet yje wasnym yciem.