Idź do

• Spis treści• Przykładowy rozdział• Skorowidz

• Katalog online

• Dodaj do koszyka

• Zamów cennik

• Zamów informacjeo nowościach

• Fragmenty książekonline

Helion SAul. Kościuszki 1c44-100 Gliwicetel. 32 230 98 63e-mail: helion@helion.pl© Helion 1991–2011

Katalog książek

Twój koszyk

Cennik i informacje

Czytelnia

Kontakt

• Zamów drukowanykatalog

HTML, XHTML i CSS.Praktyczne projekty.Wydanie IIAutor: Włodzimierz Gajda

ISBN: 978-83-246-3049-3

Format: 158×235, stron: 512

Zostań świetnym webmasterem!• Podstawy i rozróżnienia, czyli czym różni się HTML od XHTML i co to jest CSS

• Standardy i zasady, czyli o czym pamiętać przy projektowaniu strony internetowej

• Czcionki i układy stron, czyli jak stworzyć znakomity projekt i szablon strony WWW

O projektowaniu stron internetowych napisano zapewne grube tysiące książek. Ta dziedzina

zmienia się jednak na tyle szybko, a profesjonalnych projektantów, mających dużą wiedzę

i obdarzonych umiejętnością jej przekazania, jest na tyle mało, że warto skorzystać z ich

doświadczeń. Zwłaszcza, jeśli niezbędne wiadomości podane są w formie praktycznych

przykładów, a dotyczą tak istotnych kwestii, jak używanie języków HTML i XHTML oraz

kaskadowych arkuszy stylów, zgodność stron z obowiązującymi standardami, komponowanie

układu serwisu WWW i tworzenie jego zawartości.

Drugie wydanie książki „HTML, XHTML i CSS. Praktyczne projekty” pozwoli Ci od podszewki poznać

tajniki projektowania naprawdę przemyślanych stron internetowych, uwzględniających potrzeby

ich użytkowników. Dowiesz się, jak zachować poprawność składniową XHTML i CSS. Poznasz

semantykę kodu XHTML i opanujesz metodologię pracy zgodnej ze standardami. Zrozumiesz,

dlaczego ważne jest zapewnienie dostępności Twoich stron dla osób niepełnosprawnych i co

zrobić, by wyszukiwarki mogły bez trudu przeanalizować oraz zaklasyfikować zawartość serwisu.

Nauczysz się wybierać czcionki, tło, projektować wygodny interfejs i poszczególne fragmenty

strony, a także zapisywać szczególnie udane projekty w formie szablonów.

• Składnia i poprawność języka XHTML

• Znaki diakrytyczne i oznaczanie języka dokumentu

• Praca w trybie standardów

• Podstawowe elementy XHTML

• Kaskadowe arkusze stylów – składnia i właściwości

• Klasy i identyfikatory, rodzaje czcionek

• Wszystkie atrybuty CSS 2.1 dotyczące czcionek i tekstu

• Elementy blokowe, liniowe i pływające

• Obszar zajmowany przez element i metody pozycjonowania elementów blokowych

• Układy stałej szerokości, płynne i hybrydowe

• Tekst, listy, tabele, odsyłacze i pozostałe elementy XHTML

• Właściwości CSS dotyczące tła i przyciski rollover w CSS

• Struktura funkcjonalna witryny, kolejność elementów w kodzie XHTML i atrybuty XHTML

• Formularze i powiązania dokumentów

• Element meta – dodatkowe informacje na temat strony WWW

• Dostępność strony WWW

• Semantyczny XHTML

Wykorzystaj swoją kreatywność, tworząc zachwycające strony WWW!

Spis tre�ci

Cz��� I Elementarz ...................................................................... 11Rozdzia� 1. Wprowadzenie ................................................................................................13

Dla kogo jest ta ksi��ka? ................................................................................................................... 13Jak czyta� t� ksi��k�? ........................................................................................................................ 14Warsztat pracy ................................................................................................................................... 14Firefox ............................................................................................................................................... 16Testowanie stron WWW ................................................................................................................... 16Edycja kodu XHTML ....................................................................................................................... 17

Rozdzia� 2. Sk�adnia j�zyka XHTML ...................................................................................21Znaczniki i elementy ......................................................................................................................... 21Wszystkie elementy j�zyka XHTML ................................................................................................ 22Elementy puste i niepuste .................................................................................................................. 22Znaczniki wymagane i opcjonalne oraz elementy puste .................................................................... 23Wielko�� liter w nazwach znaczników .............................................................................................. 24Bia�e znaki wewn�trz znaczników .................................................................................................... 24Bia�e znaki w tre�ci elementów ......................................................................................................... 25Zagnie�d�anie elementów ................................................................................................................. 25Znaki specjalne ................................................................................................................................. 26Atrybuty znaczników ........................................................................................................................ 28Bia�e znaki w warto�ciach atrybutów ................................................................................................ 30Atrybuty logiczne, wyliczeniowe i inne ............................................................................................ 30Komentarze w XHTML .................................................................................................................... 32Struktura dokumentu HTML ............................................................................................................. 33Pierwsza strona WWW ..................................................................................................................... 34

Rozdzia� 3. Znaki diakrytyczne i oznaczanie j�zyka dokumentu ..........................................37Polskie znaki diakrytyczne ................................................................................................................ 37Metody kodowania polskich znaków diakrytycznych ....................................................................... 37Fizyczne kodowanie pliku ................................................................................................................. 38Element meta ustalaj�cy kodowanie dokumentu XHTML ................................................................ 39Pangramy .......................................................................................................................................... 40Atrybuty lang oraz xml:lang .............................................................................................................. 41Szablony pustych polskich stron WWW ........................................................................................... 42Znaki diakrytyczne w postaci encji ................................................................................................... 42Kodowanie stron zawieraj�cych teksty w kilku j�zykach ................................................................. 43Jakiego kodowania u�ywa�? ............................................................................................................. 47B��dne wy�wietlanie polskich znaków diakrytycznych .................................................................... 47�wiczenia .......................................................................................................................................... 48

4 Spis tre�ci

Rozdzia� 4. XHTML poprawny sk�adniowo ..........................................................................53Czy poprawno�� sk�adniowa jest wa�na? .......................................................................................... 53Obecny stan internetu ........................................................................................................................ 54Metody sprawdzania poprawno�ci sk�adniowej ................................................................................ 54

Rozdzia� 5. Praca w trybie standardów ..............................................................................61Quirks mode i standard mode — dwa tryby pracy przegl�darek internetowych ............................... 61Problemy z trybami pracy ................................................................................................................. 62Które przegl�darki maj� tryb standardów? ........................................................................................ 62Jak sprawdzi� tryb pracy przegl�darki? ............................................................................................. 63W jaki sposób przegl�darka wybiera tryb pracy? .............................................................................. 65B��dne wy�wietlanie witryny wynikaj�ce z prze��czenia trybu pracy przegl�darki .......................... 66Stosuj DOCTYPE j�zyka XHTML 1.0 strict .................................................................................... 69

Rozdzia� 6. Podstawowe elementy XHTML ........................................................................71Akapit ................................................................................................................................................ 71Dzielenie wyrazów ............................................................................................................................ 76Zakaz �amania wiersza ...................................................................................................................... 77Z�amanie wiersza .............................................................................................................................. 78Znaki interpunkcyjne ........................................................................................................................ 80Nag�ówki ........................................................................................................................................... 80Wyró�nianie tekstu ............................................................................................................................ 83Tekst preformatowany ...................................................................................................................... 85Indeksy dolny i górny ........................................................................................................................ 86Linia pozioma ................................................................................................................................... 87Popularne znaki specjalne ................................................................................................................. 88Zestawienie ....................................................................................................................................... 88

Rozdzia� 7. Kaskadowe arkusze stylów .............................................................................91Struktura a wygl�d dokumentów HTML ........................................................................................... 91Do��czanie stylów do dokumentu ..................................................................................................... 91

Style zewn�trzne ......................................................................................................................... 91Style wewn�trzne ........................................................................................................................ 92Atrybut style ............................................................................................................................... 93

