28
Wydawnictwo Helion ul. Kociuszki 1c 44-100 Gliwice tel. 032 230 98 63 e-mail: [email protected] HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW Autor: David Schultz, Craig Cook T‡umaczenie: Rafa‡ Joæca ISBN: 978-83-246-1498-1 Tytu‡ orygina‡u: Beginning HTML with CSS and XHTML: Modern Guide and Reference Format: 158x235, stron: 384 Kompleksowe omwienie podstawowego budulca witryn WWW, czyli jŒzyka 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 zmieni‡y siŒ znacznie. Dynamiczny rozwj technologii i jŒzykw programowania oraz wzrost wydajnoci serwerw sprawi‡y, ¿e strony internetowe sta‡y siŒ teraz naprawdŒ funkcjonalne i atrakcyjne. JŒzyki, takie jak PHP i ASP, oraz technologia AJAX umo¿liwi‡y budowanie dynamicznych witryn WWW pobieraj„cych dane z baz i dzia‡aj„cych jak typowe aplikacje biurowe. Pomimo tak ogromnej rewolucji, u podstaw wszystkich serwisw WWW nadal le¿y jŒzyk HTML. Jego znajomo jest niezbŒdna do zbudowania ka¿dej witryny WWW od najprostszej do najbardziej z‡o¿onej. Dopiero po opanowaniu jŒzyka HTML i ciśle zwi„zanej z nim technologii CSS mo¿na wykona nastŒpny krok. W ksi„¿ce HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW znajdziesz omwienie wszystkich elementw najnowszej specyfikacji jŒzyka HTML. Czytaj„c 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 tak¿e multimedialne. Przeczytasz tak¿e o jŒzyku JavaScript oraz przeledzisz rzeczywisty projekt witryny internetowej. Historia jŒzyka 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 jŒzyk HTML

HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW

Embed Size (px)

DESCRIPTION

Kompleksowe omówienie podstawowego budulca witryn WWW, czyli języka HTML.* Jak zbudowany jest dokument HTML?* W jaki sposób umieszczać na stronach WWW elementy graficzne?* Jak stosować kaskadowe arkusze stylów?W ostatnich latach zasady tworzenia witryn WWW zmieniły się znacznie. Dynamiczny rozwój technologii i języków programowania oraz wzrost wydajności serwerów sprawiły, że strony internetowe stały się teraz naprawdę funkcjonalne i atrakcyjne. Języki, takie jak PHP i ASP, oraz technologia AJAX umożliwiły budowanie dynamicznych witryn WWW pobierających dane z baz i działających jak typowe aplikacje biurowe. Pomimo tak ogromnej rewolucji, u podstaw wszystkich serwisów WWW nadal leży język HTML. Jego znajomość jest niezbędna do zbudowania każdej witryny WWW – od najprostszej do najbardziej złożonej. Dopiero po opanowaniu języka HTML i ściśle związanej z nim technologii CSS można wykonać następny krok.W książce „HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW“ znajdziesz omówienie wszystkich elementów najnowszej specyfikacji języka HTML. Czytając ją, poznasz strukturę dokumentu HTML, znaczniki oraz ich atrybuty. Dowiesz się, jak korzystać z kaskadowych arkuszy stylów, tworzyć formularze i umieszczać w dokumentach elementy graficzne, a także multimedialne. Przeczytasz także o języku JavaScript oraz prześledzisz rzeczywisty projekt witryny internetowej.* Historia języka HTML* Idea rozdzielenia treści od prezentacji* Struktura dokumentów HTML i XHTML* Konstrukcja stylów CSS* Definiowanie metadanych* Znaczniki zawartości dokumentu* Obrazy i formularze na stronach WWW* Tabele* Formatowanie elementów HTML za pomocą arkuszy stylów* Podstawy JavaScriptZrób pierwszy krok na drodze do projektowania atrakcyjnych stron WWW – poznaj język HTML.

Citation preview

Page 1: HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW

Wydawnictwo Helionul. Ko�ciuszki 1c44-100 Gliwicetel. 032 230 98 63e-mail: [email protected]

HTML, XHTML i CSS. Nowoczesne tworzenie stron WWWAutor: David Schultz, Craig CookT³umaczenie: Rafa³ JoñcaISBN: 978-83-246-1498-1Tytu³ orygina³u: Beginning HTML with CSS and XHTML: Modern Guide and ReferenceFormat: 158x235, stron: 384

Kompleksowe omówienie podstawowego budulca witryn WWW, czyli jêzyka HTML

� Jak zbudowany jest dokument HTML? � W jaki sposób umieszczaæ na stronach WWW elementy graficzne? � Jak stosowaæ kaskadowe arkusze stylów?

W ostatnich latach zasady tworzenia witryn WWW zmieni³y siê znacznie. Dynamiczny rozwój technologii i jêzyków programowania oraz wzrost wydajno�ci serwerów sprawi³y, ¿e strony internetowe sta³y siê teraz naprawdê funkcjonalne i atrakcyjne. Jêzyki, takie jak PHP i ASP, oraz technologia AJAX umo¿liwi³y budowanie dynamicznych witryn WWW pobieraj¹cych dane z baz i dzia³aj¹cych jak typowe aplikacje biurowe. Pomimo tak ogromnej rewolucji, u podstaw wszystkich serwisów WWW nadal le¿y jêzyk HTML. Jego znajomo�æ jest niezbêdna do zbudowania ka¿dej witryny WWW � od najprostszej do najbardziej z³o¿onej. Dopiero po opanowaniu jêzyka HTML i �ciśle zwi¹zanej z nim technologii CSS mo¿na wykonaæ nastêpny krok.

W ksi¹¿ce �HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW� znajdziesz omówienie wszystkich elementów najnowszej specyfikacji jêzyka HTML. Czytaj¹c j¹, poznasz strukturê dokumentu HTML, znaczniki oraz ich atrybuty. Dowiesz siê, jak korzystaæ z kaskadowych arkuszy stylów, tworzyæ formularze i umieszczaæ w dokumentach elementy graficzne, a tak¿e multimedialne. Przeczytasz tak¿e o jêzyku JavaScript oraz prze�ledzisz rzeczywisty projekt witryny internetowej.

� Historia jêzyka HTML � Idea rozdzielenia tre�ci od prezentacji � Struktura dokumentów HTML i XHTML � Konstrukcja stylów CSS � Definiowanie metadanych � Znaczniki zawarto�ci dokumentu � Obrazy i formularze na stronach WWW � Tabele � Formatowanie elementów HTML za pomoc¹ arkuszy stylów � Podstawy JavaScript

Zrób pierwszy krok na drodze do projektowania atrakcyjnych stron WWW � poznaj jêzyk HTML

Page 2: HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW

Spis treściPodziękowania .................................................................................................................. 9O autorach ...................................................................................................................... 11Słowo wstępne ................................................................................................................ 13Wprowadzenie ................................................................................................................ 15

Rozdział 1. Zaczynamy .................................................................................... 19Wprowadzenie do internetu i witryn WWW .................................................................. 19Czym jest HTML? .......................................................................................................... 20

Ewolucja języka HTML ........................................................................................... 21Jeden język, wiele wersji .......................................................................................... 21Jedna wersja, trzy odmiany ...................................................................................... 22Walidacja dokumentów ............................................................................................ 23

Oddzielanie zawartości od prezentacji ............................................................................ 24Praca z XHTML i CSS ................................................................................................... 25

Edytor tekstu ............................................................................................................ 25Przeglądarki internetowe .......................................................................................... 26Umieszczanie witryny na serwerze .......................................................................... 26

Wprowadzenie do adresów URL .................................................................................... 27Składniki adresu URL .............................................................................................. 27Adresy pełne i relatywne .......................................................................................... 29

Podsumowanie ................................................................................................................ 30

Rozdział 2. Podstawy dokumentów HTML i arkuszy stylów ................................ 31Elementy składowe języka HTML — znaczniki i atrybuty ............................................ 31

