Wszelkie prawa zastrzeżone. Nieautoryzowane ... · Zadania tekstowe z odpowiedziami .....94...

Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji.

Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli.

Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce.

Redaktor prowadzący: Ewelina Burska

Projekt okładki: Studio Gravite/OlsztynObarek, Pokoński, Pazdrijowski, Zaprucki

Materiały graficzne na okładce: C maxkabakov, Fotolia.com

Wydawnictwo HELIONul. Kościuszki 1c, 44-100 GLIWICEtel. 32 231 22 19, 32 230 98 63e-mail: [email protected]: http://helion.pl (księgarnia internetowa, katalog książek)

Drogi Czytelniku!Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie?htcsppMożesz tam wpisać swoje uwagi, spostrzeżenia, recenzję.

ISBN: 978-83-246-3050-9

Copyright © Helion 2013

Printed in Poland.

• Kup książkę• Poleć książkę • Oceń książkę

• Księgarnia internetowa• Lubię to! » Nasza społeczność

http://helion.pl/rt/htcspp

http://helion.pl/rf/htcspp

http://helion.pl/ro/htcspp

http://helion.pl

http://ebookpoint.pl/r/4CAKF

Spis tre�ciRozdzia� 1. Wprowadzenie ................................................................................ 11

Dla kogo jest ta ksi��ka? ................................................................................................ 11Jak czyta� t� ksi��k�? ..................................................................................................... 12Warsztat pracy ................................................................................................................ 12Firefox ............................................................................................................................ 14Testowanie stron WWW ................................................................................................. 15

Cz�� I Elementarz HTML5 ....................................................... 17

Rozdzia� 2. J�zyki znaczników .......................................................................... 19Znaczniki i elementy HTML5 ........................................................................................ 20Wszystkie elementy j�zyka HTML5 .............................................................................. 21Struktura dokumentu HTML5 ........................................................................................ 22Pierwsza strona WWW ................................................................................................... 23Analiza strony przy u�yciu wtyczki Firebug .................................................................. 24Specyfikacja j�zyka HTML5 .......................................................................................... 25

Rozdzia� 3. Sk�adnia j�zyka HTML5 .................................................................. 27Znaczniki otwieraj�ce i zamykaj�ce ............................................................................... 27Opcjonalne znaczniki otwieraj�ce .................................................................................. 29Elementy puste i niepuste ............................................................................................... 29Wielko�� liter w nazwach znaczników ........................................................................... 30Bia�e znaki wewn�trz znaczników .................................................................................. 31Bia�e znaki w tre�ci elementów ...................................................................................... 31Zagnie�d�anie elementów .............................................................................................. 32Znaki specjalne ............................................................................................................... 33Atrybuty znaczników ...................................................................................................... 35Atrybuty logiczne ........................................................................................................... 37Komentarze .................................................................................................................... 38

Rozdzia� 4. Znaki diakrytyczne i oznaczanie j�zyka dokumentu .......................... 39Polskie znaki diakrytyczne ............................................................................................. 39Metody kodowania polskich znaków diakrytycznych .................................................... 40Fizyczne kodowanie pliku .............................................................................................. 41Element meta ustalaj�cy kodowanie dokumentu HTML5 .............................................. 41Pangramy ........................................................................................................................ 43Atrybut lang .................................................................................................................... 43Szablony pustych polskich stron WWW ........................................................................ 44

Poleć książkęKup książkę



4 HTML5 i CSS3. Praktyczne projekty

Znaki diakrytyczne w postaci encji ................................................................................ 45Kodowanie stron zawieraj�cych teksty w kilku j�zykach ............................................... 46Jakiego kodowania u�ywa�? ........................................................................................... 48B��dne wy�wietlanie polskich znaków diakrytycznych .................................................. 48

Rozdzia� 5. HTML5 poprawny sk�adniowo .......................................................... 55Czy poprawno�� sk�adniowa jest wa�na? ....................................................................... 55Metody sprawdzania poprawno�ci sk�adniowej ............................................................. 56

Rozdzia� 6. 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? ..................................................................... 63Jak sprawdzi� tryb pracy przegl�darki? .......................................................................... 63W jaki sposób przegl�darka wybiera tryb pracy? ........................................................... 67B��dne wy�wietlanie witryny wynikaj�ce z prze��czenia trybu pracy przegl�darki ....... 69Stosuj DOCTYPE j�zyka HTML5 ................................................................................. 72

Rozdzia� 7. Podstawowe elementy HTML .......................................................... 75Akapit ............................................................................................................................. 75Dzielenie wyrazów ......................................................................................................... 81Zakaz �amania wiersza .................................................................................................... 82Z�amanie wiersza ............................................................................................................ 83Znaki interpunkcyjne ...................................................................................................... 85Nag�ówki ........................................................................................................................ 85Wyró�nianie tekstu ......................................................................................................... 89Popularne znaki specjalne .............................................................................................. 90Zestawienie ..................................................................................................................... 92

Rozdzia� 8. Podsumowanie cz��ci pierwszej ...................................................... 93Projekt 8.1. Zadania dla czwartoklasistów ..................................................................... 94Projekt 8.2. Zadania tekstowe z odpowiedziami ............................................................. 94Projekt 8.3. Kolokwium z PHP ....................................................................................... 95Projekt 8.4. Adam Mickiewicz: Oda do m�odo�ci .......................................................... 96Projekt 8.5. Adam Mickiewicz: Wiersze ........................................................................ 96

Cz�� II Elementarz CSS ........................................................... 99

Rozdzia� 9. Struktura a wygl�d dokumentów HTML ......................................... 101Do��czanie stylów do dokumentu ................................................................................. 101Domy�lny j�zyk stylów ................................................................................................ 105Ujmowanie stylów wewn�trznych w komentarz .......................................................... 106Kolejno�� stosowania stylów ........................................................................................ 107

Rozdzia� 10. Sk�adnia kaskadowych arkuszy stylów .......................................... 109Terminologia ................................................................................................................ 109Wielko�� liter w selektorach ......................................................................................... 110Wielko�� liter w nazwach i warto�ciach w�a�ciwo�ci ................................................... 111Bia�e znaki .................................................................................................................... 111Komentarze .................................................................................................................. 112Formatowanie kodu CSS .............................................................................................. 113

Rozdzia� 11. Przyk�adowe w�a�ciwo�ci CSS ...................................................... 115Czcionki ....................................................................................................................... 115Wysoko�� wiersza tekstu .............................................................................................. 117Wyrównanie poziome tekstu ........................................................................................ 117




Spis tre�ci 5

Marginesy ..................................................................................................................... 118Kolory ........................................................................................................................... 119Obramowanie ............................................................................................................... 121HTML — struktura, CSS — wygl�d ............................................................................ 122Zestawienie sumaryczne ............................................................................................... 122

