HTML5 i CSS3. Praktyczne projekty - ebook

• Elementarz HTML5 i CSS, elementy i znaczniki HTML5, czyli prosty zestaw do tworzenia strony WWW
• Czcionki na stronach WWW, układ strony i tła, czyli eleganckie wykończenie strony internetowej
• Zagadnienia zaawansowane, czyli atrybuty HTML, powiązania dokumentów, metainformacje i formularze

Opanowanie wszystkich elementów pozwalających stworzyć doskonałą witrynę internetową nie jest rzeczą łatwą. W tym celu trzeba sprawnie posługiwać się co najmniej dwoma językami programowania: HTML i CSS, a także pamiętać o różnicach między przeglądarkami i potrzebach osób niepełnosprawnych. Dobrze jest też znać się na grafice komputerowej, typografii... i wielu innych sprawach. Jednak to wszystko da się zrobić przy odrobinie uporu i pomocy książki prezentującej w praktyce omawiane zagadnienia.

W tej książce znajdziesz mnóstwo ćwiczeń, których zadaniem jest przybliżenie Ci sposobu działania poszczególnych elementów języka HTML5 i właściwości CSS3, a także większych projektów, które pozwolą Ci opanować i przetestować wiedzę na temat większych partii materiału. Obok szczegółowego omówienia języka HTML znajdziesz tu porady na temat tego, jak pilnować poprawności kodu HTML5 i CSS3, pracować w trybie standardów, tworzyć układy strony czy projektować szablony. Dowiesz się także sporo na temat semantyki języka HTML.

• Jak zapewnić poprawność składniową HTML5 oraz CSS3?
• Jak pilnować zgodności tworzonych stron ze standardami?
• Jak sprawnie edytować kod HTML5?
• Jak pracować w trybie standardów?
• Jakich czcionek używać na stronach WWW?
• W jaki sposób tworzyć układy stron przy użyciu stylów CSS?
• Jak wykorzystywać tła na stronach WWW?
• Jakimi cechami wyróżnia się semantyczny kod HTML5?
• Jak projektować szablony stron WWW?

Rozdział 1. Wprowadzenie (11)

• Dla kogo jest ta książka? (11)
• Jak czytać tę książkę? (12)
• Warsztat pracy (12)
• Firefox (14)
• Testowanie stron WWW (15)

CZĘŚĆ I. ELEMENTARZ HTML5 (17)

Rozdział 2. Języki znaczników (19)

• Znaczniki i elementy HTML5 (20)
• Wszystkie elementy języka HTML5 (21)
• Struktura dokumentu HTML5 (22)
• Pierwsza strona WWW (23)
• Analiza strony przy użyciu wtyczki Firebug (24)
• Specyfikacja języka HTML5 (25)

Rozdział 3. Składnia języka HTML5 (27)

• Znaczniki otwierające i zamykające (27)
• Opcjonalne znaczniki otwierające (29)
• Elementy puste i niepuste (29)
• Wielkość liter w nazwach znaczników (30)
• Białe znaki wewnątrz znaczników (31)
• Białe znaki w treści elementów (31)
• Zagnieżdżanie elementów (32)
• Znaki specjalne (33)
• Atrybuty znaczników (35)
• Atrybuty logiczne (37)
• Komentarze (38)

Rozdział 4. Znaki diakrytyczne i oznaczanie języka dokumentu (39)

• Polskie znaki diakrytyczne (39)
• Metody kodowania polskich znaków diakrytycznych (40)
• Fizyczne kodowanie pliku (41)
• Element meta ustalający kodowanie dokumentu HTML5 (41)
• Pangramy (43)
• Atrybut lang (43)
• Szablony pustych polskich stron WWW (44)
• Znaki diakrytyczne w postaci encji (45)
• Kodowanie stron zawierających teksty w kilku językach (46)
• Jakiego kodowania używać? (48)
• Błędne wyświetlanie polskich znaków diakrytycznych (48)

Rozdział 5. HTML5 poprawny składniowo (55)

• Czy poprawność składniowa jest ważna? (55)
• Metody sprawdzania poprawności składniowej (56)

Rozdział 6. Praca w trybie standardów (61)