Elementy blokowe i wewnętrzne .............................................................................. 33Zagnieżdżanie elementów ........................................................................................ 34Znaki niedrukowane ................................................................................................. 34Atrybuty standardowe .............................................................................................. 35Komentarze .............................................................................................................. 37

Dokument XHTML ........................................................................................................ 37Typ dokumentu ........................................................................................................ 38Element html ............................................................................................................ 40I pozostała część… ................................................................................................... 41Drzewo dokumentu .................................................................................................. 41

Podstawy arkuszy stylów ................................................................................................ 42Anatomia reguły CSS ............................................................................................... 42Selektory CSS .......................................................................................................... 43Szczegółowość i kaskadowość arkuszy stylów ........................................................ 47Dołączanie arkuszy stylów do dokumentów ............................................................ 49

Page 3: HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW

4 HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW

Kolejność stosowania kaskady ................................................................................. 51Dyrektywa !important .............................................................................................. 52Formatowanie kodu CSS .......................................................................................... 53Komentarze CSS ...................................................................................................... 54

Podsumowanie ................................................................................................................ 55

Rozdział 3. Metadane dokumentu .................................................................... 57Element head .................................................................................................................. 57

<head> ...................................................................................................................... 57Elementy wspierające ..................................................................................................... 58

<base> ...................................................................................................................... 59<link> ....................................................................................................................... 60<meta> ..................................................................................................................... 61<script> .................................................................................................................... 62<style> ...................................................................................................................... 63<title> ....................................................................................................................... 64

Podsumowanie ................................................................................................................ 66

Rozdział 4. Dodawanie zawartości .................................................................... 67Zawartość i struktura ...................................................................................................... 67Element body .................................................................................................................. 68

<body> ..................................................................................................................... 68Logiczne porcje .............................................................................................................. 70

<p> ........................................................................................................................... 70Nagłówki: 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 dotyczące fraz ................................................................................................. 85<em> ........................................................................................................................ 85<strong> ................................................................................................................... 86<cite> ....................................................................................................................... 87<q> ........................................................................................................................... 88<dfn> ........................................................................................................................ 89Skróty: <abbr> i <acronym> .................................................................................... 90Modyfikacje dokumentu: <ins> i <del> ................................................................... 91<bdo> ....................................................................................................................... 92Elementy związane z programowaniem: <code>, <kbd>, <samp> i <var> ............. 93<br> .......................................................................................................................... 95<hr> .......................................................................................................................... 96

Elementy do wielu zastosowań ....................................................................................... 97<div> ........................................................................................................................ 98<span> ...................................................................................................................... 99

Osadzanie zewnętrznej treści ........................................................................................ 100<object> ................................................................................................................. 100<param> ................................................................................................................. 101

Page 4: HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW

Spis treści 5

Elementy prezentacyjne ................................................................................................ 103<i> i <b> ................................................................................................................ 103<big> i <small> ...................................................................................................... 103<tt> ......................................................................................................................... 103<sup> i <sub> ......................................................................................................... 103

Znaki specjalne ............................................................................................................. 104Nadawanie zawartości stylu za pomocą CSS ............................................................... 106

Deklaracja podstawowych stylów czcionek ........................................................... 106Style list .................................................................................................................. 111

Podsumowanie .............................................................................................................. 113

Rozdział 5. Obrazy ......................................................................................... 115Jak działają cyfrowe obrazy? ........................................................................................ 116

Formaty obrazów przyjazne stronom WWW ......................................................... 117Umieszczanie obrazów na stronach WWW .................................................................. 120

<img> ..................................................................................................................... 120Obrazy w kontekście innych elementów ................................................................ 127

Otaczanie obrazu tekstem ............................................................................................. 128Obrazy tła ..................................................................................................................... 130

Pozycjonowanie obrazu tła ..................................................................................... 133Podsumowanie .............................................................................................................. 135

Rozdział 6. Łącza i odnośniki ......................................................................... 137Znacznik łącza .............................................................................................................. 137

<a> ......................................................................................................................... 137Użycie elementu a ........................................................................................................ 139

Łącza do innych dokumentów ................................................................................ 139Łącza do dokumentów w formacie innym niż XHTML ......................................... 141Łącza z adresami e-mail ......................................................................................... 143

Obraz jako łącze ........................................................................................................... 144Wykorzystanie identyfikatorów .................................................................................... 145Użycie CSS dla elementu łącza .................................................................................... 146Mapy obrazów .............................................................................................................. 149

<map> .................................................................................................................... 150<area> .................................................................................................................... 151

Podsumowanie .............................................................................................................. 154

Rozdział 7. Tabele ......................................................................................... 155Podstawy tworzenia tabel ............................................................................................. 155

<table> ................................................................................................................... 156<tr> ......................................................................................................................... 157<td> ........................................................................................................................ 159

Przykład zastosowania tabeli ........................................................................................ 160<caption> ............................................................................................................... 162<th> ........................................................................................................................ 164

Zaawansowane wykorzystanie tabel ............................................................................. 166<tbody> .................................................................................................................. 168<thead> .................................................................................................................. 169<tfoot> .................................................................................................................... 170<colgroup> ............................................................................................................. 173<col> ...................................................................................................................... 174

Page 5: HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW

6 HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW

Wykorzystanie CSS do nadawania stylu tabelom ......................................................... 176Dodawanie obramowania ....................................................................................... 176Wyrównywanie tekstu w tabeli .............................................................................. 178Dodawanie odstępów do komórek ......................................................................... 179Dodawanie tła do tabeli .......................................................................................... 180

Podsumowanie .............................................................................................................. 182

Rozdział 8. Formularze ................................................................................... 183Jak działają formularze? ............................................................................................... 183Elementy składowe 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 stylów za pomocą CSS ......................................................... 211Usuwanie obramowania z zestawu pól ................................................................... 213Wyrównywanie etykiet ........................................................................................... 214Zmiana czcionki kontrolek formularza ................................................................... 215

Podsumowanie .............................................................................................................. 216

Rozdział 9. CSS, czyli arkusze stylów ............................................................. 219Wykorzystywanie zewnętrznych arkuszy stylów ......................................................... 219Jednostki miary ............................................................................................................. 221Układ graficzny ............................................................................................................ 222

Pojemniki ............................................................................................................... 222Rozmiar i rozmieszczenie pojemnika ..................................................................... 225Ustalanie położenia pojemnika ............................................................................... 227

Tło ................................................................................................................................ 235Nadawanie stylu tekstowi ............................................................................................. 236Rodzaje mediów ........................................................................................................... 238Zgodność ...................................................................................................................... 239Podsumowanie .............................................................................................................. 240

Rozdział 10. Podstawy wykonywania skryptów po stronie klienta ...................... 241Czym są skrypty? ......................................................................................................... 241Umieszczanie kodu JavaScript ..................................................................................... 242Język JavaScript ........................................................................................................... 243

Reguły składni języka ............................................................................................ 244Operatory i wyrażenia ............................................................................................ 246Instrukcje ................................................................................................................ 248Pętle ........................................................................................................................ 254Funkcje ................................................................................................................... 258Tablice .................................................................................................................... 259

Tematy zaawansowane ................................................................................................. 259Obsługa zdarzeń ..................................................................................................... 260DOM ...................................................................................................................... 262Walidacja formularzy ............................................................................................. 263

Podsumowanie .............................................................................................................. 265

Page 6: HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW

Spis treści 7

Rozdział 11. Tworzymy witrynę od podstaw ...................................................... 267Wprowadzenie do analizy przypadku — Spaghetti & Cruft ......................................... 268Proces projektowania .................................................................................................... 268

Krok 1. — zdefiniuj cele ........................................................................................ 269Krok 2. — wymyślanie architektury ...................................................................... 269Krok 3. — kreowanie szablonu .............................................................................. 270Krok 4. — wykonanie układu graficznego strony .................................................. 271Krok 5. — łączenie wszystkich części ................................................................... 273Krok 6. — testowanie ............................................................................................. 273