Rozdzia� 12. Klasy i identyfikatory .................................................................... 125Atrybut class ................................................................................................................. 125Selektory dotycz�ce klas .............................................................................................. 126Atrybut id ..................................................................................................................... 127Selektory dotycz�ce identyfikatorów ............................................................................ 128Stosowanie identyfikatorów ......................................................................................... 128Walka z classitis: selektory potomne ............................................................................ 129

Rozdzia� 13. Podsumowanie cz��ci drugiej ....................................................... 133Projekt 13.1. Cyprian Kamil Norwid: Moja piosnka .................................................... 133Projekt 13.2. Charles Dickens: A Christmas Carol ....................................................... 134Projekt 13.3. Jack London: The Call of The Wild ........................................................ 135Projekt 13.4. Ignacy Krasicki: Bajki ............................................................................. 137

Cz�� III Elementy i znaczniki HTML5 ....................................... 139

Rozdzia� 14. Tekst ........................................................................................... 141Element p ...................................................................................................................... 141Elementy br i wbr ......................................................................................................... 142Tekst preformatowany .................................................................................................. 143Elementy frazowe ......................................................................................................... 144Cytaty ........................................................................................................................... 150

Rozdzia� 15. Listy ............................................................................................ 153Wypunktowanie ............................................................................................................ 153Numerowanie ............................................................................................................... 154Lista definicji ................................................................................................................ 155Zagnie�d�anie list ......................................................................................................... 156W�a�ciwo�ci CSS list .................................................................................................... 157

Rozdzia� 16. Elementy img, figure i figcaption .................................................. 163Pliki graficzne ............................................................................................................... 164Sk�adnia elementu img ................................................................................................. 164Wymiary obrazów ........................................................................................................ 166Obrazy nieprostok�tne .................................................................................................. 169Animacje ...................................................................................................................... 172Op�ywanie .................................................................................................................... 174Dlaczego elementy p�ywaj�ce maj� wysoko�� 0? ........................................................ 176Osadzanie obrazów w kodzie HTML ........................................................................... 177Elementy figure i figcaption ......................................................................................... 180

Rozdzia� 17. Tabele ......................................................................................... 183Obramowanie i ��czenie obramowania ......................................................................... 184Podstawowe formatowanie komórek i ca�ych tabel ...................................................... 187Nag�ówki kolumn i nag�ówki wierszy .......................................................................... 189Podpis tabeli ................................................................................................................. 191Tabele regularne i nieregularne .................................................................................... 192Nag�ówek, stopka i tre�� tabeli ..................................................................................... 194Kolumny tabeli ............................................................................................................. 198Tabele HTML — podsumowanie ................................................................................. 201





Rozdzia� 18. Odsy�acze i menu nawigacyjne ...................................................... 203Menu nawigacyjne ........................................................................................................ 204Style CSS witryny z hiper��czami ................................................................................ 206Atrybut title .................................................................................................................. 207Odsy�acze do ró�nych typów plików ............................................................................ 207Odsy�acze wskazuj�ce strony w internecie ................................................................... 208Odsy�acze wewn�trzne ................................................................................................. 209Tre�� odsy�acza ............................................................................................................ 211Style CSS odsy�aczy ..................................................................................................... 213Otwieranie nowych okien ............................................................................................. 216Mapa odsy�aczy ............................................................................................................ 217

Rozdzia� 19. Elementy semantyczne ustalaj�ce struktur� witryny ...................... 221Nag�ówki ...................................................................................................................... 221Grupowanie nag�ówków ............................................................................................... 222Artyku�y ....................................................................................................................... 224Sekcje ........................................................................................................................... 226Element aside ............................................................................................................... 227Nag�ówek i stopka ........................................................................................................ 228Element address ............................................................................................................ 229Elementy wyznaczaj�ce sekcje ..................................................................................... 230

Rozdzia� 20. Multimedia .................................................................................. 237Element audio ............................................................................................................... 237Publikowanie materia�ów wideo ................................................................................... 238Element video ............................................................................................................... 239Formaty wideo .............................................................................................................. 240Element track ................................................................................................................ 242Osadzanie na stronie WWW filmów z serwisu YouTube ............................................. 243Osadzanie na stronie WWW filmów z serwisu Dailymotion ........................................ 245

Rozdzia� 21. Pozosta�e elementy HTML5 .......................................................... 247Elementy ogólne div i span ........................................................................................... 247Oznaczanie zmian w dokumencie ................................................................................. 248Elementy object i param ............................................................................................... 250Element embed ............................................................................................................. 252Element iframe ............................................................................................................. 253Skrypty JavaScript ........................................................................................................ 255Element canvas ............................................................................................................. 258Bazowy adres URL ....................................................................................................... 259Element hr .................................................................................................................... 261

Rozdzia� 22. Podsumowanie cz��ci trzeciej ...................................................... 263Projekt 22.1. Obrazy tworzone przy u�yciu elementu pre ............................................ 263Projekt 22.2. ASCII Art ................................................................................................ 264Projekt 22.3. Emotikony ............................................................................................... 265Projekt 22.4. Cytaty ze specyfikacji HTML i XHTML ................................................ 266Projekt 22.5. Ksi��ka pt. The Wonderful Wizard of Oz ............................................... 268Projekt 22.6. Instrukcja przygotowywania zrzutów ekranu .......................................... 269Projekt 22.7. Jak pisa� na klawiaturze w j�zyku rosyjskim? ........................................ 270Projekt 22.8. Metody definiowania miejsc geometrycznych punktów ......................... 271Projekt 22.9. Artyku� pt. HTML czy XHTML? ............................................................ 273Projekt 22.10. Literackie Nagrody Nobla ..................................................................... 276Projekt 22.11. Tabela ekstraklasy w sezonie 2006/2007 .............................................. 277Projekt 22.12. Kod paskowy rezystorów ...................................................................... 279Projekt 22.13. LaTeX — przyk�ady .............................................................................. 280Projekt 22.14. Janko Muzykant .................................................................................... 281




Spis tre�ci 7

Cz�� IV Czcionki na stronach WWW ........................................ 283

Rozdzia� 23. Rodzaje czcionek ......................................................................... 285Czcionki szeryfowe i bezszeryfowe ............................................................................. 285Czcionki proporcjonalne i nieproporcjonalne ............................................................... 286Inne podzia�y czcionek ................................................................................................. 287Testowanie czcionek ..................................................................................................... 289

Rozdzia� 24. Czcionki dla webmastera .............................................................. 293Core fonts for the Web ................................................................................................. 296Czcionki dost�pne na ró�nych platformach .................................................................. 296Definiowanie kroju czcionki ......................................................................................... 297Osadzanie czcionek na stronach WWW ....................................................................... 300Prawa autorskie do czcionek ........................................................................................ 303Serwis Font Squirrel ..................................................................................................... 303Serwisy udost�pniaj�ce czcionki online ....................................................................... 305

Rozdzia� 25. W�a�ciwo�ci CSS dotycz�ce czcionek i tekstu .............................. 309W�a�ciwo�ci dotycz�ce czcionek .................................................................................. 310W�a�ciwo�ci dotycz�ce tekstu ...................................................................................... 314