Domy�lny j�zyk stylów ..................................................................................................................... 94Ujmowanie stylów wewn�trznych w komentarz ............................................................................... 95

Rozdzia� 8. Sk�adnia kaskadowych arkuszy stylów ............................................................97Terminologia ..................................................................................................................................... 97Wielko�� liter w selektorach ............................................................................................................. 98Wielko�� liter w nazwach i warto�ciach w�a�ciwo�ci ....................................................................... 99Bia�e znaki ........................................................................................................................................ 99Komentarze ..................................................................................................................................... 100Formatowanie kodu CSS ................................................................................................................. 100

Rozdzia� 9. Przyk�adowe w�a�ciwo�ci CSS .......................................................................103Czcionki .......................................................................................................................................... 103Wysoko�� wiersza tekstu ................................................................................................................ 104Wyrównanie poziome tekstu ........................................................................................................... 105Marginesy ....................................................................................................................................... 105Kolory ............................................................................................................................................. 106Obramowanie .................................................................................................................................. 108XHTML — struktura, CSS — wygl�d ............................................................................................ 109Zestawienie sumaryczne ................................................................................................................. 109

Rozdzia� 10. Klasy i identyfikatory ..................................................................................111Atrybut class ................................................................................................................................... 111Selektory dotycz�ce klas ................................................................................................................. 112

Spis tre�ci 5

Stosowanie klas ............................................................................................................................... 112Atrybut id ........................................................................................................................................ 113Selektory dotycz�ce identyfikatorów .............................................................................................. 113Stosowanie identyfikatorów ............................................................................................................ 114Walka z classitis: selektory potomne .............................................................................................. 115

Rozdzia� 11. Projekty .....................................................................................................119

Cz��� II Czcionki na stronach WWW ........................................... 127Rozdzia� 12. Rodzaje czcionek ........................................................................................129

Czcionki szeryfowe i bezszeryfowe ................................................................................................ 129Czcionki proporcjonalne i nieproporcjonalne ................................................................................. 130Inne podzia�y czcionek .................................................................................................................... 131Testowanie czcionek ....................................................................................................................... 133

Rozdzia� 13. Czcionki dla webmastera ............................................................................135Core fonts for the Web .................................................................................................................... 138Czcionki dost�pne na ró�nych platformach ..................................................................................... 138Definiowanie kroju czcionki ........................................................................................................... 139Osadzanie czcionek na stronach WWW .......................................................................................... 141Google Fonts ................................................................................................................................... 143

Rozdzia� 14. Wszystkie w�a�ciwo�ci CSS 2.1 dotycz�ce czcionek i tekstu .......................145font-family ...................................................................................................................................... 145font-size ........................................................................................................................................... 146font-style ......................................................................................................................................... 148font-weight ...................................................................................................................................... 148font-variant ...................................................................................................................................... 148font .................................................................................................................................................. 148text-align ......................................................................................................................................... 149text-decoration ................................................................................................................................ 149text-indent ....................................................................................................................................... 149text-transform .................................................................................................................................. 150word-spacing ................................................................................................................................... 150letter-spacing ................................................................................................................................... 150white-space ..................................................................................................................................... 150line-height ....................................................................................................................................... 151

Rozdzia� 15. Projekty .....................................................................................................153

Cz��� III Uk�ad strony ................................................................ 159Rozdzia� 16. Elementy blokowe i liniowe .........................................................................161

Elementy blokowe i liniowe — definicja sk�adniowa ..................................................................... 161Elementy blokowe i liniowe — definicja prezentacyjna ................................................................. 165Który ze sposobów definiowania elementów blokowych i liniowych jest lepszy i dlaczego? ........ 167Elementy ogólne div i span ............................................................................................................. 168U�ywanie elementów div i span w po��czeniu z klasami i identyfikatorami .................................. 169Typowy przyk�ad u�ycia elementów div ......................................................................................... 170Domy�lny format wizualny elementów blokowych i liniowych ..................................................... 171

Rozdzia� 17. Obszar zajmowany przez element .................................................................175W�a�ciwo�� display ......................................................................................................................... 179Wy�rodkowanie elementu blokowego ............................................................................................ 180�czenie marginesów pionowych ................................................................................................... 183Wymiary minimalne i maksymalne ................................................................................................. 184

6 Spis tre�ci

Rozdzia� 18. Elementy p�ywaj�ce ....................................................................................187W�a�ciwo�� float ............................................................................................................................. 187Uk�ady kolumnowe ......................................................................................................................... 190Znikaj�ce t�o pojemnika .................................................................................................................. 192Czyszczenie elementów p�ywaj�cych ............................................................................................. 193

Rozdzia� 19. Zaawansowane metody pozycjonowania elementów blokowych ....................195W�a�ciwo�� position ........................................................................................................................ 195Pozycjonowanie statyczne ............................................................................................................... 197Pozycjonowanie wzgl�dne .............................................................................................................. 198Pozycjonowanie bezwzgl�dne ......................................................................................................... 200Pozycjonowanie trwa�e ................................................................................................................... 201Pozycjonowanie kontekstowe ......................................................................................................... 202W�a�ciwo�ci left, right, top oraz bottom .......................................................................................... 205Warstwy i ich kolejno�� .................................................................................................................. 210Przycinanie ...................................................................................................................................... 212

Rozdzia� 20. Uk�ady o sta�ej szeroko�ci ..........................................................................215Dobieranie szeroko�ci uk�adu ......................................................................................................... 215Uk�ady przylegaj�ce do okna przegl�darki ..................................................................................... 217

Rozdzia� 21. Uk�ady p�ynne .............................................................................................227

Rozdzia� 22. Uk�ady hybrydowe .......................................................................................231Uk�ady dwukolumnowe .................................................................................................................. 231Uk�ad trójkolumnowy ..................................................................................................................... 235

Rozdzia� 23. Projekty .....................................................................................................239

Cz��� IV Elementy XHTML ......................................................... 247Rozdzia� 24. Tekst .........................................................................................................249

Elementy frazowe ............................................................................................................................ 249Trudne wybory ................................................................................................................................ 251Cytaty .............................................................................................................................................. 252Tekst na stronach WWW — podsumowanie ................................................................................... 253

Rozdzia� 25. Listy ...........................................................................................................255Wypunktowanie .............................................................................................................................. 255Numerowanie .................................................................................................................................. 256Lista definicji .................................................................................................................................. 256Zagnie�d�anie list ............................................................................................................................ 257W�a�ciwo�ci CSS list ...................................................................................................................... 259

Rozdzia� 26. Element img ...............................................................................................263Pliki graficzne ................................................................................................................................. 264Sk�adnia elementu img .................................................................................................................... 264Wymiary obrazów ........................................................................................................................... 265Obrazy nieprostok�tne ..................................................................................................................... 268Animacje ......................................................................................................................................... 270Op�ywanie ....................................................................................................................................... 271Dlaczego elementy p�ywaj�ce nie generuj� wysoko�ci? ................................................................. 273Osadzanie obrazów w kodzie XHTML ........................................................................................... 275

Rozdzia� 27. Tabele ........................................................................................................279Obramowanie i ��czenie obramowania ............................................................................................ 280Podstawowe formatowanie komórek i ca�ych tabel ........................................................................ 281Nag�ówki kolumn i nag�ówki wierszy ............................................................................................. 283Podpis i opis tabeli .......................................................................................................................... 285

Spis tre�ci 7

Tabele regularne i nieregularne ....................................................................................................... 286Nag�ówek, stopka i tre�� tabeli ........................................................................................................ 288Kolumny tabeli ................................................................................................................................ 290Tabele XHTML — podsumowanie ................................................................................................. 294

Rozdzia� 28. Odsy�acze ...................................................................................................297Spis tre�ci w postaci listy numerowanej b�d wypunktowanej ....................................................... 298Style CSS witryny z hiper��czami ................................................................................................... 299Atrybut title ..................................................................................................................................... 300Odsy�acze do ró�nych typów plików .............................................................................................. 300Odsy�acze wskazuj�ce strony w internecie ..................................................................................... 301Odsy�acze wewn�trzne .................................................................................................................... 301Obrazy jako odsy�acze .................................................................................................................... 303Style CSS odsy�aczy ....................................................................................................................... 304Otwieranie nowych okien ................................................................................................................ 305Mapa odsy�aczy ............................................................................................................................... 306