Tworzenie witryny Spaghetti & Cruft .......................................................................... 274Tworzenie dokumentu ............................................................................................ 274Kod nagłówka strony ............................................................................................. 275Wykonanie głównego fragmentu strony ................................................................. 276Tworzenie nawigacji .............................................................................................. 277Tworzenie sloganu i stopki ..................................................................................... 278Kompletny szablon ................................................................................................. 278

Arkusz stylów dla Spaghetti & Cruft ............................................................................ 280Nadanie stylu ciału strony ...................................................................................... 281Styl nagłówka ......................................................................................................... 287Układ strony ........................................................................................................... 292Nadawanie stylów nawigacji .................................................................................. 294Styl stopki .............................................................................................................. 296

Tworzymy rzeczywiste strony ...................................................................................... 297Strona z menu ......................................................................................................... 297Strona recenzji ........................................................................................................ 301Strona kontaktowa .................................................................................................. 303

Podsumowanie .............................................................................................................. 307

Dodatek A Lista znaczników języka XHTML 1.0 Strict .................................... 309

Dodatek B Nazwy kolorów i ich wartości ........................................................ 345

Dodatek C Znaki specjalne ........................................................................... 359

Dodatek D Poziom obsługi CSS w różnych przeglądarkach .............................. 363

Skorowidz ....................................................................................................... 371

Page 7: HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW

Rozdział 5.

Obrazy

Cały rozdział 4. został poświęcony dodawaniu treści tekstowych do stron WWW. Terazprzejdźmy do bardziej multimedialnych aspektów internetu, czyli obrazków. Obrazy sta-nowią nieodłączną część wielu witryn internetowych. Czynią je łatwiejszymi do zapamię-tania i stymulują wizualnie. Elementy graficzne projektu strony zawierają najczęściejlogo witryny i inne motywy pozwalające odróżnić daną witrynę od setek innych.

Obrazy pełnią nie tylko funkcję dekoracyjną, ale również komunikacyjną — są zawar-tością, która nierzadko lepiej niż słowa oddaje sens wypowiedzi. Zdjęcia, ilustracje,logo, ikony, mapy, wykresy i grafy — to sposoby dzielenia się pomysłami, które trudnobyłoby przekazać w tekście. Z drugiej strony warto pamiętać, że nie każdy, kto odwie-dzi witrynę, będzie w stanie zobaczyć obrazy. Na barkach autora witryny spoczywaodpowiedzialność za zapewnienie alternatywnych metod dostępu do zawartości, np.tekstu opisującego zawartość lub znaczenie obrazka.

Obrazy, które stanowią część zawartości dokumentu XHTML, można określać za pomo-cą elementu img. Zostaną one wyświetlone przez przeglądarkę tuż obok tekstu. Doosadzania obrazów można również użyć elementu object, opisywanego w rozdziale 4.Niestety obsługa tego sposobu wstawiania obrazów nie jest jeszcze powszechna, więcwarto pozostać przy sprawdzonym elemencie img. Pamiętaj o tym, by w treści dokumentuumieszczać jedynie obrazy informacyjne — obrazy dekoracyjne określaj w arkuszuCSS dołączonym do strony, by odseparować zawartość od aspektów prezentacyjnych.

W tym rozdziale zajmiemy się sposobami umieszczania obrazów na stronach WWW.Najpierw opowiemy o podstawach działania i obsługi cyfrowych obrazów, wyjaśnimydziałanie elementu wewnętrznego img, zapewniającego osadzanie obrazów w zawartości,a na końcu przejdziemy do opisów wykorzystania arkuszy CSS do wczytywania obrazówpoprawiających wygląd strony. Obrazy tła definiowane w CSS poprawiają wygląd strony,ale nie wpływają na jego strukturę semantyczną.

Page 8: HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW

116 HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW

Jak działają cyfrowe obrazy?Wszystko, co znajduje się w komputerze, przechowywane jest w postaci cyfrowej — ob-razy nie są tu wyjątkiem. Oznacza to, że obraz to tak naprawdę seria zer i jedynek umiesz-czona w pliku. Komputer czyta tablicę cyfr (każda cyfra to bit) i przekształca ją na sy-gnał przesyłany do drugiego urządzenia, które skonwertuje go w postać małych kropekkolorowego światła widzianego przez nasze oko — czerwonych, niebieskich, szarychitd. Plik zawiera dodatkowo instrukcje, w jaki sposób te kropki światła (nazywane pik-selami) powinny zostać ułożone w mozaikę, z której powstanie wynikowy obraz. Po-szczególne piksele tworzące obraz łatwo zauważyć, jeśli dokładnie przyjrzeć się ekra-nowi komputera lub telewizora. Ekstremalne powiększenie prezentuje rysunek 5.1.

Rysunek 5.1.Powiększeniecyfrowego obrazuuwidacznia piksele,z których się składa

Ponieważ obrazy składają się z map bitów, nazywamy je często bitmapami lub ob-razami rastrowymi. To właśnie obrazy bitmapowe stanowią podstawę wyświetlaniaobrazów na stronach WWW. Zapamiętanie koloru i położenia każdego piksela zabieradużo miejsca, szczególnie jeśli jeden obraz składa się z setek tysięcy pikseli w milionachmożliwych kolorów (24-bitowy kolor oznacza ponad 16 milionów różnych kolorów).

Grafika wektorowa

Poza bitmapami istnieje jeszcze jeden sposób przechowywania cyfrowych obrazów — jakozbiór instrukcji matematycznych, które komputer powinien wykonać, aby narysować odpo-wiednie kształty na ekranie lub papierze. Tego rodzaju obrazy nazywa się wektorowymi. Mo-gą one być wyświetlane w dowolnej rozdzielczości bez pogorszenia jakości i modyfikacji wy-glądu. Niestety, obsługa grafiki wektorowej wymaga specjalistycznego oprogramowania,które nie jest dołączane do większości przeglądarek internetowych, więc niemal wszystkieobrazy używane w internecie są obrazami rastrowymi.

Jakiś czas temu pojawiła się inicjatywa wprowadzenia grafiki wektorowej w formacie dosto-sowanym do użycia na stronach WWW. Język SVG (skrót od ang. Scalable Vector Graphics)wzorowany na XML nie jest jak dotąd powszechnie obsługiwany przez przeglądarki, więc jegozastosowanie jest ograniczone. Więcej informacji na temat obsługi tego formatu znajduje sięna witrynie http://www.w3.org/Graphics/SVG/.

Page 9: HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW

Rozdział 5. ♦ Obrazy 117

Obrazy używane w internecie są najczęściej skompresowane w celu zmniejszenia ichrozmiaru, by pobieranie strony WWW mogło się sprawnie odbyć nawet na powol-nych połączeniach internetowych. Redukując liczbę kolorów lub liczbę pikseli, możnałatwo zmniejszyć ogólny rozmiar obrazu. Jeśli kiedykolwiek pobierałeś ogromny obrazz internetu, doskonale zdajesz sobie sprawę, że bywa to denerwujące. Głównym celemkompresji jest maksymalne zmniejszenie rozmiaru pliku przy jednoczesnym zachowa-niu możliwie dobrej jakości.

Formaty obrazów przyjazne stronom WWW

Obrazy kierowane do wykorzystania na stronach WWW można kompresować w trzechformatach: JPEG, GIF i PNG. Każdy z formatów stosuje inny mechanizm kompresji,więc ma różne zalety i wady. Większość przeglądarek graficznych ma wbudowaneoprogramowanie poprawnie interpretujące i renderujące tego rodzaju obrazy. Przeglą-darki mogą nie obsługiwać innych formatów, więc warto trzymać się wspomnianychtrzech. Prawie każdy program do edycji grafiki rastrowej umożliwia zapis obrazu wewszystkich wymienionych formatach.

