HTML5 Podrecznik programisty.pdf

(1022 KB) Pobierz
945635013.001.png
Tytuł oryginału: HTML5 Developer's Cookbook
Tłumaczenie: Grzegorz Balcerek
ISBN: 978-83-246-4886-3
Authorized translation from the English language edition, entitled: HTML5 DEVELOPER’S
COOKBOOK; ISBN 0321769384; by Chuck Hudson and Tom Leadbetter; published by Pearson Education,
Inc, publishing as Addison Wesley.
Copyright © 2012 Pearson Education, Inc.
All rights reserved. No part of this book may by reproduced or transmitted in any form or by any means,
electronic or mechanical, including photocopying, recording or by any information storage retrieval system,
without permission from Pearson Education, Inc.
Polish language edition published by HELION S.A. Copyright © 2013.
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.
Wydawnictwo HELION
ul. Kościuszki 1c, 44-100 GLIWICE
tel. 32 231 22 19, 32 230 98 63
e-mail: helion@helion.pl
WWW: 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/html5p
Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję.
Pliki z przykładami omawianymi w książce można znaleźć pod adresem:
ftp://ftp.helion.pl/przyklady/html5p.zip
Printed in Poland.
945635013.002.png
Spis treści
Wstp ........................................................................................................13
Podzikowania ...........................................................................................21
O autorach .................................................................................................23
Rozdzia 1
Nowe elementy strukturalne w HTML5 ........................................................25
PRZEPIS DLA POCZTKUJCYCH
Budowa startowego dokumentu HTML5 ..................................................................... 26
doctype ............................................................................................................. 26
Kodowanie znaków ............................................................................................. 26
JavaScript i cza CSS ........................................................................................ 27
Styl uywanej skadni .......................................................................................... 27
Skd pochodz wszystkie nowe elementy? ................................................................ 28
PRZEPIS DLA POCZTKUJCYCH
Wykorzystanie elementu header do utworzenia nagówka witryny ................................. 29
PRZEPIS DLA POCZTKUJCYCH
Wykorzystanie elementu hgroup do grupowania nagówków ......................................... 31
PRZEPIS DLA POCZTKUJCYCH
Tworzenie nawigacji przy uyciu elementu nav ............................................................ 31
PRZEPIS DLA POCZTKUJCYCH
Uycie elementu article ............................................................................................ 34
PRZEPIS DLA REDNIO ZAAWANSOWANYCH
Grupowanie treci przy uyciu elementu section ......................................................... 35
Którego elementu powiniene uywa: article czy section? ..................................... 36
PRZEPIS DLA POCZTKUJCYCH
Tworzenie paska bocznego za pomoc elementu aside ............................................... 37
PRZEPIS DLA POCZTKUJCYCH
Uycie elementu footer ............................................................................................. 39
PRZEPIS DLA REDNIO ZAAWANSOWANYCH
Wykorzystanie narzdzia HTML5 Outliner do utworzenia prawidowej
struktury dokumentu .............................................................................................. 41
PRZEPIS DLA ZAAWANSOWANYCH
Wykorzystanie wszystkich nowych elementów do utworzenia strony z wiadomociami .... 43
6
Spis treci
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 POCZTKUJCYCH
Oznaczanie rysunków i ich podpisów elementami figure i figcaption ............................. 51
PRZEPIS DLA POCZTKUJCYCH
Oznaczanie daty i czasu za pomoc elementu time ..................................................... 53
PRZEPIS DLA POCZTKUJCYCH
Tworzenie widetu przecznika za pomoc elementu details ....................................... 54
PRZEPIS DLA POCZTKUJCYCH
Uycie elementu address do danych kontaktowych ..................................................... 56
PRZEPIS DLA POCZTKUJCYCH
Podwietlanie tekstu za pomoc elementu mark ........................................................ 57
PRZEPIS DLA POCZTKUJCYCH
Uycie elementu s do pokazania niepoprawnej lub nieistotnej treci ............................ 58
Zmiany dotyczce istniejcych 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 POCZTKUJCYCH
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 artykuem ............................................................. 69
Podsumowanie ........................................................................................................ 71
Rozdzia 3
Obsuga przegldarek w HTML5 ..................................................................73
PRZEPIS DLA POCZTKUJCYCH
Obsuga Internet Explorera ....................................................................................... 73
Uycie JavaScriptu do uzyskania kompatybilnoci z HTML5 .................................... 73
Uzyskiwanie kompatybilnoci CSS-a ..................................................................... 74
Szablony (boilerplates) ............................................................................................. 75
PRZEPIS DLA POCZTKUJCYCH
Testowanie dziaania nowych moliwoci HTML5 ........................................................ 75
PRZEPIS DLA REDNIO ZAAWANSOWANYCH
Wykorzystanie jQuery do zastpienia kalendarza ......................................................... 77
Spis treci
7
PRZEPIS DLA REDNIO ZAAWANSOWANYCH
Wykorzystanie biblioteki Modernizr do wykrywania moliwoci ...................................... 79
Polyfilling (wielowypenianie) ..................................................................................... 82
Uyteczne strony sprawdzajce HTML5 ...................................................................... 84
Podsumowanie ........................................................................................................ 84
Rozdzia 4
Nowe techniki dotyczce ukadu i stylizacji w CSS3 ....................................85
PRZEPIS DLA REDNIO ZAAWANSOWANYCH
Tworzenie dostosowujcego si projektu za pomoc CSS3 Media Queries ................... 85
Kiedy uywa zapyta o media ............................................................................. 90
Obsuga iPhone’a i urzdze z systemem Android ................................................. 91
PRZEPIS DLA POCZTKUJCYCH
Korzystanie z wasnych czcionek przy uyciu @font-face .............................................. 92
Formaty plików i dziaanie czcionek w rónych przegldarkach ................................ 93
Usugi zwizane z krojami pisma .......................................................................... 94
PRZEPIS DLA REDNIO ZAAWANSOWANYCH
Tworzenie przycisków za pomoc gradientów CSS i wielu te ........................................ 95
PRZEPIS DLA REDNIO ZAAWANSOWANYCH
Upikszanie 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 wejciowe HTML 4 .......................................................................................... 107
PRZEPIS DLA POCZTKUJCYCH
Tworzenie formularza do danych kontaktowych ......................................................... 109
input type="email" ........................................................................................... 109
input type="tel" ................................................................................................ 110
input type="url" ................................................................................................ 111
PRZEPIS DLA POCZTKUJCYCH
Tworzenie formularza wyszukiwania przy uyciu input type="search" .......................... 112
PRZEPIS DLA POCZTKUJCYCH
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
Nakadanie ogranicze na daty i godziny ............................................................. 115
PRZEPIS DLA POCZTKUJCYCH
Tworzenie pola do wprowadzania liczby .................................................................... 116
PRZEPIS DLA POCZTKUJCYCH
Tworzenie suwaka (bez potrzeby uycia JavaScriptu) ................................................. 117
PRZEPIS DLA POCZTKUJCYCH
Tworzenie próbnika kolorów .................................................................................... 117
Zgłoś jeśli naruszono regulamin