HTML5 i CSS3. Praktyczne projekty
Włodzimierz Gajda
Spis treści
-
Rozdział 1. Wprowadzenie
Rysunki
Rysunek 1.1. Statystyki popularności przeglądarek dostępne w witrynie...
Część pierwsza: Elementarz HTML5
-
Rozdział 2. Języki znaczników
Ćwiczenia
Listingi
Listing 2.1. Pusta strona WWW w języku HTML5
Listing 2.2. Kod pierwszej strony WWW
Rysunki
Rysunek 2.1. Pierwsza strona otworzona w przeglądarce Firefox
Rysunek 2.2. Analiza strony z ćwiczenia 2.1 przy użyciu wtyczki...
-
Rozdział 3. Składnia języka HTML5
Ćwiczenia
Listingi
Listing 3.1. Fragment dokumentu pozbawionego znaczników zamykających...
Listing 3.2. Przeglądarka interpretuje dokument 3.1 identycznie jak...
Listing 3.3. Dokument pozbawiony znaczników zamykających </em>,...
Listing 3.4. Przeglądarki, interpretując dokument z listingu 3.3,...
Rysunki
Rysunek 3.1. Analiza kodu z listingu 3.1 wtyczką Firebug
Rysunek 3.2. Przykład analizy drzewa DOM dla dokumentu z listingu 3.3
-
Rozdział 4. Znaki diakrytyczne i oznaczanie języka dokumentu
Ćwiczenia
Listingi
Listing 4.1. Pusta strona WWW w języku HTML5, kodowanie znaków utf-8
Listing 4.2. Pusta strona WWW w języku HTML5, kodowanie znaków...
Listing 4.3. Pusta strona WWW w języku HTML5, kodowanie znaków...
Listing 4.4. Rozwiązanie ćwiczenia 4.1
Listing 4.5. Rozwiązanie ćwiczenia 4.3
Listing 4.6. Rozwiązanie ćwiczenia 4.6
Listing 4.7. Rozwiązanie ćwiczenia 4.7
Listing 4.8. Rozwiązanie ćwiczenia 4.8
Rysunki
Rysunek 4.1. Ręczny wybór kodowania znaków na stronie WWW
-
Rozdział 5. HTML5 poprawny składniowo
Ćwiczenia
Listingi
Listing 5.1. Przykładowa poprawna strona WWW w języku HTML5
Listing 5.2. Strona z listingu 5.1 zapisana w składni XHTML
Listing 5.3. Modyfikacja nagłówka HTTP w języku PHP
Rysunki
Rysunek 5.1. Wynik walidacji strony z listingu 5.1
Rysunek 5.2. Wynik walidacji strony z listingu 5.2
Rysunek 5.3. Komunikat o błędzie składniowym wyświetlany przez...
-
Rozdział 6. Praca w trybie standardów
Ćwiczenia
Listingi
Listing 6.1. Kod JavaScript wyświetlający okno informacyjne z...
Listing 6.2. Badanie trybu pracy przeglądarki
Listing 6.3. Brak elementu DOCTYPE przełącza wszystkie przeglądarki w...
Listing 6.4. Komentarz HTML przełącza tryb pracy przeglądarki IE na...
Listing 6.5. Style CSS definiujące wymiary akapitu p
Listing 6.6. Rozwiązanie ćwiczenia 6.4
Listing 6.7. Rozwiązanie ćwiczenia 6.5
Listing 6.8. Kod HTML5 poprzedzony komentarzem
Listing 6.9. Kod HTML5 wymuszający na przeglądarkach pracę w trybie...
Rysunki
Rysunek 6.1. Włączanie wykonania skryptu JavaScript w przeglądarce...
Rysunek 6.2. Informacje o stronie interpretowanej przez Firefoksa w...
Rysunek 6.3. Informacje o stronie interpretowanej przez Firefoksa w...
Rysunek 6.4. Informacje o trybie interpretacji strony jest wyświetlana...
Rysunek 6.5. Informacja o trybie interpretacji strony wyświetlana przez...
Rysunek 6.6. Akapit sformatowany stylami z listingu 6.5 interpretowanymi...
Rysunek 6.7. Akapit sformatowany stylami z listingu 6.5 interpretowanymi...
-
Rozdział 7. Podstawowe elementy HTML
Ćwiczenia
Listingi
Listing 7.1. Kod HTML ćwiczenia 7.1
Listing 7.2. Fragment ćwiczenia 7.2
Listing 7.3. Akapity z ćwiczenia 7.3
Listing 7.4. Akapity z ćwiczenia 7.4
Listing 7.5. Fragment noweli z ćwiczenia 7.5
Listing 7.6. Wyrazy z ćwiczenia 7.6
Listing 7.7. Wyrazy z ćwiczenia 7.7
Listing 7.8. Bajka iskierki z ćwiczenia 7.8
Listing 7.9. Bajka z ćwiczenia 7.9
Listing 7.10. Wiersz pt. „Dwa kabele” z ćwiczenia 7.10
Listing 7.11. Fragment spisu treści książki pt. „jQuery. Poradnik...
Listing 7.12. Nowela z ćwiczenia 7.12
Listing 7.13. Zdania z zaznaczonymi czasownikami z ćwiczenia 7.13
Listing 7.14. Zdania z zaznaczonymi przymiotnikami z ćwiczenia 7.14
Listing 7.15. Definicja słowa pangram z ćwiczenia 7.15
Listing 7.16. Tłumaczenie słowa kałuża z ćwiczenia 7.16
Listing 7.17. Opis opcji z ćwiczenia 7.17: Widok/Kodowanie znaków
Listing 7.18. Dane aparatów fotograficznych z ćwiczenia 7.18
Rysunki
Rysunek 7.1. Białe znaki wewnątrz akapitu są interpretowane jako...
Rysunek 7.2. Wpływ szerokości okna przeglądarki na łamanie tekstu
Rysunek 7.3. Wpływ wielkości czcionki na łamanie tekstu
Rysunek 7.4. Dzielenie wyrazów w przeglądarce Firefox
-
Rozdział 8. Podsumowanie części pierwszej
Projekty
Listingi
Listing 8.1. Projekt 8.1: Zadania dla czwartoklasistów
Listing 8.2. Projekt 8.2: Zadania tekstowe z odpowiedziami
Listing 8.3. Projekt 8.3: Kolokwium z PHP
Listing 8.4. Projekt 8.4: Adam Mickiewicz: Oda do młodości
Listing 8.5. Projekt 8.5: Adam Mickiewicz: Wiersze
Część druga: Elementarz CSS
-
Rozdział 9. Struktura a wygląd dokumentów HTML
Ćwiczenia
Listingi
Listing 9.1. Kod HTML strony WWW stosującej style zewnętrzne (plik...
Listing 9.2. Style CSS (plik style.css)
Listing 9.3. Style wewnętrzne
Listing 9.4. Atrybut style
Listing 9.5. Style do ćwiczenia 9.1
Listing 9.6. Strona WWW, która zawiera trzy rodzaje stylów
Listing 9.7. Style zewnętrzne z ćwiczenia 9.4
Rysunki
Rysunek 9.1. Wygląd witryny, której kod jest widoczny na listingach...
-
Rozdział 10. Składnia kaskadowych arkuszy stylów
-
Rozdział 11. Przykładowe właściwości CSS
Ćwiczenia
Listingi
Listing 11.1. Kod HTML ćwiczenia 11.1
Listing 11.2. Style CSS ćwiczenia 11.1
Listing 11.3. Kod HTML ćwiczenia 11.2
Listing 11.4. Style CSS ćwiczenia 11.2
Listing 11.5. Kod HTML ćwiczenia 11.3
Listing 11.6. Style CSS ćwiczenia 11.3
Listing 11.7. Kod HTML ćwiczenia 11.4
Listing 11.8. Style CSS ćwiczenia 11.5
Listing 11.9. Style CSS ćwiczenia 11.6
Rysunki
Rysunek 11.1. Wartości RGB wybranego koloru w programie Paint
-
Rozdział 12. Klasy i identyfikatory
Ćwiczenia
Listingi
Listing 12.1. Kod HTML ćwiczenia 12.1
Listing 12.2. Style CSS z ćwiczenia 12.1
Listing 12.3. Kod HTML ćwiczenia 12.2
Listing 12.4. Style z ćwiczenia 12.2
Listing 12.5. Kod HTML ćwiczenia 12.3
Listing 12.6. Style CSS ćwiczenia 12.3
-
Rozdział 13. Podsumowanie części drugiej
Projekty
Listingi
Listing 13.1. Projekt 13.1: Cyprian Kamil Norwid: Moja piosnka
Listing 13.2. Style projektu 13.1
Listing 13.3. Projekt 13.2: Charles Dickens: A Christmas Carol
Listing 13.4. Projekt 13.3: Jack London: The Call of the Wild
Listing 13.5. Projekt 13.4: Ignacy Krasicki: Bajki
Rysunki
Rysunek 13.1. Projekt 13.2. Charles Dickens: A Christmas Carol
Część trzecia: Elementy i znaczniki HTML5
-
Rozdział 14. Tekst
Ćwiczenia
Listingi
Listing 14.1. Porównanie działania znacznika <wbr /> oraz encji ­
Listing 14.2. Funkcja maximum() w C++
Listing 14.3. Funkcja maximum() w Pascalu
Listing 14.4. Samouczek HTML z ćwiczenia 14.4
Listing 14.5. Kod HTML ćwiczenia 14.7
Listing 14.6. Kod HTML ćwiczenia 14.8
Listing 14.7. Dokument HTML zawierający cytaty w kilku językach
Listing 14.8. Style dołączające cudzysłowy zgodne z językiem
Rysunki
Rysunek 14.1. Działanie znacznika <wbr /> oraz encji ­
Rysunek 14.2. Atrybuty title są wyświetlane w postaci chmurek...
-
Rozdział 15. Listy
Ćwiczenia
Listingi
Listing 15.1. Lista nieuporządkowana
Listing 15.2. Lista uporządkowana
Listing 15.3. Lista definicji
Listing 15.4. Pierwszy poziom listy dwupoziomowej
Listing 15.5. Dwupoziomowe wypunktowanie
Listing 15.6. Zmiana symbolu wypunktowania
Listing 15.7. Symbol wypunktowania w postaci tła elementu li
Rysunki
Rysunek 15.1. Symbol wypunktowania punkt1.png
Rysunek 15.2. Symbol wypunktowania z pliku punkt2.png
Rysunek 15.3. Wartości inside (z lewej) oraz outside (z prawej)...
-
Rozdział 16. Elementy img, figure i figcaption
Ćwiczenia
Listingi
Listing 16.1. Strona WWW przedstawiająca zdjęcie ropuchy
Listing 16.2. Strona prezentująca cztery zdjęcia Tatr
Listing 16.3. Rozwiązanie ćwiczenia 16.5
Listing 16.4. Kod HTML strony z obrazkiem i opływającym go tekstem
Listing 16.5. Funkcja image_encode()
Listing 16.6. Plik index.php z ćwiczenia 16.8
Listing 16.7. Plik index.html z ćwiczenia 16.10
Listing 16.8. Użycie elementów figure i figcaption do oznaczenia...
Listing 16.9. Użycie elementów figure i figcaption do oznaczenia...
Rysunki
Rysunek 16.1. Wycięty liść
Rysunek 16.2. Warstwy obrazu html.gif
Rysunek 16.3. Obraz umieszczony wewnątrz dużej ilości tekstu
Rysunek 16.4. Tekst opływa obraz dzięki użyciu właściwości float (w...
Rysunek 16.5. Wiele akapitów opływa obraz
Rysunek 16.6. Element pływający, który generuje wysokość,...
-
Rozdział 17. Tabele
Ćwiczenia
Listingi
Listing 17.1. Tabela o czterech wierszach i dwóch kolumnach
Listing 17.2. Strona z ćwiczenia 17.1
Listing 17.3. Tabela z przedrostkami jednostek wtórnych
Listing 17.4. Użycie komórek nagłówkowych th w odniesieniu do wierszy
Listing 17.5. Zestawienie czcionek Core fonts for the Web
Listing 17.6. Użycie elementu caption
Listing 17.7. Komórki rozciągające się na kilka kolumn
Listing 17.8. Tabela zawierająca nagłówek i stopkę
Listing 17.9. Tabela o sześciu kolumnach podzielonych na trzy grupy
Listing 17.10. Tabela wyników grupy „polskiej” eliminacji do...
Rysunki
Rysunek 17.1. Tabela z zestawieniem najdłuższych rzek świata
Rysunek 17.2. Tabela z rysunku 17.1 po usunięciu stylu atrybutu CSS...
Rysunek 17.3. Element body jest obecny w drzewie DOM nawet wtedy, gdy nie...
Rysunek 17.4. Stronicowanie podglądu wydruku tabeli zawierającej...
-
Rozdział 18. Odsyłacze i menu nawigacyjne
Ćwiczenia
Listingi
Listing 18.1. Fragment pliku lokomotywa.html
Listing 18.2. Odsyłacze do trzech wierszy Juliana Tuwima
Listing 18.3. Spis treści: odsyłacze a zawarte wewnątrz listy ul
Listing 18.4. Hiperłącza do plików PDF, ZIP oraz TXT
Listing 18.5. Hiperłącza do stron domowych Briana Kernighana, Donalda...
Listing 18.6. Odsyłacze wewnętrzne na stronie z dziecięcymi piosenkami
Listing 18.7. Hiperłącza w postaci obrazów
Listing 18.8. Zarys rozwiązania ćwiczenia 18.8
Listing 18.9. Plik HTML z tekstem piosenki pt. „Deszcz, jesienny...
Listing 18.10. Hiperłącza wykonane elementami map, area oraz img
Rysunki
Rysunek 18.1. Operacja Zaznacz wszystkie odnośniki jako nieodwiedzone
Rysunek 18.2. Kształt hiperłączy z listingu 18.10
-
Rozdział 19. Elementy semantyczne ustalające strukturę witryny
Ćwiczenia
Listingi
Listing 19.1. Nagłówki h1, h2, h3
Listing 19.2. Kod z listingu 19.1 po zgrupowaniu nagłówków...
Listing 19.3. Użycie elementów article do oznaczenia wierszy
Listing 19.4. Przykład zagnieżdżonych elementów article
Listing 19.5. Przykład użycia elementu section do grupowania wierszy...
Listing 19.6. Nota boczna zawierająca informacje o autorze
Listing 19.7. Przykład użycia elementów header oraz footer
Listing 19.8. Dokument sprawdzający wpływ wszystkich elementów na...
Rysunki
Rysunek 19.1. Automatyczne generowanie spisu treści wtyczką HTML5...
Rysunek 19.2. Spis treści dokumentu z listingu 19.2
Rysunek 19.3. Spis treści dokumentu zawierającego wszystkie elementy...
-
Rozdział 20. Multimedia
Ćwiczenia
Listingi
Listing 20.1. Element audio umieszczający na stronie WWW ścieżkę...
Listing 20.2. Podstawowe użycie elementu video
Listing 20.3. Kod ćwiczenia 20.4
Listing 20.4. Kod ćwiczenia 20.5
Listing 20.5. Kod ćwiczenia 20.6
Listing 20.6. Kod ćwiczenia 20.7
Listing 20.7. Kod ćwiczenia 20.8
Listing 20.8. Przykładowy plik subtitles.vtt
Listing 20.9. Element track dodający do filmu blues.mp4 napisy z pliku...
Listing 20.10. Kod HTML wstawiający na stronę WWW film „W Polskę...
Listing 20.11. Poprawny kod HTML5 wstawiający na stronę WWW film „W...
Listing 20.12. Poprawny kod HTML5 wstawiający na stronę teledysk z...
Rysunki
Rysunek 20.1. Kontrolka audio przeglądarki Firefox
Rysunek 20.2. Element video zawiera menu kontekstowe pozwalające na...
Rysunek 20.3. Przycisk Umieść
Rysunek 20.4. Publikowanie filmów z Dailymotion na własnej stronie WWW
-
Rozdział 21. Pozostałe elementy HTML5
Ćwiczenia
Listingi
Listing 21.1. Tekst przed korektą
Listing 21.2. Tekst po korekcie
Listing 21.3. Tekst po zatwierdzeniu korekty
Listing 21.4. Umieszczanie pliku SVG przy użyciu elementów object, img...
Listing 21.5. Umieszczanie na stronie WWW konstrukcji orthocenter.zir
Listing 21.6. Dokument index.html z ćwiczenia 21.6
Listing 21.7. Dokument next-level.html z ćwiczenia 21.6
Listing 21.8. Dokument inside.html z ćwiczenia 21.6
Listing 21.9. Użycie elementu script do osadzenia kodu JavaScript w...
Listing 21.10. Dołączanie skryptu JavaScript zapisanego w zewnętrznym...
Listing 21.11. Zawartość pliku skrypt.js
Listing 21.12. Osadzony kod JavaScript może zawierać znaki <, >, &
Listing 21.13. Osadzony kod JavaScript nie może zawierać napisu...
Listing 21.14. Komunikat informujący o wyłączonej obsłudze JavaScript
Listing 21.15. Użycie elementu canvas do narysowania niebieskiego...
Listing 21.16. Rozwiązanie ćwiczenia 21.13
Listing 21.17. Rozwiązanie ćwiczenia 21.14
Rysunki
Rysunek 21.1. C.a.R — aplet pozwalający na tworzenie dynamicznych...
Rysunek 21.2. Działanie poszczególnych wartości atrybutu target
Rysunek 21.3. Wyłączanie obsługi JavaScript przy użyciu wtyczki Web...
-
Rozdział 22. Podsumowanie części trzeciej
Projekty
Listingi
Listing 22.1. Obraz wykonany przy użyciu elementów pre oraz span
Listing 22.2. Czarno-biały ASCII Art
Listing 22.3. Tabela emotikon
Listing 22.4. Cytaty ze specyfikacji HTML i XHTML
Listing 22.5. Spis treści książki pt. „The Wonderful Wizard of Oz”
Listing 22.6. Instrukcja wykonywania zrzutów ekranu
Listing 22.7. Eksponowana ilustracja z podpisem
Listing 22.8. Obraz będący odnośnikiem
Listing 22.9. Spis treści artykułu pt. HTML czy XHTML?
Listing 22.10. Eksponowany obraz z podpisem
Listing 22.11. Dwukolumnowa tabela laureatów Nagrody Nobla
Listing 22.12. Tabela ekstraklasy
Listing 22.13. Trzy pierwsze wiersze tabeli z kodem paskowym
Listing 22.14. Pierwszy wiersz tabeli z przykładami LaTeX-a
Listing 22.15. Przypisy dolne wykonane w postaci listy dl
Rysunki
Rysunek 22.1. Struktura folderów projektu 22.4
Rysunek 22.2. Kopiowanie adresu URL bieżącej strony WWW
Część czwarta: Czcionki na stronach WWW
-
Rozdział 23. Rodzaje czcionek
Ćwiczenia
Listingi
Listing 23.1. Obrazy na stronach WWW wykonane jako litery kroju Wingdings
Listing 23.2. Ikony wykonane jako litery kroju Wingdings z wykorzystaniem...
Rysunki
Rysunek 23.1. Szeryfy litery H w kroju Times New Roman
Rysunek 23.2. Brak szeryfów w kroju Arial
Rysunek 23.3. Litery duże „i” oraz małe „l” w krojach Arial i...
Rysunek 23.4. Różnica pomiędzy czcionkami nieproporcjonalnymi i...
Rysunek 23.5. Czcionka Webdings
Rysunek 23.6. Czcionka Seville
Rysunek 23.7. Czcionka Petrucci
Rysunek 23.8. Czcionka Chess Kingdom
-
Rozdział 24. Czcionki dla webmastera
Ćwiczenia
Listingi
Listing 24.1. Kod HTML ćwiczenia 24.1
Listing 24.2. Style CSS ćwiczenia 24.1
Listing 24.3. Kod HTML przykładu 24.3
Listing 24.4. Style CSS przykładu 24.3
Listing 24.5. Kod HTML ćwiczenia 24.4
Listing 24.6. Plik style.css z ćwiczenia 24.4
Listing 24.7. Reguła @font-face, która działa poprawnie we wszystkich...
Listing 24.8. Przykład użycia czcionek i stylów CSS wygenerowanych...
Listing 24.9. Rozwiązanie ćwiczenia 24.7
Listing 24.10. Czcionki z serwisu Typekit są osadzane na stronie WWW...
Rysunki
Rysunek 24.1. Okno dialogowe właściwości czcionki pozwala sprawdzić,...
Rysunek 24.2. Wygląd strony z ćwiczenia 24.1 na komputerze, na którym...
Rysunek 24.3. Wygląd strony z ćwiczenia 24.1 na komputerze, na którym...
Rysunek 24.4. Pobieranie pakietu ZIP zawierającego pliki z czcionkami,...
Rysunek 24.5. Strona wykorzystująca czcionki z serwisu Typekit
-
Rozdział 25. Właściwości CSS dotyczące czcionek i tekstu
-
Rozdział 26. Teksty wielokolumnowe
Ćwiczenia
Listingi
Listing 26.1. Reguła ustalająca liczbę kolumn, która działa w...
Listing 26.2. Kod HTML ćwiczenia 26.2
Listing 26.3. Style CSS ćwiczenia 26.2
Rysunki
Rysunek 26.1. Układ trójkolumnowy w projekcie 13.2
Rysunek 26.2. Strona z ćwiczenia 26.2 w przeglądarce Firefox
Rysunek 26.3. Strona z ćwiczenia 26.2 w przeglądarce Internet Explorer
Rysunek 26.4. Kolumna o szerokości 200px może zajmować od 0 do 399...
Rysunek 26.5. Dwie kolumny o właściwości column-width: 200px —...
Rysunek 26.6. Kontynuacja tekstu w przypadku użycia nagłówków...
-
Rozdział 27. Podsumowanie części czwartej
Projekty
Listingi
Listing 27.1. Kod HTML strony text-align.html
Listing 27.2. Style testujące cztery wartości właściwości text-align
Listing 27.3. Style zewnętrzne modyfikujące nagłówek h2
Listing 27.4. Kod HTML strony prezentującej Treny
Listing 27.5. Style CSS wykorzystane do formatowania trenów
Rysunki
Rysunek 27.1. Wygląd witryny z projektu 27.2 przy wyłączonych stylach...
Część piąta: Układ strony
-
Rozdział 28. Elementy blokowe i liniowe
Ćwiczenia
Listingi
Listing 28.1. Przykładowy kod zawierający kilka elementów blokowych i...
Listing 28.2. Style CSS1, dzięki którym ujrzymy położenie elementów...
Listing 28.3. Przykładowy kod zawierający zagnieżdżone elementy...
Listing 28.4. Style CSS formatujące kod z listingu 28.3 tak, by...
Rysunki
Rysunek 28.1. Sprawdzanie domyślnego trybu wyświetlania elementu h1
Rysunek 28.2. Ćwiczenie umożliwiające zbadanie domyślnych wymiarów i...
Rysunek 28.3. Badanie położenia i rozmiaru elementów zagnieżdżonych
-
Rozdział 29. Obszar zajmowany przez element
Ćwiczenia
Listingi
Listing 29.1. Element div, który służy do zbadania wpływu...
Listing 29.2. Style formatujące kod z listingu 29.1 do postaci z rysunku...
Listing 29.3. Style nadające elementowi p wymiary 266×416 pikseli
Listing 29.4. Kod HTML strony z ćwiczenia 29.1
Listing 29.5. Style CSS strony z ćwiczenia 29.1
Listing 29.6. Strona zawierająca wyśrodkowany nagłówek h1 o...
Listing 29.7. Strona badająca łączenie marginesów pionowych
Listing 29.8. Strona testowa do badania minimalnych i maksymalnych...
Rysunki
Rysunek 29.1. Cztery obszary prostokąta zajmowanego przez element
Rysunek 29.2. Strona, która tworzą listingi 29.1 oraz 29.2
Rysunek 29.3. Wpływ właściwości width oraz height na element liniowy...
Rysunek 29.4. Panel Układ wtyczki Firebug ilustruje wymiary marginesów,...
Rysunek 29.5. Łączenie marginesów pionowych
-
Rozdział 30. Elementy pływające
Ćwiczenia
Listingi
Listing 30.1. Element div, który po prawej stronie pozostawia wolną...
Listing 30.2. Kilka elementów div dosuniętych do lewej krawędzi
Listing 30.3. Kod HTML układu dwukolumnowego z rysunku 30.5
Listing 30.4. Style CSS układu dwukolumnowego z rysunku 30.5
Listing 30.5. Strona, w której wysokość elementu #pojemnik jest...
Listing 30.6. Wymuszanie wysokości pojemnika przy użyciu właściwości...
Rysunki
Rysunek 30.1. Element div z listingu 30.1
Rysunek 30.2. Wygląd dokumentu z listingu 30.2
Rysunek 30.3. Wygląd strony z listingu 30.2 po zmianie właściwości...
Rysunek 30.4. Rezultat usunięcia z listingu 30.2 właściwości width
Rysunek 30.5. Strona dwukolumnowa z listingów 30.3 oraz 30.4
Rysunek 30.6. Efekt uzyskiwany, gdy szerokość kolumn przekracza...
Rysunek 30.7. Wygląd strony z listingu 30.5
-
Rozdział 31. Zaawansowane metody pozycjonowania elementów blokowych
Ćwiczenia
Listingi
Listing 31.1. Strona, która posłuży do zbadania wpływu właściwości...
Listing 31.2. Pozycjonowanie względne
Listing 31.3. Pozycjonowanie bezwzględne
Listing 31.4. Pozycjonowanie trwałe
Listing 31.5. Pozycjonowanie względnie bezwzględne
Listing 31.6. Kod do analizy działania właściwości left, top, right...
Listing 31.7. Nachodzące na siebie elementy z tekstem AAAAA i BBBBB
Listing 31.8. Style, które spowodują umieszczenie warstwy z tekstem...
Listing 31.9. Elementy pozycjonowane kontekstowo mogą wystawać poza...
Rysunki
Rysunek 31.1. Strona z listingu 31.1
Rysunek 31.2. Pozycjonowanie względne
Rysunek 31.3. Wpływ właściwości top oraz left na położenie elementu...
Rysunek 31.4. Pozycjonowanie bezwzględne
Rysunek 31.5. Pozycjonowanie trwałe
Rysunek 31.6. Pozycjonowanie względnie bezwzględne
Rysunek 31.7. Kontekst pozycjonowania względnie bezwzględnego
Rysunek 31.8. Wygląd kodu z listingu 31.6
Rysunek 31.9. Pozycjonowanie kontekstowe i właściwości right: 0 oraz...
Rysunek 31.10. Pozycjonowanie kontekstowe i właściwości right: 0 oraz...
Rysunek 31.11. Pozycjonowanie kontekstowe i właściwości left: 0 oraz...
Rysunek 31.12. Pozycjonowanie kontekstowe i właściwości left: 0 oraz...
Rysunek 31.13. Pozycjonowanie kontekstowe i właściwości right: 100px...
Rysunek 31.14. Wyłączanie poszczególnych właściwości CSS przy...
Rysunek 31.15. Warstwa B przysłania warstwę A
Rysunek 31.16. Warstwy leżą jedna na drugiej, tworząc stos
Rysunek 31.17. Właściwość z-index: 2 podnosi warstwę z tekstem A na...
Rysunek 31.18. Elementy pozycjonowane kontekstowo mogą wystawać poza...
Rysunek 31.19. Strona z listingu 31.9 po przycięciu zawartości elementu...
-
Rozdział 32. Układy o stałej szerokości
Listingi
Listing 32.1. CSS układu nr 1
Listing 32.2. HTML układu nr 1
Listing 32.3. CSS układu nr 2
Listing 32.4. HTML układu nr 2
Listing 32.5. CSS układu nr 3
Listing 32.6. HTML układu nr 3
Listing 32.7. CSS układu nr 4
Listing 32.8. HTML układu nr 4
Listing 32.9. CSS układu nr 5
Listing 32.10. HTML układu nr 5
Listing 32.11. CSS układu nr 6
Listing 32.12. HTML układu nr 6
Listing 32.13. CSS układu nr 7
Listing 32.14. HTML układu nr 7
Listing 32.15. CSS układu nr 8
Listing 32.16. HTML układu nr 8
Rysunki
Rysunek 32.1. Rozdzielczości monitorów stosowane przez polskich...
Rysunek 32.2. Układ nr 1
Rysunek 32.3. Układ nr 2
Rysunek 32.4. Układ nr 3
Rysunek 32.5. Układ nr 4
Rysunek 32.6. Układ nr 5
Rysunek 32.7. Układ nr 6
Rysunek 32.8. Układ nr 7
Rysunek 32.9. Układ nr 8
-
Rozdział 33. Układy płynne
Listingi
Listing 33.1. CSS układu nr 9
Listing 33.2. CSS układu nr 10
Listing 33.3. CSS układu nr 11
Listing 33.4. CSS układu nr 12
Listing 33.5. CSS układu nr 13
Listing 33.6. CSS układu nr 14
Listing 33.7. CSS układu nr 15
Listing 33.8. CSS układu nr 16
-
Rozdział 34. Układy hybrydowe
Listingi
Listing 34.1. HTML układu nr 17
Listing 34.2. CSS układu nr 17
Listing 34.3. HTML układu nr 18
Listing 34.4. CSS układu nr 18
Listing 34.5. HTML układu nr 19
Listing 34.6. CSS układu nr 19
Listing 34.7. HTML układu nr 20
Listing 34.8. CSS układu nr 20
Listing 34.9. HTML układu nr 21
Listing 34.10. CSS układu nr 21
Listing 34.11. HTML układu nr 22
Listing 34.12. CSS układu nr 22
Rysunki
Rysunek 34.1. Dwukolumnowy układ hybrydowy
Rysunek 34.2. Dwukolumnowy układ hybrydowy po zmianie szerokości okna...
Rysunek 34.3. Trójkolumnowy układ hybrydowy
Rysunek 34.4. Trójkolumnowy układ hybrydowy z rysunku 34.3 po zmianie...
-
Rozdział 35. Podsumowanie części piątej
Projekty
Listingi
Listing 35.1. Kod HTML noweli Marii Konopnickiej
Listing 35.2. Style pojemnika z listingu 35.1
Listing 35.3. Nowela Stefana Żeromskiego z fiszkami wskazującymi...
Listing 35.4. Formatowanie fiszek
Listing 35.5. Lista ul wykorzystana w projekcie 35.3
Listing 35.6. Pierwszy krok pracy nad stroną z projektu 35.4
Listing 35.7. Podział na dwie kolumny w opisie zabytków Lublina
Listing 35.8. Pierwszy krok pracy nad plikiem cicha-noc.html z projektu...
Listing 35.9. Menu projektu 35.6 — plik cicha-noc.html
Listing 35.10. Treść zawarta w kodzie strony cicha-noc.html
Rysunki
Rysunek 35.1. Obraz na białym tle
Rysunek 35.2. Obraz po dodaniu obramowania
Rysunek 35.3. Obraz po umieszczeniu na stronie o szarym tle
Część szósta: Tła
-
Rozdział 36. Właściwości CSS dotyczące tła
Ćwiczenia
Listingi
Listing 36.1. Rozwiązanie ćwiczenia 36.1
Listing 36.2. Tło powielane w pionie
Listing 36.3. Tło powielane poziomo
Listing 36.4. Tło, które nie będzie powielane
Listing 36.5. Tło elementu o sztywno zadanych wymiarach
Listing 36.6. Tło umiejscowione na środku i powielane pionowo
Listing 36.7. Tło, które nie podlega przewijaniu
Listing 36.8. Tła elementów p, h1, h2 oraz h3
Listing 36.9. Dwa gradienty: jeden rozpoczyna stronę na górze, a drugi...
Listing 36.10. Dwa gradienty: jeden rozpoczyna stronę na górze, a drugi...
Listing 36.11. Style strony zawierającej tekst wewnątrz prostokąta...
Rysunki
Rysunek 36.1. Wpływ wpisu background-position: 350px 140px na...
Rysunek 36.2. Obraz tlo.jpg wykorzystany w ćwiczeniu 36.1 ma wymiary...
Rysunek 36.3. Wygląd strony z ćwiczenia 36.1
Rysunek 36.4. Obraz tlo-liscie.jpg wykorzystany w ćwiczeniu 36.2
Rysunek 36.5. Wygląd strony z ćwiczenia 36.2
Rysunek 36.6. Obraz tlo-liscie.jpg wykorzystany w ćwiczeniu 36.3 ma...
Rysunek 36.7. Wygląd strony z ćwiczenia 36.3
Rysunek 36.8. Obraz lilia.jpg wykorzystany w ćwiczeniu 36.4
Rysunek 36.9. Wygląd strony z ćwiczenia 36.4
Rysunek 36.10. Obraz po-deszczu.jpg wykorzystany w ćwiczeniu 36.5
Rysunek 36.11. Wygląd strony z ćwiczenia 36.5
Rysunek 36.12. Obraz tlo-pas.jpg wykorzystany w ćwiczeniu 36.6
Rysunek 36.13. Wygląd strony z ćwiczenia 36.6
Rysunek 36.14. Strona z ćwiczenia 36.7
Rysunek 36.15. Strona z ćwiczenia 36.8
Rysunek 36.16. Strona z ćwiczenia 36.9
-
Rozdział 37. FIR — wymiana obrazów na teksty
Ćwiczenia
Listingi
Listing 37.1. FIR wykonany przy użyciu span i display
Listing 37.2. FIR wykonany przy użyciu text-indent
Listing 37.3. FIR wykonany przy użyciu warstw
Listing 37.4. Kod HTML efektu FIR stosującego przezroczyste obrazy PNG
Listing 37.5. Rozwiązanie ćwiczenia 37.5
Listing 37.6. Technika FIR zastosowana do nagłówków
Listing 37.7. Technika FIR i przezroczyste obrazy
Rysunki
Rysunek 37.1. Strona z ćwiczenia 36.5 przy włączonych stylach CSS
Rysunek 37.2. Strona z ćwiczenia 36.5 przy wyłączonych stylach CSS
Rysunek 37.3. Strona stosująca technikę FIR po wyłączeniu...
Rysunek 37.4. Strona z ćwiczenia 37.5 przy włączonych stylach CSS i...
Rysunek 37.5. Strona z ćwiczenia 37.5 po usunięciu z folderu obrazów
Rysunek 37.6. Opcja Wyłącz obrazki wtyczki Web Developer Toolbar
-
Rozdział 38. Udawane kolumny
Ćwiczenia
Listingi
Listing 38.1. Trójkolumnowy układ nr 5 z rozdziału 32.
Listing 38.2. Udawane kolumny jako tło elementu html. Rozwiązanie...
Listing 38.3. Kod HTML strony piskleta.html z ćwiczenia 38.5
Listing 38.4. Style ćwiczenia 38.5
Rysunki
Rysunek 38.1. Wysokość obramowania kolumny środkowej zależy od...
Rysunek 38.2. Tło wykorzystane w efekcie udawanych kolumn
Rysunek 38.3. Witryna o trzech kolumnach. Obramowanie kolumny środkowej...
Rysunek 38.4. Udawane kolumny jako tło elementu body rozciągają się...
Rysunek 38.5. Strona z rysunku 38.3 po zmniejszeniu szerokości okna jest...
Rysunek 38.6. Strona z rysunku 38.4 po zmniejszeniu szerokości okna...
-
Rozdział 39. Przyciski rollover w CSS
Ćwiczenia
Listingi
Listing 39.1. Odsyłacz reagujący na kursor myszy
Listing 39.2. Rozwiązanie ćwiczenia 39.2
Listing 39.3. Wyśrodkowanie etykiety tekstowej
Listing 39.4. Pozycjonowanie względnie bezwzględne w praktyce
Listing 39.5. Kod HTML strony maliny.html
Listing 39.6. Style pierwszej opcji menu z ćwiczenia 39.6
Listing 39.7. Kod HTML elementu do wystawiania ocen
Listing 39.8. Podstawowy format elementu z ćwiczenia 39.7
Rysunki
Rysunek 39.1. Obraz calosc.jpg o wymiarach 800×600 pikseli
Rysunek 39.2. Obraz fragment.jpg o wymiarach 390×190 pikseli
Rysunek 39.3. Położenie obrazu fragment.jpg wewnątrz obrazu calosc.jpg
Rysunek 39.4. Obraz ul-bkg.png o wymiarach 800×600
Rysunek 39.5. Obraz o1.png o wymiarach 200×72
Rysunek 39.6. Obraz o2.png o wymiarach 205×82
Rysunek 39.7. Obraz o3.png o wymiarach 233×90
Rysunek 39.8. Obraz o4.png o wymiarach 394×95
Rysunek 39.9. Punkty zaczepienia obrazów o1.png, o2.png, o3.png oraz...
Rysunek 39.10. Ocena dwie gwiazdki widoczna po wskazaniu kursorem drugiej...
Rysunek 39.11. Plik gwiazdki-off.png
Rysunek 39.12. Plik gwiazdki-on.png
-
Rozdział 40. Kafelkowanie
Ćwiczenia
Listingi
Listing 40.1. Tło małego elementu div pochodzące z dużego pliku...
Listing 40.2. Przycisk rollover wykorzystujący kafelkowanie
Listing 40.3. Rozwiązanie ćwiczenia 40.4
Listing 40.4. Fragment stylów CSS z ćwiczenia 40.5
Listing 40.5. Kod HTML menu
Listing 40.6. Style pierwszej opcji menu
Listing 40.7. Style drugiej opcji
Listing 40.8. Kod HTML ćwiczenia 40.8
Listing 40.9. Style CSS całego menu
Listing 40.10. Wspólne style wszystkich opcji menu
Listing 40.11. Style opcji z żarówką
Rysunki
Rysunek 40.1. Sześć plików, które chcemy umieścić na stronie WWW
Rysunek 40.2. Jeden plik zawierający sześć plików z rysunku 40.1...
Rysunek 40.3. Przykład wykorzystania kafelkowania w witrynie Amazon.com
Rysunek 40.4. Przykład wykorzystania kafelkowania w witrynie...
Rysunek 40.5. Przykład wykorzystania kafelkowania w aplikacjach Google
Rysunek 40.6. Przykład wykorzystania kafelkowania w witrynie YouTube.com
Rysunek 40.7. To, czy dana witryna stosuje kafelkowanie, najłatwiej...
Rysunek 40.8. Fragment obrazu piora.jpg, który ma zostać wykorzystany...
Rysunek 40.9. Obraz przyciski.png z ćwiczenia 40.2
Rysunek 40.10. Obraz oba.png składa się z dwóch fragmentów
Rysunek 40.11. Obraz calosc-kafelki.jpg z ćwiczenia 40.4
Rysunek 40.12. Obraz kafelki.png z ćwiczenia 40.5
Rysunek 40.13. Punkty zaczepienia kafelków
Rysunek 40.14. Wielowarstwowy obraz XCF wykorzystany w ćwiczeniu 40.6
Rysunek 40.15. Obraz sprite.png wykorzystany w ćwiczeniu 40.6
Rysunek 40.16. Prostokąty wyznaczające zasięg opcji menu
Rysunek 40.17. Plik sprite.png otrzymany po sklejeniu czterech oddzielnych...
Rysunek 40.18. Powiększanie widoku strony powoduje pęknięcia w...
Rysunek 40.19. Sposób powstawania pęknięć kafelków z rysunku 40.18
Rysunek 40.20. Technika wykonania obrazu z kafelkami, który będzie...
Rysunek 40.21. Projekt, który wykorzystamy w ćwiczeniu 40.8
Rysunek 40.22. Obszar projektu z rysunku 40.21, który będzie widoczny na...
Rysunek 40.23. Technika krojenia obrazu 40.22 na kafelki
Rysunek 40.24. Plik sprite.png z ćwiczenia 40.8
Rysunek 40.25. Kafelkowanie wykorzystujące przezroczystość
-
Rozdział 41. Podsumowanie części szóstej
Projekty
Listingi
Listing 41.1. Kod HTML projektu 41.1.
Listing 41.2. Zarys projektu The Call of the Wild
Listing 41.3. Pozycjonowanie elementów span wykorzystanych do...
Listing 41.4. Style elementu h1
Listing 41.5. Style przycisków do góry
Listing 41.6. Plik lorem.html z projektu 41.3
Listing 41.7. Plik ipsum.html z projektu 41.3
Listing 41.8. Plik cicha-noc.html z projektu 41.4
Listing 41.9. Plik jam-jest-dudka.html z projektu 41.4
Rysunki
Rysunek 41.1. Plik sprite.png zawierający trzy obrazy, które...
Rysunek 41.2. Plik sprite.png z ikonami
Część siódma: Zagadnienia zaawansowane
-
Rozdział 42. Struktura funkcjonalna witryny
Ćwiczenia
-
Rozdział 43. Kolejność elementów w kodzie HTML
Listingi
Listing 43.1. Układ nr 3 z rozdziału 32. po zmianie kolejności kolumn...
Listing 43.2. HTML układu nr 5 z rozdziału 32. po dodaniu dodatkowego...
Listing 43.3. Style CSS formatujące kod z listingu 43.2 do postaci z...
Listing 43.4. Modyfikacja kolejności elementów div w układzie 5. przy...
Listing 43.5. Kolejność elementów HTML w układzie nr 2 z rozdziału...
Listing 43.6. Układ nr 2 z rozdziału 32. po zastosowaniu kolejności...
Listing 43.7. Układ nr 8 z rozdziału 32. po ustaleniu kolejności...
-
Rozdział 44. Atrybuty HTML
Ćwiczenia
Listingi
Listing 44.1. Rozwiązanie ćwiczenia 44.1
Listing 44.2. Menu kontekstowe z ćwiczenia 44.3
Listing 44.3. Rozwiązanie ćwiczenia 44.4
Listing 44.4. Rozwiązanie ćwiczenia 44.5
Rysunki
Rysunek 44.1. Menu kontekstowe z opcjami Lorem oraz Ipsum
-
Rozdział 45. Powiązania dokumentów
Ćwiczenia
Listingi
Listing 45.1. Plik rss.xml z ćwiczenia 45.1
Listing 45.2. Plik atom.xml z ćwiczenia 45.2
Listing 45.3. Powiązania pomiędzy dokumentami wykonane przy użyciu...
Listing 45.4. Powiązania pomiędzy dokumentami wykonane przy użyciu...
Listing 45.5. Fragment pliku http://humanstxt.org/humans.txt
Listing 45.6. Przykładowy plik robots.txt
Listing 45.7. Fragment pliku sitemap.xml witryny http://gajdaw.pl
Listing 45.8. Nagłówek head z pliku lorem.html
Rysunki
Rysunek 45.1. Ikona kanału RSS wyświetlana przez przeglądarkę Firefox...
Rysunek 45.2. Wygląd kanału RSS witryny helion.pl
Rysunek 45.3. Ikony ułatwiające dotarcie do kanału RSS
Rysunek 45.4. Pasek narzędzi Poprzedni/Następny widoczny na stronie...
Rysunek 45.5. Struktura folderów i pliki tworzące rozwiązanie...
Rysunek 45.6. Przyciski poprzedni/następny wiążące strony witryny z...
Rysunek 45.7. Ikony witryn w przeglądarce Firefox
Rysunek 45.8. Ikona narysowana w programie GIMP
Rysunek 45.9. Ikona ikona.ico umieszczona na białym tle
Rysunek 45.10. Foldery i pliki rozwiązania ćwiczenia 45.6
-
Rozdział 46. Element meta — dodatkowe informacje na temat strony WWW
Listingi
Listing 46.1. Witryna zawierająca przykładowe metainformacje
-
Rozdział 47. Uzupełnienie wiadomości na temat CSS
Ćwiczenia
Listingi
Listing 47.1. Automatyczna numeracja rozdziałów oznaczonych...
Listing 47.2. Wielopoziomowa automatyczna numeracja
Listing 47.3. Połączenie stylów do druku i pseudoklasy :after
-
Rozdział 48. Formularze
Ćwiczenia
Listingi
Listing 48.1. Przykładowy formularz
Rysunki
Rysunek 48.1. Standardowy wiersz wprowadzania danych oraz pole typu...
Rysunek 48.2. Pola wyboru
Rysunek 48.3. Wykluczające się wzajemnie pola wyboru
Rysunek 48.4. Przycisk z ikoną
Rysunek 48.5. Listy wyboru
Rysunek 48.6. Lista z opcjami pogrupowanymi elementami optgroup
Rysunek 48.7. Pola wyboru pogrupowane elementami fieldset. Obie grupy...
-
Rozdział 49. Korzystanie z HTML5 i CSS3
Ćwiczenia
Listingi
Listing 49.1. Dołączanie skryptu html5shiv.js
Rysunki
Rysunek 49.1. Serwis Can I use… — http://caniuse.com
Rysunek 49.2. Serwis Find me by IP — http://fmbip.com
Rysunek 49.3. Strona z ćwiczenia 49.1 otworzona w Internet Explorerze 8
-
Rozdział 50. Podsumowanie części siódmej
Reklama