JPEG

JPEG to skrót od Joint Photographic Experts Group — organizacji, która wymyśliławspomniany format. Algorytm kompresujący redukuje rozmiar wynikowego pliku przezpróbkowanie średnich wartości koloru pikseli i redukcję nadmiarowych pikseli. Podekompresji obrazu usunięte piksele zostają odtworzone na podstawie zapamięta-nych próbek.

Ponieważ format ten powoduje utratę części informacji, nazywamy go formatem strat-nym. Obraz JPEG po dekompresji nigdy nie będzie tej samej jakości, co oryginał.JPEG obsługuje różne poziomy strat jakości — im niższy poziom, tym mniej pikselipozostaje, co zmniejsza rozmiar pliku, ale i pogarsza jakość. Wysoce skompresowaneobrazy JPEG wydają się rozmyte i zawierają tak zwane artefakty, spowodowane al-gorytmem kompresji. Rysunek 5.2 przedstawia trzy wersje zdjęcia Jolene po zapisaniuz różnymi poziomami kompresji (obraz został powiększony dwukrotnie, by poprawićwidoczność artefaktów). Większa kompresja daje mniejszy rozmiar pliku, ale gor-szą jakość.

Co więcej, każda edycja i zapis obrazu JPEG oznacza ponowną kompresję czegoś, cozostało już wcześniej skompresowane. Każda kolejna kompresja coraz bardziej po-garsza jakość obrazu, podobnie jak wielokrotne kserowanie kolejnych kopii. Zawszewarto pozostawiać sobie oryginalną wersję zdjęcia i kompresować ją do formatu strat-nego tylko wtedy, gdy zachodzi potrzeba jego aktualizacji na witrynie.

Format JPEG zaoszczędza miejsca przez redukcję pikseli, ale również zapamiętujewiele informacji o kolorze w stosunkowo niewielkim pliku, co czyni go idealnym for-matem dla fotografii i innych obrazów zawierających dużo kolorów i elementów, któregładko zmieniają odcienie. Pliki JPEG stosują rozszerzenie .jpg lub .jpeg. Krótsza wersjastała się najbardziej popularna, bo niektóre starsze systemy operacyjne nie obsługiwałyrozszerzeń dłuższych niż trzyznakowe.

Page 10: HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW

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 różnymi poziomami kompresji. Wersja po prawej stroniema najmniejszy rozmiar pliku, ale najgorszą jakość

GIF

GIF to skrót od Graphic Interchange Format. W tym systemie kompresja odbywa sięprzez zmniejszenie liczby kolorów używanych w obrazie, przy zachowaniu informa-cji o każdym pikselu. Ponieważ format GIF jest bezstratny, jest doskonały do pracynad logo, ikonami lub innymi grafikami, które mają ostre krawędzie. Obraz GIF możezawierać maksymalnie 256 kolorów, a gdy jest ich mniej, jeszcze bardziej poprawiato stopień kompresji. Grafy, mapy, grafika z dużą liczbą linii i inne obrazy z dużymipowierzchniami w jednolitym kolorze (lub tylko o kilku barwach) są przykładami ob-razów doskonale nadających się do skompresowania algorytmem GIF.

Obrazy GIF mogą zawierać obszary, które są przezroczyste, dzięki czemu możliwejest wyświetlenie tego, co znajduje się za nimi. Każdy z pikseli albo jest w pełni prze-zroczysty, albo całkowicie nieprzezroczysty, więc pojawi się mocno zarysowana gra-nica na styku dwóch obszarów. Wiele programów do edycji grafiki umożliwia wybraniekoloru matującego dla przezroczystych obrazów GIF, co minimalizuje efekt ostrościkrawędzi. Rysunek 5.3 przedstawia obraz GIF na tle szachownicy. Zauważ białe ob-ramowanie (kolor matujący), które będzie doskonale współgrało z docelowym, białymkolorem tła witryny.

Kolejną ciekawą funkcją obrazów GIF jest obsługa krótkich animacji. Obraz możezawierać ciąg klatek, wyświetlanych w określonej sekwencji, co umożliwia tworzenieciekawych, a czasem również bardzo denerwujących, efektów. Oczywiście każda klatkazwiększa rozmiar wynikowego pliku GIF.

Pliki GIF stosują rozszerzenie .gif.

Page 11: HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW

Rozdział 5. ♦ Obrazy 119

Rysunek 5.3.Przezroczystyobraz GIF z białymkolorem matującym.Tło w postaciszachownicyprzedstawionojedynie w celachdemonstracyjnych

PNG

PNG (skrót od ang. Portable Network Graphic) to format wymyślony jako bezpłatnynastępca opatentowanego formatu GIF, który dodatkowo rozwija oryginał w kilkupłaszczyznach. Podobnie jak GIF, PNG może zawierać maksymalnie 256 kolorów(tak zwany kolor 8-bitowy, ponieważ 256 różnych wartości można zmieścić w 8 bitach)i obsługuje przezroczystość. Dzięki innemu algorytmowi kompresji, w niektórych sytu-acjach 8-bitowy PNG bywa mniejszy niż jego odpowiednik w formacie GIF.

Co ważne, PNG występuje również w wariancie 24-bitowym, który obsługuje milio-ny kolorów. Jest w tym względzie podobny do formatu JPEG, ale charakteryzuje sięwiększymi rozmiarami plików, bo nie stosuje stratnego algorytmu kompresji. Najwięk-szą zaletą 24-bitowych obrazów PNG jest obsługa kanału alfa (kanału przezroczysto-ści), który stanowi jakby osobną warstwę, określającą poziomy przezroczystości po-szczególnych pikseli. Podczas gdy przezroczystość w obrazach GIF lub 8-bitowych PNGjest dwustanowa, piksele w 24-bitowym PNG mogą być przezroczyste tylko częścio-wo, co oznacza zmieszanie koloru obrazu i koloru tła w proporcjach zdefiniowanychprzez warstwę alfa. Działanie kanału przezroczystości przedstawia rysunek 5.4. Szachow-nicę widać przez część logo z elipsą, co zapewnia obrazowi dobre dopasowanie dodowolnego tła.

Rysunek 5.4.24-bitowy PNGz kanałemprzezroczystości.Szachownicę widaćprzez częściowoprzezroczystą elipsę

Niestety, wiele starszych przeglądarek, włączając w to przeglądarki Internet Explorerprzed wersją 7, nie obsługuje kanału przezroczystości w 24-bitowych obrazach PNG.Dopóki starsze przeglądarki nadal są popularne, należy bardzo uważać ze stosowaniemobrazów PNG stosujących kanał przezroczystości.

Page 12: HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW

120 HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW

Bity i bajty

Wszystkie dane w świecie komputerów składają się z zer i jedynek, czyli cyfr, stąd nazwatechnologia cyfrowa. Zera i jedynki reprezentują dwa stany przełącznika — 1 oznacza włą-czony, a 0 wyłączony. To baza kodu binarnego, stanowiącego podstawę działania wszystkichkomputerów. Pojedyncza cyfra nosi nazwę bit, a sekwencja 8 bitów to bajt. Przy dużych zbio-rach bajtów stosujemy wielokrotności wartości 1024; 1024 bajty to jeden kilobajt, 1024 kilo-bajty to jeden megabajt, a 1024 megabajty to jeden gigabajt. W ten sposób mierzymy ilośćcyfrowych danych.

Wartość koloru każdego piksela obrazu bitmapowego to ciąg zer i jedynek. Im więcej zer i je-dynek przypada na jeden piksel, tym więcej różnych kolorów można opisać. Najprostszy obrazmoże stosować tylko pojedyncze zero i jedynkę do opisu kolorów — oznacza to obraz mono-chromatyczny, zawierający tylko czerń i biel. Ponieważ każdy bit to dwie wartości, liczba do-stępnych kolorów jest zawsze wartością wynikającą z podniesienia liczby 2 do potęgi równejliczbie bitów. Dla dwóch bitów na kolor mamy dostęp do czterech kolorów (22) z powoduczterech permutacji (00, 01, 10, 11). Dla czterech bitów kolorów może być 16 (24). Dla 8 bi-tów — 256 (28).