Rozdzia� 26. Teksty wielokolumnowe ............................................................... 319Ustalenie liczby kolumn ............................................................................................... 319Szeroko�ci kolumn ....................................................................................................... 322Odst�py i separatory kolumn ........................................................................................ 323Rozci�ganie elementów na wszystkie kolumny ............................................................ 324

Rozdzia� 27. Podsumowanie cz��ci czwartej ..................................................... 327Projekt 27.1. CSS: w�a�ciwo�ci dotycz�ce czcionek i tekstu ........................................ 327Projekt 27.2. Jan Kochanowski: Treny ......................................................................... 329Projekt 27.3. Adam Mickiewicz: Pan Tadeusz ............................................................. 332

Cz�� V Uk�ad strony .............................................................. 335

Rozdzia� 28. Elementy blokowe i liniowe ........................................................... 337Elementy ogólne div i span ........................................................................................... 341Domy�lny format wizualny elementów blokowych i liniowych ................................... 342

Rozdzia� 29. Obszar zajmowany przez element .................................................. 347W�a�ciwo�� display ...................................................................................................... 351Wy�rodkowanie elementu blokowego .......................................................................... 354��czenie marginesów pionowych ................................................................................. 356Wymiary minimalne i maksymalne .............................................................................. 358

Rozdzia� 30. Elementy p�ywaj�ce ...................................................................... 361W�a�ciwo�� float .......................................................................................................... 361Uk�ady kolumnowe ...................................................................................................... 365Znikaj�ce t�o pojemnika ............................................................................................... 367Czyszczenie elementów p�ywaj�cych ........................................................................... 368

Rozdzia� 31. Zaawansowane metody pozycjonowania elementów blokowych ..... 371W�a�ciwo�� position ..................................................................................................... 371Pozycjonowanie statyczne ............................................................................................ 373Pozycjonowanie wzgl�dne ............................................................................................ 374Pozycjonowanie bezwzgl�dne ...................................................................................... 376Pozycjonowanie trwa�e ................................................................................................. 378





Pozycjonowanie kontekstowe ....................................................................................... 379W�a�ciwo�ci left, right, top oraz bottom ....................................................................... 382Warstwy i ich kolejno�� ............................................................................................... 387Przycinanie ................................................................................................................... 390

Rozdzia� 32. Uk�ady o sta�ej szeroko�ci ............................................................ 393Dobieranie szeroko�ci uk�adu ....................................................................................... 393Uk�ady przylegaj�ce do okna przegl�darki ................................................................... 395Uk�ad nr 1 ..................................................................................................................... 395Uk�ad nr 2 ..................................................................................................................... 396Uk�ad nr 3 ..................................................................................................................... 397Uk�ad nr 4 ..................................................................................................................... 399Uk�ad nr 5 ..................................................................................................................... 400Uk�ad nr 6 ..................................................................................................................... 401Uk�ad nr 7 ..................................................................................................................... 403Uk�ad nr 8 ..................................................................................................................... 404

Rozdzia� 33. Uk�ady p�ynne .............................................................................. 407Uk�ad nr 9 ..................................................................................................................... 407Uk�ad nr 10 ................................................................................................................... 407Uk�ad nr 11 ................................................................................................................... 408Uk�ad nr 12 ................................................................................................................... 409Uk�ad nr 13 ................................................................................................................... 409Uk�ad nr 14 ................................................................................................................... 410Uk�ad nr 15 ................................................................................................................... 410Uk�ad nr 16 ................................................................................................................... 411

Rozdzia� 34. Uk�ady hybrydowe ........................................................................ 413Uk�ady dwukolumnowe ................................................................................................ 413Uk�ad nr 17 ................................................................................................................... 414Uk�ad nr 18 ................................................................................................................... 415Uk�ad nr 19 ................................................................................................................... 416Uk�ad trójkolumnowy ................................................................................................... 417Uk�ad nr 20 ................................................................................................................... 418Uk�ad nr 21 ................................................................................................................... 419Uk�ad nr 22 ................................................................................................................... 420

Rozdzia� 35. Podsumowanie cz��ci pi�tej ......................................................... 423Projekt 35.1. Maria Konopnicka: „Mi�osierdzie gminy” .............................................. 423Projekt 35.2. Stefan eromski: „Rozdzióbi� nas kruki, wrony” ................................... 424Projekt 35.3. Szablony XHTML/CSS ........................................................................... 426Projekt 35.4. Tabelka miniatur o ró�nych wymiarach .................................................. 427Projekt 35.5. Zabytki Lublina ....................................................................................... 428Projekt 35.6. Kol�dy ..................................................................................................... 430

Cz�� VI T�a ............................................................................. 435

Rozdzia� 36. W�a�ciwo�ci CSS dotycz�ce t�a .................................................... 437Wielokrotne t�a ............................................................................................................. 452

Rozdzia� 37. FIR — wymiana obrazów na teksty ............................................... 455Efekt FIR wykonany przy u�yciu display: none ........................................................... 457Efekt FIR wykonany przy u�yciu text-indent ............................................................... 458Efekt FIR wykorzystuj�cy kolejno�� warstw ................................................................ 458Efekt FIR stosuj�cy przezroczyste obrazy .................................................................... 459




Spis tre�ci 9

Rozdzia� 38. Udawane kolumny ........................................................................ 467

Rozdzia� 39. Przyciski rollover w CSS ............................................................... 475Wymiana obrazu t�a ...................................................................................................... 475Przycisk z etykiet� tekstow� ......................................................................................... 477Przyciski pozycjonowane kontekstowo ........................................................................ 478

Rozdzia� 40. Kafelkowanie ............................................................................... 491Rozwi�zanie problemu p�kania kafelków .................................................................... 507Kafelkowanie a przezroczysto�� ................................................................................... 511

Rozdzia� 41. Podsumowanie cz��ci szóstej ....................................................... 515Projekt 41.1. Fraszki ..................................................................................................... 515Projekt 41.2. Jack London: The Call of the Wild ......................................................... 516Projekt 41.3. Zak�adki .................................................................................................. 519Projekt 41.4. Przyciski aktywne/nieaktywne wykonane jako t�a .................................. 522

Cz�� VII Zagadnienia zaawansowane ....................................... 525

Rozdzia� 42. Struktura funkcjonalna witryny ..................................................... 527

Rozdzia� 43. Kolejno�� elementów w kodzie HTML ........................................... 531Zmiana kolejno�ci kolumn pionowych ......................................................................... 532Zmiana kolejno�ci poziomych pasów ........................................................................... 536Zmiana kolejno�ci kolumn oraz poziomych pasów ...................................................... 538

Rozdzia� 44. Atrybuty HTML ............................................................................. 541Najpopularniejsze atrybuty ........................................................................................... 541Atrybuty j�zykowe ....................................................................................................... 542Skróty klawiszowe ........................................................................................................ 542Pozosta�e atrybuty ........................................................................................................ 544Zdarzenia ...................................................................................................................... 545