Rozdzia� 29. Pozosta�e elementy XHTML .........................................................................309Oznaczanie zmian w dokumencie ................................................................................................... 309Element object ................................................................................................................................. 310

Osadzanie na stronie WWW filmów z serwisu YouTube ......................................................... 311Osadzanie na stronie WWW apletów pisanych w j�zyku Java ................................................. 313

Bazowy adres URL ......................................................................................................................... 314Rozdzia� 30. Projekty .....................................................................................................317

Cz��� V T�a ................................................................................ 339Rozdzia� 31. W�a�ciwo�ci CSS dotycz�ce t�a ...................................................................341

Rozdzia� 32. FIR — wymiana obrazów na teksty ..............................................................351Efekt FIR wykonany przy u�yciu display: none .............................................................................. 353Efekt FIR wykonany przy u�yciu text-indent .................................................................................. 353Efekt FIR wykorzystuj�cy kolejno�� warstw .................................................................................. 354

Rozdzia� 33. Udawane kolumny ......................................................................................359

Rozdzia� 34. Przyciski rollover w CSS .............................................................................367Wymiana obrazu t�a ........................................................................................................................ 367Przycisk z etykiet� tekstow� ............................................................................................................ 368Przyciski pozycjonowane kontekstowo ........................................................................................... 369

Rozdzia� 35. Kafelkowanie ..............................................................................................381Etap pierwszy: pokrojenie szablonu na oddzielne pliki ............................................................ 388Etap drugi: sklejenie oddzielnych plików w jeden plik sprite.png ............................................ 389

Rozdzia� 36. Projekty .....................................................................................................393

Cz��� VI Zagadnienia zaawansowane ......................................... 405Rozdzia� 37. Struktura funkcjonalna witryny ....................................................................407

Rozdzia� 38. Uzupe�nienie wiadomo�ci na temat CSS ......................................................411Selektory ......................................................................................................................................... 411Pseudoklasy ..................................................................................................................................... 414Importowanie stylów ....................................................................................................................... 418Dziedziczenie .................................................................................................................................. 419Style do druku ................................................................................................................................. 419Style alternatywne ........................................................................................................................... 422

8 Spis tre�ci

Rozdzia� 39. Kolejno�� elementów w kodzie XHTML ........................................................423Zmiana kolejno�ci kolumn pionowych ........................................................................................... 424Zmiana kolejno�ci poziomych pasów ............................................................................................. 427Zmiana kolejno�ci kolumn oraz poziomych pasów ......................................................................... 428

Rozdzia� 40. Atrybuty XHTML .........................................................................................431Atrybuty zasadnicze ........................................................................................................................ 431Atrybuty j�zykowe .......................................................................................................................... 431Zdarzenia ......................................................................................................................................... 432Atrybuty ogólne .............................................................................................................................. 433Atrybuty dotycz�ce aktywnego punktu ........................................................................................... 433

Rozdzia� 41. Formularze .................................................................................................435Atrybuty formularza ........................................................................................................................ 436Kontrolki formularza ....................................................................................................................... 437Atrybuty ogólne kontrolek formularza ............................................................................................ 438Zdarzenia dotycz�ce kontrolek ........................................................................................................ 439Elementy input ................................................................................................................................ 439Przyciski zatwierdzaj�ce i resetuj�ce formularz .............................................................................. 440Wiersz wprowadzania danych ......................................................................................................... 441Pole has�a ........................................................................................................................................ 441Pola wyboru .................................................................................................................................... 441Wykluczaj�ce pola wyboru ............................................................................................................. 442Kontrolki ukryte .............................................................................................................................. 443Przyciski .......................................................................................................................................... 443Kontrolka wyboru pliku .................................................................................................................. 443Obraz ............................................................................................................................................... 444Element button ................................................................................................................................ 444Listy ................................................................................................................................................ 445Pole tekstowe .................................................................................................................................. 447Grupowanie i podpisywanie kontrolek formularza ......................................................................... 447Podsumowanie ................................................................................................................................ 448

Rozdzia� 42. Powi�zania dokumentów .............................................................................449Element link .................................................................................................................................... 449Kana�y RSS i Atom ......................................................................................................................... 451Nast�pny, poprzedni oraz spis tre�ci ............................................................................................... 455Ikona witryny WWW ...................................................................................................................... 457Twórcy witryny WWW ................................................................................................................... 460Plik robots.txt .................................................................................................................................. 460Plik sitemap.xml .............................................................................................................................. 461

Rozdzia� 43. Element meta — dodatkowe informacje na temat strony WWW ...................463Sk�adnia elementu meta .................................................................................................................. 464Znaczenie elementu meta ................................................................................................................ 464Dwa rodzaje elementów meta ......................................................................................................... 464Jakie metainformacje umieszcza� w witrynach? ............................................................................. 465

Kodowanie znaków ................................................................................................................... 465J�zyki, w jakich przygotowano dokument ................................................................................ 465Autor, prawa autorskie i firma .................................................................................................. 466S�owa kluczowe i opis ............................................................................................................... 466Roboty ....................................................................................................................................... 467Data powstania i wa�no�ci dokumentu ..................................................................................... 467Przechowywanie stron WWW przez po�redników ................................................................... 468Skrypty i style — domy�lny j�zyk ............................................................................................ 468Metainformacje w kilku j�zykach ............................................................................................. 468Przekierowania .......................................................................................................................... 469Ró�no�ci ................................................................................................................................... 469

Spis tre�ci 9

Rozdzia� 44. Dost�pno�� strony WWW ............................................................................471Kilka prostych zasad ....................................................................................................................... 471

Tre�� umieszczaj jako pierwsz� ................................................................................................ 471Etykietuj kontrolki formularzy .................................................................................................. 472Pami�taj o atrybutach alt ........................................................................................................... 472Definiuj tytu�y hiper��czy ......................................................................................................... 472Twórz czytelne tabele ............................................................................................................... 472Nie otwieraj nowych okien ....................................................................................................... 473Nie u�ywaj przekierowa� meta refresh ..................................................................................... 473Definiuj powi�zania mi�dzy poszczególnymi podstronami witryny ......................................... 473Stosuj atrybut lang .................................................................................................................... 473Definiuj skróty i skrótowce ....................................................................................................... 473

Rozdzia� 45. HTML czy XHTML? ......................................................................................475XHTML zgodny z HTML ............................................................................................................... 475

Wielko�� liter ............................................................................................................................ 475Elementy puste i niepuste ......................................................................................................... 476Znaczniki opcjonalne ................................................................................................................ 477Cudzys�ów otaczaj�cy warto�ci atrybutów ............................................................................... 477Minimalizacja atrybutów logicznych ........................................................................................ 478Identyfikator fragmentu ............................................................................................................ 478Style i skrypty ........................................................................................................................... 478Encje ......................................................................................................................................... 479

Dokumenty HTML/XHTML w sieci WWW .................................................................................. 479Content-type .............................................................................................................................. 479Czy to HTML, czy XHTML? ................................................................................................... 481Jak przegl�darka traktuje dokument HTML, a jak XHTML? ................................................... 481Po czym przegl�darka rozpoznaje j�zyk dokumentu? ............................................................... 482Nag�ówek Content-type dokumentu HTML oraz XHTML ....................................................... 482Problemy z Internet Explorerem ............................................................................................... 482

Strona XHTML wysy�ana jako application/xhtml+xml .................................................................. 483Zmiana nag�ówków wysy�anych przez serwer Apache ............................................................. 483Wysy�anie nag�ówka HTTP w PHP .......................................................................................... 483

Cztery proste zasady ....................................................................................................................... 483HTML czy XHTML? ...................................................................................................................... 484

Rozdzia� 46. Semantyczny XHTML ..................................................................................485Witryna WWW widziana oczami cz�owieka i robota ..................................................................... 485Semantyczna sie� ............................................................................................................................ 486Semantyka kodu XHTML ............................................................................................................... 486Semantyka przez ma�e s .................................................................................................................. 487Kto ma racj�, czyli o braku specyfikacji semantyki XHTML ......................................................... 488Praktyczne rozwi�zania popularnych problemów ........................................................................... 488

