htm5n2.pdf

(13339 KB) Pobierz
Tytu orygina u: HTML5 The Missing Manual, 2nd Edition
T umaczenie: Maksymilian Gutowski
na podstawie: „HTML5. Nieoficjalny podr cznik” w t umaczeniu Macieja Reszotnika
ISBN: 978-83-246-9254-5
© 2014 Helion S.A.
Authorized Polish translation of the English edition of
HTML5: The Missing Manual, 2
nd
Edition
ISBN 9781449363260
© 2014 Matthew MacDonald.
This translation is published and sold by permission of O’Reilly Media, Inc., which owns
or controls all rights to publish and sell the same.
All rights reserved. No part of this book may be 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 the Publisher.
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
Drogi Czytelniku!
Je eli chcesz oceni t ksi k , zajrzyj pod adres
http://helion.pl/user/opinie/htm5n2_ebook
Mo esz tam wpisa swoje uwagi, spostrze enia, recenzj .
Pliki z przyk adami omawianymi w ksi ce mo na znale
ftp://ftp.helion.pl/przyklady/htm5n2.zip
pod adresem:
ek)
Poleć książkę na Facebook.com
Kup w wersji papierowej
Oceń książkę
Księgarnia internetowa
Lubię to! » Nasza społeczność
Spis tre ci
Nieoficjalna czo ówka ........................................................................................11
Wst p .................................................................................................................. 15
Cze I. Nowe oblicze j zyka HTML . .............................................23
Rozdzia 1. Wprowadzenie do HTML5 . ............................................................25
Historia HTML5 ....................................................................................... 25
XHTML 1.0: rygor ponad wszystko ........................................................ 26
XHTML 2: niespodziewana pora ka ....................................................... 27
HTML5: reaktywacja ............................................................................. 27
HTML: ywy j zyk . ................................................................................ 29
Trzy pryncypia HTML5 ............................................................................ 29
1. Nie psuj sieci ...................................................................................... 30
2. Brukuj cie ki ..................................................................................... 30
3. B d praktyczny ................................................................................. 31
Rzut oka na sk adni HTML5 ................................................................... 32
Element doctype a HTML5 .................................................................... 34
Kodowanie znaków ................................................................................ 35
J zyk . ..................................................................................................... 35
Dodawanie arkusza stylów ..................................................................... 36
Do czanie JavaScriptu ........................................................................... 36
Ostateczny produkt ................................................................................ 37
Sk adnia HTML5 z bliska .......................................................................... 38
Rozlu nione regu y . ............................................................................... 38
Walidacja HTML5 ................................................................................. 39
Powrót XHTML-u .................................................................................. 42
Rodzina znaczników HTML5 .................................................................... 43
Dodane elementy ................................................................................... 43
Komponenty usuni te ze specyfikacji ..................................................... 43
Elementy zaadaptowane ......................................................................... 45
Zmodyfikowane znaczniki . .....................................................................46
Elementy standaryzowane . .....................................................................47
Korzystanie z HTML5 ju dzi . ..................................................................48
Ocenianie wsparcia ze strony przegl darek . .............................................50
Statystyki poziomu przyj cia przegl darek . .............................................51
Wykrywanie obs ugi w asno ci z aplikacj Modernizr . .............................53
Uzupe nianie braków przy u yciu wype nienia . .......................................55
Rozdzia 2. Zastosowanie elementów semantycznych na stronie .................59
Wst p do elementów semantycznych . ........................................................60
Modernizacja tradycyjnej strony HTML . ...................................................61
Struktura strony w stylu klasycznym . .....................................................62
Struktura strony w HTML5 . ...................................................................65
Do czanie rysunków przy u yciu znacznika <figure> . ..........................67
Dodawanie ramki redaktorskiej — znacznik <aside> .............................70
Elementy semantyczne a kompatybilno z przegl darkami . ......................71
Stylizacja elementów semantycznych . ....................................................72
Zastosowanie HTML5 Shiv . ...................................................................72
Modernizr: rozwi zanie uniwersalne . .....................................................73
Projektowanie strony z nowymi elementami semantycznymi ....................73
Wi cej o nag ówkach . .............................................................................74
Odno niki i element <nav> . ..................................................................76
Wi cej o sekcjach . ..................................................................................79
Wi cej o stopce . ......................................................................................81
Wskazywanie tre ci g ównej przy u yciu elementu <main> ...................83
System tworzenia konspektu strony w HTML5 . .........................................85
Jak zobaczy konspekt? . ..........................................................................85
Konspekt podstawowy . ...........................................................................86
Komponenty sekcji . ................................................................................87
Problemy z tworzeniem konspektów . ......................................................89
Rozdzia 3. Jeszcze bardziej wyrazisty kod . ....................................................93
Elementy semantyczne raz jeszcze . ............................................................94
Data, czas i znacznik <time> . ...............................................................95
Obliczenia w JavaScripcie i element <output> .......................................96
Element <mark> i zaznaczanie tekstu . ..................................................98
Inne standardy kodu semantycznego . ........................................................99
ARIA (ang. Accessible Rich Internet Applications) . ...............................100
RDFa (ang. Resource Description Framework) ......................................100
Mikroformaty . ......................................................................................101
Mikrodane . ..........................................................................................102
Praktyczny przyk ad: modernizacja strony O mnie . ..................................105
Ekstrakcja danych semantycznych w przegl darce . ...............................109
Wykorzystanie metadanych przez wyszukiwarki . .....................................110
Fragmenty sformatowane przez Google . ................................................110
Lepsze wyniki wyszukiwania . ...............................................................111
Wyszukiwarka przepisów . ....................................................................114
4
SPIS TRE CI
Rozdzia 4. Udoskonalone formularze . ...........................................................119
Formularze ............................................................................................. 120
Modernizowanie tradycyjnego formularza HTML . .................................. 121
Znak wodny — dodawanie wskazówek ................................................. 124
Dobry punkt zaczepienia: w a ciwo focus .......................................... 126
Walidacja: wykrywanie b dów ................................................................ 127
Proces walidacji w HTML5 krok po kroku ............................................ 127
Wy czanie mechanizmu walidacji ....................................................... 129
Formatowanie kontrolek walidacyjnych ............................................... 130
Walidacja wyra e regularnych ............................................................ 131
W asne regu y walidacji ........................................................................ 132
Obs uga mechanizmu walidacji ............................................................... 133
Testowanie obs ugi za pomoc skryptu Modernizr ................................ 134
Uzupe nianie kodu przy u yciu biblioteki HTML5Forms . .................... 135
Nowe typy znacznika input ..................................................................... 137
Adresy e-mail . ...................................................................................... 139
Adresy URL . ........................................................................................ 140
Pola wyszukiwania ............................................................................... 140
Telefon . ............................................................................................... 140
Liczby . ................................................................................................. 140
Suwak . ................................................................................................. 141
Czas: daty i godziny .............................................................................. 142
Kolor . ................................................................................................... 144
Nowe elementy ....................................................................................... 144
Sugerowane odpowiedzi i element <datalist> ...................................... 144
Pasek stanu i miernik ........................................................................... 146
Paski narz dzi i menu — znaczniki <command> i <menu> ............... 149
Edytor HTML na stronie ......................................................................... 149
Edytowanie zawarto ci za pomoc contentEditable ............................... 150
Edytowanie strony za pomoc atrybutu designMode ............................. 152
Cze II. Filmy, obrazki i inne cude ka........................................ 155
Rozdzia 5. Multimedia . .................................................................................. 157
Wideo dzi . ............................................................................................. 157
Wprowadzenie do audio i wideo w HTML5 .............................................. 159
Wydobywanie d wi ku z elementu <audio> ........................................ 159
Wczytywanie multimediów po za adowaniu strony ............................... 160
Automatyczne odtwarzanie .................................................................. 161
Zap tlone odtwarzanie ......................................................................... 161
Znacznik <video> z szerszej perspektywy ............................................ 161
Wprowadzenie do formatów multimediów w HTML5 ............................. 163
Wi cej o formatach .............................................................................. 164
Obs uga multimediów w przegl darkach .............................................. 165
Wiele formatów, czyli jak udobrucha ka d przegl dark ........................ 168
Obs uga ró nych formatów ................................................................... 169
Alternatywa — wtyczka Flasha ............................................................. 170
SPIS TRE CI
5
Zgłoś jeśli naruszono regulamin