Rozdzia� 45. Powi�zania dokumentów .............................................................. 547Element link ................................................................................................................. 548Style alternatywne ........................................................................................................ 549Kana�y RSS i Atom ...................................................................................................... 549Nast�pny, poprzedni oraz spis tre�ci ............................................................................. 554Ikona witryny WWW ................................................................................................... 557Twórcy witryny WWW ................................................................................................ 559Plik robots.txt ............................................................................................................... 559Plik sitemap.xml ........................................................................................................... 560

Rozdzia� 46. Element meta — dodatkowe informacje na temat strony WWW ..... 563Sk�adnia elementu meta ................................................................................................ 564Dwa rodzaje elementów meta ....................................................................................... 565

Rozdzia� 47. Uzupe�nienie wiadomo�ci na temat CSS ........................................ 567Selektory CSS3 ............................................................................................................. 568Pseudoklasy CSS3 ........................................................................................................ 573Importowanie stylów .................................................................................................... 578Dziedziczenie ............................................................................................................... 580Style do druku .............................................................................................................. 580Nowo�ci CSS3 .............................................................................................................. 583





Rozdzia� 48. Formularze ................................................................................... 585Atrybuty formularza ..................................................................................................... 586Kontrolki formularza .................................................................................................... 588Atrybuty ogólne kontrolek formularza ......................................................................... 589Elementy input ............................................................................................................. 590Przyciski zatwierdzaj�ce i resetuj�ce formularz ........................................................... 591Wiersz wprowadzania danych ...................................................................................... 591Pole has�a ...................................................................................................................... 592Pola wyboru .................................................................................................................. 592Wykluczaj�ce si� wzajemnie pola wyboru ................................................................... 593Kontrolki ukryte ........................................................................................................... 594Przyciski ....................................................................................................................... 595Kontrolka wyboru pliku ................................................................................................ 595Obraz ............................................................................................................................ 596Element button ............................................................................................................. 597Listy .............................................................................................................................. 598Pole tekstowe ................................................................................................................ 600Grupowanie i podpisywanie kontrolek formularza ....................................................... 600Podsumowanie .............................................................................................................. 602

Rozdzia� 49. Korzystanie z HTML5 i CSS3 ......................................................... 603Czy dany atrybut jest ju� zaimplementowany? ............................................................. 603Problemy ze starszymi wersjami Internet Explorera .................................................... 605

Rozdzia� 50. Podsumowanie cz��ci siódmej ...................................................... 607Praktyka, praktyka, praktyka ........................................................................................ 608

Skorowidz .................................................................................... 610




Rozdzia� 5.

HTML5 poprawnysk�adniowo

Czy poprawno��sk�adniowa jest wa�na?

J�zyk HTML5 nie jest rygorystyczny pod wzgl�dem sk�adni. Mo�emy pomija� znacznikikocowe, stosowa� dowoln� wielko�� liter w nazwach znaczników oraz zapisywa�atrybuty z pomini�ciem cudzys�owu. Listing 5.1 przedstawia kompletn� poprawn� stron�WWW w j�zyku HTML5.

Listing 5.1. Przyk�adowa poprawna strona WWW w j�zyku HTML5

PRZYK�AD NIEZALECANY<!DOCTYPE html><TITLE>Strona WWW</title><meta charset=UTF-8><ul class=menu> <LI>Raz <LI>Dwa <LI>Trzy</ul>

Stosowanie liter du�ych i ma�ych oraz pomijanie cudzys�owu nie prowadzi do dwu-znaczno�ci. Wnioski z analizy przyk�adu podanego na listingach 3.3 oraz 3.4 s� jednaktakie, �e pomini�cie znaczników zamykaj�cych mo�e dawa� efekty trudne do przewi-dzenia. Dlatego zdecydowanie wol� przestrzega� �cis�ych zasad sk�adni HTML opartychna j�zykach XHTML oraz XML. Innymi s�owy:

� Zawsze zamykam wszystkie znaczniki.

� Nigdy nie pomijam opcjonalnych znaczników otwieraj�cych (np. body).




56 Cz�� I � Elementarz HTML5

Dodatkowo:

� Znaczniki i atrybuty zapisuj� wy��cznie ma�ymi literami.

� Warto�ci atrybutów ujmuj� w cudzys�ów.

� Znaczniki puste zapisuj�, stosuj�c kocówk� />.

Przyk�ad z listingu 5.1 zapisa�bym tak jak na listingu 5.2.

Listing 5.2. Strona z listingu 5.1 zapisana w sk�adni XHTML

PRZYK�AD ZALECANY<!DOCTYPE html><html> <head> <title>Strona WWW</title> <meta charset="UTF-8" /> </head><body>

<ul class="menu"> <li>Raz</li> <li>Dwa</li> <li>Trzy</li></ul>

</body></html>

Za przestrzeganiem regu� sk�adni XHTML przemawia jeden powa�ny argument. W do-kumentach poprawnych sk�adniowo znacznie �atwiej odnale�� i poprawi� b��dy. Je�listrona WWW jest wykonana przy u�yciu stylów CSS i zawiera niepoprawny kodHTML5, to odnalezienie b��du mo�e okaza� si� naprawd� trudne. Zanim zaczniemybada� poprawno�� regu�y CSS, trzeba by� pewnym, �e regu�a ta dotyczy konkretnegoelementu HTML. W przypadku poprawnego kodu HTML wyszukanie b��dnych selekto-rów CSS jest znacznie �atwiejsze.

Metody sprawdzania poprawno�cisk�adniowej

Kod HTML5 mo�emy sprawdza� na dwa sposoby. Pierwsz� metod� jest u�ycie wali-datora organizacji W3C: http://validator.w3.org.

Rysunki 5.1 oraz 5.2 przedstawiaj� wynik walidacji stron przedstawionych na listingach5.1 oraz 5.2. Jak widzisz, oba dokumenty s� poprawne. Pami�taj zatem, �e walidator niesprawdza poprawno�ci otwierania ani zamykania opcjonalnych elementów HTML.




Rozdzia� 5. � HTML5 poprawny sk�adniowo 57

Rysunek 5.1. Wynik walidacji strony z listingu 5.1

Rysunek 5.2. Wynik walidacji strony z listingu 5.2

Drug� metod�, któr� czasami stosuj�, jest wbudowany parser j�zyka XML przegl�darkiFirefox. Tak� metod� mo�na stosowa� wy��cznie wtedy, gdy przestrzegamy regu� sk�ad-ni XML. Je�li wykonujesz stron� w j�zyku PHP, wystarczy, �e na pocz�tku skryptuumie�cisz wywo�anie funkcji header():

header('Content-Type: application/xhtml+xml; charset=utf-8');

a strona taka b�dzie interpretowana przez wbudowany parser XML. W przypadku ja-kiegokolwiek b��du sk�adniowego XML ujrzysz komunikat taki jak na rysunku 5.3.