Menu witryny ............................................................................................................................ 488Nawigacja: jeste� tutaj .............................................................................................................. 488Ilustracja ................................................................................................................................... 489Listing ....................................................................................................................................... 489

Z�o�enia ........................................................................................................................................... 489Z�o�enie: dialog ........................................................................................................................ 490Bibliografia ............................................................................................................................... 490

Problemy semantyczne XHTML i CSS ........................................................................................... 491Czy strong jest bardziej semantyczny ni� b? ................................................................................... 494Elementy em oraz span ................................................................................................................... 495Drzewo elementów .......................................................................................................................... 496Element czysto prezentacyjny ......................................................................................................... 497

10 Spis tre�ci

Czy wszystkie elementy tekstowe s� równowa�ne? ........................................................................ 497Czy klasa wzbogaca semantyk� elementu? ..................................................................................... 498Czy XHTML jest bardziej semantyczny ni� HTML? ..................................................................... 499Praktyczne porady dotycz�ce semantyki ......................................................................................... 499

Skorowidz ......................................................................................................................501

Rozdzia� 7. � Kaskadowe arkusze stylów 91

Rozdzia� 7.

Kaskadowe arkusze stylów

Struktura a wygl�d dokumentów HTMLWygl�d witryn WWW zale�y od dwóch czynników: kodu strony napisanego w j�zyku XHTML oraz for-matu nadawanego przez przegl�dark� ró�nym elementom XHTML. Struktur� i zawarto�� dokumentuopisujemy, korzystaj�c z elementów XHTML: m.in. akapitów (p), nag�ówków (h1, h2), tabel (table, tr,td, th), sekcji (div) itd. Natomiast format elementów definiujemy w j�zyku CSS (ang. Cascading StyleSheets — kaskadowe arkusze stylów).

Tworz�c witryn� WWW, musimy wi�c opisa�:� struktur� i zawarto�� strony (j�zyk XHTML),� format elementów (j�zyk CSS).

W przypadku braku stylów przegl�darka zastosuje style domy�lne, które zazwyczaj s� do�� ubogie.

Oddzielaj�c definicj� formatu elementów od samej zawarto�ci strony, otrzymamy dokument, którego formatjest niezale�ny od zawarto�ci. G�ówn� korzy�ci� takiego rozwi�zania jest to, �e wygl�d dokumentu mo-�emy modyfikowa�, nie zmieniaj�c jego tre�ci (czyli kodu XHTML).

Do��czanie stylów do dokumentuStyle CSS mo�emy do��czy� do dokumentu XHTML na trzy sposoby:� jako style zewn�trzne,� jako style wewn�trzne,� stosuj�c atrybut style.

W pierwszym przypadku style s� zapisane w osobnym pliku. W drugim przypadku style znajduj� si�w nag�ówku strony WWW, a wi�c pomi�dzy znacznikami <head> oraz </head>. W trzecim przypadkustyle pojawiaj� si� przy konkretnych elementach XHTML w tre�ci strony, czyli pomi�dzy znacznikami <body>oraz </body>.

Style zewn�trzneW pierwszej metodzie style zapisujemy w osobnym pliku. Plik ze stylami ma zazwyczaj rozszerzenie.css. Tak zdefiniowane style do��czamy do dokumentu XHTML, umieszczaj�c w nag�ówku strony ele-ment link:

<link rel="stylesheet" href="style.css" type="text/css" />

92 Cz��� I � Elementarz

NOTH

Style zewn�trzne <link .../> — Ctrl+B+Z, Ctrl+B+SPo aktywacji skrótu Ctrl+B+Z naci�nij przycisk F8. U�atwi Ci on wstawienie nazwy pliku CSS.

Witryna sk�ada si� wi�c z dwóch plików: dokumentu XHTML oraz dokumentu CSS. Listing 7.1 przed-stawia przyk�adowy plik index.html, za� listing 7.2 ilustruje zawarto�� pliku style.css. W kodzie XHTMLpojawia si� element link z atrybutem href. Warto�ci� atrybutu href jest nazwa pliku ze stylami (w przy-k�adzie: style.css).

Listing 7.1. Kod XHTML strony WWW stosuj�cej style zewn�trzne (plik index.html)<!DOCTYPE ...><html ...> <head> <title>Style zewn�trzne</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="style.css" /> </head><body>

<h1>WITAJ</h1>

</body></html>

Listing 7.2. Style CSS (plik style.css)

h1 { margin: 20px; background: blue; color: white; border: 4px solid black; text-align: center;}

Zalet� takiego rozwi�zania jest to, �e w jednym miejscu mo�esz modyfikowa� wygl�d wszystkich pod-stron witryny. Co wi�cej, tak wykonana witryna b�dzie zajmowa�a mniej miejsca i zu�yje mniej transfe-ru. Style zostan� pobrane z serwera jeden jedyny raz. Kosztem do��czenia stylów do witryny jest jedynieelement link dodany na ka�dej podstronie.Ponadto style zawarte w zewn�trznym pliku mog� zawiera� dowolne znaki, tak�e <, > czy &, nie powoduj�c�adnych komplikacji1.Jest to najlepsza metoda formatowania wygl�du witryny. Nale�y j� stosowa� w odniesieniu do wi�kszo�ciwitryn przeznaczonych do publikacji w internecie.

Style wewn�trzneStyle wewn�trzne umieszczamy w nag�ówku strony WWW, wykorzystuj�c element style:

<style type="text/css">...tutaj definicja stylów...</style>

NOTH

Style wewn�trzne <style ...>...</style> — Ctrl+B+W

1 Specyfikacja XHTML 1.0. punkt C.4.

Rozdzia� 7. � Kaskadowe arkusze stylów 93

Listing 7.3 przedstawia kod przyk�adowej strony WWW, która stosuje style wewn�trzne. W nag�ówku witry-ny pojawia si� element style, zawieraj�cy definicj� stylu nag�ówka h1. W tre�ci witryny, pomi�dzy znacz-nikami <body> oraz </body>, wyst�puje element h1, którego wygl�d zostanie zmieniony zgodnie ze sty-lami podanymi wewn�trz elementu style. Przyk�ad ten sk�ada si� z jednego pliku: index.html.

Listing 7.3. Style wewn�trzne

<!DOCTYPE ...><html ...> <head> <title>Style wewn�trzne</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> h1 { margin: 20px; background: blue; color: white; border: 4px solid black; text-align: center; } </style> </head><body>

<h1>WITAJ</h1>

</body></html>

Zalet� tego rozwi�zania jest to, �e w jednym miejscu pojawiaj� si� style i kod XHTML. Je�li wykonasz na ta-kiej witrynie operacj� podgl�du ród�a2, to ujrzysz i kod XHTML, i style CSS3. Ponadto tak wykonana witry-na b�dzie poprawnie wygl�da�a (tj. b�dzie ozdobiona stylami), gdy zostanie otworzona wewn�trzaplikacji. Na przyk�ad je�li spakujesz kilka tak wykonanych stron, po czym otworzysz spakowane archi-wum programem archiwizuj�cym, to witryna b�dzie poprawnie wygl�da�a po otworzeniu z wn�trza archiwum(bez wypakowywania).

Wad� tego rozwi�zania jest jego rozmiar: ka�da podstrona projektu b�dzie zawiera�a komplet stylów.Ponadto je�li zechcesz wykona� zmian�, która obejmie wszystkie podstrony witryny, to b�dziesz musia�zmieni� style w ka�dym pliku z osobna.

W praktyce style wewn�trzne stosuj� w odniesieniu do dokumentów, które s� pojedynczymi plikami (np.opisy programów umieszczane w spakowanych archiwach).

Atrybut styleTrzecia metoda definiowania stylów wykorzystuje atrybut style. Atrybut ten mo�e towarzyszy� nie-mal ka�demu elementowi XHTML. Zmiana formatu akapitu ma posta�:

<p style="width: 300px; margin: 20px; background: blue;">Witaj</p>

