HTML5. Podręcznik programisty - Hudson C. - 2013 [ebook].pdf

(9970 KB) Pobierz
Spis treści
Wstęp . ......................................................................................................13
Podziękowania . .........................................................................................21
O autorach . ...............................................................................................23
Rozdział 1
Nowe elementy strukturalne w HTML5 ........................................................25
PRZEPIS DLA POCZĄTKUJĄCYCH
Budowa startowego dokumentu HTML5 . ................................................................... 26
doctype . ........................................................................................................... 26
Kodowanie znaków . ........................................................................................... 26
JavaScript i
łącza
CSS . ...................................................................................... 27
Styl używanej składni . ........................................................................................ 27
Skąd pochodzą wszystkie nowe elementy? . .............................................................. 28
PRZEPIS DLA POCZĄTKUJĄCYCH
Wykorzystanie elementu header do utworzenia nagłówka witryny . ............................... 29
PRZEPIS DLA POCZĄTKUJĄCYCH
Wykorzystanie elementu hgroup do grupowania nagłówków . ....................................... 31
PRZEPIS DLA POCZĄTKUJĄCYCH
Tworzenie nawigacji przy użyciu elementu nav . .......................................................... 31
PRZEPIS DLA POCZĄTKUJĄCYCH
Użycie elementu article . .......................................................................................... 34
PRZEPIS DLA
ŚREDNIO
ZAAWANSOWANYCH
Grupowanie treści przy użyciu elementu section . ....................................................... 35
Którego elementu powinieneś używać: article czy section? . ................................... 36
PRZEPIS DLA POCZĄTKUJĄCYCH
Tworzenie paska bocznego za pomocą elementu aside . ............................................. 37
PRZEPIS DLA POCZĄTKUJĄCYCH
Użycie elementu footer . ........................................................................................... 39
PRZEPIS DLA
ŚREDNIO
ZAAWANSOWANYCH
Wykorzystanie narzędzia HTML5 Outliner do utworzenia prawidłowej
struktury dokumentu . ............................................................................................ 41
PRZEPIS DLA ZAAWANSOWANYCH
Wykorzystanie wszystkich nowych elementów do utworzenia strony z wiadomościami .... 43
6
Spis treści
PRZEPIS DLA ZAAWANSOWANYCH
Wykorzystanie wszystkich nowych elementów do utworzenia strony
z wynikami wyszukiwania . ...................................................................................... 46
Podsumowanie . ................................................................................................. 50
Rozdział 2
Grupowanie, poziom tekstu i zmiany semantyczne .......................................51
PRZEPIS DLA POCZĄTKUJĄCYCH
Oznaczanie rysunków i ich podpisów elementami figure i figcaption ............................. 51
PRZEPIS DLA POCZĄTKUJĄCYCH
Oznaczanie daty i czasu za pomocą elementu time . ................................................... 53
PRZEPIS DLA POCZĄTKUJĄCYCH
Tworzenie widżetu przełącznika za pomocą elementu details . ..................................... 54
PRZEPIS DLA POCZĄTKUJĄCYCH
Użycie elementu address do danych kontaktowych . ................................................... 56
PRZEPIS DLA POCZĄTKUJĄCYCH
Podświetlanie tekstu za pomocą elementu mark . ...................................................... 57
PRZEPIS DLA POCZĄTKUJĄCYCH
Użycie elementu s do pokazania niepoprawnej lub nieistotnej treści . .......................... 58
Zmiany dotyczące istniejących elementów . ................................................................ 58
Element cite . ..................................................................................................... 58
Element ol . ....................................................................................................... 59
Element dl . ....................................................................................................... 61
Element small . .................................................................................................. 63
Elementy b oraz strong . ..................................................................................... 63
Elementy i oraz em . ........................................................................................... 64
Element abbr . ................................................................................................... 64
Element hr . ....................................................................................................... 64
Elementy, których już nie ma . ............................................................................. 64
PRZEPIS DLA POCZĄTKUJĄCYCH
Opakowywanie elementów
łączami
. .......................................................................... 65
PRZEPIS DLA
ŚREDNIO
ZAAWANSOWANYCH
Dodawanie informacji semantycznych za pomocą mikrodanych . .................................. 66
PRZEPIS DLA
ŚREDNIO
ZAAWANSOWANYCH
Stosowanie WAI-ARIA z HTML5 . ................................................................................ 67
PRZEPIS DLA ZAAWANSOWANYCH
Oznaczanie komentarzami strony z artykułem . ........................................................... 69
Podsumowanie . ...................................................................................................... 71
Rozdział 3
Obsługa przeglądarek w HTML5 ..................................................................73
PRZEPIS DLA POCZĄTKUJĄCYCH
Obsługa Internet Explorera . ..................................................................................... 73
Użycie JavaScriptu do uzyskania kompatybilności z HTML5 . .................................. 73
Uzyskiwanie kompatybilności CSS-a . ................................................................... 74
Szablony (boilerplates) . ........................................................................................... 75
PRZEPIS DLA POCZĄTKUJĄCYCH
Testowanie działania nowych możliwości HTML5 . ...................................................... 75
PRZEPIS DLA
ŚREDNIO
ZAAWANSOWANYCH
Wykorzystanie jQuery do zastąpienia kalendarza . ....................................................... 77
Spis treści
7
PRZEPIS DLA
ŚREDNIO
ZAAWANSOWANYCH
Wykorzystanie biblioteki Modernizr do wykrywania możliwości . .................................... 79
Polyfilling (wielowypełnianie) . ................................................................................... 82
Użyteczne strony sprawdzające HTML5 . .................................................................... 84
Podsumowanie . ...................................................................................................... 84
Rozdział 4
Nowe techniki dotyczące układu i stylizacji w CSS3 ....................................85
PRZEPIS DLA
ŚREDNIO
ZAAWANSOWANYCH
Tworzenie dostosowującego się projektu za pomocą CSS3 Media Queries ................... 85
Kiedy używać zapytań o media . ........................................................................... 90
Obsługa iPhone’a i urządzeń z systemem Android . ............................................... 91
PRZEPIS DLA POCZĄTKUJĄCYCH
Korzystanie z własnych czcionek przy użyciu @font-face . ............................................ 92
Formaty plików i działanie czcionek w różnych przeglądarkach . .............................. 93
Usługi związane z krojami pisma . ........................................................................ 94
PRZEPIS DLA
ŚREDNIO
ZAAWANSOWANYCH
Tworzenie przycisków za pomocą gradientów CSS i wielu teł . ...................................... 95
PRZEPIS DLA
ŚREDNIO
ZAAWANSOWANYCH
Upiększanie witryny za pomocą transformacji i przejść . .............................................. 98
PRZEPIS DLA ZAAWANSOWANYCH
Tworzenie animacji za pomocą CSS-a . .................................................................... 103
Podsumowanie . .................................................................................................... 106
Rozdział 5
Formularze internetowe HTML5 . ..............................................................107
Walidacja . ............................................................................................................ 107
Typy wejściowe HTML 4 . ........................................................................................ 107
PRZEPIS DLA POCZĄTKUJĄCYCH
Tworzenie formularza do danych kontaktowych . ....................................................... 109
input type="email" . ......................................................................................... 109
input type="tel" . .............................................................................................. 110
input type="url" . .............................................................................................. 111
PRZEPIS DLA POCZĄTKUJĄCYCH
Tworzenie formularza wyszukiwania przy użyciu input type="search" . ........................ 112
PRZEPIS DLA POCZĄTKUJĄCYCH
Tworzenie kontrolek kalendarza i czasu . ................................................................. 113
input type="datetime" . .................................................................................... 113
input type="datetime-local" . ............................................................................. 113
input type="date" . ........................................................................................... 114
input type="time" . ........................................................................................... 114
input type="month" . ........................................................................................ 115
input type="week" . .......................................................................................... 115
Nakładanie ograniczeń na daty i godziny . ........................................................... 115
PRZEPIS DLA POCZĄTKUJĄCYCH
Tworzenie pola do wprowadzania liczby . .................................................................. 116
PRZEPIS DLA POCZĄTKUJĄCYCH
Tworzenie suwaka (bez potrzeby użycia JavaScriptu) . ............................................... 117
PRZEPIS DLA POCZĄTKUJĄCYCH
Tworzenie próbnika kolorów . .................................................................................. 117
8
Spis treści
PRZEPIS DLA POCZĄTKUJĄCYCH
Wyświetlanie wyników za pomocą elementu output . ................................................. 118
PRZEPIS DLA POCZĄTKUJĄCYCH
Użycie tekstu zastępczego formularza . .................................................................... 119
PRZEPIS DLA POCZĄTKUJĄCYCH
Autouzupełnianie za pomocą atrybutu list i elementu datalist . .................................. 120
PRZEPIS DLA POCZĄTKUJĄCYCH
Śledzenie
postępu wykonania zadania za pomocą elementu progress ........................ 121
PRZEPIS DLA POCZĄTKUJĄCYCH
Wskazywanie wyniku pomiaru za pomocą elementu meter . ....................................... 122
PRZEPIS DLA POCZĄTKUJĄCYCH
Przechodzenie do elementu form po załadowaniu strony . ......................................... 123
PRZEPIS DLA POCZĄTKUJĄCYCH
Zezwalanie na wiele wartości . ................................................................................ 124
PRZEPIS DLA POCZĄTKUJĄCYCH
Prosta walidacja przy użyciu atrybutu required . ........................................................ 125
PRZEPIS DLA
ŚREDNIO
ZAAWANSOWANYCH
Pisanie własnych reguł walidacji . ............................................................................ 126
PRZEPIS DLA POCZĄTKUJĄCYCH
Nakładanie ograniczeń na wprowadzane dane . ........................................................ 126
step . .............................................................................................................. 126
min i max . ....................................................................................................... 127
formnovalidate i novalidate . ............................................................................. 127
PRZEPIS DLA
ŚREDNIO
ZAAWANSOWANYCH
Dostosowywanie formularza i nadawanie mu stylu . .................................................. 128
Komunikaty błędów . .............................................................................................. 129
PRZEPIS DLA ZAAWANSOWANYCH
Wszystko razem — tworzenie formularza rejestracyjnego . ........................................ 130
Podsumowanie . .................................................................................................... 132
Rozdział 6
Rysowanie na płótnie . .............................................................................133
Element canvas — informacje ogólne . .................................................................... 133
Początki . ......................................................................................................... 134
Współrzędne x i y . ........................................................................................... 135
PRZEPIS DLA POCZĄTKUJĄCYCH
Nałożenie siatki na płótno . .................................................................................... 135
Narzędzia płótna . .................................................................................................. 139
PRZEPIS DLA POCZĄTKUJĄCYCH
Tworzenie prostych kształtów i linii . ........................................................................ 139
Rysowanie i formatowanie prostokąta lub kwadratu . ........................................... 139
Stosowanie gradientów w kształtach . ................................................................ 141
Rysowanie linii i
ścieżek
. .................................................................................. 142
PRZEPIS DLA
ŚREDNIO
ZAAWANSOWANYCH
Rysowanie wielokątów za pomocą
ścieżki
. .............................................................. 144
PRZEPIS DLA
ŚREDNIO
ZAAWANSOWANYCH
Rysowanie
łuków
i okręgów . .................................................................................. 146
Rysowanie krzywych . ........................................................................................ 147
Zgłoś jeśli naruszono regulamin