Obrazy GIF stosują maksymalnie 8 bitów na piksel, więc mogą stosować najwyżej 256 róż-nych kolorów. JPEG używa 24 bitów na piksel, czyli obsługuje 16 777 216 różnych kolorów,co w wielu przypadkach stanowi granicę ludzkich możliwości rozróżniania kolorów. Format PNGobsługuje wersję 8-bitową oraz 24-bitową.

W 8-bitowych obrazach GIF i PNG tylko jedna wartość zostaje wskazana jako wartość przezro-czystości, więc dany piksel jest widoczny lub niewidoczny. W 24-bitowym formacie PNG każdemupikselowi przypisano osobne 8 bitów określających jego przezroczystość, więc łącznie mamydostęp do 256 poziomów przezroczystości: od 0 oznaczającego pełną przezroczystość do255 oznaczającego pełne krycie.

Umieszczanie obrazówna stronach WWW

Zawartość tekstowa stanowi część dokumentu XHTML. Otaczają ją znaczniki, infor-mujące o znaczeniu poszczególnych słów lub zdań. Obrazy są zewnętrznymi plikamii nie stanowią części dokumentu. Odwołania do obrazów w dokumencie XHTMLoznacza się za pomocą elementu img (lub object, choć nie jest on tak dobrze obsługi-wany). Renderowanie strony zawierającej obrazy jest dwuetapowe: najpierw przeglą-darka pobiera dokument XHTML, a dopiero później wszystkie powiązane z nim ob-razy. Po uzyskaniu obrazka z serwera WWW przeglądarka wyświetla go na ekranie.

<img>

Element img należy traktować jako element zastępowany, ponieważ on sam nigdy niejest wyświetlany. Co więcej, element ten jest elementem pustym, więc należy go za-mykać za pomocą znaków />. Element wymaga wskazania źródła obrazu do wyświe-tlenia przy użyciu atrybutu src. Podany adres URL może być względny lub pełny.

Page 13: HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW

Rozdział 5. ♦ Obrazy 121

Element img wymaga również wskazania atrybutu alt, zawierającego alternatywną treść,czyli tekst opisujący zawartość elementu. Alternatywny tekst pojawi się na stronie, jeśliobrazek nie jest dostępny lub przeglądarka nie jest w stanie wyświetlać obrazów. Coważne, tekst ten pomaga zrozumieć treść strony osobom niedowidzącym. Listing 5.1przedstawia element img jedynie z atrybutami src i alt, czyli całkowitym minimumpozwalającym 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 — określa adres URL pliku z obrazem.

alt — określa alternatywny tekst wyświetlany zamiast obrazu.

Atrybuty opcjonalne

width — szerokość obrazu w pikselach.

height — wysokość obrazu w pikselach.

ismap — informuje, że obraz jest powiązany z mapą po stronie serwera.

usemap — identyfikuje mapę po stronie użytkownika.

longdesc — określa adres URL zawierający rozbudowany opis obrazu.

Atrybuty standardowe

class

dir

id

lang

style

title

xml:lang

Atrybut alt

Wszystkie wystąpienia elementu img muszą zawierać atrybut alt, zapewniający alter-natywną treść, jeśli z jakichś powodów obrazek nie jest widoczny, np. użytkownikniedowidzi, używane oprogramowanie nie potrafi wyświetlać obrazów lub obraz niejest dostępny w podanej lokalizacji. Użycie tekstu opisującego zawartość obrazka po-zwala przekazać choć część informacji, jeśli obrazek nie jest dostępny. Atrybut altmoże zawierać do 1024 znaków (włączając w to spacje), ale warto być możliwie pre-cyzyjnym. Jeśli obraz jest bardzo złożony i wymaga dłuższych wyjaśnień, można sko-rzystać z atrybutu longdesc.

Page 14: HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW

122 HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW

Atrybut alt powinien stanowić zastępnik obrazu, gdy ten nie jest dostępny. Jeśli ob-raz przedstawia zdjęcie kota śpiącego w koszyku, prawidłowy atrybut alt powinienzawierać tekst „mój kot w koszyku” lub „mój szary kot śpi w plecionym koszyku” lubnawet „mój szary, paskowany kot śpi w kuchni, w plecionym koszyku”. Opis pozwalaużytkownikowi wyobrazić sobie zawartość zdjęcia. Rysunek 5.5 pokazuje, w jaki sposóbprzeglądarka Internet Explorer reaguje, jeśli obraz nie znajduje się na serwerze. Zamiastobrazu pojawia się treść alt, która informuje o jego zawartości.

Rysunek 5.5.Przeglądarka wyświetlialternatywną zawartość,jeśli obrazu nie udasię załadować

Atrybut alt powinien być sensownym zastąpieniem obrazu, więc unikaj niewiele mó-wiących tekstów w stylu „firmowe logo”. W atrybucie zawrzyj nazwę firmy, a nie in-formację o jakimś logo, użyj więc tekstu w rodzaju „Moja Firma, logo”. Jeśli obrazekprzedstawia tekst, w atrybucie alt powinna znaleźć się treść tego tekstu.

Atrybut alt nie powinien skupiać się na tym, czy brakujący obraz zawiera logo, zdjęcie,ilustrację, portret, wykres itp. Użycie tekstu „zdjęcie mojego kota” informuje co prawda,że na zdjęciu znajduje się kot, ale nie mówi nic o jego sytuacji i lokalizacji zdjęcia,co może być bardzo istotne. Staraj się przekazać temat przewodni zdjęcia, a nie tylko jegozawartość. Nie stosuj nazwy pliku z obrazem jako tekstu alternatywnego, bo mojkot.jpgniewiele mówi czytelnikowi.

Internet Explorer dla systemu Windows, najpopularniejsza na świecie przeglądarkainternetowa, z niewyjaśnionych przyczyn wyświetla zawartość atrybutu alt jako pod-powiedź, czyli dodatkowy tekst, pojawiający się po umieszczeniu kursora myszy nadobrazem (rysunek 5.6).

Page 15: HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW

Rozdział 5. ♦ Obrazy 123

Rysunek 5.6.Internet Explorerdla systemu Windowsniepoprawniewyświetla wartośćatrybutu altjako podpowiedź

Z tego powodu wielu projektantów stron WWW przez lata błędnie użytkowało atry-but alt, żeby wyświetlać dodatkowe informacje o obrazie jako podpowiedź: „mojeulubione zdjęcie” lub „mój kot o imieniu Kiciuś”. Teksty te nie opisują obrazu ani niezastępują go, więc nie są odpowiednimi wartościami dla alt. Ponieważ tylko InternetExplorer dla Windows stosuje wyświetlanie zawartości alt jako podpowiedzi, użyt-kownicy stosujący inne przeglądarki nie zobaczą tego komunikatu.

Atrybut title, jeśli zostanie użyty, będzie wyświetlany jako podpowiedź w większościprzeglądarek graficznych. Atrybut ten jest odpowiedni do umieszczania opisu, stanowią-cego uzupełnienie treści obrazu. Jeśli zarówno alt, jak i title są dostępne dla obrazu(listing 5.2), przeglądarka Internet Explorer dla Windows zastosuje tekst zawarty w title.

Listing 5.2. Element img z opisowym atrybutem alt oraz i ogólnym atrybutem title

<img src="/images/pizza.jpg" title="Nasza sławna Pizza Neapoli" alt="Cała pizzaz zielonymi oliwkami i roztopionym serem mozzarella" />