Atrybut style mo�e by� przydatny w specyficznych okoliczno�ciach. Na przyk�ad wtedy, gdy nie maszuprawnie� do modyfikowania plików CSS na serwerze, a mo�esz modyfikowa� fragment pliku XHTML. Sy-tuacja taka mo�e pojawi� si� na przyk�ad w systemie CMS. U�ytkownik nie ma prawa modyfikowa� �adnychplików (ani XHTML, ani CSS), ale mo�e w systemie umieszcza� wpisy zawieraj�ce — oprócz koduXHTML — tak�e atrybut style.

2 Opcja Widok/�ród�o w przegl�darce.3 Usprawnia to m.in. prowadzenie �wicze� z j�zyków XHTML oraz CSS. Nauczyciel przygotowuje przyk�ad i umieszcza

go w sieci. Uczniowie po wykonaniu operacji podgl�du ród�a ujrz� kompletny kod XHTML oraz CSS.

94 Cz��� I � Elementarz

W przypadku, kiedy masz dost�p do pliku CSS witryny, rozwi�zanie takie nie ma sensu. Niektórzy twierdz�nawet, �e atrybut style jest porównywalny z dawno wycofanym elementem font4.

U�ycie atrybutu style w odniesieniu do elementu h1 pokazuje listing 7.4.

Listing 7.4. Atrybut style

<!DOCTYPE ...><html ...> <head> <title>Atrybut style</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head><body>

<h1 style="margin: 20px; background: blue; color: white;border: 4px solid black; text-align: center;">WITAJ</h1>

</body></html>

Rysunek 7.1 przedstawia wygl�d opisanej witryny. Trzy podane przyk�ady, pierwszy ze stylami zewn�trz-nymi, drugi stosuj�cy style wewn�trzne i trzeci wykorzystuj�cy atrybut style, maj� identyczny wygl�d.

Rysunek 7.1.Wygl�d witryny, którejkod jest widocznyna listingach 7.1,7.2, 7.3 i 7.4

Domy�lny j�zyk stylówW chwili obecnej style dokumentów XHTML s� opisywane wy��cznie w j�zyku CSS. Jest to j�zyk do-my�lny stosowany przez wszystkie przegl�darki.

O j�zyku stylów mówi atrybut type="text/css" zawarty w elementach link (style zewn�trzne):<link rel="stylesheet" href="style.css" type="text/css" />

oraz style (style wewn�trzne):<style type="text/css">...</style>

Warto�� text/css ustala, �e style s� zapisane w j�zyku CSS.

Korzystaj�c z atrybutu style, nie wskazujemy w �aden sposób, w jakim j�zyku opisano style:<p style="...">Witaj</p>

4 Henri Sivonen nazywa atrybut style znacznikiem <font> w przebraniu (ang. The style attribute is <font> in disguise.).

Por. HTML Syntax Checker in PHP, http://hsivonen.iki.fi/html-syntax-checker/.

Rozdzia� 7. � Kaskadowe arkusze stylów 95

Specyfikacja j�zyka HTML zawiera informacj�5 o tym, �e domy�lny j�zyk stylów mo�emy ustali�nast�puj�cym elementem meta:

<meta http-equiv="Content-Style-Type" content="text/css" />

Jest to jednak zupe�nie zb�dne, gdy� jedynym dost�pnym j�zykiem opisu stylów jest CSS. Umieszcze-nie powy�szego elementu meta w kodzie strony nie przynosi �adnych korzy�ci.

Ujmowanie stylów wewn�trznych w komentarzW okresie, gdy implementacja stylów CSS zaczyna�a si� pojawia� w przegl�darkach, tj. w latach 1995 –2000, element style sprawia� pewien k�opot. Je�li przegl�darka go nie rozumia�a, to mog�a podan� w nimzawarto�� wy�wietli� na stronie wraz z tekstem. Zabezpieczeniem przed takim niepo��danym dzia�a-niem by�o stosowanie komentarzy w kodzie HTML. Ca�� zawarto�� elementu style umieszczano w ko-mentarzu:

PRZYK�AD NIEPOPRAWNY<style type="text/css"><!--p { font-family: Georgia, serif;}--></style>

Obecnie takie post�powanie nie tylko nie przynosi �adnej korzy�ci, ale tak�e mo�e powodowa�, �estyle nie b�d� dzia�a�y6. Powy�szy przyk�ad nale�y zapisywa� jako:

<style type="text/css">p { font-family: Georgia, serif;}</style>

�wiczenie 7.1

Wykonaj stron� WWW zawieraj�c� jeden akapit z tekstem Lorem ipsum. Stosuj�c style zewn�trzne,sformatuj akapit tak, by mia� du�y margines oraz niebiesk�, wyt�uszczon� czcionk� Georgia po-dwójnej wielko�ci. Wykorzystaj style z listingu 7.5.

Listing 7.5. Style do �wiczenia 7.1

p { margin: 100px; font-family: Georgia, serif; font-size: 200%; font-weight: bold; color: blue;}

�wiczenie 7.2

Wykonaj stron� WWW zawieraj�c� jeden akapit z tekstem Lorem ipsum. Stosuj�c style wewn�trzne, sfor-matuj akapit tak, by mia� du�y margines oraz niebiesk�, wyt�uszczon� czcionk� Georgia podwójnej wiel-ko�ci. Wykorzystaj style z listingu 7.5.

5 Specyfikacja HTML 4.01, punkt 14.2.1.6 Specyfikacja XHTML 1.0, rozdzia� C.4.

96 Cz��� I � Elementarz

�wiczenie 7.3

Wykonaj stron� WWW zawieraj�c� jeden akapit z tekstem Lorem ipsum. Style podane na listingu 7.5przypisz do elementu p, wykorzystuj�c atrybut style.

NOTH

Szablon pustej strony WWW bez stylów CSS — Ctrl+B+1

Szablon pustej strony WWW ze stylami wewn�trznymi — Ctrl+B+2

Szablon pustej strony WWW ze stylami zewn�trznymi — Ctrl+B+3

SkorowidzA

absolute-relative, Patrz pozycjonowaniekontekstowe

Adobe WebType, 138adres bazowy, 314Ajax, 311akapit, 71, 91, 176, 279Alpha Geometrique, 131alternate text, Patrz atrybut altAndale Mono, 138animacja, 270Apache, 57, 483aplet, 313apostrof, 29Arial, 103, 129, 130, 138arkusz stylów, 17, 61, 78, 87, 97, 139, 418, 419ASCII, 27atrybut, 25, 28, 145, 146, 414, 475

abbr, 295accept, 436, 440accept-charset, 436accesskey, 433, 438, 440, 441, 448action, 436alt, 28, 32, 264, 306, 440, 472axis, 295background, 99border, 280, 294cellhalign, 295cellpadding, 294cellspacing, 294cellvalign, 295checked, 440, 442class, 30, 111, 112, 115, 412, 431, 433, 498cols, 447colspan, 286, 295coords, 306dir, 30, 431, 432, 433disabled, 438, 440, 441

dotycz�cy aktywnego punktu, 431, 433enctype, 436, 437fieldset, 438font-size, 103font-style, 103font-weight, 103for, 448frame, 294headers, 283, 295, 473height, 266href, 32, 92, 300, 301, 306http-equiv, 464id, 28, 30, 113, 115, 283, 431, 433, 437, 473, 478ismap, 440j�zykowy, 431, 433kolejno��, 30label, 438, 446lang, 30, 34, 41, 52, 412, 431, 432, 433, 465,

468, 473legend, 438line-height, 104link, 468logiczny, 30, 31, 442, 478

area, 31button, 31img, 31input, 31object, 31optgroup, 31option, 31script, 31select, 31textarea, 31

maxlength, 440, 441media, 419, 421method, 31, 436, 438multiple, 446name, 436, 438, 440, 441, 442, 464, 466, 478ogólny, 433, 436, 441

502 Skorowidz