Rysunek 5.3. Komunikat o b��dzie sk�adniowym wy�wietlany przez parser XML przegl�darki Firefox

Je�eli nie stosujesz PHP, a korzystasz z oprogramowania Apache, to w pliku konfigu-racyjnym Apache’a .htaccess wprowad� wpis:

AddType application/xhtml+xml .xhtml

Dokumenty o rozszerzeniu .xhtml b�d� wtedy interpretowane jako XML. Niestety tech-nika walidacji wykorzystuj�ca wbudowany parser XML przegl�darki nie mo�e by� za-stosowana w przypadku dowolnego dokumentu HTML zapisanego na dysku. Wymagaona albo u�ycia PHP, albo przynajmniej serwera Apache (w tym przypadku nale�yzmienia� rozszerzenia plików).

�wiczenie 5.1

Sprawd� poprawno�� strony WWW z listingu 5.1 przy u�yciu walidatora W3C.

�wiczenie 5.2

Sprawd� poprawno�� strony WWW z listingu 5.2 przy u�yciu walidatora W3C.

W celu wykonania �wiczenia 5.3 nale�y zainstalowa� oprogramowanie Apache.

�wiczenie 5.3

Sprawd� poprawno�� strony z listingu 5.1, wykorzystuj�c wbudowany parser XMLprzegl�darki Firefox.

Najpierw przygotuj plik przedstawiony na listingu 5.1. Nazwij go index.xhtml. Oczywi-�cie kod z listingu 5.1 nie jest poprawnym sk�adniowo dokumentem XML:




Rozdzia� 5. � HTML5 poprawny sk�adniowo 59

� Nie wszystkie znaczniki s� zamkni�te.

� Brakuje cudzys�owów otaczaj�cych atrybuty.

� Brakuje elementów body i head.

Nast�pnie utwórz plik o nazwie .htaccess. Umie�� w nim dyrektyw�:AddType application/xhtml+xml .xhtml

Dyrektywa ta powoduje, �e dokumenty o rozszerzeniu .xhtml b�d� opatrzone nag�ów-kiem HTTP:

Content-Type: application/xhtml+xml

Pliki index.xhtml oraz .htaccess umie�� w folderze przeznaczonym na dokumentyudost�pniane przez serwer Apache. Je�li serwer Apache zosta� zainstalowany z do-my�lnymi opcjami, to folderem tym jest C:\Program Files\Apache Software Foundation\Apache2.2\htdocs. Nast�pnie uruchom przegl�dark� Firefox i otwórz plik index.xhtml.Pami�taj, �e adres wy�wietlany w przegl�darce powinien rozpoczyna� si� od http://localhost. Przegl�darka wy�wietli komunikat B��d parsowania XML. Komunikat tegotypu jest przedstawiony na rysunku 5.3.

Rozwi�zanie �wiczenia 5.3 jest dost�pne pod adresem:http://html5.gajdaw.pl/cwiczenia/05-03/index.html

W celu wykonania �wiczenia 5.4 nale�y zainstalowa� oprogramowanie Apacheoraz PHP.

�wiczenie 5.4

Wykonaj �wiczenie 5.3, w którym zmiana nag�ówka Content-Type b�dzie wykonanaw j�zyku PHP. Wykorzystaj funkcj� header().

Przygotuj plik index.php o kodzie takim jak na listingu 5.4. Plik ten umie�� w folde-rze przeznaczonym na skrypty PHP. Je�li serwer Apache zosta� zainstalowany przydomy�lnych ustawieniach, folderem tym b�dzie C:\Program Files\Apache SoftwareFoundation\Apache2.2\htdocs.

Listing 5.4. Modyfikacja nag�ówka HTTP w j�zyku PHP

<?phpheader('Content-Type: application/xhtml+xml');?><!DOCTYPE html><TITLE>Strona WWW</title><meta charset=UTF-8><ul class=menu> <LI>Raz <LI>Dwa <LI>Trzy</ul>





Nast�pnie uruchom przegl�dark� Firefox i otwórz plik index.php. Zwró� uwag�, �eadres wy�wietlany w przegl�darce powinien rozpoczyna� si� od http://localhost.Przegl�darka wy�wietli komunikat B��d parsowania XML. Rozwi�zanie �wiczenia5.4 jest dost�pne pod adresem:

http://html5.gajdaw.pl/cwiczenia/05-03/index.html

NAJLEPSZE OBECNIE ROZWI�ZANIE

Twórz wy��cznie dokumenty poprawne sk�adniowo. Je�li to mo�liwe, stosujsk�adni� XML.




Skorowidz

Aadres

URL, 203bazowy URL, 259

akapit, 75, 349animacje, 172aplikacja, Patrz programarkusze stylów, 101, 109, 113artyku�y, 224ASCII, 33atrybut, 35, Patrz tak�e

w�a�ciwo��abbr, 202action, 586allowfullscreen, 244alt, 36, 164border, 184border-collapse, 186checked, 593class, 125colspan, 192controls, 237coords, 218enctype, 587font-family, 297frameborder, 244headers, 189href, 102, 203, 207id, 127lang, 43, 54, 517media, 580multiple, 598rel, 547, 549rowspan, 192scope, 189, 275shape, 218size, 598src, 165, 178, 180

style, 104target, 216, 253title, 36, 207type, 208usemap, 218

atrybutyelementów tabel, 202elementu meta, 564formularza, 586, 588HTML, 541, 544j�zykowe, 542kontrolek formularza, 589logiczne, 37znaczników, 35

automatyczne dzielenie wyrazów,77

Bbia�e znaki, 31, 76, 111, 316biblioteka

jQuery, 36modernizr, 605

blok deklaracji, declaration block,109

b��dparsowania XML, 59sk�adniowy, 57zaokr�glenia, 507

b��dne wy�wietlanie witryny, 69b��dy w wy�wietlaniu znaków, 50

Ccienie, 584cie tekstu, 315CSS, Cascading Style Sheets, 101,

109, 113CSS basic box model, 347

CSS Color Module Level 3, 119CSS Fonts Module Level 3, 309CSS Multi-column Layout

Module, 319CSS Text Module Level 3, 309cudzys�ów, 151cytaty, 150, 266czcionka

Carefree, 293Chess Kingdom, 289Belligerent Madness, 304Diavlo, 293domy�lna, 296Modern Pictograms, 307Parisian, 301Petrucci, 289Scriptina Pro, 293Seville, 288Tangerine, 305Webdings, 288

czcionkibezp�atne, 293, 303bezszeryfowe, 115, 285, 297Core fonts for the Web, 296,

310dost�pne w systemach, 296fantazyjne, 297komercyjne, 296, 306nieproporcjonalne, 286, 297odr�czne, 297proporcjonalne, 286specjalne, 287sta�ej szeroko�ci, 287szeryfowe, 115, 285, 297

czyszczenie, 467czyszczenie elementów

p�ywaj�cych, 368




Skorowidz 611

