Issuu on Google+


Idź do • Spis treści • Przykładowy rozdział • Skorowidz Katalog książek • Katalog online • Zamów drukowany katalog Twój koszyk • Dodaj do koszyka Cennik i informacje • Zamów informacje o nowościach • Zamów cennik Czytelnia • Fragmenty książek online

Kontakt Helion SA ul. Kościuszki 1c 44-100 Gliwice tel. 32 230 98 63 e-mail: helion@helion.pl © Helion 1991–2011

Podręcznik HTML5. Smashing Magazine Autor: Bill Sanders Tłumaczenie: Agata Smoczyńska ISBN: 978-83-246-3317-3 Tytuł oryginału: Smashing HTML5 (Smashing Magazine Book Series) Format: 168×237, stron: 352 • Gruntowny przegląd nowych znaczników, atrybutów i wartości w HTML5 • Projektowanie struktury i nawigacji strony oraz korzystanie z grafiki, plików audio i wideo • Sposoby na poprawne wyświetlanie witryny w różnych przeglądarkach Niezbędny podręcznik dla webmasterów i programistów, którzy chcą szybko zacząć pracę z HTML5! Po latach intensywnego rozwoju i niemal corocznego wprowadzania nowych, ulepszonych wersji nagle w 2000 roku dla języka HTML nastały czasy nadzwyczajnego jak na warunki sieci zastoju. Stary, dobry… ale mocno już wysłużony HTML4 zdecydowanie potrzebował gruntownych zmian. Przełom nastąpił w 2008 roku, gdy organizacja W3C opublikowała pierwszy szkic nowego standardu HTML5. Spotkał się on z tak entuzjastycznym przyjęciem, że od samego początku otrzymał mocne wsparcie rynku - popularne przeglądarki, począwszy od Google Chrome, przez Firefoksa czy Safari już zaczęły na wyścigi go implementować. Wciąż rozwijany HTML5 ma do zaoferowania sporo nowych, fantastycznych możliwości, które dają ambitnym webmasterom i programistom spore pole do popisu! Czy jesteś gotów po nie sięgnąć? Jeśli skorzystasz z tej niezwykłej książki, będziesz mieć w zasięgu ręki całą wiedzę, której potrzebujesz, by zacząć działać! Ten podzielony na cztery części podręcznik pokaże Ci, jak zacząć pracę z najnowszą wersją HTML5, używać znaczników tego języka oraz różnych atrybutów i wartości. Dowiesz się, jak pracować z CSS oraz zapewniać swoim stronom doskonały wygląd i poprawne wyświetlanie na wszelkich możliwych nośnikach - od monitora komputera po ekran telefonu komórkowego. Zobaczysz także, jak zoptymalizować media w sieci, i zaczniesz sprawnie korzystać z tekstu, grafiki, audio, wideo czy nawigacji w przeglądarkach kompatybilnych z HTML5. Nauczysz się używać ciekawego, służącego do rysowania elementu canvas, a żebyś mógł z nim efektywnie pracować, autor wprowadzi Cię także w podstawy JavaScriptu i obiektowego modelu dokumentu (DOM) w HTML5. Ponadto zaczniesz stosować PHP do przetwarzania informacji wprowadzanych w postaci formularzy oraz przeczytasz o nowych obiektach geolocation i ich zaskakujących właściwościach. Dzięki tej książce nauczysz się m.in. jak: • pracować ze znacznikami HTML5 i CSS3 • zaprojektować strukturę witryny • pracować z wartościami kolorów • stworzyć przejrzystą i intuicyjną nawigację strony • umieszczać grafikę oraz pliki audio i wideo na stronach HTML5 • wykorzystywać moc elementu canvas w HTML5 • korzystać z formularzy HTML5 • tworzyć interaktywność, zagnieżdżać obiekty i przechowywać informacje Wykorzystaj wszystkie możliwości, jakie oferuje HTML5 – twórz świetnie wyglądające, interaktywne strony nowej generacji!


Spis treści

Wstęp

13

CZĘŚĆ I

JĘZYK SIECI

17

Rozdział 1

Wprowadzenie do HTML5 Tworzenie przy pomocy znaczników: przegląd

19 20

Wprowadzanie nowych elementów HTML5 Korzystanie z kontynuowanych znaczników z HTML4 Pomijanie lub zastępowanie niekontynuowanych znaczników

Wybieranie przeglądarki interpretującej HTML5 Mozilla Firefox Google Chrome Opera Apple Safari Microsoft Internet Explorer 9 Przegląd różnych wyświetleń

Rozdział 2

28 29 30 32 32 33 34

Do dzieła!

35

Znajomość znaczników HTML5 Parsowanie kodu

37 38

Znajomość HTML5 i związanych z nim plików Dowiadujemy się, które pliki działają w sieci

Dowiadujemy się, jak działają znaczniki Zaczynamy od podstawowych znaczników HTML Opisywanie strony za pomocą znaczników Rozpoznawanie części znacznika Znajomość roli znacznika komentarza

Rozdział 3

21 23 27

38 40

41 41 42 43 45

Zagnieżdżanie znaczników Do dzieła!

48 50

Znaczniki tekstowe i odrobina CSS3 Podstawy

53 54

Trochę więcej organizacji Zastanówmy się nad strukturą

Dodajmy więcej struktury HTML5 Dodawanie stylu tekstowi za pomocą CSS3 Nadawanie stylu elementom HTML5 za pomocą właściwości CSS3 Tworzenie klas CSS3 i identyfikatory

Do dzieła!

55 57

59 62 62 69

73


SPIS TREŚCI Rozdział 4

Praca z wartościami kolorów Znajomość kolorów RGB Używanie nazw RGB i wartości procentowe HSL Ustawianie RGB za pomocą liczb całkowitych Ustawienia heksadecymalne: myślenie jak Twój komputer

Dodawanie kolorom przejrzystości Tworzenie schematu koloru Z koloru podstawowego Z obrazu

Integrowanie Twojej palety kolorów z Twoją stroną Do dzieła!

75 76 76 77 80 81

84 86 86 87

88 90

CZĘŚĆ II STRONY, WITRYNY I PROJEKTY

93

Rozdział 5

95

Tworzenie strony Ustawianie bazy startowej Dodawanie witrynie charakteru za pomocą metadanych Kiedy skrypt jest potrzebny

Projektowanie za pomocą sekcji Porządkowanie zawartości Twojej strony Akapity, podziały i listy Grupowanie bez dzielenia Rysunki i podpisy

8

Organizacja plików Odwołania do obrazków i ich organizacja Odniesienie bezwzględne Odniesienie względne

Rozdział 6

100 104 104 108 111

113 113 113 114

Do dzieła!

116

Wyświetlanie danych w tabelach Właściwości tabeli CSS3 dla HTML5 Tabele i dane tabelaryczne

117 118 121

Podstawowe elementy tabeli

Nadawanie stylu tabeli Dodawanie obramowania za pomocą CSS3 Oddzielanie danych za pomocą kolorów tła

Tabele złożone Korzystanie z atrybutów rowspan i colspan Praktyczne rozpiętości w tabelach

Rozdział 7

96 97 98

121

122 123 125

127 128 130

Do dzieła!

133

Wszystko o odnośnikach Element link i jego główne atrybuty

135 136

Alternatywne arkusze stylów Ikony odnośników Wstępne pobieranie Inne atrybuty odnośnika

136 139 140 141


SPIS TREŚCI Odnośniki strony Więcej o atrybucie rel Kotwice strony i identyfikatory Cele

Korzystanie z elementu iframe Zagnieżdżanie stron internetowych

Rozdział 8

141 142 145 148

150 151

Do dzieła!

153

Strategie nawigacji Nawigacja w sieci

155 156

Nawigacja projektanta i użytkownika Nawigacja globalna