atrybutonblur, 434, 440onchange, 440onclick, 30, 432, 433ondblclick, 30, 432, 433onfocus, 434, 440onkeydown, 30, 432, 433onkeypress, 432, 433onkeyup, 30, 432, 433onmousedown, 30, 432, 433onmousemove, 432, 433onmouseout, 30, 432, 433onmouseover, 30onmousepress, 30onmouseup, 30, 432, 433onreset, 436, 437onselect, 440onsubmit, 436, 437readonly, 438, 440, 441rel, 422, 450, 455rows, 447rowspan, 286, 295rules, 294scope, 283, 295, 473shape, 306size, 440, 441, 446span, 295src, 17, 28, 264, 440style, 30, 91, 93, 94, 431, 433, 468summary, 285, 294, 473tabindex, 433, 438, 440, 441target, 305, 473title, 30, 251, 300, 303, 422, 431, 433, 472, 473type, 94, 439, 440, 444usemap, 440value, 438, 440, 441warto��, 477width, 266, 294wyliczeniowy, 30, 31, 475

align, 32dir, 32frame, 32method, 32rules, 32scope, 32type, 32valign, 32valuetype, 32

xml:lang, 34, 41, 52, 431, 432, 433, 473zasadniczy, 431, 433zdarzenie, 431, 432

attrs, Patrz atrybut ogólny

BBackCompat, 63bia�e znaki, 24, 28, 72, 85, 99, 100, 103, 111, 139

interpretacja, 150bie��ca pozycja, 488Bitstream Vera Mono, 138Bitstream Vera Sans, 138blok, 97, 175blok deklaracji, 97border, Patrz obramowaniebox, 175box model, 175

CCarefree, 135, 136Çelik Tantek, 487, 489character references, Patrz znaki specjalneCharcoal, 138Chess Kingdom, 131Chicago, 138Chrome, 14, 17, 62, 77classitis, 115Comic Sans MS, 131, 138content, Patrz zawarto��core attribute, Patrz atrybut zasadniczyCore fonts for the Web, 138, 139, 146Core Fonts for the Web, 103Courier, 138Courier New, 103, 130, 138Critter, 131CSS Color Module Level 3, 106CSS1Compat, 63cudzys�ów, 29, 32, 80, 103, 252cursive, Patrz czcionka odr�cznacyrylica, 45cytat, 252

blockquote, 249, 490cite, 490q, 249

czcionka, 80, 103, 129, 135, 146bezszeryfowa, 103, 129, 138, 139fantazyjna, 131, 139grubo��, 148nieproporcjonalna, 85, 130, 138, 139o sta�ej szeroko�ci, Patrz czcionka

nieproporcjonalnaodr�czna, 131, 139ornamentowa, 131osadzanie, 141, 145pochylona, 131proporcjonalna, 130specjalna, 131, 138szeryfowa, 103, 129, 138, 139

czyszczenie, 193, 224, 359, 361

Skorowidz 503

Ddata powstania, 467data wa�no�ci, 467declaration, Patrz deklaracjadeclaration block, Patrz blok deklaracjidefinicja dd, 256definicja typu dokumentu, 33definition list, Patrz lista definicjideklaracja, 97, 100

DOCTYPE, 33, 61, 481, 482dialekt XHTML, 33Diavlo, 135, 136dingbat, Patrz czcionka ornamentowadoctype sniffing, 65doctype switching, 65dope�nienie, 175, 176, 177druk, 419drzewo dokumentu DOM, 289drzewo elementów, 496Dublin Core, 470dwukropek, 101dziecko, 25, 211, 212, 413, 414, 415dziedziczenie, 419dzielenie wyrazów, 76

Eelement, 21, 22, 71, 89, 91, 111, 165, 306, 431

a, 32, 164, 168, 297, 433, 434, 473abbr, 164, 249, 251, 433, 473, 494acronym, 164, 249, 251, 279, 433, 473address, 164, 433akapit, 161applet, 22, 309arconym, 249area, 23, 306, 433, 434base, 23, 309, 314, 431, 432, 433basefont, 22bdo, 164, 433big, 494blockquote, 164, 252, 433blokowy, 25, 161, 162, 163, 164, 165, 166, 167,

168, 171, 178, 179, 180, 184, 197, 279, 436,448

body, 26, 33, 360, 433br, 23, 78, 79, 89, 109, 164, 432, 433, 476button, 23, 26, 32, 164, 433, 434, 436, 438, 444caption, 285, 291, 294, 433center, 22, 61cite, 164, 249, 251, 433, 494code, 164, 249, 250, 279, 433, 494col, 23, 32, 290, 294, 295, 433colgroup, 32, 290, 294, 295, 433

dd, 433del, 161, 164, 168, 309, 433dfn, 164, 249, 250, 279, 433, 494dir, 22div, 25, 164, 168, 170, 176, 179, 254, 263, 279,

369, 433, 435, 489, 491dl, 164, 168, 256, 433DOCTYPE, 33, 65, 69, 70dotycz�cy ramek, 22

frame, 22frameset, 22iframe, 22noframes, 22

dt, 433em, 21, 22, 26, 83, 89, 109, 161, 164, 249, 250,

279, 433, 476, 494, 495embed, 309, 313fieldset, 26, 164, 433, 435, 436, 438, 447, 448font, 22, 61, 94form, 26, 31, 32, 164, 433, 435, 436, 437, 438frazowy, 249, 494grupuj�cy, 447h1, 30, 80, 89, 164, 354, 433head, 33, 431, 432, 433hr, 23, 87, 89, 164, 433, 476html, 34, 41, 361, 431, 432, 433, 473i, 494, 495iframe, 26, 309, 312img, 23, 26, 32, 164, 168, 263, 264, 433, 472,

476, 489input, 23, 26, 32, 164, 433, 434, 435, 436, 438,

439, 441button, 443checkbox, 441file, 443image, 444password, 441radio, 442text, 441ukryty, 443

ins, 161, 164, 168, 309, 433isindex, 22, 26kbd, 164, 249, 250, 433, 494, 498kolejno��, 423, 428label, 26, 164, 433, 434, 435, 436, 438, 447legend, 433, 434, 435, 436, 438, 447, 448li, 255, 256, 433liniowy, 161, 164, 165, 166, 167, 168, 171,

179, 264, 265, 279, 435, 436, 489link, 23, 91, 92, 161, 419, 420, 421, 433, 449,

455, 464, 473, 476map, 161, 164, 306, 433menu, 22

504 Skorowidz

elementmeta, 17, 23, 33, 34, 37, 39, 43, 47, 95, 161,

165, 431, 432, 433, 463, 464, 465, 466, 467,469, 473, 476

niepusty, 23, 89, 476niezalecany, 22

b, 22b, 494big, 22i, 22small, 22tt, 22

noscript, 164, 433object, 26, 164, 309, 310, 311, 313, 433, 434ogólny, 168ol, 164, 168, 256, 433optgroup, 433, 435, 436, 438, 445, 446option, 433, 435, 436, 438, 445, 478p, 22, 25, 71, 79, 97, 104, 164, 165, 168, 279,

433, 435, 476, 489param, 23, 32, 309, 431, 432, 433p�ywaj�cy, 187, 191, 192, 273, 359, Patrz

element liniowypre, 26, 85, 89, 164, 168, 433przycinanie, 212pusty, 23, 78, 89, 109, 436, 476q, 164, 252, 433s, 22, 494samp, 164, 249, 250, 433, 494script, 164, 431, 432, 433, 468select, 26, 164, 433, 434, 435, 436, 438, 445small, 494span, 22, 25, 164, 168, 179, 251, 353, 354, 433,

476, 489, 495, 498strike, 22, 494strong, 21, 83, 89, 98, 109, 161, 164, 165, 250,

279, 433, 494style, 92, 93, 95, 431, 432, 433, 464sub, 26, 86, 89, 164, 168, 433summary, 285sup, 26, 86, 89, 164, 168, 433�ródliniowy, Patrz element liniowytable, 25, 32, 164, 168, 279, 280, 285, 288, 294,

433, 476tbody, 32, 288, 289, 294, 433td, 25, 32, 279, 280, 286, 292, 294, 295, 433tekstowy, 497, Patrz element liniowytextarea, 26, 164, 433, 434, 435, 436, 438, 447tfoot, 32, 288, 294, 433th, 32, 279, 280, 292, 294, 295, 433thead, 32, 288, 291, 294, 433title, 25, 26, 33, 431, 432, 433tr, 32, 279, 294, 295, 433tt, 494