DDailymotion, 245deklaracja, declaration, 109dodatki Firefoksa, 14dokumentacja komentarzy, 579do��czanie

czcionki, 305skryptu JavaScript, 256stylów, 101

domy�lne wymiary elementów,343

dope�nienie, padding, 347dost�p do elementu, 487dosuwanie elementów, 361drzewo DOM, 196dziedziczenie, 580dzielenie wyrazów, 81

Eefekt

cienia, 121FIR, 457–464, 475, 498, 504,

518migania, 276przesuwania obrazów, 169rollover, 426, 475, 480, 484,

498, 513element, 20

a, 203, 216, 479, 510, 524abbr, 146, 276address, 229article, 224, 331, 405, 423aside, 227, 234, 405audio, 237base, 259blockquote, 150, 267body, 23, 232br, 83, 142button, 597canvas, 258caption, 191, 198cite, 146, 272code, 147col, 198colgroup, 198del, 248dfn, 90, 147div, 168, 248, 341, 349DOCTYPE, 67, 72em, 89, 122embed, 238, 252fieldset, 601figcaption, 180, 274figure, 180, 270, 427font, 104

footer, 228form, 587h1, 85head, 23header, 228, 325, 518hgroup, 222hr, 261, 353html, 273, 428iframe, 253img, 163–168, 250, 427, 515input, 590ins, 248kbd, 147li, 153, 426link, 102, 547, 554map, 218meta, 23, 39, 41, 563, 566

atrybuty, 564sk�adnia, 564

nav, 234, 405, 510noscript, 257object, 238, 250ol, 205, 510optgroup, 598option, 598object, 251optgroup, 598p, 75, 141, 338, 346param, 251pre, 95, 143, 263q, 150samp, 148script, 255section, 226, 234, 329, 405,

427select, 598span, 248, 341, 352strong, 89, 122, 344style, 103sub, 149sup, 149table, 184tbody, 194, 196td, 183tfoot, 194, 196th, 183thead, 194, 196, 198time, 148title, 23tr, 183, 194track, 242ul, 153, 205, 426UNTITLED, 232var, 148, 272video, 239wbr, 142zewn�trzny, 416

elementówrozmiar, 347rozmiar maksymalny, 358rozmiar minimalny, 358

elementyblokowe, 32, 337, 339, 340czyszcz�ce, 368dotycz�ce formularzy, 586frazowe, 144HTML5, 21kana�u RSS, 551liniowe, 337, 340niepuste, 29ogólne, 247, 341p�ywaj�ce, 176, 361, 467podstawowe, 75, 92prezentacyjne, 145, 149puste, 29, 83semantyczne, 145, 221tabeli, 183, 201uwypuklaj�ce, 145wyznaczaj�ce sekcje, 230zagnie�d�one, 344

emotikony, 265encja, 45

&bdquo, 281, 333&mdash, 281, 333&rdquo, 281, 333&shy, 81dziesi�tna numeryczna, 33nazwana, 33szesnastkowa numeryczna, 33

etykieta, label, 600przycisku, 501tekstowa, 477

FFIR, Fahrner Image Replacement,

456Firefox, 14fiszki, 424format, Patrz tak�e rozszerzenie

plikuGIF, 170, 172EOT, 302mp3, 237odsy�aczy, 215OGG, 237PNG, 170prezentacji elementów, 342VTT, 242

formatowanieakapitu, 69, 70elementu div, 349elementu p, 350, 351epopei, 332





formatowaniefiszek, 425kodu CSS, 113komórek, 187tabel, 187tekstu, 141trenów, 332wydruku, 580wygl�du list, 157

formatyaudio, 238graficzne, 164kodowania, 177multimedialne, 237wideo, 240

formularz, 585–602atrybuty, 586element button, 597elementy HTML, 586listy, 598pola wyboru, 592pole has�a, 592przyciski, 595rodzaje kontrolek, 588wprowadzanie danych, 591

fragment obrazu, 496funkcja

header(), 57image_encode(), 178maximum(), 143

Ggenerowanie obrazu, 258gradienty, 453grubo��

czcionki, 313obramowania, 398

grupowaniekontrolek, 600nag�ówków, 222

Hhiper��cze, Patrz odsy�acz, 203

Iidentyfikator, 127

#top, 517tytul, 209

ikona witryny, 557ikony, 513importowanie stylów, 578indeksy, 145, 149instalowanie czcionek, 293

instrukcja@import, 579warunkowa if, 579

interfejs API, 258Internet Explorer 8, 605

Jj�zyk

CSS, 101, 105HTML, 101Java, 252JavaScript, 255PHP, 168

j�zyk przetwarzaniapo stronie klienta, 602po stronie serwera, 602

j�zyki znacznikowe, 19, 602

Kkafelkowanie, sprites, 491–514kana�

Atom, 550RSS, 549

kaskadowe arkusze stylów, 101klasa przycisk, 496klasy, 126kod CSS, 113kodowanie

iso-8859-2, 40, 46pliku, 41polskich znaków, 41utf-8, 40, 46, 86, 290, 434windows-1250, 40, 46znaków, 39

kodyj�zyków, 44znaków diakrytycznych, 40znaków Wingdings, 290

kolejno��kolumn, 532poziomych pasów, 536warstw, 388, 458wyró�niania odsy�aczy, 543

kolory, 119kolumna, Patrz uk�ad, Patrz tak�e

udawane kolumny, 467–471kolumna p�ynna, 417kolumny tabeli, 198komentarze, 38, 106, 112

ignorowane, 579warunkowe, 579

komórkinag�ówkowe, 188, 190rozci�gaj�ce, 193

komunikatBackCompat, 63CSS1Compat, 63o b��dzie, 58

kontrolka audio, 238kontrolka input typu

button, 595checkbox, 592file, 595image, 596password, 592submit, 591text, 591

kontrolkidanych HTML5, 596formularza, 588ukryte, 594

konwersja formatów, 238, 241korekta, 248krojenie obrazu, 509krój czcionki, 310

fantazyjny, fantasy, 287odr�czny, cursive, 287

kszta�t hiper��czy, 218

Lliczba

elementów listy, 598kolumn, 319

linia pozioma, 424link, Patrz odsy�acz, 203lista, 205, 426

definicji, definition list, 153,155

nieuporz�dkowana,unordered list, 153

specyfikacji, 568ul, 501uporz�dkowana, ordered list,

153listy wyboru, 598, 599

��amanie

tekstu, 77wiersza, 82, 83

��czeniemarginesów, 356obramowania, 184stylów, 581

Mmargines, margin, 118, 347margines pionowy, 356




Skorowidz 613

menu, 480, 484, 501kontekstowe, 239nawigacyjne, 204, 236

metainformacje, 566metoda fillRect(), 259metody kodowania, 40modyfikacja

kontekstu pozycjonowania,375

kroju, 313nag�ówka, 59t�a, 438

Nnag�ówek, 23, 85, 221, 561nag�ówek i stopka, 228, 235nag�ówki