Korzystanie z JavaScriptu do wzywania strony z odnośnikiem Tworzenie spójności Nawigacja pionowa i pozioma Zastosowanie pseudoklas CSS3 Znajomość mechanizmów HTML5 w nawigacji pionowej Korzystanie z ikon grafiki w nawigacji

Jednostronicowe witryny internetowe z pływającymi ramkami Odwoływanie się do grafiki Tworzenie i wykorzystywanie miniatur Korzystanie z pływających ramek na urządzeniach przenośnych

156 157

163 165 167 167 169 172

172 173 173 175

Do dzieła!

176

CZĘŚĆ III MEDIA W HTML5

179

Rozdział 9

181 182

Grafika Podstawy plików obrazu w HTML5 Liczy się format i piksele Zachowywanie warstw w grafikach sieci

Praca nad rozmiarem plików graficznych

182 184

185

Korzystanie z programu graficznego do modyfikowania rozmiaru pliku

187

Umieszczanie obrazków i tworzenie elastycznych stron internetowych

195

Umieszczanie obrazka za pomocą atrybutu align Elastyczny rozmiar obrazka z odrobiną JavaScriptu Aplikacja dla plików dynamicznych SVG z plików Adobe Illustrator CS5

Do dzieła! Rozdział 10 Dźwięk Podstawy audio w HTML5 Atrybut autoplay Atrybut controls Atrybut preload Atrybut loop

Obsługa audio przez przeglądarkę Uratowany przez źródło: plan B Atrybut type Parametr codec typu źródłowego

195 197 200

202 205 206 206 206 208 209

209 210 210 211

9


SPIS TREŚCI Tworzenie plików audio

212 214

Efekty dźwiękowe: FX na Twoim komputerze

215

Dźwięk zmiany Integrowanie efektów dźwiękowych ze stroną

Do dzieła! Rozdział 11 Wideo Tworzenie strony HTML5 z wideo Wideo i kompatybilność przeglądarki Tworzenie formatu WebM: program Miro Video Converter Konwersja na 3GP: program Adobe Media Encoder CS5

Tworzenie filmów do zamieszczania w sieci Kamery internetowe Małe kamery wideo Standardowe kamery wideo Zrzuty wideo z ekranu

10

212

Rejestrator dźwięku w systemie Windows 7 Sound System w systemie Mac OS X

215 217

220 221 222 224 225 226

228 228 229 230 230

Wideo i atrybuty źródła

231

Atrybut type Atrybut poster Atrybut preload Atrybut loop Atrybut autoplay Atrybut controls Atrybut width i height

231 232 233 233 234 234 235

Do dzieła!

235

CZĘŚĆ IV DYNAMICZNE ZNACZNIKI HTML5 ORAZ ODROBINA JAVASCRIPTU I PHP

237

Rozdział 12 Dodajemy odrobinę języka JavaScript Umieszczanie JavaScriptu na stronach HTML5

239 240

JavaScript w plikach zewnętrznych Funkcje Procedury obsługi zdarzeń

Korzystanie z obiektowego modelu dokumentu Jak DOM współdziała z Twoją stroną i JavaScriptem Elementy HTML5 i DOM

Przechowywanie tymczasowych wartości Zmienne Tablice Obiekty

Do dzieła! Rozdział 13 Korzystanie ze znacznika canvas na stronie Podstawy elementu canvas Prosta implementacja elementu canvas Obrazki w elemencie canvas i cienie

240 241 242

246 246 248

250 250 254 255

258 259 260 262 269


SPIS TREŚCI Tworzenie złożonych rysunków za pomocą elementu canvas Linie i ruch Krzywe

274 275 279

Do dzieła!

285

Rozdział 14 Dodawanie formularzy Dodawanie formularza

287 288

Główne atrybuty formularza Formularz jako część DOM

Wiele rodzajów danych wejściowych Atrybut list, rodzaj adresu URL i listy danych Pola typu radio i checkbox ułatwiające wybieranie elementów danych wejściowych Wybieranie daty

Do dzieła! Rozdział 15 Zagnieżdżanie obiektów i przechowywanie informacji Geolokalizacja Znajdywanie szerokości i długości geograficznej Pobieranie mapy Praca z właściwościami geolokalizacji i wtyczka Google Earth

Przechowywanie w HTML5 Przechowywanie w sesji Przechowywanie lokalne

Dodawanie i dostosowywanie obiektów na stronach HTML5 Dodawanie obiektu Dostosowywanie obiektu

Do dzieła! Rozdział 16 Przechwytywanie danych interaktywnych Język programowania po stronie serwera Konfiguracja PHP na Twoim komputerze (któremu wydaje się, że jest serwerem) Testowanie PHP

Podstawy PHP Przechwytywanie żądania post Weryfikacja danych

Podstawowe struktury skryptu PHP

296 298 300 304

306 307 308 308 309 312

314 314 318

322 322 324

324 325 326 327 327

328 330 330

332

Tymczasowe przechowywanie danych Główne operatory PHP

332 335

Tworzenie aplikacji poczty elektronicznej

337

Prosta aplikacja poczty elektronicznej Przechwytywanie i wysyłanie PHP Dodawanie nagłówka i automatycznej odpowiedzi w PHP

Do dzieła! Skorowidz

289 294

337 340 341

343 345

11


4 ROZDZIAŁ

PODRĘCZNIK HTML5

PRACA Z WARTOŚCIAMI KOLORÓW

DO TEJ PORY zaprezentowałem już kilka przykładów użycia kodu koloru, ale jeżeli ich nie rozumiesz, to były one zapewne dla Ciebie jak kod enigma. W niektórych przykładach zostały użyte nazwy kolorów,

ale już nie te podstawowe. Musisz zrozumieć, jak są one zbudowane w CSS3. Kiedy to zrozumiesz, będziesz mieć dostęp do miliona kolorów, a nie tylko do ich garstki.


CZĘŚĆ I: JĘZYK SIECI

ZNAJOMOŚĆ KOLORÓW RGB Jeśli zdarzyło Ci się kiedykolwiek mieszać kolory w inny sposób, niż malując palcami czy akwarelami, wiesz, co się dzieje, kiedy miesza się kolory. Na ekranach komputerowych czerwony, zielony i niebieski są mieszane, by wytwarzać inne kolory. Na przykład kiedy zmieszasz równe ilości czerwonego i zielonego, otrzymasz żółty. Aby połączyć kolory na stronach internetowych, miesza się różne wartości, używając liczb całkowitych, procentów i liczb heksadecymalnych. CSS3 ma ograniczoną ilość dostępnych nazw kolorów, które mogą pomóc w wymyślaniu innych metod mieszania kolorów. HTML5 i CSS3 mają bardzo skomplikowane elementy, takie jak canvas, które mogą zrobić więcej z kolorami i rysunkami, niż było to możliwe w poprzednich wersjach HTML. Te zaawansowane elementy wymagają odrobiny JavaScriptu. Znajdziesz je omówione szczegółowo w rozdziale 13. Teraz zaczniemy od podstaw.

UŻYWANIE NAZW Jednym z dziwniejszych doświadczeń przy pracy z HTML5 i CSS3 jest ustalanie nazw używanych dla określenia kolorów. Poniżej widzimy 16 standardowych kolorów, przedstawionych w tabeli 4.1.

Tabela 4.1. Standardowe nazwy kolorów

76

aqua (turkusowy)

black (czarny)

blue (niebieski)

fuchsia (fuksja)

gray (szary)

green (zielony)

lime (jasnozielony)

maroon (kasztanowy)

navy (granatowy)

olive (oliwkowy)

purple (purpurowy)

red (czerwony)

silver (srebrny)

teal (morski)

white (biały)

yellow (żółty)