Co gorsza, niektórzy projektanci całkowicie unikają atrybutu alt, by tylko uniknąćwyświetlania podpowiedzi w przeglądarce Internet Explorer. Element img bez atry-butu alt nie tylko nie jest poprawny z punktu widzenia XHTML, ale również utrud-nia życie osobom niedowidzącym. System czytający strony na głos lub przeglądarkatekstowa po prostu poinformują o istnieniu obrazu bez żadnych dodatkowych danychlub przeczytają zawartość atrybutu src. Pominięcie alt czyni z istotnego obrazu bez-wartościowy znacznik.

Informacyjny tekst alt jest szczególnie ważny, jeśli obraz stanowi część łącza lub jestprzyciskiem powodującym na przykład wysłanie formularza. Tego rodzaju obrazy pełniąokreśloną funkcję, nie są tylko treścią informacyjną. Jeśli obraz stanowi część łącza,

Page 16: HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW

124 HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW

zastosowanie w nim poprawnego atrybutu alt jest niezwykle istotne. Rysunek 5.7 przed-stawia stronę WWW z nawigacją stosującą obrazki. Odwiedzający z dobrym wzro-kiem bez problemu skorzysta ze strony, nawet jeśli nie zawiera ona atrybutów alt.

Rysunek 5.7. Witryna stosuje obrazki jako elementy wskazujące łącza do innych stron.Rysunek przedstawia wygląd strony w przeglądarce Firefox

Rysunek 5.8 przedstawia ten sam tekst wyświetlony w przeglądarce Lynx — przeglą-darce tekstowej, która wyświetla nazwę pliku obrazu, jeśli nie wskazano właściwegoopisu w atrybucie alt. Bez atrybutów alt nawigacja w tej przeglądarce jest praktyczniebezużyteczna.

Rysunek 5.8.Przeglądarka Lynxpokazuje obrazybez atrybutów alt,stosując nazwy plików.Uniemożliwia tonawigację w witrynie,bo wymuszana użytkownikuzgadywanie, gdzie mogąprowadzić łącza

Page 17: HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW

Rozdział 5. ♦ Obrazy 125

Obrazy, które pełnią rolę dekoracyjną, czyli nie stanowią części rzeczywistej treści,nadal wymagają atrybutu alt, ale w takiej sytuacji należy użyć pustej wartości alt(alt=""), by wskazać, że są one nieistotne. Jako dodatkowy bonus Internet Explorernie wyświetli podpowiedzi, gdy znajdzie pusty atrybut alt.

Wiele osób niepoprawnie mówi o znaczniku alt, gdy tak naprawdę ma na myśliatrybut alt. To bardzo mylące, ponieważ alt nie jest i nigdy nie był znacznikiem.

Atrybut longdesc

Opcjonalny atrybut longdesc zawiera adres URL wskazujący inną stronę WWW z peł-nym wyjaśnieniem znaczenia obrazu, jeśli mógłby on nie zmieścić się w atrybucie alt.Jest to szczególnie przydatne dla grafów i wykresów, które mają złożoną reprezenta-cję, ale można je również zaprezentować w postaci tabeli. Listing 5.3 przedstawiaelement img z atrybutem longdesc. Obraz przedstawia wykres kołowy, który stosunko-wo trudno opisać w atrybucie alt.

Listing 5.3. Element img z atrybutem longdesc

<img src="/images/piechart.gif" alt="Wykres kołowy przedstawiający względną popularność różnych rodzajów dodatków do pizzy" longdesc="/dodatki.html" />

Rysunek 5.9 przedstawia wykres kołowy oraz te same informacje przedstawione w po-staci tabeli. Dane tabelaryczne są adresowane do osób, które z różnych powodów niesą w stanie obejrzeć i zinterpretować wykresu. Więcej informacji na temat tabel pojawisię w rozdziale 7.

Rysunek 5.9. Dane w postaci wykresu i ich tabelaryczny odpowiednik

Atrybuty width i height

Obraz zostanie wyświetlony w przeglądarce zgodnie ze swoim naturalnym rozmia-rem. Ponieważ jednak przeglądarka pobiera obrazy po wczytaniu całego kodu HTML,nie zna rzeczywistych rozmiarów obrazów, dopóki ich nie pobierze. Po pobraniu każ-dego obrazu i poznaniu jego rozmiarów zmieni układ tekstu, co może być denerwujące,

Page 18: HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW

126 HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW

jeśli użytkownik rozpoczął już czytanie tekstu. Stosując atrybuty width i height w ele-mencie img, informujemy przeglądarkę, ile miejsca powinna zarezerwować na obrazi że ma renderować tekst tak, jakby obraz został już wczytany.

Jeśli wartości atrybutów width i height nie są takie same jak naturalne wymiary obrazu,przeglądarka przeskaluje obraz, by dostosować go do atrybutów. Jeśli tylko to możli-we, unikaj skalowania obrazów w ten sposób. Skalowanie za pomocą przeglądarkinajczęściej nie zapewnia najlepszej jakości. W przypadku powiększania pojawią sięduże piksele. Zmniejszanie obrazu w ten sposób nie ma dużych efektów ubocznychw kwestii jakości, ale wymaga pobrania obrazu o pełnym rozmiarze, co również niejest dobre. Najlepiej jeśli atrybuty pasują do naturalnych wymiarów obrazu. Skalowa-nie lepiej przeprowadzać w wyspecjalizowanym programie graficznym.

Do określania wymiarów obrazu, można również użyć właściwości width i heightz CSS. Jeśli element ma określone atrybuty i dodatkowo nadany styl z wymiarami,styl CSS nadpisze wartości określone przez atrybuty.

Atrybuty usemap i ismap

Mapa obrazkowa to obraz, w którym niektóre obszary zostały oznaczone jako łącza.W ten sposób łączami są tylko fragmenty obrazu, a nie jego całość. Atrybut usemapokreśla element map, który ma być użyty do wyświetlenia mapy obrazkowej działają-cej po stronie klienta. Atrybut ismap wskazuje użycie mapy działającej po stronieserwera (tego rozwiązania należy unikać z powodu braku przydatności dla osób nie-dowidzących). Więcej informacji na temat działania map obrazkowych znajduje sięw rozdziale 6., opisującym hiperłącza.

Wycofane atrybuty prezentacyjne

Starsze wersje HTML definiowały kilka atrybutów prezentacyjnych dla elementu img,ale zostały one wycofane na rzecz CSS. Żaden z tych elementów nie jest poprawnyw XHTML, ale wymieniamy je, by pokazać, jakie są ich odpowiedniki w CSS:

align — określa ułożenie obrazu względem otaczającego go tekstu. Dostępnymiwartościami są: left, right, top, middle oraz bottom. Wyrównywanie do lewejlub do prawej łatwo uzyskać za pomocą właściwości float. Trzy pozostałewyrównania są dostępne za pomocą właściwości vertical-align.

border — określa szerokość obramowania, w którym znajdzie się obraz,jeśli będzie stanowił część hiperłącza. Obecnie ten sam efekt udostępniawłaściwość border-width z CSS.

hspace — określa poziomy odstęp po lewej i po prawej stronie obrazu.Został zastąpiony przez właściwości margin-left i margin-right.

vspace — określa pionowy odstęp na górze i na dole obrazu. Został zastąpionyprzez właściwości margin-top i margin-bottom.

Page 19: HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW

Rozdział 5. ♦ Obrazy 127

Niektóre starsze dokumenty zawierają dodatkowo atrybut lowsrc. Określa on mniejsząwersję obrazka, która była pobierana przed rozpoczęciem pobierania właściwejwersji. Jest to jednak bardzo przestarzały atrybut, stosowany jedynie przez starszewersje przeglądarki Netscape Navigator. Obecnie nie należy go stosować.

Obrazy w kontekście innych elementówElement img jest elementem wewnętrznym, więc może znajdować się w tym samymwierszu co tekst. W takiej sytuacji będzie spoczywał na dolnej krawędzi podstawytekstu, nazywanej linią bazową. Listing 5.4 przedstawia element img umieszczony w aka-picie 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="Zdjęcie pizzyz naszego lokalu" />