kolumn, 189wierszy, 189

napisy do filmu, 243nawigacja pomi�dzy podstronami,

554nazwa klasy, 125normalne pozycjonowanie

elementów, 373nota boczna, 228numeracja

automatycznawielopoziomowa, 577

nag�ówków, 230numerowanie, 154

Oobramowania zaokr�glone, 121,

583obramowanie, border, 121, 185,

347obramowanie pionowe, 467obraz, 163

calosc.jpg, 478calosc-kafelki.jpg, 498fragment.jpg, 479fraszki.jpg, 515gradient-dol.png, 453gwiazdki-off.png, 486kafelki.png, 500lilia.jpg, 444, 445logo.png, 448lorem-ipsum.png, 450oba.png, 497piora.jpg, 494, 495po-deszczu.jpg, 446przyciski.png, 496sprite.jpg, 492tlo.jpg, 440

tlo-gora.png, 454tlo-liscie.jpg, 441tlo-wzor.png, 443ul-bkg.png, 481

obrazynieprostok�tne, 169wielowarstwowe, 502

obs�ugaHTML5 w IE, 606JavaScript, 257zdarzenia hover, 502

odno�nik, Patrz odsy�acz, 203odst�p mi�dzy

kolumnami, 323literami, 314wyrazami, 317

odsy�acz, 203do plików PDF, 207do plików tekstowych, 207do plików ZIP, 208do strony, 209

odsy�aczereaguj�ce na kursor, 476nieprostok�tne, 217wewn�trzne, 209zawieraj�ce obraz, 211, 212zawieraj�ce tabel�, 211

okno Drukuj, 582opcje menu, 499opcjonalny ��cznik, 81op�ywanie obrazu, 174, 177ornamenty, dingbat, 287ornamenty ozdabiaj�ce akapity,

451osadzanie

animacji Flash, 252apletów, 251czcionek, 300dokumentów, 250filmów z Dailymotion, 245filmów z YouTube, 243kodu JavaScript, 255obrazu, 177pliku, 178stylów wydruku, 582

otwieranie nowych okien, 216ozdabianie tekstu, 315oznaczanie zmian, 248

Ppanel Uk�ad, 356pangramy, 43, 289parser XML, 57pasek narz�dzi

poprzedni/nast�pny, 555p�kanie kafelków, 507

plik.htaccess, 59, 4341_400.jpg, 271atom.xml, 553bkg.png, 513blues.mp3, 237, 238blues.ogg, 237, 238blues.webm, 239calosc-kafelki.jpg, 499cicha-noc.html, 431, 433, 522css2.zip, 208ekstraklasa-m.html, 277gwiazdki-off.png, 486html.gif, 173html4.zip, 266html40.zip, 208html5shiv.js, 606humans.txt, 559index.html, 23, 102, 136, 179index.php, 178index.xhtml, 59jam-jest-dudka.html, 523kapsle-1.html, 554loading.gif, 164orthocenter.zir, 251orzel.svg, 251Parisian.eot, 302Parisian.ttf, 300piskleta.html, 473przycisk.png, 519robots.txt, 559rss.xml, 552sitemap.xml, 560skrypt.js, 256sprite.jpg, 491sprite.png, 502, 504, 522strona.html, 209style.css, 102, 136, 215subtitles.vtt, 242szablon.xcf, 502toc.css, 275zirkel.jar, 252

pliki, Patrz tak�e rozszerzeniepliku

binarne, 177graficzne, 164

pobieraniefilmu, 240plików, 432

podpis tabeli, 191podzia�

elementu article, 270tre�ci na sekcje, 230

pola wyboru, 593pole tekstowe, 600pole typu password, 592





po�o�enieelementów, 355elementu a, 480

pomiar odleg�o�ci, 357poprawianie b��dów, 53powi�zania dokumentów, 547powielanie t�a, 441pozycjonowanie

bezwzgl�dne, 371, 376elementów, 371elementów span, 518kontekstowe, 163, 379, 383,

391, 478przycisku, 478statyczne, 371, 373trwa�e, 371, 378wzgl�dne, 371, 374wzgl�dnie bezwzgl�dne,

379–381, 480, 482problemy Internet Explorera, 606program

ASCII Art, 264Audacity, 238GIMP, 503Kod Paskowy Rezystorów,

279Miro Video Converter, 241Photoshop, 503XHTML/CSS Image, 263

programy graficzne, 607przegl�darki, 12przekszta�canie tekstu, 316przestarza�e elementy, 62przesuwanie

elementu, 391elementu div, 480obrazu t�a, 439, 492

przezroczysto��, 170, 459, 511,583

przycinanie, 390przycisk, 496, 595

do resetowania, 591poprzedni/nast�pny, 557rollover, 498Umie��, 243z etykiet�, 477zatwierdzaj�cy, 591

przypisanie t�a, 440przypisy dolne, 281pseudoklasa after, 581pseudoklasy CSS3, 573publikowanie filmu, 243–246punkty

podzia�u, 77zaczepienia, 482, 500

puste szablony, 44

Rramka, 184regu�a, rule, 109, 125

@font-face, 300, 303, 310@import, 305@media print, 582

resetowanie licznika, 576RGB, Red, Green, Blue, 120, 437rodzaje

elementów meta, 564powi�za plików, 548stylów, 101, 107

rollover, 475rozci�ganie elementów, 324rozdzielczo�� monitora, 394rozmiar

elementu, 348ikony, 558powi�kszonego hiper��cza,

487tekstu, 311

rozszerzenie pliku, 548.css, 102.eot, 302.gif, 172.ico, 558.mp3, 237.ogg, 237.png, 170.psd, 502.vtt, 242.xcf, 502.xhtml, 58

rysowanie prostok�ta, 258

Ssekcja div, 215sekcje, 226selektor, selector, 109

::active, 213::after, 151::before, 151::hover, 213, 475, 487::link, 213::visited, 213#pojemnik, 469atrybutu, 572brata, 572dziecka, 571nast�pnego brata, 571p, 109potomka, 571typu, 569

selektoryCSS 2.1, 569CSS 3, 568identyfikatorów, 128, 570klas, 126, 570potomne, 129, 132, 200, 488

separatory kolumn, 323serwer WWW Apache, 168serwis

Can I use…, 603CSS Mania, 608Find me by IP, 603Font Squirrel, 303Google Fonts, 305Typekit, 306

skalowanie obrazów, 167sklejenie plików, 504sk�adnia

CSS, 109elementu meta, 564HTML, 55HTML5, 27tabel, 184XML, 38

skróty klawiszowe, 542skrypt html5shiv.js, 606specyfikacja

CSS, 110, 347CSS 2.1, 208, 567czcionek, 567definicji obszarów, 567HTML 4.01, 208HTML5, 25jednostek, 567kolorów, 567obramowa i t�a, 567selektorów, 567uk�adów gi�tkich, 568uk�adów wielokolumnowych,