Korzystając z HTML5, którego nauczyłeś się do tej pory, możesz łatwo stworzyć schemat przedstawiający kolory. (W punkcie „Do dzieła!” na końcu tego rozdziału dowiesz się, jak odtworzyć tabelkę). Rysunek 4.1 przedstawia ich wygląd na przykładowej stronie1.

Rysunek 4.1. Standardowe kolory CSS3 na stronie 1

Dla wygody czytelnika niniejszy rozdział, w wersji z kolorowymi rysunkami, umieściliśmy na stronach wydawnictwa Helion, pod adresem www.helion.pl/ksiazki/tfanh5 — przyp. red.


ROZDZIAŁ 4: PRACA Z WARTOŚCIAMI KOLORÓW Do tej podstawowej bazy możesz włączać 131 innych nazw, które zostały wybrane bez wyraźnej przyczyny. Wszystkie należą do zestawu stworzonego w latach 80. XX wieku i zostały nazwane X11. Zostały przyjęte przez wczesne przeglądarki i są z nami od zawsze. W oficjalnej dokumentacji W3C są wypisane pod nazwą formatu SVG (ang. Scalable Vector Graphics), a wszystkie nazwy kolorów zostały przyjęte z oryginalnego X11 (patrz strona www.w3.org/TR/SVG/types.html#ColorKeywords). Powód, dla którego wszystkie te nazwy nie zostały tu wypisane, jest taki, że projektanci i programiści zazwyczaj ich nie używają. Te 131 nazw nie tylko ogranicza paletę projektantów — uważają je oni także za absurdalne! Nazwy takie jak papayawhip czy mistyrose nie są dobrymi nazwami według artystów. Podobnie programiści uważają, że używane wartości nie odpowiadają żadnym matematycznym ustawieniom, tak jak stare bezpieczne kolory stron, które odpowiadały logicznemu standardowi numerycznemu. (Oczywiście jeśli chcesz się trochę pobawić, kontynuuj i dołącz takie kolory jak darkkhaki czy ghostwhite do swojej palety kolorów strony). W następnych podrozdziałach zobaczysz, jak stworzyć kolor dokładnie taki, jaki chcesz, wybrany z miliona różnych kombinacji.

RGB I WARTOŚCI PROCENTOWE HSL Podczas mieszania farb ich ilość jest czasami podawana w procentach. Pewien procent koloru czerwonego, zielonego i niebieskiego da nam różne kolory. W ustawieniach kolorów w CSS3 możesz używać procentów na dwa różne sposoby. Najpierw możesz przypisać wartość koloru, używając poniższego formatowania: rgb(r%,g%,b%);

Pierwsza wartość to procent koloru czerwonego, druga zielonego, a trzecia niebieskiego. Na przykład ustawienie rgb (43.9%, 50.2%, 56.5%) generuje kolor, którego używa drużyna Los Angeles Dodgers. Trzy wartości procentowe po dodaniu to więcej niż 100 procent, co pokazuje, że wartość określa procent samego koloru, a nie całości. Jak widzisz, możesz być bardzo precyzyjny, jeśli chodzi o wartości, kiedy podajesz liczby dziesiętne. Poniższy przykład (plik RGBpercent.html znajdujący się w folderze rozdziału 4. pod adresem ftp://ftp.helion.pl/przyklady/tfanh5.zip) przedstawia, jak używać tych ustawień kolorów na stronie HTML5: <!DOCTYPE HTML> <html> <head> <style type="text/css"> body { background-color:rgb(43.9%,50.2%,56.5%); } h1 { background-color:rgb(11.8%,56.5%,100%); color:rgb(100%,100%,100%); font-family:"Arial Black", Gadget, sans-serif; font-style:italic; text-align:center;

77


CZĘŚĆ I: JĘZYK SIECI } </style> <meta charset="utf-8"> <title>Dodger Blue</title> </head> <body> <h1>Los Angeles Dodgers<br> (wczeniej Brooklyn Dodgers)</h1> </body> </html>

Kiedy załadujesz stronę, wyświetlane kolory będą dokładnie takie, jak chciałeś; widać to na rysunku 4.2.

78 Rysunek 4.2. Ustawianie kolorów za pomocą procentów RGB Kolejnym sposobem przypisywania kolorów z użyciem procentów jest model HSL (odcień – nasycenie – jasność). Dużą zaletą HSL jest to, że jasność jest symetryczna. Ułatwia to podrasowanie koloru na taki, jaki byś chciał. Myśląc o 360-stopniowym kole barw jak o kompasie, możesz wybrać odcień. Na górze, gdzie wartość procentowa wynosi 0, znajdziesz barwy czerwone. Przesuwając wzrok zgodnie ze wskazówkami zegara w miejsce o wartości procentowej 30, zobaczysz, że barwy przechodzą z czerwonych w żółte. Na wartości procentowej 60 są one żółte. I tak wokoło spektrum kolorów, aż wrócisz do wartości procentowej 360 (0 procent), gdzie znów zobaczysz odcienie czerwone. Projektantom, którzy rozumieją spektrum kolorów, ułatwia to wybieranie kolorów. Aby stworzyć jaśniejszy kolor, zwiększ wartość jasności; zmniejsz ją natomiast, by uzyskać ciemniejszy kolor. Przypuśćmy na przykład, że próbujesz uzyskać właściwy odcień czerwieni. Zacznij od poniższego ustawienia kolorów: hsl(0,100%,50%);

Zwróć uwagę, że pierwsza wartość nie jest określona w procentach. Jest tak, ponieważ ma wartości pomiędzy 0 a 359 — w 360 stopniowym kole. (Pamiętaj: wartości 0 i 360 są w tym samym miejscu na kole). Zwiększając i zmniejszając jasność (trzeci parametr), możesz rozjaśniać lub przyciemniać swój kolor — co jest bardziej intuicyjne niż zmienianie procentów RGB.


ROZDZIAŁ 4: PRACA Z WARTOŚCIAMI KOLORÓW Poniższy kod HTML5/CSS3 (plik HSLCOLOR.html znajdujący się w folderze rozdziału 4. pod adresem ftp://ftp.helion.pl/przyklady/tfanh5.zip) przedstawia, z jaką łatwością możesz zmniejszyć i zwiększyć wartość jasności, by uzyskać odpowiedni odcień czerwieni. <!DOCTYPE HTML> <html> <head> <style type="text/css"> .redBase { color:hsl(0, 100%, 50%); } .redDarker { color:hsl(0, 100%, 25%); } .redLighter { color:hsl(0, 100%, 75%); } </style> <meta charset="utf-8"> <title>Ustawienia koloru HSL</title> </head> <body> <h1 class="redBase">Czerwony bazowy</h1> <h1 class="redDarker">Czerwony ciemniejszy</h1> <h1 class="redLighter">Czerwony janiejszy</h1> </body> </html>

Jeśli używasz HSL po raz pierwszy, pomocne jest myślenie o dodawaniu jasności jak o przemieszczaniu się wyżej do słońca lub o przyciemnianiu jak o przesuwaniu się coraz bardziej w głąb studni. Proces podrasowywania kolorów jest łatwiejszy dla projektantów chcących uzyskać wymagane kolory. Rysunek 4.3 przedstawia, jak wyglądają różne barwy czerwieni.

Rysunek 4.3. HSL ułatwia podrasowywanie barw

79


CZĘŚĆ I: JĘZYK SIECI Odcień i jasność rozumiemy dość intuicyjnie, ale pojęcie „nasycenie” może być trochę niejasne. Zasadniczo nasycenie to ilość zabarwienia w danym kolorze. Nasycenie o wartości 100 procent to pełne zabarwienie odcienia danej barwy, podczas kiedy niższa wartość procentowa jakby zabiera odcień — to coś jak blednięcie koloru. Dla wszystkich kolorów środkowa barwa to szara, kiedy nasycenie wynosi 0 procent. Czasami wolimy blady lub stłumiony kolor, taki jak niebieskich wielokrotnie wypranych dżinsów.

USTAWIANIE RGB ZA POMOCĄ LICZB CAŁKOWITYCH Drugim sposobem na mieszanie kolorów z użyciem ustawień wartości rgb() jest wstawianie wartości od 0 do 255 (w sumie wartości jest 256, gdyż liczymy też wartość 0) zamiast procentów używanych w poprzednim przykładzie. Wartość 256 reprezentuje ilość możliwych kombinacji na dwóch 8-bitowych bajtach. Innymi słowy, polega to na tym, jak komputer przechowuje i przetwarza informacje. Z zestawem trzech wartości od 0 do 255 możesz wygenerować 16 777 216 kombinacji. Technologia koloru jest jednak dużo bardziej złożona niż ta, którą tu omawiamy, a nowoczesne tworzenie kolorów generuje lepsze procesory kolorów. Wystarczy powiedzieć, że możesz tworzyć wiele kolorów za pomocą tych kombinacji złożonych z barwy czerwonej, zielonej i niebieskiej. Oto sposób zapisu wartości kolorów: rgb(liczbaCakowitaR, liczbaCakowitaG, liczbaCakowitaB);

80

Na przykład żółty, który powstaje po zmieszaniu czerwonego i zielonego, będzie wyglądał tak: rgb(255,255,0);

Nie działa to tak intuicyjnie jak HSL, ale po chwili zaczniesz rozumieć mieszanki oparte na 256 wartościach lepiej niż wartości procentowe. Poniższy przykład (plik DecColor.html znajdujący się w folderze rozdziału 4. pod adresem ftp://ftp.helion.pl/przyklady/tfanh5.zip) przedstawia prostą implementację. <!DOCTYPE HTML> <html> <head> <style type="text/css"> body { /* czerwone to */ background-color:rgb(255,0,0); } h1 { /* duy óty tekst */ color:rgb(255,255,0); font-family:"Arial Black", Gadget, sans-serif; } h2 { /*niebieski tekst na szarym tle */ color:rgb(0,0,255); background-color:rgb(150,150,150); } </style>


ROZDZIAŁ 4: PRACA Z WARTOŚCIAMI KOLORÓW <meta charset="utf-8"> <title>Kolory w systemie dziesitnym</title> </head> <body> <h1>Duy óty nagówek</h1> <h2>Niebieski nagówek z szarym tem</h2> </body> </html>

Jedyna różnica pomiędzy używaniem RGB z wartościami od 0 do 255 a wartości procentowych od 0 do 100 polega na tym, jak my to postrzegamy. Może Ci się wydawać, że używanie 256 wartości zamiast skali procentowej od 0 do 100 zapewni Ci większą precyzję, ale to nie o to chodzi, ponieważ możesz używać ułamków w ustawieniach procentowych. To, czy będziesz używać zapisu procentowego, czy wartości od 0 do 255, będzie zależało od Twoich osobistych preferencji. Rysunek 4.4 przedstawia rezultat użycia przeglądarki Opera Mini.

81

Rysunek 4.4. Kolory zmieszane za pomocą wartości całkowitych, przedstawione na telefonie komórkowym Jak widzisz na rysunku 4.4, wyświetlany na telefonie komórkowym tekst nie przyjmuje czcionki Arial Black, ale za to kolory wyświetlają się bez problemu. Upewnij się i sprawdź czcionki i inne efekty Twojego urządzenia przenośnego, jeśli są istotne przy wyświetlaniu strony. Pamiętaj: większość komputerów ma bardziej skomplikowany zestaw czcionek i styli niż urządzenia przenośne. Niedługo jednak będą one bardzo podobne.

USTAWIENIA HEKSADECYMALNE: MYŚLENIE JAK TWÓJ KOMPUTER W poprzednich rozdziałach prezentowałem ustawienia kolorów stworzone z użyciem wartości złożonych z alfanumerycznych wartości. (Alfanumeryczną wartością jest każda wartość, która zawiera i liczby, i litery). Na przykład wartość 6F001C generuje bogatą czerwień mokka. Jeśli ją rozbijemy, możemy zobaczyć, że jest ona zwyczajną mieszanką barwy czerwonej, zielonej i niebieskiej. Aby zrozumieć, jak to się dzieje, potrzebujemy dowiedzieć się trochę o systemach liczbowych komputerów. Jesteśmy przyzwyczajeni do liczenia w systemie dziesiętnym. Używamy wartości od 0 do 9 (dziesięć cyfr), a kiedy te dziesięć cyfr zostanie zużytych, zaczynamy na nowo z dwoma liczbami — 1 i 0 — które nazywamy „dziesięć”. Jak pewnie wiesz, komputery bazują na przełącznikach,


CZĘŚĆ I: JĘZYK SIECI które mogą posiadać stan Włączony lub Wyłączony. Zamieniając „1” na Włączony, a „0” na Wyłączony, możemy zapisać kod oparty na systemie binarnym z użyciem liczb 1 i 0; zamiast pracować z dziesięcioma liczbami pracujemy więc tylko z dwoma. Tabela 4.2 przedstawia, co jest potrzebne, by policzyć do 16, używając systemu binarnego. Zawiera także trzecią kolumnę, która pokazuje system szesnastkowy zwany heksadecymalnym.

Tabela 4.2. Systemy numeryczne

82

Binarny

Dziesiętny

Heksadecymalny

0

0

0

1

1

1

10

2

2

11

3

3

100

4

4

101

5

5

110

6

6

111

7

7

1000

8

8

1001

9

9

1010

10

A

1011

11

B

1100

12

C

1101

13

D

1110

14

E

1111

15

F

Każda wartość binarna nazywana jest bitem. Grupa bitów to bajt. W tabeli 4.2 największa binarna wartość to 4-bitowy bajt. Komputery bazują na różnych typach bajtów, a 8-bitowy bajt jest zwykle używany jako powszechne odniesienie do bajta. Prawdę mówiąc, nowoczesne komputery bazują na 8-, 16-, 32-, 64- i nawet 128-bitowych bajtach. (Stają się one coraz większe, więc nie spodziewaj się, że 128-bitowy bajt będzie stanowił górny limit). Najwyższą wartością w binarnym systemie liczenia w 8-bitowym bajcie jest wartość 11111111. Kiedy na nią spojrzysz i porównasz z liczbą dziesiętną i heksadecymalną, zobaczysz bardzo interesujący wzór, pokazany w tabeli 4.3.

Tabela 4.3. Wartości bajtowe Binarny

Dziesiętny

Heksadecymalny

11111111

255

FF


ROZDZIAŁ 4: PRACA Z WARTOŚCIAMI KOLORÓW Jak widzisz w tabeli 4.3, wartość heksadecymalna FF jest najwyższą możliwą wartością dla dwóch cyfr; podobnie wartość binarna 11111111 jest najwyższą możliwą wartością dla ośmiu cyfr (bajta). Liczba całkowita składa się jednak z trzech cyfr i nie stanowi dla nich limitu. Inaczej mówiąc, w przeciwieństwie do systemu heksadecymalnego, system dziesiętny nie jest w dużej mierze symetryczny z binarnym systemem liczenia. Jak wiesz, system RGB przypisujący liczby wartościom kolorów korzysta z wartości od 0 do 255. Używając wartości heksadecymalnych, potrzebujesz tylko dwóch cyfr (tak naprawdę liczb heksadecymalnych) reprezentujących wszystkie 256 wartości w 8-bitowym bajcie. Prowadzi to do korzystania z heksadecymalnych liczb podczas przypisywania kolorom wartości. Z użyciem sześciu wartości — po dwóch do czerwonego, zielonego i niebieskiego — wszystkie wartości kolorów mogą być przypisane za pomocą sześciu liczb heksadecymalnych. Wracając więc do wartości 6F001C, widzimy poniższe ustawienia: 

czerwony: 6F,



niebieski: 00,



zielony: 1C.

Przyzwyczajenie się do liczb heksadecymalnych może zająć trochę czasu, ale kiedy już się uda, będzie Ci łatwo dodawać wartości kolorów. Możesz je również rozumieć w ten sam sposób co liczby dziesiętne RGB, ale zamiast z wartości od 0 do 255 będziesz korzystać z wartości od 00 do FF. Poniższy przykład (plik HexPalette.html znajdujący się w folderze rozdziału 4. pod adresem ftp://ftp.helion.pl/przyklady/tfanh5.zip) przedstawia pewne kolory stworzone za pomocą liczb heksadecymalnych. <!DOCTYPE HTML> <html> <head> <style type="text/css"> /* Paleta kolorów -- uywaj tylko tych kolorów! 69675C, 69623D, ECE8CF, E8D986, B5AA69 szary, oliwkowy, kremowy, ciemnokremowy, khaki */ body { font-family:"Comic Sans MS", cursive; background-color:#ECE8CF; color:#69675C; } h1 { font-family:"Arial Black", Gadget, sans-serif; color:#B5aa60; background-color:#E8D986; text-align:center; } h2 { font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; color:#b5aa69; } </style>

83


CZĘŚĆ I: JĘZYK SIECI <meta charset="utf-8"> <title>System heksadecymalny i paleta kolorów</title> </head> <body> <h1> Ostyluj z uyciem palety kolorów</h1> <h2>Pustynia jesieni</h2> Jesieni powietrze robi si chodniejsze, zapanowuje spokój i pustyni okrywaj ´cieplejsze barwy. </body> </html>

W tym przykładzie korzystamy z palety kolorów i ustawiamy wartości kolorów w komentarzu wewnątrz kontenera <style>, dzięki czemu mogą być one przeglądane podczas składania strony w jedną całość. Rysunek 4.5 przedstawia, czego możesz się spodziewać.

84

Rysunek 4.5. Heksadecymalna paleta kolorów Kolory należą do zestawu kolorów, który prezentuje pewien humor czy uczucie. Ten zatytułowany „Pustynia jesienią” jest oparty na palecie kolorów reprezentującej zdaniem projektanta kolory pustyni jesienią.

DODAWANIE KOLOROM PRZEJRZYSTOŚCI Kolejną nową cechą zgodną z przeglądarką HTML5 jest przejrzystość lub zmienna siła krycia. Nieprzejrzysty obiekt na ekranie blokuje wszystko, co znajduje się poniżej, podczas kiedy przezroczysty obiekt zezwala na oglądanie wszystkiego poniżej — jak szkło. Wartość używana do opisania poziomu siły krycia jest wyrażana za pomocą właściwości alfa ustawionej pomiędzy 0 i 1. Niezależnie od tego, czy używamy formatowania kolorów RGB, czy HSL, alfa będzie czwartym parametrem. (Niestety nie ma heksadecymalnego parametru alfa w CSS3). Na przykład za pomocą ustawień rgba(255,0,0,0.5) stworzymy barwę czerwoną z 50-procentową siłą krycia. Podobnie korzystając z ustawień hsla(120, 100%, 50%, 0.3), wygenerujemy barwę zieloną z 30-procentową siłą krycia (lub 70-procentową przejrzystością).


ROZDZIAŁ 4: PRACA Z WARTOŚCIAMI KOLORÓW W części IV książki omówię sposoby na dodanie głębi stronie za pomocą znacznika <canvas>. Kiedy umieścisz obiekty jeden na drugim, lepiej zobaczysz, dlaczego posiadanie przejrzystości na stronach jest ważne. Teraz potrzebujesz czegoś, co umieścisz poniżej bloków tekstu, które będą mogły być oglądane poprzez blok przezroczystego tekstu. Najłatwiejszą metodą jest umieszczenie obiektu tła za pomocą właściwości background-image. Poniższy fragment kodu pokazuje, jak to zrobić: body { background-image:url(plikObrazu.png); }

Twój obraz tła może być plikiem z rozszerzeniem .jpg, .gif lub .png. W tym przykładzie trzy koła w kolorze czerwonym, zielonym i niebieskim są użyte jako tło, a w górnej części znajduje się tekst <h1> z 50-procentową siłą krycia — ma to pokazać, że różne kolory są widoczne poprzez przezroczysty obiekt. Poniższy kod (plik Transparent.html znajdujący się w folderze rozdziału 4. pod adresem ftp://ftp.helion.pl/przyklady/tfanh5.zip) korzysta z obu formatowań, rgba() i hsla(). <!DOCTYPE HTML> <html> <head> <style type="text/css"> body { background-image:url(rgbBalls.png); } .transRed { color:rgba(255, 0, 0, .5); } .transGreen { color:rgba(0, 255, 0, .5); } .transBlue { color:hsla(240, 100%, 50%, .5); } .transBackground { background-color:hsla(120, 100%, 50%, .5); } </style> <meta charset="utf-8"> <title>Przejrzysto/sia krycia</title> </head> <body> <h1 class="transRed">Test 123, Test 123, Test 123</h1> <h1 class="transGreen">Test 123, Test 123, Test 123</h1> <h1 class="transBlue">Test 123, Test 123, Test 123</h1> <h1 class="transBackground">Test 123, Test 123, Test 123</h1> </body> </html>

Wyniki pokazane na rysunku 4.6 są wyświetlane na iPhonie i wyglądają inaczej niż na ekranie Twojego komputera.

85


CZĘŚĆ I: JĘZYK SIECI Jak widzisz, przezroczysty tekst i tło pozwalają, żeby obiekt tła był widoczny. Kiedy kolor jest przezroczysty, przejmuje część znajdujących się pod nim kolorów; kiedy więc z tego korzystasz, zwróć uwagę, jaką kombinację będą tworzyły nakładające się na siebie kolory. (Przy okazji rysunek 4.6 przedstawia, dlaczego rzadko używamy obiektów tła — mają tendencję do zaśmiecania ekranu i psucia pozytywnego odbioru tekstu).

Rysunek 4.6. Przezroczysty tekst na solidnej grafice

TWORZENIE SCHEMATU KOLORU 86

Jeśli jesteś projektantem, możesz pomyśleć: „Jak u licha zdobędę kolory, których potrzebuję, za pomocą tych wszystkich liczb?”. Jeśli natomiast jesteś programistą, możesz się zastanawiać: „Skąd mogę wiedzieć, czy kolory, których używam, do siebie pasują?”. Na oba te pytania jest jedna odpowiedź: Kuler. W aplikacji tej wprowadzasz główny (podstawowy) kolor, a ona sprawdza, używając różnych algorytmów, które kolory są kompatybilne, oraz prezentuje informacje dla dziesiętnych i heksadecymalnych wartości kolorów. Projektanci mogą umieścić tam dowolne kolory, które chcą wykorzystać do stworzenia własnych schematów kolorów, i Kuler zajmie się całą matematyką; programiści natomiast mogą umieścić tam całą matematykę, a Kuler stworzy za nich schematy kolorów. Aplikację Kuler znajdziesz pod adresemhttp://kuler.adobe.com. Wymaga ona wtyczki Flasha — jest ona już wbudowana w większości przeglądarek, ale jeśli Twoja przeglądarka jej nie posiada, możesz pobrać ją za darmo ze strony http://www.adobe.com/products/flashplayer. Możesz też pobrać widget Kulera, który będzie działał na Twoim komputerze.

Z KOLORU PODSTAWOWEGO Aby stworzyć schemat kolorów za pomocą aplikacji Kuler, zacznij od podstawowego koloru i wypróbuj go za pomocą różnych algorytmów do generowania schematów kolorów. Potem wybierz algorytm, który pokaże różne kolory dobrze wyglądające razem na wiele sposobów. Opierając się na teorii kolorów, wybierz kategorię spośród analogicznych, jednobarwnych, trójwartościowych, uzupełniających, złożonych, cieni i niestandardowych. Kategoria niestandardowa jest dla projektantów, którzy używają swoich artystycznych umiejętności do generowania palety. (Programiści są dobrze obsługiwani przez jeden z automatycznych algorytmów). Rysunek 4.7 przedstawia typowy przykład schematu kolorów opartego na kolorze podstawowym z użyciem algorytmu trójwartościowego.


ROZDZIAŁ 4: PRACA Z WARTOŚCIAMI KOLORÓW

Rysunek 4.7. Schemat kolorów z podstawowego koloru

Z OBRAZU Poza tworzeniem palety kolorów z koloru podstawowego możesz też załadować obraz i aplikacja Kuler automatycznie wygeneruje schemat kolorów w oparciu o kolory obrazu. Na przykład rysunek 4.8 przedstawia dwa różne obrazy — logo i obraz — z odpowiadającą im paletą kolorów.

Rysunek 4.8. Schematy kolorów w oparciu o importowane obrazy

87


CZĘŚĆ I: JĘZYK SIECI

Niewłaściwe kombinacje kolorów Aby zobaczyć różnicę pomiędzy użyciem dobrego i złego schematu kolorów, spójrz na przykład zaczerpnięty z książki Lesliego Cabargi The Designer’s Guide to Color Combinations. Poniższy rysunek przedstawia wygląd dwóch identycznych stron wyświetlanych na urządzeniu przenośnym — po lewej strona ze schematem kolorów opartym o zdjęcie, po prawej przykład użycia niewłaściwych barw.

88 Dobry i zły kolor Rysunek po lewej korzysta z kolorów wybranych ze zdjęcia, a ten po prawej nie — dodatkowo przedstawia niewłaściwą kombinację kolorów.

Kiedy korzystamy z obrazu, możesz bardziej modyfikować schemat kolorów przez wybieranie różnych odcieni — kolorowego, jasnego, przytłumionego, głębokiego i ciemnego. Wszystkie schematy kolorów mogą być zapisywane i kiedy się ładują, zachowują wszystkie informacje, których potrzebujesz, by wprowadzić dane koloru na stronie HTML5.

INTEGROWANIE TWOJEJ PALETY KOLORÓW Z TWOJĄ STRONĄ Posiadanie palety kolorów nie oznacza, że Twoja strona będzie wyglądać dobrze — nawet jeżeli chodzi o właściwy dobór kolorów. Wewnątrz tej samej palety niektóre kolory pasują do siebie lepiej od innych. Na przykład tło o barwach pośrednich może nie dawać kontrastu pomiędzy innymi kolorami pośrednimi, więc ciemny lub jasny kolor w palecie może okazać się lepszym wyborem. Rysunek 4.9 pokazuje paletę kolorów rozbudowaną w oparciu o logo, która będzie wykorzystana jako paleta dla strony.


ROZDZIAŁ 4: PRACA Z WARTOŚCIAMI KOLORÓW

Rysunek 4.9. Paleta kolorów w oparciu o logo Wartości liczb heksadecymalnych dla czterech kolorów zostały wklejone tutaj za pomocą CSS3 w górnej części strony HTML5 jako referencja. W poniższym listingu (plik SettingColors.html znajdujący się w folderze rozdziału 4. pod adresem ftp://ftp.helion.pl/przyklady/tfanh5.zip) są zastosowane kolory, które współgrają z logo i resztą strony. <!DOCTYPE HTML> <html> <head> <style type="text/css"> /* 027333,7FA646,D9B448,F2DFA7 */ body { margin-left:1em; background-color:#F2DFA7; color:#027333; font-family:Verdana, Geneva, sans-serif; font-size:11px; } h1 { font-family:Tahoma, Geneva, sans-serif; color:#7FA646; } h2 { font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; color:#7FA646; background-color:#D9B448; } div { text-align:center; } a { font-family:Arial, Helvetica, sans-serif; text-align:center; font-size:10px; text-decoration:none; background-color:#027333; color:#F2DFA7; } a:hover { color:#D9B448; } </style> <meta charset="utf-8"> <title>Ustalanie kolorów</title> </head> <body> <div><nav>

89


CZĘŚĆ I: JĘZYK SIECI <a href="#"> Odnonik nr 1 | </a> <a href="#"> Odnonik nr 2 | </a> <a href="#"> Odnonik nr 3 &nbsp;</a> </nav> </div> <img src="Sandlightlogo.gif" alt="Logo" style="float:left;"> <header><h1>&nbsp; &nbsp;&nbsp;Witaj</h1></header> <br><br> <article> <h2>&nbsp;Kim jestemy...</h2> Sandlight Productions to midzynarodowa firma, która specjalizuje si w HTML5/CSS3, ´strumieniowym przesyaniu obrazu wideo, rozwoju urzdze przenonych, edukacji ´online, architekturze Action-Script 3.0, Flashu i PHP. </article> <br> <footer><div> <nav> <a href="#"> Odnonik nr 1 | </a> <a href="#"> Odnonik nr 2 | </a> <a href="#"> Odnonik nr 3 &nbsp;</a> </nav> </div></footer> </body> </html>

90

Arkusz stylów korzysta z właściwości a:hover do jej zmiany, kiedy użytkownik najedzie myszką na odnośnik. W znaczniku <a> definicji CSS3 text-decoration jest ustawiony na none, co oznacza, że tekst odnośnika nie będzie podkreślony. Należy więc coś zrobić, by poinformować użytkownika o obecności odnośnika; najlepiej za pomocą właściwości :hover. Zmieniony kolor subtelnie, ale efektywnie pokaże użytkownikowi, że najechał myszką na odnośnik. Kolor oryginalny i kolor odsyłacza należą do palety. Tworząc stronę, pamiętaj, że nie tylko znaczniki <body> i <h..> korzystają z kolorów palety. Projekt ten działa głównie na urządzeniach przenośnych (patrz prawy zrzut na rysunku 4.10), ale powinien się sprawdzić również na komputerach i ekranach projekcyjnych (patrz lewy zrzut na rysunku 4.10). Oczywiście Twoja strona zawsze będzie wyglądała lepiej, jeśli jej projekt wykona projektant. Programiści też mogą jednak ulepszyć jej wygląd, zwracając większą uwagę na kombinacje kolorów.

DO DZIEŁA! Poniższe dwa wyzwania powinny sprawić Ci przyjemność; co więcej, podejmując się ich, wiele się nauczysz: 

Odtworzenie wykresu koloru podstawowego: Na rysunku 4.1 znajduje się obraz o standardowych kolorach. Twoim pierwszym wyzwaniem będzie sprawdzenie, czy potrafisz odtworzyć stronę, która wyświetla te kolory. Oto kilka wskazówek przed rozpoczęciem pracy:


ROZDZIAŁ 4: PRACA Z WARTOŚCIAMI KOLORÓW

91

Rysunek 4.10. Schemat kolorów stosowany na stronie 

Zdefiniuj każdy nazwany kolor jako klasę w swoim kontenerze <style> tym samym kolorem dla tekstu i tła. .aqua { color:aqua; background-color:aqua; }



Jednym ze sposobów jest użycie znacznika <span> do przypisania klas zawartości kontenera <span>. <h3> <span class=aqua>NAZWA KOLORU</span><span class=black>NAZWA KOLORU </span><span class=blue>NAZWA KOLORU</span><span class=fuchsia>NAZWA KOLORU </span> <h3>



Twoje zdjęcie jest na stronie! To zadanie składa się z trzech części: 1. Zrób sobie zdjęcie cyfrowe, korzystając z wbudowanego w Twoim komputerze aparatu, lub zgraj jakieś z aparatu cyfrowego. 2. Załaduj zdjęcie w aplikacji Kuler i stwórz paletę kolorów. 3. Stwórz stronę ze swoim zdjęciem, korzystając z palety kolorów wykonanej za pomocą aplikacji Kuler.


Skorowidz

audio, 22, 206, 210 autoplay, atrybut, 206 controls, atrybut, 206 loop, atrybut, 209 preload, atrybut, 208, 209 src, atrybut, 206 author, 142 autocomplete, atrybut, 291 autoplay, atrybut, 206, 234

!DOCTYPE, 23, 41, 54 &gt;, 124 &lt;, 124 &nbsp;, 50 _blank, 148, 150, 293 _parent, 148 _self, 148 _top, 148 3GP, 226

A a, 23, 136, 141 target, atrybut, 148 abbr, 23 accept-charset, atrybut, 290 acronym, 27 action, atrybut, 291 addColorStop(), 284 address, 23 Adobe Browserlab, 30, 31 Adobe Device Central, 227, 228 Adobe Dreamweaver, 34 Adobe Illustrator, 200 Adobe Media Encoder CS5, 226, 227 Adobe Photoshop, 188 akapity, 104 aliasing, 186 align, atrybut, 58, 195, 196 alt, atrybut, 58 alternate stylesheet, 136 Apache, 327 Apple Quick Time Player, 231 Apple Safari, 32 applet, 27 arc(), 280 area, 23 arkusze stylów, 63, 64, 136 article, 22 aside, 22

B b, 23 background-image, 85 bajt, 82 base, 23, 96, 97 basefont, 27 bdo, 23 bgsound, 27 big, 27 bit, 82 blink, 27 blockquote, 23 body, 23, 43 br, 23, 55, 56 Browserlab, 30, 31 button, 23

C Camtasia, 230, 231 canvas, 22, 259, 260, 261, 262, 263 gradienty, 283, 284, 285 height, atrybut, 263 koła, 283 krzywe, 279 łuki, 280, 282, 283 obrazki, 269 rysunki, 263, 265, 266, 267, 274 siatka, 262, 275 width, atrybut, 263


SKOROWIDZ

346

caption, 24, 111, 121 center, 27, 28 checkbox, pole, 300 Chrome, 30 ciasteczka, 318 cień, 270, 271, 272 cite, 24 clearRect(), 267 code, 24 codec, 211 col, 24 Coleridge, Samuel Taylor, 108 colgroup, 24 colspan, atrybut, 128, 130 command, 22 content, atrybut, 97 controls, atrybut, 206, 234 createLinearGradient(), 283 CSS3, 62 dodawanie stylu, 62 identyfikatory, 69, 71 klasy, 69 komentarze, 72 pseudoklasy, 167, 168 cudzysłów, używanie, 44, 45

D dane tabelaryczne, 117, 121 dane, weryfikacja, 330 datalist, 21, 22, 298 dd, 24 del, 24 details, 22 dfn, 24 dir, 27 display, 118 div, 24, 103, 104, 106 dl, 24 document, 258 document.write(), 240 DOM, 104, 246, 258 elementy HTML5, 248 współdziałanie z JavaScript, 246 drawImage(), 270 Dreamweaver, 34 dt, 24 dźwięk, 205 efekty dźwiękowe, 215, 217 formaty, 209

konwersja plików, 215 tworzenie plików audio, 212

E em, 24 embed, 22 Emerson, Ralph Waldo, 165 enctype, atrybut, 290 event, 258

F fieldset, 24, 303 figcaption, 22, 111, 112 figure, 22, 111, 112 fill(), 264 fillRect(), 264 fillStyle, 264 filtry, 272, 274 Firefox, 29 first, 145 Flash, 322 FlashKit, aplikacja, 215 font, 27 footer, 22, 104 form, 24, 163, 249, 288 accept-charset, atrybut, 290 action, atrybut, 291 autocomplete, atrybut, 291 enctype, atrybut, 290 id, atrybut, 292 list, atrybut, 298 method, atrybut, 291 name, atrybut, 292 novalidate, atrybut, 290 target, atrybut, 293 formnovalidate, atrybut, 291 formularze, 288, 289 atrybuty, 289 checkbox, pole, 300 dane wejściowe, 296, 297 daty, 304, 305 DOM, 294 radio, pole, 300 frame, 27 frameset, 27


SKOROWIDZ

G geolocation, 308, 313 latitude, atrybut, 308 longitude, atrybut, 308 geolokalizacja, 308, 312 pobieranie mapy, 309 szerokość i długość geograficzna, 308 getContext(), 263 gęstość pikseli, 68 GIF, 183 zmiana rozmiaru, 191 Google Chrome, 30 Google Earth, 312, 313 Google Maps, 308 gradienty, 283, 284, 285 grafika bitmapowa, 182 rozmiar, 182, 185, 186, 187, 188, 190, 191, 192 skala szarości, 194 warstwy, 184, 185 wektorowa, 182 wyświetlanie, 54 Graphic Information Format, Patrz GIF grupowanie, 108

H h1 - h6, 24, 59 hash, 58 head, 24, 42, 43, 96 header, 22 height, atrybut, 235 hgroup, 22, 60, 61, 62 hierarchiczne typy odnośników, 144 hover, 90, 168 hr, 24, 108, 109, 110 href, atrybut, 54, 141 hreflang, atrybut, 141 HSL, 77, 78, 79 hsla, 84 html, 24, 96 lang, atrybut, 44 language, atrybut, 44 HTML, język, 20 HTML5, 37 kontynuowane znaczniki, 23, 24, 25 niekontynuowane znaczniki, 27 nowe elementy, 21, 22

przechowywanie, 314, 318 zdarzenia, 242 http-equiv, atrybut, 98

I i, 24 icon, 139 id, atrybut, 71, 292 identyfikatory, 145, 147 iframe, 24, 150, 151, 152, 173, 217 sandbox, atrybut, 152 seamless, atrybut, 152 srcdoc, atrybut, 152 ikony, 139, 140, 172 image, 258 img, 24, 54, 195 align, atrybut, 58, 195, 196 alt, atrybut, 58 href, atrybut, 54 src, atrybut, 54 indeks dolny, 25 górny, 25 index, 144 input, 24 formnovalidate, atrybut, 291 required, atrybut, 291 ins, 24 Internet Explorer, 33 isindex, 27

J JavaScript, 98, 99, 100, 239 canvas, 263, 266, 267, 269 funkcje, 241 grafika, 197, 200 menu, 163 metody, 255, 256 obiekty, 255, 256 obsługa zdarzeń, 242, 243, 244, 245 pliki zewnętrzne, 240 przechowywanie danych, 250 tablice, 254 typy danych, 251, 252 umieszczanie na stronie, 240 wykrywanie zdarzeń, 242 zmienne, 250, 251

347


SKOROWIDZ język skryptowy, 239 język znaczników hipertekstu, Patrz HTML, jzyk Joint Photographic Experts Group, Patrz JPEG JPEG, 183, 184 zmiana rozmiaru, 188, 190

K

348

kamery internetowe, 228, 229 kamery wideo, 229, 230 kbd, 24 keygen, 22 keywords, 97 kod, parsowanie, 38 kodek, 211 kolory, 76 bezpieczne dla przeglądarki, 183 HSL, 77, 78, 79 przejrzystość, 84, 85 RGB, 77, 78, 80, 81 schematy, 86, 87, 88 ustawienia heksadecymalne, 81, 83 używanie nazw, 76, 77 wartości procentowe, 77, 78 koła, 283 komentarze CSS, 72 HTML, 23, 45, 46, 48 komórka, 128 kompresja bezstratna, 183 stratna, 183 konteksty przeglądania, 148, 150, 151 kontener, 20 kotwice, 145, 147 krzywe, 279 Kuler, 86, 87

L label, 24 lang, atrybut, 44 language, atrybut, 44 last, 145 latitude, atrybut, 308 legend, 24, 303 li, 24 linia pozioma, 108, 110 link, 24, 41, 136 href, atrybut, 141 hreflang, atrybut, 141

media, atrybut, 141 rel, atrybut, 136, 142 sizes, atrybut, 141 title, atrybut, 141 type, atrybut, 141 list, atrybut, 298 listy, 104, 106 nienumerowane, 25, 107 numerowane, 25, 107 w nawigacji, 158, 159, 160 llustrator, 200 longitude, atrybut, 308 loop, atrybut, 209, 233

Ł łuki, 280, 282, 283

M mail(), 337, 341 mailto, 142 map, 24 mark, 22, 24 marquee, 27 media, atrybut, 141 menu, 24 meta, 24, 54, 96, 97, 98 content, atrybut, 97 http-equiv, atrybut, 98 name, atrybut, 97 metadane, 97 meter, 22 method, atrybut, 291 Microsoft Internet Explorer, 33 miniatury, 173 Miro Video Converter, aplikacja, 225, 226 Mobile Safari, 32, 33 Mosaic, 29 Mozilla Firefox, 29 multicol, 27 Muybridge, Eadweard, 116

N name, atrybut, 97, 292 nav, 22, 155 navigator.appVersion, 197 navigator.platform, 253


SKOROWIDZ nawigacja, 155, 156 globalna, 157, 158, 160 grafika, 172 iframe, 173, 175 listy, 158, 159, 160 pionowa, 167, 169 pozioma, 167 projekt, 156 pseudoklasy, 167, 168 rozwijane menu, 160 spójność, 165 testowanie, 157 Netscape Navigator, 29 next, 145 nobr, 27 noframes, 27 noscript, 27 novalidate, atrybut, 290

O Obiektowy Model Dokumentu, Patrz DOM obiekty JavaScript, 255, 256 PHP, 334 object, 25, 324 obsługa zdarzeń, 242, 243, 244, 245 odniesienie bezwzględne, 113 odniesienie względne, 114, 115 odnośniki, 136 atrybuty, 141 ikony, 139, 140 strony, 141 typy, 144 odświeżanie strony, 98 ol, 25, 106 onionskin, 31 Opera, 32 Opera Mini, 32 optgroup, 25, 162, 163 option, 25, 160, 161 output, 22, 248, 250

P p, 25, 104 padding, 124 paleta kolorów, 87 integracja ze stroną, 88

paragraf, 25 param, 25 parsowanie kodu, 38 Photoshop, 188 PHP, 325, 326, 328, 330, 332 konfiguracja, 327 obiekty, 334 operatory, 335, 336 przechowywanie danych, 332 stałe, 333 tablice, 333 testowanie, 327 weryfikacja danych, 330 zmienne, 332 piksele, gęstość, 68 pliki organizacja, 113 rozszerzenia, 38, 40 typy, 38, 40 pływające ramki, 150, 151, 152, 172 urządzenia przenośne, 175, 176 PNG, 184, 185 zmiana rozmiaru, 191 podpisy, 111 pop(), 255, 256 Portable Network Graphics, Patrz PNG poster, atrybut, 232 pre, 25 prefetch, 140, 141 preload, atrybut, 208, 209, 233 prev, 145 progress, 22 przechowywanie lokalne, 318 w sesji, 314 przeglądarki, 28 Apple Safari, 32 Google Chrome, 30 Microsoft Internet Explorer, 33 Mozilla Firefox, 29 Opera, 32 przejrzystość, 84, 85, 86 przycisk, 23 pseudoklasy, 167

Q q, 25

349


SKOROWIDZ

R radiany, 280 radio, pole, 300 refresh, 98 Rejestrator dźwięku, aplikacja, 212, 213, 214 rel, atrybut, 136, 142 required, atrybut, 291 RGB, 77, 80, 81 rgba, 84, 273 rowspan, atrybut, 128, 130 rozszerzenia plików, 38, 40 zmiana ustawień, 39, 40 rozwijane menu, 160 rp, 22 rt, 22 ruby, 22 rysunki, podpis, 111

S

350

s, 27 Safari, 32 samp, 25 sandbox, atrybut, 152 Scalable Vector Graphics, Patrz SVG schematy kolorów, 86, 87, 88 script, 25, 41, 100 seamless, atrybut, 152 section, 22 sekcje, 100, 101, 103, 104 sekwencyjne typy odnośników, 144 select, 25, 160, 161, 163 sizes, atrybut, 141 skala szarości, 194 słowa kluczowe, 97 small, 25 Sound Studio, aplikacja, 214 source, 22, 210, 222, 231 type, atrybut, 210, 211, 231 spacer, 27 span, 25, 64 src, atrybut, 54, 206, 222 srcdoc, atrybut, 152 stopka, 104 stopnie, 280 zamiana na radiany, 280 strike, 27 strokeRect(), 267 strona efekty dźwiękowe, integracja, 217 elementy, 54

porządkowanie zawartości, 104 struktura, 57 zagnieżdżanie, 151 strong, 25 style, 25, 62, 63 style wpisane, 62, 68, 69 sub, 25 summary, 22 sup, 25 SVG, 181, 182 konwersja z plików .ai, 200 zmiana rozmiaru, 192 systemy numeryczne, 82

T tabele, 25, 26, 117, 118, 121 elementy, 121 nadawanie stylu, 122 nagłówek, 24 obramowanie, 123, 124 tło, 125 złożone, 127, 128 table, 25, 117, 118, 121 table-cell, 118 tablice JavaScript, 254 PHP, 333 target, atrybut, 148, 293 tbody, 25 td, 25, 121, 128 colspan, atrybut, 128, 130 rowspan, atrybut, 128, 130 tekst cytowany, 23, 25 definicja, 24 kierunek wyświetlania, 23 kursywa, 24 mały, 25 nagłówki, 24 owijanie wokół obrazka, 58 pogrubienie, 23 usunięty, 24 wyróżniony, 24 wyświetlanie, 54 zaakcentowany, 25 zachowanie oryginalnego formatowania, 25 złamanie, 55, 56 textarea, 25 text-decoration, 90


SKOROWIDZ TextEdit, ustawienia, 40 tfoot, 25 th, 25, 121 thead, 25 this, 257 thumbnails, 173 Tidwell, Jennifer, 156, 166 time, 22 title, 25, 42 title, atrybut, 141 tło, 85 tr, 25, 121 tt, 27 Tufte, Edward, 123, 156 twarda spacja, 50 type, atrybut, 141, 210, 211, 231 tytuł strony, 42

U u, 27 ul, 25, 106 Uniform Resource Locator, Patrz URL up, 144 URL, 54

V var, 25 video, 22, 222, 231 autoplay, atrybut, 234 controls, atrybut, 234 height, atrybut, 235 loop, atrybut, 233 poster, atrybut, 232 preload, atrybut, 233 src, atrybut, 222 width, atrybut, 235

W W3C, 118 wbr, 22, 55, 56 WebM, 225 wideo, 221, 222 formaty, 222, 223, 225 kompatybilność, 224, 225 tworzenie, 228, 229, 230 width, atrybut, 235 wiersz, złamanie, 55, 56, 57 World Wide Web Consortium, Patrz W3C współrzędne kartezjańskie, 262 wstępne pobieranie, 140, 141 wykrywanie zdarzeń, 242

Z zagnieżdżone arkusze stylów, 63 zagnieżdżony kontekst przeglądania, 151 zakomentowanie, 46 zdjęcia, oświetlenie, 191 zewnętrzne arkusze stylów, 62, 64 zmienne JavaScript, 250, 251 PHP, 332 znaczniki, 20, 21, 41 atrybuty, 21 części, 43 elementy, 21 końca, 41 początku, 41 podstawowe, 41 zagnieżdżanie, 48

351



Podr cznik HTML5. Smashing Magazine