• Quirks mode i standard mode - dwa tryby pracy przeglądarek internetowych (61)
• Problemy z trybami pracy (62)
• Które przeglądarki mają tryb standardów? (63)
• Jak sprawdzić tryb pracy przeglądarki? (63)
• W jaki sposób przeglądarka wybiera tryb pracy? (67)
• Błędne wyświetlanie witryny wynikające z przełączenia trybu pracy przeglądarki (69)
• Stosuj DOCTYPE języka HTML5 (72)

Rozdział 7. Podstawowe elementy HTML (75)

• Akapit (75)
• Dzielenie wyrazów (81)
• Zakaz łamania wiersza (82)
• Złamanie wiersza (83)
• Znaki interpunkcyjne (85)
• Nagłówki (85)
• Wyróżnianie tekstu (89)
• Popularne znaki specjalne (90)
• Zestawienie (92)

Rozdział 8. Podsumowanie części pierwszej (93)

• Projekt 8.1. Zadania dla czwartoklasistów (94)
• Projekt 8.2. Zadania tekstowe z odpowiedziami (94)
• Projekt 8.3. Kolokwium z PHP (95)
• Projekt 8.4. Adam Mickiewicz: Oda do młodości (96)
• Projekt 8.5. Adam Mickiewicz: Wiersze (96)

CZĘŚĆ II. ELEMENTARZ CSS (99)

Rozdział 9. Struktura a wygląd dokumentów HTML (101)

• Dołączanie stylów do dokumentu (101)
• Domyślny język stylów (105)
• Ujmowanie stylów wewnętrznych w komentarz (106)
• Kolejność stosowania stylów (107)

Rozdział 10. Składnia kaskadowych arkuszy stylów (109)

• Terminologia (109)
• Wielkość liter w selektorach (110)
• Wielkość liter w nazwach i wartościach właściwości (111)
• Białe znaki (111)
• Komentarze (112)
• Formatowanie kodu CSS (113)

Rozdział 11. Przykładowe właściwości CSS (115)

• Czcionki (115)
• Wysokość wiersza tekstu (117)
• Wyrównanie poziome tekstu (117)
• Marginesy (118)
• Kolory (119)
• Obramowanie (121)
• HTML - struktura, CSS - wygląd (122)
• Zestawienie sumaryczne (122)

Rozdział 12. Klasy i identyfikatory (125)

• Atrybut class (125)
• Selektory dotyczące klas (126)
• Atrybut id (127)
• Selektory dotyczące identyfikatorów (128)
• Stosowanie identyfikatorów (128)
• Walka z classitis: selektory potomne (129)

Rozdział 13. Podsumowanie części drugiej (133)

• Projekt 13.1. Cyprian Kamil Norwid: Moja piosnka (133)
• Projekt 13.2. Charles Dickens: A Christmas Carol (134)
• Projekt 13.3. Jack London: The Call of The Wild (135)
• Projekt 13.4. Ignacy Krasicki: Bajki (137)

CZĘŚĆ III. ELEMENTY I ZNACZNIKI HTML5 (139)

Rozdział 14. Tekst (141)

• Element p (141)
• Elementy br i wbr (142)
• Tekst preformatowany (143)
• Elementy frazowe (144)
• Cytaty (150)

Rozdział 15. Listy (153)

• Wypunktowanie (153)
• Numerowanie (154)
• Lista definicji (155)
• Zagnieżdżanie list (156)
• Właściwości CSS list (157)

Rozdział 16. Elementy img, figure i figcaption (163)

• Pliki graficzne (164)
• Składnia elementu img (164)
• Wymiary obrazów (166)
• Obrazy nieprostokątne (169)
• Animacje (172)
• Opływanie (174)
• Dlaczego elementy pływające mają wysokość 0? (176)
• Osadzanie obrazów w kodzie HTML (177)
• Elementy figure i figcaption (180)

Rozdział 17. Tabele (183)

• Obramowanie i łączenie obramowania (184)
• Podstawowe formatowanie komórek i całych tabel (187)
• Nagłówki kolumn i nagłówki wierszy (189)
• Podpis tabeli (191)
• Tabele regularne i nieregularne (192)
• Nagłówek, stopka i treść tabeli (194)
• Kolumny tabeli (198)
• Tabele HTML - podsumowanie (201)