568w�a�ciwo�ci tekstu, 567zaawansowanych technik

pozycjonowania, 568spis tre�ci, 231, 268, 274sprawdzanie

implementacji, 603pisowni, 54trybu pracy, 63trybu wy�wietlania, 339

stopie implementacji, 603stosowanie kafelkowania, 493stronicowanie podgl�du wydruku,

197struktura

dokumentu, 22, 122funkcjonalna witryny, 527witryny, 221




Skorowidz 615

stylealternatywne, 549CSS, 101, 206CSS odsy�aczy, 213CSS przycisków, 512do druku, 580, 582domy�lne, 101kroju, 312opcji menu, 485, 505, 510przycisków, 497, 518spisu tre�ci, 275wewn�trzne, 103zewn�trzne, 102, 328

szablonygraficzne, 608pustych stron, 44

szeroko��w pikselach, 408w procentach, 408kolumny, 322okna, 470uk�adu, 393

szeryfy, 285

�cie�ka do pliku, 438

Ttabela

ekstraklasy, 277unikodu, 34wyników, 200z zestawieniem, 185

tabele, 183nieregularne, 192regularne, 192

tabeliatrybuty, 202kolumny, 199nag�ówek i stopka, 195, 197nag�ówek, thead, 194stopka, tfoot, 194tre��, tbody, 194

tekst, 141preformatowany, 143wielokolumnowy, 319, 324

testowanieczcionek, 289stron, 15

t�a, 163, 437elementów, 450wielokrotne, 452

t�oelementu html, 471gwiazdek, 487

niepowielane, 449o sta�ych wymiarach, 446pojemnika, 367powielane poziomo, 442powielane w pionie, 441udawanych kolumn, 468umieszczone na warstwie, 454w kszta�cie paska, 447

tre��odsy�acza, 211tabeli, 194

trybblock, 337inline, 337none, 340

tryb pracy przegl�darkiquirks mode, 61, 67standard mode, 61, 67

tryby wy�wietlania elementów,338, 341

twarda spacja, 82tworzenie

ikony, 558list, 598menu, 480, 484, 499obrazu, 263przycisków, 477, 597szablonów, 607

twórcy witryny, 559typ MIME, 177typy

do��czanych zasobów, 548elementu input, 590powi�za, 547

Uudawane kolumny, faux columns,

467–471udost�pnianie pobierania, 280uk�ad

dwukolumnowy, 323, 365,413

dwukolumnowy hybrydowy,413–416

hybrydowy, 413kolumnowy, 365o sta�ej szeroko�ci, 393o zmiennej szeroko�ci, 407p�ynny, 407przylegaj�cy, 395strony, 335, 350sztywny, 393trójkolumnowy, 320trójkolumnowy hybrydowy,

417–420uko�nik, slash, 20

ukrywanie tekstu, 475unikod, 34uprawnienia

do kodu HTML, 579do modyfikacji plików, 579

URL, Universal ResourceLocator, 203

ustalanie szeroko�ci elementu,387

usuwanie elementów, 581

WW3C, 56W3C Quality Assurance, 24wady osadzania plików, 180walidacja strony, 57walidator W3C, 15, 56, 242warstwy, 163, 387warto�ci

atrybutu target, 216, 254RGB, 120

warto��, value, 109wci�cie akapitu, 315wielko�� liter, 110w�a�ciwo�ci

CSS, 115, 123CSS list, 157CSS t�a, 437czcionek, 310, 327tekstu, 314, 327

w�a�ciwo��, property, 109background, 119, 163, 172,

251, 353, 437background-position, 439,

492, 496background-repeat, 438background-size, 439border, 121, 348, 353bottom, 385clear, 368color, 119, 437column-count, 319, 322column-span, 324display, 351, 457, 581float, 171, 361, 414font, 313font-family, 297, 310font-size, 115, 311font-stretch, 312font-style, 116, 312font-variant, 313font-weight, 116, 313height, 169, 348, 353left, 384, 385letter-spacing, 314line-height, 117, 314





w�a�ciwo��, propertylist-style, 162list-style-image, 159list-style-position, 162list-style-type, 158margin, 118, 348, 354max-height, 359min-width, 358overflow, 369, 390padding, 70, 348padding-top, 444position, 371, 372src, 300right, 383text-align, 117, 314, 328, 354,

486, 580text-decoration, 315text-indent, 315, 458text-shadow, 315text-transform, 316top, 385vertical-align, 187white-space, 316, 331width, 70, 169, 348, 353word-spacing, 317z-index, 388, 389, 487

wstawianiefilmu, 243–245, Patrz tak�e

osadzanielinii, 261

wst�pne pobieranie obrazów, 502wtyczka

Firebug, 24, 355Site Navigation Toolbar, 554Tooltip, 36Web Developer, 257Web Developer Toolbar, 358,

464, 493wybór

t�a, 524trybu pracy, 67

wycofane znaczniki, 22wygl�d strony, 62, 122wykorzystywanie fragmentu

obrazu, 495wy��czanie

obrazu, 462–464stylów CSS, 16, 331, 455w�a�ciwo�ci, 386, 389

wymagania, 608wymiana obrazu t�a, 475wymiary

akapitu p, 69elementów blokowych, 69obrazu, 166

wymuszanie wysoko�cielementów, 367

wype�nienie, padding, 324wypunktowanie, 153wyra�enia regularne, 128wyrównanie poziome, 117, 314wyró�nianie tekstu, 89WYSIWYG, 12wysoko��

obramowania, 467wiersza, 117, 314

wy�rodkowanieelementu blokowego, 354elementu div, 354etykiety, 477nag�ówka, 355tekstu, 354

wy�wietlanieelementów, 351obrazu t�a, 458tekstu, 457zdj�� kapsli, 554znaków diakrytycznych, 43,

45

YYouTube, 243

Zzagnie�d�anie

elementów, 32, 130, 230, 342elementów blokowych, 361list, 156

zak�adki, 519zaokr�glone

naro�niki, 429obramowania, 121, 583

zapisywanie plików wideo, 240zasi�g

elementu, 20opcji menu, 503

zawarto��, content, 347zaznaczanie gwiazdek, 485zdarzenia, 545zdarzenie :hover, 487, 502zestaw czcionek, 115, 190, 296zmiana kolejno�ci

kolumn, 532, 538pasów, 536, 538

znacznik, tag, 20znaczniki

otwieraj�ce, 20, 27zamykaj�ce, 20, 27

znakidiakrytyczne, 45

francuskie, 47niemieckie, 48polskie, 39, 46rosyjskie, 49

interpunkcyjne, 85specjalne, 33, 35, 40, 75, 90

zrzuty ekranu, 269




http://program-partnerski.helion.pl

Wszelkie prawa zastrzeżone. Nieautoryzowane ... · Zadania tekstowe z odpowiedziami .....94...

Documents

Transcript of Wszelkie prawa zastrzeżone. Nieautoryzowane ... · Zadania tekstowe z odpowiedziami .....94...