Spaghetti &#38; Cruft otworzyła swoje podwoje w 1999, oferując klientom z regionuRiverbend pizze i makarony. Pizze wytwarzamy na miejscu ręcznie, używając najlepszychskładników, a następnie wypiekamy do perfekcji w piecu opalanym drewnem. Pizzęsprzedajemy w całości lub w kawałkach. Dodatkowo oferujemy ją na wynos i dowozimy doklienta.</p>

Rysunek 5.10 przedstawia wygląd akapitu w przeglądarce graficznej. Zauważ, że spódobrazu znajduje się w tym samym miejscu, co linia bazowa tekstu.

Rysunek 5.10. Zauważ, że obraz został wyświetlony w jednej linii z tekstem (zdjęcie: Jeremy Keith)

Jeśli obraz, tekst lub oba te elementy naraz znajdują się w elementach blokowych(div, p itp.), górę bierze standardowe zachowanie bloków, więc obraz i tekst pojawiąsię w osobnych wierszach. Listing 5.5 przedstawia tę samą zawartość, ale tym razemelement img znalazł się poza akapitem we własnym 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=" Zdjęcie pizzyz naszego lokalu" /></div>

<p>Pizze wytwarzamy na miejscu ręcznie, używając najlepszychskładników, a następnie wypiekamy do perfekcji w piecu opalanym drewnem.</p>

Page 20: HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW

128 HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW

Rysunek 5.11 przedstawia wynik uzyskany w przeglądarce graficznej. Obraz (a do-kładniej element div) i tekst znajdują się w osobnych wierszach.

Rysunek 5.11. Elementy p i div są elementami blokowymi, więc pojawiają się we własnych wierszach

Wybierając sposób umieszczenia obrazu (wewnątrz lub poza otaczającym go tekstem),pomyśl o jego znaczeniu. Czy stanowi on część tej samej myśli, która pojawia sięw tekście? Jeśli tak, umieść go w akapicie. Jeśli obraz ukazuje sytuację luźno związa-ną z tekstem, warto umieścić go osobno.

Pamiętaj o tym, że element body może zawierać wyłącznie elementy blokowe jakoswoje dzieci. Element img jest elementem wewnętrznym, więc nie można umieścić gobezpośrednio w elemencie body. Aby uzyskać poprawny kod XHTML, musisz umie-ścić go w elemencie blokowym.

Gdy dwa obrazy znajdą się obok siebie, zachowują się tak samo jak inne elementywewnętrzne — znajdą się obok siebie w jednej linii i na tym samym poziomie. Ob-razy, podobnie jak słowa, automatycznie przechodzą do następnego wiersza, jeśli sięnie mieszczą.

Otaczanie obrazu tekstemW niezliczonej liczbie czasopism, książek i gazet tekst otacza obraz umieszczony w ko-lumnie, w taki sposób jak strumień omijający przeszkodę. We wcześniejszych wersjachHTML należało zastosować atrybut align (wycofany już z użycia). Obecnie do uzy-skania tego samego efektu służy właściwość float z CSS.

Właściwość przyjmuje trzy wartości: left, right lub none. Gdy element staje się ele-mentem opływanym, przesuwa się możliwie daleko w jedną ze stron (prawą lub lewą)aż do napotkania granicy bloku lub innego opływanego elementu. Cały tekst lub inneelementy, które pojawią się po nim, będą go opływały. Domyślna wartość none służydo wycofywania właściwości float nałożonej na element przez inną regułę.

Listing 5.6 przedstawia kod HTML zawierający obraz i blok tekstu (oba elementyznajdują się w jednym akapicie). Element img wykorzystuje atrybut class, by ułatwićdostęp do niego z poziomu CSS.

Page 21: HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW

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="Zdjęciepizzy z naszego lokalu" />

Spaghetti &#38; Cruft otworzyła swoje podwoje w 1999, oferując klientom z regionuRiverbend pizze i makarony. Pizze wytwarzamy na miejscu ręcznie, używając najlepszychskładników, a następnie wypiekamy do perfekcji w piecu opalanym drewnem. Pizzęsprzedajemy w całości lub w kawałkach. Dodatkowo oferujemy ją na wynos i dowozimy doklienta.</p>

Obraz należy do klasy figure. Listing 5.7 przedstawia dla tej klasy regułę CSS, którawskazuje, że obraz powinien przesunąć się w lewo i być opływany z prawej strony.

Listing 5.7. Reguła CSS dla klasy figure

.figure { float: left;}

Rysunek 5.12 przedstawia efekt połączonych obu fragmentów kodu. Obraz przesunąłsię na lewą stronę akapitu, a tekst go opływa.

Rysunek 5.12.Obrazek przesunął sięw lewo, więc tekstmoże go opływać

Obraz znajduje się w tej samej linijce, co tekst, ale został dosunięty do lewej stronyi dowiązany do góry wiersza, w którym się pojawił. Ponieważ ma większy rozmiarniż otaczający go tekst, przechodzi poniżej linii bazowej. W jednym z wcześniejszychprzykładów obraz zwiększał wysokość wiersza tekstu i czynił go trudniejszym do od-czytania. Aby odsunąć nieco tekst od obrazu, warto zastosować margines, rozszerzającwcześniejszą regułę CSS (listing 5.8).

Listing 5.8. Dodanie marginesów do reguły klasy figure

.figure { float: left; margin-right: 1em; margin-bottom: .5em;}

Page 22: HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW

130 HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW

W tym konkretnym przypadku chcemy jedynie ustawić prawy i dolny margines, po-nieważ górna i lewa strona nie kolidują z żadnymi innymi elementami. Pozostawienietych dwóch krawędzi z domyślnym marginesem powoduje dosunięcie obrazu do nie-widocznej krawędzi akapitu. Zauważ, że po wprowadzeniu zmian (rysunek 5.13) obrazma więcej miejsca. Tekst nadal go opływa, ale z uwzględnieniem marginesu.

Rysunek 5.13.Zastosowaniemarginesów dla obrazulepiej oddziela good tekstu

Obrazy tłaStosując właściwość background-image z CSS, bardzo łatwo dodać dekoracyjny obrazna stronie, przy jednoczesnym unikaniu zaśmiecania go elementami prezentacyjnymi.Tylko obrazy, które stanowią treść strony, powinny znaleźć się w kodzie XHTML.Niemalże dowolnemu elementowi CSS można nadać obraz tła. Tło będzie zajmowałodokładnie taką samą przestrzeń jak element. Obraz tła domyślnie ułoży się w kafelkiw obu kierunkach, zaczynając od lewego górnego narożnika. Efekt nazywamy kafelko-waniem, bo przypomina kafelki ułożone w kuchni lub łazience.

Listing 5.9 przedstawia regułę CSS, która spowoduje dodanie obrazu tła dla elementubody. Obraz określono za pomocą adresu URL, stosując słowo kluczowe url oraz na-wiasy okrągłe.

Listing 5.9. Obraz tła zastosowany dla elementu body

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

Obraz układa się w kafelki, by wypełnić całe okno przeglądarki po zrenderowaniudokumentu (rysunek 5.14).

Domyślny tryb kafelkowania łatwo zmienić, stosując właściwość background-repeat,określając, że powtarzanie powinno następować tylko w pionie, tylko w poziomie lubwcale. Listing 5.10 rozszerza wcześniejszą regułę, deklarując, że obraz tła powinienpowtarzać się tylko w osi X.

Page 23: HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW

Rozdział 5. ♦ Obrazy 131

Rysunek 5.14.Obrazek tła powtarzasię w obu kierunkachtyle 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 tło powtarza się tylko w poziomie.

Rysunek 5.15. Tło powtarzane w poziomie, ale nie w pionie

