przewiń do treści

HTML5 i CSS3. Praktyczne projekty

Włodzimierz Gajda

Listingi


Listing 2.1. Pusta strona WWW w języku HTML5
Listing 2.2. Kod pierwszej strony WWW
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,...
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
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
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...
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
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
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
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
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
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
Listing 14.1. Porównanie działania znacznika <wbr /> oraz encji &shy;
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
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
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...
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...
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
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...
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...
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
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
Listing 23.1. Obrazy na stronach WWW wykonane jako litery kroju Wingdings
Listing 23.2. Ikony wykonane jako litery kroju Wingdings z wykorzystaniem...
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...
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
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
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...
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...
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...
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...
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
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
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
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
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...
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
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
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
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ą
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
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...
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
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
Listing 46.1. Witryna zawierająca przykładowe metainformacje
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
Listing 48.1. Przykładowy formularz
Listing 49.1. Dołączanie skryptu html5shiv.js

Reklama

Szkolenia z Symfony 2.1