typu inline, Patrz element liniowyu, 22, 494ul, 164, 168, 255, 433var, 164, 249, 250, 433, 494, 498wewn�trzy, Patrz element liniowyzagnie�d�anie, 25, 26, 171, 197zagnie�d�ony, 203

encja, 27, 38, 42, 44, 45, 47, 76, 80, 85, 476, 479nazwana, 26numeryczna dziesi�tna, 26numeryczna szesnastkowa, 26, 38

etykieta, 447etykieta tekstowa, 368event, Patrz atrybut - zdarzenie

FFahrner Image Replacement, Patrz FIR, Patrz FIRfantasy, Patrz czcionka fantazyjnafaux column, Patrz udawana kolumnaFIR, 145, 351, 353, 354, 367Firebug, 16, 289Firefox, 14, 16, 54, 55, 56, 62, 77, 165, 167, 314,

452, 459focus attribute, Patrz atrybut dotycz�cy

aktywnego punktuFont Squirrel, 143format, 91

GIF, 145, 264, 268, 270, 311, 450, 459ICO, 459JPEG, 264JPG, 145, 268, 311PNG, 145, 264, 268, 311, 450, 459, 481SVG, 264, 311

format domy�lny, 171formularz, 435, 436, 437, 440

zagnie�d�anie, 435frameset, 33funkcja

header, 56, 483

GGaramond, 129, 130generic attribute, Patrz atrybut ogólnyGeneva, 138Georgia, 103, 129, 130, 138, 146Google, 143, 466, 467Google Analytics, 469Google Fonts, 143

Skorowidz 505

Hhas�o, 441Helvetica, 129, 130, 138hiper��cze, Patrz odsy�aczHTML Validator, 16, 54, 57

Iidentyfikator, 113, 114, 115, 169, 170identyfikator komórki, 283ikona, 263, 277, 457ilustracja, 263Impact, 138indeks

dolny, 86górny, 86

index.html, 92, 93instrukcja warunkowa if, 418internationalization attribute, Patrz atrybut

j�zykowyInternet Explorer, 14, 15, 17, 48, 57, 62, 66, 67, 77,

183, 252, 418, 419, 459, 469, 482iso-8859-1, 40iso-8859-2, 37, 38, 42, 43, 47, 48, 55

JJavaScript, 63, 311, 313, 432, 437, 468, 469, 478jednostka, 104, 342

bezwzgl�dna, 146d�ugo�ci, 147em, 147, 148ex, 147, 148px, 147wzgl�dna, 147

Jeffrey Zeldman, 115

Kkafelkowanie, 381kana� Atom, 451kana� RSS, 451klasa, 111, 115, 169, 170, 412, 431, 498kod

dziesi�tny, 27szesnastkowy, 26, 27, 39ASCII, 26

kod szesnastkowy, 27, 39kodowanie znaków, 465kolor systemowy, 107kolumna, 359, 447

kolejno��, 424udawana, 359, 361

komentarz, 32, 100warunkowy, 419

kontrolka, 203, 436, 447, 448, Patrz element inputformularza, 437, 439input, 439, 440

kropka, 80krój pisma, Patrz czcionka

Llarge, 103, 147linia pozioma, 87link, Patrz odsy�aczLinux, 138, 139, 146lista, 437, 445

definicji, 255, 256nieposortowana, Patrz lista nieuporz�dkowananieuporz�dkowana, 255, 298, 488numerowana, 260ol, Patrz lista uporz�dkowanaposortowana, Patrz lista uporz�dkowanastruktura, 446ul, Patrz lista nieuporz�dkowanauporz�dkowana, 255, 298, 488wielopoziomowa, 257zagnie�d�anie, 257

Live HTTP Headers, 16Lucida, 138Lucida Grande, 138

MMacintosh, 138, 139, 146makrodefinicja, 162

block, 161, 163, 164Block, 164inline, 161, 164Inline, 164

margin, Patrz marginesmargines, 105, 175, 176, 177, 232

pionowy, 183ujemny, 233, 234, 237, 425

Marks Kevin, 487medium, 103, 147menu g�ówne, 114

kodowanie, 39menu witryny, 488metoda post, 437model

blokowy, 175polowy, 175pude�kowy, 175ramkowy, 175

506 Skorowidz

Monaco, 138monospaced font, Patrz czcionka

nieproporcjonalnamy�lnik, 80

Nnag�ówek, 80, 91, 93, 114, 161, 163, 168, 283,

430, 464, 482, 483Content-type, 479Content-Type, 65DOCTYPE, 17

nag�ówek dokumentu, Patrz element headNetBeans, 18, 19Netscape, 14New Century Schoolbook, 138New York, 138normal flow, Patrz normalne pozycjonowanie

elementównormalne pozycjonowanie elementów, 197NotH, 17, 34, 49numerowanie, 257, 259, 260, Patrz element ol,

lista uporz�dkowana

Oobramowanie, 108, 175, 176, 177, 280odno�nik, Patrz odsy�aczodst�py mi�dzy literami, 150odst�py mi�dzy wyrazami, 150odsy�acz, 297, 299, 300, 301, 303, 305, 306, 367,

369, 383, 408, 415, 417, 420, 452, 472, 488aktywny, 304nieodwiedzony, 304odwiedzony, 304wewn�trzny, 113, 301, 424wskazany kursorem, 304

opcjonalny ��cznik, 76Opera, 17, 62, 77, 314, 452, 459op�ywanie, 271ordered list, Patrz lista uporz�dkowanaornament, 263ozdabianie tekstu, 149

Ppadding, Patrz dope�nieniePalatino, 129, 138, 146panel nawigacyjny, 488pangram, 40, 133parametr

width, 66, 67

parser, 54, 56Petrucci, 131PHP, 56, 57piksel, 265, 342plik

robots.txt, 460sitemap.xml, 461

plik binarny, 275plik DTD, 161, 163plik graficzny

wymiary, 265plik graficzny, 264, 265, 341, 358, 381podpis, 447podrozdzia�, 80pojemnik, 175, 359pole, 175

tekstowe, 447 wyboru, 441, 442

potomek, 413pozycjonowanie

bezwzgl�dne, 195, 200, 430kontekstowe, 202, 205, 233, 235, 237, 263,

354, 369, 371statyczne, 195, 197trwa�e, 195, 201, 342wzgl�dne, 195, 198wzgl�dnie bezwzgl�dne, Patrz pozycjonowanie

kontekstowepó�pauza, 80property, Patrz w�a�ciwo��protokó� HTTP, 437przecinek, 80, 103przegl�darka, 14, Patrz Chrome, Firefox,

Internet Explorer, Opera, Safariprzekierowanie, 469przekszta�canie tekstu, 150przewijanie, 201przezroczysto��, 268przycisk, 367, 368, 369, 437, 440, 444pseudoklasa, 414

active, 415, 417after, 415, 420before, 415, 416first-child, 414, 415first-letter, 415first-line, 415focus, 415, 417hover, 415, 417lang, 415link, 415, 417visited, 415, 417

pude�ko, 175

Skorowidz 507

Qquirks mode, 61, 62, 65, 66, 183, 481, 483

Rramka, 175ranking.pl, 14, 215redundancja, 490regu�a, 97, 420

font-face, 141, 143, 145import, 418media print, 421

RGB, 106, 341robot internetowy, 467, 485rodzic, 25, 205, 209, 212, 414, 415rollover, 367, 369rozdzia�, 80rozdzielczo��, 17, 88, 129, 215, 216rozmiar tekstu, 146rozmieszczanie pojemnika, 175rule, Patrz regu�a

SSafari, 14, 62, 77, 167, 459sans-serif, Patrz czcionka bezszeryfowaScriptina Pro, 135, 136Segoe UI, 138sekcja, 91selector, Patrz selektorselektor, 97, 112

a, 304a:active, 304a:hover, 304a:link, 304a:visited, 304active, 415after, 252, 415atrybutu, 412, 414before, 252, 415body, 361dziecka, 412, 413first-child, 415first-letter, 415first-line, 415focus, 415grupowy, 412, 414hover, 367, 415identyfikatora, 411, 412j�zyka, 412klasy, 412lang, 415link, 415