Rozdział 18. Odsyłacze i menu nawigacyjne (203)

• Menu nawigacyjne (204)
• Style CSS witryny z hiperłączami (206)
• Atrybut title (207)
• Odsyłacze do różnych typów plików (207)
• Odsyłacze wskazujące strony w internecie (208)
• Odsyłacze wewnętrzne (209)
• Treść odsyłacza (211)
• Style CSS odsyłaczy (213)
• Otwieranie nowych okien (216)
• Mapa odsyłaczy (217)

Rozdział 19. Elementy semantyczne ustalające strukturę witryny (221)

• Nagłówki (221)
• Grupowanie nagłówków (222)
• Artykuły (224)
• Sekcje (226)
• Element aside (227)
• Nagłówek i stopka (228)
• Element address (229)
• Elementy wyznaczające sekcje (230)

Rozdział 20. Multimedia (237)

• Element audio (237)
• Publikowanie materiałów wideo (238)
• Element video (239)
• Formaty wideo (240)
• Element track (242)
• Osadzanie na stronie WWW filmów z serwisu YouTube (243)
• Osadzanie na stronie WWW filmów z serwisu Dailymotion (245)

Rozdział 21. Pozostałe elementy HTML5 (247)

• Elementy ogólne div i span (247)
• Oznaczanie zmian w dokumencie (248)
• Elementy object i param (250)
• Element embed (252)
• Element iframe (253)
• Skrypty JavaScript (255)
• Element canvas (258)
• Bazowy adres URL (259)
• Element hr (261)

Rozdział 22. Podsumowanie części trzeciej (263)

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

CZĘŚĆ IV. CZCIONKI NA STRONACH WWW (283)

Rozdział 23. Rodzaje czcionek (285)

• Czcionki szeryfowe i bezszeryfowe (285)
• Czcionki proporcjonalne i nieproporcjonalne (286)
• Inne podziały czcionek (287)
• Testowanie czcionek (289)

Rozdział 24. Czcionki dla webmastera (293)

• Core fonts for the Web (296)
• Czcionki dostępne na różnych platformach (296)
• Definiowanie kroju czcionki (297)
• Osadzanie czcionek na stronach WWW (300)
• Prawa autorskie do czcionek (303)
• Serwis Font Squirrel (303)
• Serwisy udostępniające czcionki online (305)

Rozdział 25. Właściwości CSS dotyczące czcionek i tekstu (309)

• Właściwości dotyczące czcionek (310)
• Właściwości dotyczące tekstu (314)

Rozdział 26. Teksty wielokolumnowe (319)

• Ustalenie liczby kolumn (319)
• Szerokości kolumn (322)
• Odstępy i separatory kolumn (323)
• Rozciąganie elementów na wszystkie kolumny (324)

Rozdział 27. Podsumowanie części czwartej (327)

• Projekt 27.1. CSS: właściwości dotyczące czcionek i tekstu (327)
• Projekt 27.2. Jan Kochanowski: Treny (329)
• Projekt 27.3. Adam Mickiewicz: Pan Tadeusz (332)

CZĘŚĆ V. UKŁAD STRONY (335)

Rozdział 28. Elementy blokowe i liniowe (337)

• Elementy ogólne div i span (341)
• Domyślny format wizualny elementów blokowych i liniowych (342)

Rozdział 29. Obszar zajmowany przez element (347)

• Właściwość display (351)
• Wyśrodkowanie elementu blokowego (354)
• Łączenie marginesów pionowych (356)
• Wymiary minimalne i maksymalne (358)

Rozdział 30. Elementy pływające (361)

• Właściwość float (361)
• Układy kolumnowe (365)
• Znikające tło pojemnika (367)
• Czyszczenie elementów pływających (368)

Rozdział 31. Zaawansowane metody pozycjonowania elementów blokowych (371)

• Właściwość position (371)
• Pozycjonowanie statyczne (373)
• Pozycjonowanie względne (374)
• Pozycjonowanie bezwzględne (376)
• Pozycjonowanie trwałe (378)
• Pozycjonowanie kontekstowe (379)
• Właściwości left, right, top oraz bottom (382)
• Warstwy i ich kolejność (387)
• Przycinanie (390)

Rozdział 32. Układy o stałej szerokości (393)