Użycie wartości repeat-y spowoduje powtarzanie tła tylko w pionie. Listing 5.11 przed-stawia zmodyfikowany kod CSS.

Listing 5.11. Wartość repeat-y spowoduje powtarzanie tła w pionie

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

Rysunek 5.16 przedstawia efekt wykonania modyfikacji. Tło powtarza się tylko w osi Y.

Page 24: HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW

132 HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW

Rysunek 5.16.Teraz tło powtarza sięw pionie,a nie w poziomie

Domyślną wartością właściwości background-repeat jest repeat. Można to wykorzy-stać do nadpisania wartości zmienionej przez inną regułę. Aby wyłączyć powtarzanietła, wystarczy użyć wartości no-repeat, co przedstawia listing 5.12.

Listing 5.12. Wartość no-repeat zapobiega powtarzaniu tła

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

Rysunek 5.17 przedstawia efekt działania wartości no-repeat. Obraz tła pojawił siętylko raz.

Rysunek 5.17.Obraz tła pojawia siętylko raz (nie jestpowtarzany)

Jeśli obraz tła jest znacznie większy od właściwej treści, to określa ona obszar, do któ-rego zostanie przycięte tło. Na rysunku 5.18 tło jest znacznie większe niż element, do któ-rego zostało przypisane (element div), więc jego znaczna część pozostaje niewidoczna.

Rysunek 5.18.Jedynie część obrazutła jest widoczna,ponieważ obrazokazał się znaczniewiększy niż element,dla którego gozastosowano

Page 25: HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW

Rozdział 5. ♦ Obrazy 133

Jeśli element stanie się większy — przez dodanie nowej zawartości, zwiększenie roz-miaru tekstu lub wskazanie jawnie jego rozmiaru za pomocą CSS — więcej obrazu tłapojawi się na ekranie komputera (rysunek 5.19).

Rysunek 5.19.Dodanie następnegoakapitu zwiększaobszar obejmowanyprzez tło, więc widaćwięcej obrazu tła

Tekst może być trudny do odczytania, jeśli obraz tła jest bardzo kolorowy i nie za-pewnia odpowiedniego kontrastu z tekstem. Bądź ostrożny w doborze obrazów tła, bynie pogarszały one czytelności tekstu.

Nie zapominaj również o podaniu jednokolorowego tła (właściwość background-color),które zostanie użyte, jeśli obraz nie będzie dostępny. Niech zwykłe tło również za-pewnia odpowiedni kontrast względem tekstu. Większość przeglądarek domyślnie sto-suje czarny tekst i białe tło, ale jeśli chce się zastosować jasne tło, warto dodatkowoustawić ciemne tło. Obraz tła zawsze przykryje zwykłe jednokolorowe tło, ale jedno-kolorowe tło pozostanie, gdy obrazu nie uda się wczytać.

Pozycjonowanie obrazu tła

Domyślnie przeglądarka dosuwa obraz tła do lewego górnego narożnika elementu, doktórego został przypisany. Jest to również miejsce rozpoczynania kafelkowania. Wła-ściwość background-position steruje położeniem początku obrazu tła.

Właściwość przyjmuje dwie wartości. Pierwsza określa położenie w poziomie, a dru-ga w pionie. Położenie w pionie zawsze występuje jako drugie. Gdybyśmy podali tylkojedną wartość, zostanie ona zaklasyfikowana jako położenie w poziomie. Listing 5.13przedstawia kod CSS, powodujący umieszczenie obrazu tła w prawym dolnym naroż-niku elementu div.

Listing 5.13. Dodanie deklaracji background-position

div { background-image: url(/images/background.gif); background-repeat: no-repeat; background-position: right bottom;}

Page 26: HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW

134 HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW

Rysunek 5.20 przedstawia wynik — obraz tła znajduje się teraz w prawym dolnymnarożniku tekstu. Ponieważ tło jest przypisane do elementu div, a element ten do-myślnie automatycznie dostosowuje się do długości tekstu, obraz tła nie znajduje sięw prawym dolnym narożniku okna, ale w prawym dolnym narożniku elementu.

Rysunek 5.20. Obraz znajduje się teraz w prawym dolnym narożniku, ale nadal się nie powtarza

Wartość właściwości background-position można określać na kilka sposobów: za po-mocą słów kluczowych, długości lub procentów. Możliwymi słowami kluczowymi dlapołożenia w poziomie są left, center i right, a dla położenia w pionie top, centeri bottom. Słowo center jest dostępne dla obu kierunków: dla poziomu oznacza połowęszerokości, a dla pionu połowę wysokości.

Długość we właściwości położenia tła to dowolna wartość liczbowa z jednostką, czylipikselami, milimetrami lub em. Dla długości 0 nie potrzeba żadnej jednostki, ponie-waż 0px to dokładnie to samo co 0em lub 0mm. Listing 5.14 przedstawia dwie długościzastosowane do pozycjonowania tła: 40 pikseli dla położenia w poziomie i 3 em dlapołożenia w pionie.

Listing 5.14. Zastosowanie długości 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 tła umieszczonym 40 pik-seli od górnego narożnika elementu i 3 em od jego lewej krawędzi, czyli zgodnie z da-nymi wskazanymi w CSS.

Po podaniu położenia w procentach przeglądarka w trakcie renderingu uwzględnia za-równo rozmiar elementu, jak i rozmiar obrazu tła. Obraz umieszczany 75% od lewejstrony elementu zostanie umieszczony w 3/4 szerokości elementu względem 3/4 rozmiaruobrazka. Użycie wartości 50% spowoduje użycie jako punktu referencyjnego środkaobrazu i dodatkowo ustawienie go na środku elementu, co ilustruje rysunek 5.22.

Page 27: HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW

Rozdział 5. ♦ Obrazy 135

Rysunek 5.21. Obraz tła umieszczony dokładnie tam, gdzie wskazuje CSS

Rysunek 5.22. Obraz tła umieszczony 50% od góry i od lewej strony spowoduje umieszczenieobrazu tła dokładnie na środku elementu

Opisany system mierzenia nie jest stosowany dla standardowych jednostek. One zaw-sze powodują mierzenie od lewego górnego narożnika elementu i lewego górnego na-rożnika obrazu, co ilustruje rysunek 5.23.

PodsumowanieObrazy to bardzo ważny aspekt każdej witryny internetowej, bo to one czynią ją uni-katową i rozpoznawalną. Co więcej, pewne zagadnienia znacznie łatwiej wyrazićgrafiką niż słowami. Obrazy niosące treść związaną z witryną należy umieszczać zapomocą elementu img i dodatkowo zawsze stosować tekst alternatywny dla osób nie-dowidzących lub systemów wyszukiwawczych. Obrazy związane z prezentacją nie po-winny znaleźć się w treści dokumentu, ale zostać określone za pomocą CSS i właściwości

Page 28: HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW

136 HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW

Rysunek 5.23. Zastosowanie długości powoduje użycie dokładnie tych danych,jakie zostały wskazane w CSS. Obliczenia dotyczą lewych górnych narożników elementu i obrazu

background-image. CSS umożliwia dokładne pozycjonowanie obrazu tła oraz wpły-wanie na obrazy umieszczone w tekście, tak aby lepiej integrowały się z zawartościądokumentu.

Trzema popularnymi formatami kompresji obrazów używanymi na stronach WWW są:GIF, JPEG i PNG. Wykorzystuj obrazy JPEG dla zdjęć, obrazy GIF i 8-bitowe PNGdla tekstu i ilustracji oraz 24-bitowe PNG dla kanału przezroczystości.

Zapewne bardzo często będziesz korzystał z elementów i właściwości przedstawio-nych w tym rozdziale, aby wzbogacić szatę graficzną własnej witryny. Strony WWWnie byłyby stronami WWW, gdyby nie jeden element — hiperłącza. To właśnie nimizajmiemy się w następnym rozdziale. To dzięki nim internet „żyje własnym życiem”.