nast�pnego brata, 412, 413p, 97potomka, 412, 413potomny, 115, 117, 170, 292strong, 98typu, 411, 412uniwersalny, 412visited, 415

selektor CSS, 18semantyka, 53, 87, 254, 487, 491, 499serif, 146, Patrz czcionka szeryfowaSeville, 131SGML, 26sie� semantyczna, 486Site navigation bar, 16skalowanie obrazów, 266sk�adnia, 21, 53, 161, 254s�owa kluczowe, 33, 103, 146, 342, 466small, 103, 146, 147source, Patrz atrybut srcsprites, Patrz kafelkowaniestandard mode, 61, 62, 65, 66, 483stopka strony, 114strict, 33, 312struktura, 33, 80, 91, 109, 170, 171, 407styl, 113, 263, 266, 352, 353, 419, 420, 431

alternatywny, 422CSS, 478formatuj�cy dokument, 33importowanie, 418wewn�trzny, 91, 92zewn�trzny, 91, 92, 299

style.css, 92szablon, 42szeryfy, 129

��rednik, 80

Ttabela, 61, 91, 279, 280, 282, 294, 472

grupa kolumn, 290, 294kolumna, 283, 286, 290, 294komórka, 279, 282nag�ówek, 288, 294nieregularna, 286podpis, 285, 294regularna, 283, 286stopka, 288, 294tre��, 288wiersz, 279, 282, 283, 286

Tahoma, 129, 130, 138

508 Skorowidz

Tangerine, 143technika FIR, Patrz FIRtekst preformatowany, 85termin definiowany

dt, 256termin wa�no�ci, Patrz data wa�no�citestowanie stron WWW, 16text-indent, 78Times, 138, 146Times New Roman, 103, 129, 130, 138t�o, 106, 192, 263, 277, 341, 352, 354, 359, 361transitional, 33, 61, 312Trebuchet MS, 103, 129, 130, 138tre�� dokumentu, Patrz element bodytryb standardów, Patrz standard modetryb wstecznej zgodno�ci, Patrz quirks modetryb wy�wietlania, 165, 167, 179

block, 161, 165, 166, 265, 371inline, 161, 165, 166none, 165, 167

twarda spacja, 77Typetester, 133

Uudawana kolumna, 359, 361uk�ad

hybrydowy, 231, 232, 233, 235, 237o sta�ej szeroko�ci, 231, Patrz uk�ad sztywnyo zmiennej szeroko�ci, Patrz uk�ad p�ynnyp�ynny, 227, 231sztywny, 215wielokolumnowy, 190, 222, 231, 232, 233, 235,

237, 424unikod, 27, 38, 43, 47Unix, 138unordered list, Patrz lista nieuporz�dkowanautf-8, 38, 42, 43, 47, 52, 80Utopia, 138

Vvalue, Patrz warto��Verdana, 103, 129, 130, 138

Wwalidator, 16, 17, 54, 309, 475

HTML Validator, 54warstwa, 210, 263

kolejno��, 354przys�anianie, 353

warto��, 97

_blank, 305alternate, 450appendix, 450, 455armenian, 259atrybutu, 477auto, 180baseline, 282bookmark, 450, 455bottom, 282, 285button, 444chapter, 450, 455circle, 259collapse, 280contents, 450, 455copyright, 450, 455decimal, 259decimal-leading-zero, 259disc, 259dziedziczenie, 419first, 455fixed, 342font-family, 139georgian, 259glossary, 450, 455help, 450, 455index, 450, 455inherit, 419inside, 262last, 455list-style-position, 262list-style-type, 260lower-alpha, 259lower-greek, 259lower-latin, 259lower-roman, 259middle, 282next, 450, 455none, 259, 260, 262, 353no-repeat, 342nowrap, 150outside, 262prev, 450, 455print, 421repeat, 342repeat-x, 342repeat-y, 342reset, 444scroll, 342section, 450, 455square, 259start, 450, 455stylesheet, 450submit, 444subsection, 450, 455

Skorowidz 509

top, 282, 285up, 455upper-alpha, 259upper-latin, 259upper-roman, 259warto�� Content-Type, 464

wci�cie akapitowe, 149Web Developer Toolbar, 16, 17, 54, 55, 57, 63, 358Webdings, 131, 138Western, 131wielko�� liter, 24, 27, 29, 32, 98, 99, 111, 113wielokropek, 80wiersz, 415, 447Windows, 138, 139windows-1250, 37, 38, 42, 43, 47w�a�ciwo��, 97, 109

background, 106, 108, 109, 263, 281, 311,341, 342

background-attachment, 342background-color, 342background-image, 342background-position, 342, 381background-repeat, 342border, 97, 109, 176, 265, 281, 359, 419border-bottom, 176border-collapse, 280border-color, 108, 109border-left, 109, 176border-left-color, 109border-left-style, 109border-left-width, 109border-right, 176border-spacing, 294border-style, 108, 109border-top, 176border-width, 108, 109bottom, 195, 197, 198, 205caption-side, 285clear, 193color, 106, 108, 109, 281, 341counter-reset, 416display, 179, 353, 420float, 187, 232, 235, 271font, 148, 149font-align, 109font-family, 97, 103, 109, 136, 138, 145, 419font-height, 109font-size, 97, 103, 109, 146, 147, 419font-size-adjust, 145font-stretch, 145font-style, 103, 109, 148, 419font-variant, 148font-weight, 103, 109, 148height, 176, 265, 266, 281, 367, 371, 419

heigth, 381left, 195, 197, 198, 200, 205, 354letter-spacing, 150list-style, 259, 262list-style-image, 259, 260list-style-position, 259, 262list-style-type, 259margin, 78, 97, 105, 109, 176, 180, 265, 281, 419margin-bottom, 109, 176margin-left, 109, 176margin-right, 109, 176margin-top, 109, 176max-height, 184max-width, 184min-height, 184min-width, 184overflow, 212padding, 67, 78, 176, 265, 281, 294, 419padding-bottom, 176padding-right, 176padding-top, 176position, 195, 196, 200right, 195, 197, 198, 205src, 141text-align, 97, 105, 149, 181, 281, 295, 368, 419text-decoration, 145, 149text-indent, 78, 145, 149, 353text-shadow, 145text-transform, 150top, 195, 197, 198, 200, 205, 354vertical-align, 270, 281, 282, 295white-space, 78, 150width, 67, 176, 187, 227, 265, 266, 281, 367,

371, 381, 419word-spacing, 150z-index, 210, 211

wtyczka, 18Web Developer, 55Web Developer Toolbar, 63

wydruk, 419, 420wy��czanie stylów, 17wype�nienie gradientowe, 263wypunktowanie, 257, 259, 260, Patrz element ul,

lista nieuporz�dkowanawyrównanie, 149wysoko�� wiersza tekstu, 104wy�rodkowanie, 180

Xxhtml1-strict.dtd, 161, 162, 163x-large, 103, 147XML, 26

510 Skorowidz

x-small, 103, 146, 147xx-large, 103, 147xx-small, 103, 146, 147

YYouTube, 311

Zzagnie�d�enia, 167zaokr�glony naro�nik, 263, 264, 277, 491, 493Zapf-Chancery, 131zawarto��, 175zdarzenie, Patrz atrybut zdarzenie

onblur, 439onchange, 439onfocus, 439onselect, 439

Zen Coding, 18, 19z�amanie wiersza, 78znacznik, 21, 22, 24, 25, 28, 475

body, 34, 91head, 91link, 451opcjonalny, 23, 477otwieraj�cy, 17, 21, 22, 23strong, 21sup, 21zamykaj�cy, 17, 21, 22, 23, 78

znak mniejszo�ci, 85, Patrz znaki specjalneznak pionowej kreski, 163znak równo�ci, 28znak wi�kszo�ci, 85, Patrz znaki specjalneznaki diakrytyczne, 37, 38, 42, 44, 45, 47znaki interpunkcyjne, 80znaki specjalne, 26, 27, 28, 32, 38, 40, 71, 80, 88