• Dobieranie szerokości układu (393)
• Układy przylegające do okna przeglądarki (395)
• Układ nr 1 (395)
• Układ nr 2 (396)
• Układ nr 3 (397)
• Układ nr 4 (399)
• Układ nr 5 (400)
• Układ nr 6 (401)
• Układ nr 7 (403)
• Układ nr 8 (404)

Rozdział 33. Układy płynne (407)

• Układ nr 9 (407)
• Układ nr 10 (407)
• Układ nr 11 (408)
• Układ nr 12 (409)
• Układ nr 13 (409)
• Układ nr 14 (410)
• Układ nr 15 (410)
• Układ nr 16 (411)

Rozdział 34. Układy hybrydowe (413)

• Układy dwukolumnowe (413)
• Układ nr 17 (414)
• Układ nr 18 (415)
• Układ nr 19 (416)
• Układ trójkolumnowy (417)
• Układ nr 20 (418)
• Układ nr 21 (419)
• Układ nr 22 (420)

Rozdział 35. Podsumowanie części piątej (423)

• Projekt 35.1. Maria Konopnicka: "Miłosierdzie gminy" (423)
• Projekt 35.2. Stefan Żeromski: "Rozdzióbią nas kruki, wrony" (424)
• Projekt 35.3. Szablony XHTML/CSS (426)
• Projekt 35.4. Tabelka miniatur o różnych wymiarach (427)
• Projekt 35.5. Zabytki Lublina (428)
• Projekt 35.6. Kolędy (430)

CZĘŚĆ VI. TŁA (435)

Rozdział 36. Właściwości CSS dotyczące tła (437)

• Wielokrotne tła (452)

Rozdział 37. FIR - wymiana obrazów na teksty (455)

• Efekt FIR wykonany przy użyciu display: none (457)
• Efekt FIR wykonany przy użyciu text-indent (458)
• Efekt FIR wykorzystujący kolejność warstw (458)
• Efekt FIR stosujący przezroczyste obrazy (459)

Rozdział 38. Udawane kolumny (467)

Rozdział 39. Przyciski rollover w CSS (475)

• Wymiana obrazu tła (475)
• Przycisk z etykietą tekstową (477)
• Przyciski pozycjonowane kontekstowo (478)

Rozdział 40. Kafelkowanie (491)

• Rozwiązanie problemu pękania kafelków (507)
• Kafelkowanie a przezroczystość (511)

Rozdział 41. Podsumowanie części szóstej (515)

• Projekt 41.1. Fraszki (515)
• Projekt 41.2. Jack London: The Call of the Wild (516)
• Projekt 41.3. Zakładki (519)
• Projekt 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 (531)

• Zmiana kolejności kolumn pionowych (532)
• Zmiana kolejności poziomych pasów (536)
• Zmiana kolejności kolumn oraz poziomych pasów (538)

Rozdział 44. Atrybuty HTML (541)

• Najpopularniejsze atrybuty (541)
• Atrybuty językowe (542)
• Skróty klawiszowe (542)
• Pozostałe atrybuty (544)
• Zdarzenia (545)

Rozdział 45. Powiązania dokumentów (547)

• Element link (548)
• Style alternatywne (549)
• Kanały RSS i Atom (549)
• Następny, poprzedni oraz spis treści (554)
• Ikona witryny WWW (557)
• Twórcy witryny WWW (559)
• Plik robots.txt (559)
• Plik sitemap.xml (560)

Rozdział 46. Element meta - dodatkowe informacje na temat strony WWW (563)

• Składnia elementu meta (564)
• Dwa rodzaje elementów meta (565)

Rozdział 47. Uzupełnienie wiadomości na temat CSS (567)

• Selektory CSS3 (568)
• Pseudoklasy CSS3 (573)
• Importowanie stylów (578)
• Dziedziczenie (580)
• Style do druku (580)
• Nowości CSS3 (583)

Rozdział 48. Formularze (585)

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

Rozdział 49. Korzystanie z HTML5 i CSS3 (603)

• Czy dany atrybut jest już zaimplementowany? (603)
• Problemy ze starszymi wersjami Internet Explorera (605)

Rozdział 50. Podsumowanie części siódmej (607)

• Praktyka, praktyka, praktyka (608)

Skorowidz (610)