html5_nedostayushee_rukovodstvo
DESCRIPTION
html5TRANSCRIPT
-
-
-
-
2012
-
681.3.068 32.973.26-018.1 15
- . 15 HTML5. : . . .:
-, 2012. 480 .: .
ISBN 978-5-9775-0805-6
, HTML HTML5. . , -, -, , , - CSS3. - -, , -. , -, , , - HTML5.
-
681.3.068 32.973.26-018.1
:
.
.
Authorized translation of the English edition of HTML5: The Missing Manual by Matthew MacDonald, ISBN: 978-1-449-30239-9, Copyright 2011 O'Reilly Media, Inc. This translation is published and sold by permission of O'Reilly Media, Inc., the owner of all rights to publish and sell the same.
: ISBN: 978-1-449-30239-9, Copyright 2011 O'Reilly Media, Inc. O'Reilly Media, Inc., .
30.04.12. 70 100
1/16.
. . . . 38,7.
2000 . "-", 190005, -, ., 29.
"" 199034, -, 9 , 12/28
ISBN 978-1-449-30239-9 (.) ISBN 978-5-9775-0805-6 (.)
2011 O'Reilly Media, Inc. "-", 2012
-
........................................................................................................................ 13
............................................................................................................... 13
.......................................................................................................................... 15 ? .............................................................................. 16
HTML5 ....................................................................................................... 17 HTML5 ................................................................................................ 18
HTML5 ?.......................................................................................................... 18 ?............................................................................................................................ 19 .................................................................................................................... 21
CD .................................................................................................................. 21 .............................................................................. 21
I. ................................................. 23
1. HTML5 ................................................................................. 25 HTML5 ................................................................................................................. 25
XHTML 1.0: ............................................................................... 26 XHTML 2: ......................................................................................... 27 HTML5: ............................................................................................. 27 HTML: ............................................................................................................... 29
HTML5 ................................................................................................. 30 1. ............................................................................................. 30 2. ................................................................................. 32 3. ......................................................................................... 32
HTML5 .................................................................................... 33 HTML5 ...................................................................................... 35 ............................................................................................................. 37 ........................................................................................................................................ 37 ................................................................................................. 38 JavaScript- .................................................................................................. 38 .............................................................................................................. 39
-
6
HTML5......................................................................... 40 ........................................................................................................... 40 HTML5 ......................................................................................................... 41 XHTML ........................................................................................................... 44
HTML5 ..................................................................................................... 46 ........................................................................................................ 46 ............................................................................................................ 47 .................................................................................................. 47
............................................................... 48 ......................................................................................... 49 ......................................................................................... 50
HTML5 .......................................................................................... 51 ? ......................................................................... 52 ................................................................................... 55 Modernizr ........................................................... 57 ..................................................... 60
2. .............................................. 62 ? ........................................................................................... 63 HTML- ................................................................. 65
................................................................. 66 HTML5 ............................................................. 69 , ................................................................ 72 .............................................................. 73 ............................................. 76
........................................................ 77 ................................................ 80
........................................................................................................... 80 ........................................ 83 ............................................................................................................ 88 ...................................................................................................................................... 91
HTML5 ...................................................................... 92 -? ............................................................................... 93 ....................................................................................................................... 94 ............................................................................................ 96 .............................................................................................. 98
3. ................................................................................. 102 ..................................................................................... 103
.............................................. 104 JavaScript- ...................................................................... 106 ................................................ 107
, ............................................................................. 109 Accessible Rich Internet Applications .................................................................. 110 Resource Description Framework ........................................................................ 111 .................................................................................................................... 111
hCard ............ 112 hCalendar ................................. 117
...................................................................................................................... 118
-
7
.......................................................................................... 121 ....................................................................................... 122 ........................................................................ 126
II. - ............................. 131
4. - .......................................................................... 133 ? ........................................................................................................................ 134 HTML- ........................................................................... 136
........................................................................................................ 140 : ................................................................................................. 142
: ! ........................................................................................................ 142 HTML5? ........................................................................................ 143 ........................................................................................................ 145 ................................................................................... 146 ................................................................. 147 .......................................................................................... 149 ...................................................................................... 150
................................................................................................... 154 ................................................................................................ 156 URL- .......................................................................................................................... 157 ......................................................................................................................... 157 ............................................................................................................ 158 .................................................................................................................................... 158 .............................................................................................................................. 159 ........................................................................................................................ 160 ...................................................................................................................................... 161
.......................................................................................................................... 162 ................................................................................................ 162 .................................................. 165 ....................... 168
- HTML- ............................................................................................ 168 contentEditable................................... 169 designMode ......................................... 171
5. ............................................................................................... 174 .......................... 175 HTML5 ........................................................................................ 176
.................................................. 177 ................................................... 179
.................................................................................... 181 ................................................................................................... 182 .............................................................. 184 : ................................................. 186 ............................................................................................................... 187 Flash .................................................................................................... 188
JavaScript ........................................................................... 193 ........................................................................................ 193 .............................................................................. 197
-
8
JavaScript.............................................................................................. 201 ..................................................................................................... 203
6. .................................................................... 205 ..................................................................................................... 206
..................................................................................................................... 208 ..................................................................................................................... 211 ...................................................................................................................... 214 ................................................................................................................... 217 ....................................................................................................................... 220
................................................................................. 223 .................................................................................................... 223 ............................................................................................................ 225 ....................................................................................... 227
......................................................................................... 231 ......................................................................................................... 231 ........................................ 233
7. ................................................ 235 ? ......................................................................................... 235
............................................................................................ 236 , ................................................... 238 ........................................................................................................ 240
.......................................................................................................... 241 .................................................................................................................... 242 .................................................................................... 244 ................................................................................................ 245 : .................................................................................. 249
? ..................................................................................... 254 .................................................................... 255 ...................................... 259
.................................................................................................................... 261 ............................................................................................................... 262 ........................................................................................ 263
: "" .................................................................................. 268 ................................................................................................. 270 ................................................................................................................. 272 ........................................ 274
8. CSS3 ....................................... 278 CSS3 ............................................................................................ 279
1: , ........................................................................... 279 2: CSS3 ................. 280 3: Modernizr ............................. 281 , ............................................................. 284
........................................................................................................ 286 - ....................................................................................................... 287 ................................................................................................................. 289 - Google ............................................................................................................ 292
-
9
.......................................................................................... 295 .......................................................................... 296
............................................................................................. 298 ............................................................................. 299 ............................................................................ 303 .......................................................................................... 305 ................................................................................ 306
..................................................................................................... 308 ....................................................................................................................... 308 ................................................................................................................ 310 ....................................................................................................................................... 311 ...................................................................................................................................... 313 ............................................................................................................................ 314
..................................................................................................... 316 ................................................................................................. 317 .................................................................................... 319 ................................................................................................................... 320
III. - ..... 325
9. ........................................................................................ 327 - .............................................................................................................. 328
............................................................................................................. 329 : ....................................... 331 - ............................................................................ 334
- .................................................................... 334 ............................................................................................................ 334 .................................................................................. 335 ...................................................................................................... 336 .......................................................................................................... 337 ......................................................................... 339
............................................................................................................................. 341 ................................................................................................................. 342 File API .................................................................... 342 .................................................................................................... 343 .................................................................................................... 345 ............................................................. 346 ................................................................................................ 346
10. ........................................................................ 351 ........................................................................... 352
........................................................................................................... 353 .................................................................................................. 356 - ............................................................................... 356 ............................................................................................ 359 ............................................................. 362
......................................................................................... 362 ........................................................................................... 363 ........................................................................................ 364
-
10
...................................................................................................... 366 JavaScript ............................................... 368
11. - ............................................................. 371 - .......................................................................................... 372
XMLHttpRequest ..................................................................................................... 373 - ........................................................................................... 374
..................................................................................................... 374 - .......................................................................................... 376
........................................................................................ 378 .............................................................................................. 382
............................................................................................................. 383 .................................................. 384 - .............................................................................. 387 ........................................................................... 388
- ................................................................................................................................... 390 - ..................................................................................... 391 - .............................................................................................. 393 - .............................................................................................. 394
12. JavaScript ............................. 396 .................................................................................................................................. 397
.............................................................................................. 398 .................................................................................. 401 .............................................................................................................. 403 .................................................................................... 405 ............................................................................................................ 406 .......................................................................... 410
.................................................................................................................. 411 .............................................................................................................. 413 ................................................................... 415 - ................................................................................... 419 ................................................................................. 419 .............................................................................. 420
............................................................................................ 423 URL .................................................................................................................... 424 : hashbang URL ............................................................................ 425 HTML5-: .................................................................................... 426 .......................................................................... 429
IV. ..................................................................................... 433
1. CSS ..................................................... 435 - ............................................................................................ 435 .......................................................................................................... 436
CSS ....................................................................................................................... 437 ........................................................... 438 ........................................................................................ 439
-
11
.................................................................................................... 439 ............................................ 439 ................................................................................................ 440 ...................................................................................................... 441 ................................................................................................................. 442 .................................................................................................. 443 .......................................................................................................... 444
..................................................................................................... 445
2. JavaScript ......................................... 450 JavaScript - ........................................................................... 451
..................................................................................................... 451 ..................................................................................................... 453 JavaScript .............................................................. 455 ................................................................................................... 456
JavaScript ....................................................................... 458 ......................................................................................................................... 458 null........................................................................................................................ 459 ........................................................................................ 459 .................................................................................................. 460 ................................................................................................. 461 ............................................................................................................ 462 ................................................................................................................................... 464 ............................................................................................................................... 465 , ........................................................ 466
................................................................................................... 467 .......................................................................................... 468 ........................................................................... 470 ..................................................................................... 472
.............................................................................................. 475
-
12
-
- (Matthew MacDonald) , - . - - " -. "1 (Creating a Website: The Missing Manual). , , "Excel 2007. "2 (Excel 2010: The Missing Manual).
, , " . - " (Your Brain: The Missing Manual) " . " (Your Body: The Missing Manual).
-. "Missing Manual", , - HTML5, , . , , , , , .
, , , . , , , (Razia Hamid), (Faria) (Maya Brenna). !
-
1 - . Web-. . .: , 2010. 2 - . Excel 2007. . .: -, , 2008.
-
14
-
, HTML5 HTML -. .
HTML5 . , , HTML. HTML5 - , -. , , , . , , , - , , , Flash. , JavaScript, - , -, .
HTML5 . , "HTML5" - . ( , HTML5, , .) , "HTML5" - "HTML5 " , , " -". HTML5 : HTML5 , HTML5, .
HTML5 -. HTML5; , , .
, , HTML5 -. - , Apple Google; W3C (World Wide Web Consortium, ) XHTML, HTML5; ,
-
16
. , - -, . 1.
. 1. ( , - ) - , ,
, Flash. HTML5, ( ), JavaScript
. HTML5 "", 7
?
HTML5 HTML. , - -. - .
-
17
-. , - , , , HTML , -. -, - .
. - CSS (Cascading Style Sheet, ), - . - , - , , -. , - 1. - 1 , - , - .
JavaScript. , - JavaScript . HTML5, -, JavaScript . - , JavaScript, 2 - . , - . JavaScript .
, , . -.
HTML5
HTML5 , HTML. , - ( Windows) TextEdit ( Mac). ( Adobe Dreamweaver Microsoft Expression Web) , HTML5. HTML5 - , -, - HTML5.
, , , - -, Windows Mac OS X HTML5 .
-
18
HTML5
HTML5 : ? , . , HTML5 . , ( -, , - ). . , HTML5 .
, - HTML5, :
Internet Explorer 9 ;
Firefox 3.5 ;
Google Chrome 8 ;
Safari 4 ;
Opera 10.5 .
HTML5 . , HTML5 Firefox 5 , Firefox 3.5.
HTML5 . - , - , , . - http://caniuse.com, - . ( . " ?" 1.)
, , . . , - HTML5, , . "" , .
HTML5 ?
: . Internet Explorer 6, 10 -, , HTML5. , HTML5 , HTML.
-
19
, HTML5 - . , - HTML5 - ( , Google, YouTube Wikipedia, -), , HTML5 . , - - .
, . , . -- , , , .
, , , . , HTML5 , , , . , - , . -, , .
, HTML5 W3C (working draft). , , , (candidate recommendation), - 2012 . (recommendation) , . . . , . . , , HTML5, .
?
HTML5.
I. .
1 " HTML5" , HTML HTML5. HTML5, , - , .
2 " " - HTML5 ,
-
20
. - , , - .
3 " " , . , -, - , , , Google.
II. -.
4 " -" , HTML5 - , , - , -. HTML5 - .
5 " " - HTML5 . - , , - , , .
6 " " - . , , - ( JavaScript).
7 " " , , - , , - .
8 " CSS3" - CSS, HTML5. - , - .
III. -.
9 " " -, . ( cookies, .) JavaScript- -, .
10 " " , - .
-
21
11 " -" - -. -
XMLHttpRequest, JavaScript - - . - : , , -.
12 " JavaScript" , - . , , - . - . , , - URL .
, , HTML5. 1 CSS, - 2 JavaScript.
, , . , , - .
CD
-, , - . - http://missingmanuals.com/cds/html5mm. , , URL -, -.
, . - . , . 1.1 c:\HTML5\Chapter01\ SuperSimpleHTML5.html, , SuperSimpleHTML5.html.
http://www.prosetech.com/html5/. , . , . . HTML5 -
-
22
, -. ( - , .) -, , , , - .
, - - .
-
I
1. HTML5
2.
3.
I
-
1
HTML5
HTML , , - HTML5.
, HTML , XXI . W3C (World Wide Web Consortium, ), , HTML 1998 ., . W3C HTML XHTML. HTML . "" - , , - .
, HTML . HTML5, . , HTML5, , , -.
HTML5
, HTML -. HTML - . , - - ( , , Firefox Chrome).
. HTML 1988 . W3C
1
-
26 I.
XML XHTML 1.0.
XHTML 1.0:
XHTML , HTML, . , - HTML, XHTML.
, , :
:
, "", , . - XHTML. XHTML ( - -, Dreamweaver), , . - - , . . , - - , .
XHTML . -, -, - XHTML. , HTML. - XHTML - XML, -, , XHTML .
XHTML -. , - , : XHTML, , - . , - XHTML, . , - - HTML- XHTML.
-
1. HTML5 27
. , - XHTML, .
XHTML 2:
, , XHTML 2. , , XHTML 2. XHTML 2 , -
HTML. , (, , . .) , - -. , - - , alt .
XHTML 2. , . - , - ( -), , . XHTML 2 , - -, (
), ( ) ( - -).
, , - . XHTML 2 , .
HTML5:
( 2004 .) - . , ( "" ) HTML, , , - .
, HTML . JavaScript HTML -, , , , -. - -, . - JavaScript, - JavaScript, -, -.
-
28 I.
. , " ", - .
-, Opera Software ( Opera) Mozilla Foundation ( Firefox) XHTML , - . , Opera, Mozilla Apple WHATWG (Web Hypertext Application Technology Working Group, -) .
HTML, , , -. , - Web Applications 1.0 Web Forms 2.0. HTML5.
, 5 HTML5 : HTML ( HTML XHTML 4.01). , , , . . HTML5 , - HTML 4.01, XHTML ( - ), JavaScript. : HTML5 - XHTML, HTML.
2000 . WHATWG. - W3C - XHTML 2 - HTML5. HTML5 , (. . " . HTML5?" ).
HTML5 W3C - : www.w3.org/TR/html5.
HTML5?
, "" HTML5, . , HTML5. , . , HTML5, - . , - , -, . ( .)
-
1. HTML5 29
, HTML5.
HTML5. HTML5 W3C. (. 2 3), - (. 4), (. 5), JavaScript (. 6 7). , .
HTML5. , HTML5, WHATWG. - , JavaScript -. - (. 9), , (. 10), (. 11), , .
, HTML5. -, HTML5, HTML5. CSS3 (. 8) (. 12).
- . W3C - "" HTML5 ( ) "" ( ). , - - W3C (www.w3.org/html/logo) HTML5, CSS3 SVG-2, HTML5.
HTML:
HTML W3C WHATWG, , . W3C , HTML5, . WHATWG , HTML. HTML5, HTML, , HTML -, .
HTML , HTML- . HTML-
( ), - , .
HTML , ( ) HTML . - -, - - . - - .
-
30 I.
, - , - . , -, , -? , - -: , .
, - . , XHTML- , , ( " "), . . , CSS3, CSS2, CSS2 . , HTML - , , -.
, , HTML, , HTML5, , - , , - http://whatwg.org/html. , HTML WHATWG http://blog.whatwg.org.
HTML5
, , , HTML5. , HTML5. , , - , , .
1.
" " , -, - . .
" " , - ( ). , XHTML 2 , . . -. , .
-
1. HTML5 31
-, - , XHTML 2 "".
HTML5 . , HTML5, - HTML5. , , HTML 4.01, HTML5.
, HTML5 , , , . HTML5 - , , -, - -.
HTML5
HTML5 HTML , , . - , , -
, ,
HTML-.
HTML5. , HTML5 - , -. , - , HTML5 , -. ?
HTML5 . , , -. . HTML5 HTML5.
( ) -. , - HTML, , .
, HTML5 , - - . , , , .
, HTML5 - (, ). , . . , , - DOM
1 ( ,
, JavaScript). ,
1 Document Object Model .
-
32 I.
HTML5 - , . , .
2.
, , . , . . . , .
HTML5 , - , . , -, - , . -, - . , , - -. XHTML 2 , .
: - , . - -, , , , 70% .
-. , - . drag and drop ( ) (. . " " 9), - , Microsoft - IE 5. " " , - - . HTML5 - - , "HTML5 , ".
3.
: . , . - , - , , , .
-
1. HTML5 33
, - , . - , - - .
, - ( ) YouTube. HTML5 HTML , - Flash-. , . . Flash- , , . : Flash-, Apple ( iPhone iPad) - . , Flash-, HTML, - .
HTML5 " " , - HTML-, . . - , -, - . Adobe Flash Microsoft Silverlight, JavaScript ( ) JavaScript. HTML - ?
Flash ( - ). , - HTML5 , - (., , www.flasharcade.com). HTML5 : - , , , .
HTML5
HTML5. ( ), -, . .
A Tiny HTML Document
Let's rock the browser, HTML5 style.
-
34 I.
, 1:
HTML
HTML5.
. 1.1.
. 1.1. HTML5
. , - - HTML5, . . - , ( HTML5 ). - .
HTML5 , - . , HTML- , . , , .
HTML5-. - - , , . . ( ) ( ). , , , :
HTML
HTML5.
1 . .
-
1. HTML5 35
, ( ) - . - .
, ( doctype) - , :
HTML
HTML5.
HTML5 HTML - , , . HTML5 - .
, . , HTML5. , . , DOM ( , ) JavaScript, , , .
- HTML5- - HTML5. - .
HTML5
HTML5- -. , HTML5-, - :
, HTML5, - . , , -, - XHTML 1.0:
-
36 I.
- - XHTML - . HTML5 , - .
HTML5 , HTML (5 HTML5). , HTML-. HTML5, . HTML - , .
: HTML5 , ?
: . ( Internet Explorer Firefox) - (quirks mode). - , . , , , , , - , , , . .
, , , (standards mode), - . , , . , - . HTML5 - , - .
HTML5 , , , HTML5. - HTML5 , - HTML5 .
-, , . HTML5-, , , ( , ).
-
1. HTML5 37
, , - ( , ). - . - - UTF-8, , - .
- , , . , -, -, ( ). , - - - . - .
HTML5 . (, , ). :
HTML
-, Dreamweaver Expression Web, . UTF. - , - , - . , HTML-, ( Windows), UTF-8 . TextEdit ( Ma OS) - | , Unicode (UTF-8).
-. - , , , - .
- , lang .
-
38 I.
ru, en. - http://people.w3.org/rishida/utils/subtags.
- :
, ,
. lang
, , , . , -, .
- - .
HTML5:
HTML
HTML-, . -
CSS, type="text/css", , .
JavaScript-
JavaScript -. JavaScript - -, - , , .
JavaScript HTML5 -, HTML-. - JavaScript :
HTML
-
1. HTML5 39
language="JavaScript" , . . -- ( JavaScript - HTML, - ), , JavaScript. JavaScript,
. - , , .
JavaScript Internet Explorer, MOTW (Mark of the Web,
) . :
HTML
Internet Explorer , -. IE , - JavaScript , .
MOTW , -, HTML.
, HTML5 :
HTML
HTML5.
-
40 I.
HTML5, -. , , . . , , .
HTML5, , , , JavaScript , . - , - , .
HTML5
, HTML5 . - , HTML5 , - -. , " -" "-, ". - .
, , , HTML5. HTML5 (. . " HTML5" ).
HTML5 , , . HTML5 .
, -, :
,
..
-
, . . , (), (- ) ( ). :
,
.
.
-
1. HTML5 41
HTML5 . - , , - ( >, = ). - :
. , XHTML :
HTML5 HTML 4.01, - :
, HTML5, , , , . XHTML. -, . . , .
HTML5. , , .
, . (. . "" ), .
. -, , (. . ), , .
. , , - . - .
, , ( ). - , . . HTML5 - (/). - - .
HTML5
HTML5 -. , -
-
42 I.
, , , . , , , - , , - HTML5, .
, , - :
(, );
;
;
, (,
src );
(,
).
-, Dreamweaver Expression Web, , HTML5. - . - W3C:
1. http://validator.w3.org (. 1.2).
, : Validate by URI ( , ), Validate by File Upload ( , ) Validate by Direct Input ( , -).
2. HTML-.
Validate by URI URL Address (, http://www.MySloppySite.com/FlawedPage.html).
Validate by File Upload - . Choose ( ) File ( Chrome - ). HTML- .
Validate by Direct Input , - Enter the Markup to validate. - .
, More Options, , . -
-
1. HTML5 43
, -. , - -. , , .
. 1.2. - http://validator.w3.org HTML
3. Check.
, . , (. 1.3).
HTML- - ( ), , HTML5 - .
. 1.3, HTML5, . .
. , -
-
. , , -, .
-
44 I.
. 1.3.
XHTML
, HTML5 , , XHTML. - , XHTML , .
, , XHTML . - XHTML (, ), - (, - ).
XHTML- -? , , ( ) - HTML. , XHTML5; , , , HTML5, -, XML.
HTML5 XHTML, - XHTML , , . . , :
-
1. HTML5 45
HTML
XHTML5.
XHTML, - XHTML. W3C -, http://validator.nu, (. . XHTML) Preset. Be lax about HTTP Content-Type, .
, XHTML -. , HTML5, XML-. .
, - XHTML, - MIME- application/xhtml+xml application/xml, text/html. ( MIME- . " - . MIME-" 5.) - , , - Internet Explorer , IE 9. XHTML - - .
, , XHTML5, -, HTML5. - XML, ( ), - .
? -, , XHTML . - , , XML-, , , XQuery XPath.
-
46 I.
, XHTML. xhtml xht, . ( Firefox, Chrome IE 9) , - MIME XML. , - (IE 9), XML (Firefox) (Chrome).
HTML5
HTML5. - , HTML -. .
, - , - . , , , . 1.1.
1.1. HTML5
-
, , , ,
, , , ,
, ,
2
-
, , ( , )
3
- -
( ,
), , , ,
, , ,
4
- , -
, , , (- , )
5
6
,
, , , HTML5 http://dev.w3.org/html5/markup
-
1. HTML5 47
HTML5 , .
, HTML5 (. . " HTML5" ) - .
, - HTML5 ( XHTML): - . , -, "" - , . , , , - , , , , . HTML , .
, HTML5 - - . HTML , - - . - -, , - . , , - , , . , - , - YouTube, Google.
- , . ,
, . HTML HTML5.
, HTML5 100 . 30 10 . - ( , ) - http://dev.w3.org/html5/markup.
HTML5 -
. , , , . - , , -. -
-
48 I.
, HTML5,
. "- " , , - . , , , :
,
.
, , .
. , -
, . .
HTML5. , - , , " ".
, , -
, , . HTML5 , - , -. , , .
- , "" . ,
, . . - HTML.
.
HTML ( . bold ) ( . italics ) - XHTML , . , - , -
. , - , (strong) , (stress emphasis) -
-
1. HTML5 49
. , - XHTML .
HTML5 .
, - . - - HTML5. , , .
, - , .
, , , - . , , , , .
, ; , , .
, , . , , , - , .
, :
!
. ,
.
:
! . , .
, - HTML5 - .
HTML5 . - , HTML, . ,
, , , , . -
-
50 I.
HTML, -, :
- :
John Solo,
Lisa Cheng, and
Ryan Pavane.
. - , - , , . ., :
.
, -. , . . - . - - . , . . -, -
, .
,
. HTML . HTML5 , -, , , . . , , . - , HTML5 , , , .
. , -
( . ordered list )
reversed (), (
, , start). .
- .
HTML5 , - HTML XHTML, . -
, - .
-
1. HTML5 51
>, , . . , , :
Many linguists remain unconvinced that
supercalifragilisticexpialidocious is indeed a word.
, ( ) , - . , , . , , . 1.4.
. 1.4.
-
52 I.
HTML (, drag and drop). - , , - , , 2.
. , , - - , , Flash. -, , . , , - (, ), - CSS3 (, ).
, JavaScript. - HTML5 , - , , . , HTML5 - JavaScript (, , JavaScript). JavaScript , , , - JavaScript, - HTML5 .
, - HTML5 , . - . - ( ), , , -, - . JavaScript, . .
?
, HTML5, . - , , , . ( , iPad). - ,
-
1. HTML5 53
, .
, - http://caniuse.com, . HTML5 . , , -, . - :
1. Tables, Compatibility tables - ( ), (. 1.5)1.
,
. 1.5. HTML5,
, Search, . , Caterogy . ( - .) , , HTML5, -
1 - . . 1.5 - . - . , Show options -. ( . 1.5 Hide options.) , . .
-
54 I.
HTML5. JavaScript, HTML5, - , JS API. CSS3 CSS.
2. , , .
, . , , - , . -, . . .
3. , (. 1.6).
IE
IE
( ),
. 1.6. HTML5 20 .
HTML5-
20 . 20 - Show next 20 .
, .
-
1. HTML5 55
. - , - - ; -, . , , , .
- . , , , -, . - GlobalStats (http://gs.statcounter.com). Statistic Browser. Browser Version - , . , Country/Region.
Internet Explorer ?
HTML5 , HTML5 ( ). Internet Explorer. IE 9 Microsoft - , HTML5 IE , .
Microsoft HTML5, , -. Microsoft IE ( "" HTML5), http://html5labs.interoperabilitybridges.com/. , HTML5, . - -, . ( , , .)
, HTML5 IT . , IE 9 IE, HTML5. IE 9 Windows 7 Vista. Windows XP (, , , , Window 7), IE 9 , , HTML5. Microsoft - , - HTML5, .
-
56 I.
, . - . Bar. - . Line. , (. 1.7). , - Time Period.
. 1.7. , HTML5
GlobalStats -, -. - , . , , - .
, -. , - Firefox, 60% , Opera 49% . - TechCrunch ( ) 16% - , Internet Explorer. , - , -
-
1. HTML5 57
-. ( - , - Google Analytics. . www. google.com/analytics.)
Modernizr
-, - , HTML5. , - . , , JavaScript. : , , .
, . . HTML5 , . - , , , , - .
- . , , . . - . , - . , - Modernizr (www.modernizr.com), - HTML5 -. CSS3 (. . "- 3: Modernizr" 8).
- Modernizr :
1. JavaScript- Modernizr. Download Mo-dernizr Development.
, modernizr-2.0.6.js. - . , , modernizr.js. Modernizr , -, .
-
58 I.
Modernizr . - -. , , - Modernizr, -. Production, Download Modernizr. , , - ( ), Modernizr, Generate .
2. , -, - . - JavaScript (. - ).
3. - Modernizr. :
HTML5 Feature Detection
...
, Modernizr. - , JavaScript, , , Modernizr . , .
Modernizr , JavaScript , . www.modernizr.com/docs.
4. , , - . , HTML5- drag and drop, :
HTMI_5 Feature Detection
The verdict is...
-
1. HTML5 59
// ( result),
// .
var result = document.getElementById("result");
if (Modernizr.draganddrop) {
result.innerHTML = "Rejoice! Your browser supports" +
"drag-and-drop.".
}
else {
result.innerHTML = "Your feeble browser doesn't " +
"support drag-and-drop.";
}
. 1.8.
. 1.8. drag and drop
-, . ( - ) - , - , - - , HTML5. , - - , , .
, , JavaScript ID . -, , 2.
-
60 I.
Modernizr - , . . -1 (polyfills, ). , - HTML5. polyfill polyfiller, , . . . HTML5 , - . , HTML5, - .
. , -. , HTML5 Internet Explorer Silverlight. , - - . , , - . - , HTML5, .
IE Google Chrome Frame
Google Chrome Frame, - Internet Explorer 6, 7, 8 9. - Chrome IE HTML5. Chrome Frame HTML5-, , , .
Chrome Frame , , - , . , - Chrome? , Google Chrome Frame, http://code.google.com/ chrome/chromeframe.
. - - HTML5 - GitHub (https://github.com/ Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills). , .
1 . , . .
-
1. HTML5 61
, , HTML5- - . , - -.
-, , HTML5 -. , HTML5, , -.
-
2
- - . , , HTML. , - -, -, .
( . division , ) -. - HTML , - , . CSS-, - .
, . . , , - . , , . - - -, , , -.
, - ? -, , . -, , . HTML5 -, .
CSS , , - , -. , 1 CSS, - HTML5.
2
-
2. 63
?
HTML5 -, .
, -. :
2012-ll-25.
:
2012-11-25.
, . , - - , - . - , .
, -. HTML5 : . , - , . . ( ) - .
HTML5, . , HTML5 .
: . , , , - (. . " " 5). - , -?
.
. HTML- . , - . HTML5 - - . , - , , - .
. - - , . . ,
-
64 I.
-1 . , , HTML5. , , , - - - . ( , , - (-) , - .)
- - WAI
2 (www.w3.org/WAI).
, ( , ), YouTube (http://tinyurl.com/6bu4pe).
. Google - , - , - . Google - -, , - , , - - - . HTML5, -.
. - - - . , - , - , Microsoft Word 2010. ( , Chrome , - , . . 2.10.) - , - , - .
: - , -, - -. HTML, .
1 - . screen reader. . 2 Web Accessibility Initiative .
-
2. 65
HTML-
, - HTML- HTML5. . 2.1 , - .
. 2.1. HTML- , .
-
66 I.
, -, , (, , -) .
. 2.1, http://www.prosetech.com/html5/. HTML- , ApocalypsePage_ Origmal.html, HTML5-, - ApocalypsePage_Revised.html.
, . 2.1, . , HTML, . , - , -
. - .
. - , :
How the World Could End
Scenarios that spell the end of life as we know
by Ray N. Carnation
Right now, you're probably...
...
Mayan Doomsday
Skeptics suggest ...
...
These apocalyptic predictions ...
About Us
...
Copyright 2011
-
2. 67
?
, , 12 . , - . . - , (...).
. . 2.2 , , , "Mayan Doomsday", . , , - , www.prosetech.com/html5.
, HTML- ( ) - -
. 2.2. : ,
-
68 I.
.
. , - (. 2.2).
. 800 , . - , , .
. , , - - :
/* ,
( ). */
.Header {
background-color: #7695FE;
border: thin #336699 solid;
padding: 10px;
margin: 10px;
text-align: center;
}
/*
( ). */
.Header h1 {
margin: 0px;
color: white;
font-size: xx-large;
}
/* . */
.Header .Teaser {
margin: 0px;
font-weight: bold;
}
/* . */
.Header .Byline {
font-style: italic;
font-size: small;
margin: 0px;
}
(. . " " 1). , -
.Header h1 .
-
2. 69
CSS 1. , , . . " " 1.
HTML5
-. - , -. , - . , ( , , -, . .) , , .
, HTML5 - . , -: - , ; " ", - . , .
, . 2.1, . , HTML5- .
How the World Could End
Scenarios that spell the end of life as we know
by Ray N. Carnation
Right now, you're probably ...
...
Mayan Doomsday
Skeptics suggest ...
...
These apocalyptic predictions ...
About Us
...
Copyright 2011
-
70 I.
- . - - HTML5.
, . , . , - :
How the World Could End
Scenarios that spell the end of life as we know
by Ray N. Carnation
, . , :
/* ( .) */
header {
...
}
/*
( ). */
header h1 {
...
}
/* . */
header .Teaser {
...
}
/* . */
header .Byline {
...
}
. , , HTML5 -.
, . -, . . HTML5- . HTML5 , , , , .
-
2. 71
- Internet Explorer , IE 9. , , . "- " . - , .
, , . - , , , . , .
, :
How the World Could End
...
Right now, you're probably ...
...
Mayan Doomsday
Skeptics suggest ...
...
These apocalyptic predictions ...
...
. 2.3.
-
. 2.3. HTML5.
: " , ", :
" , "
-
72 I.
, , - . , -
-, , - . .
-. - , , , -
. , , , - .
,
. HTML5 : . .
, , - , -
, , . . :
How the World Could End
. ( - , , . . , , . .) :
How the World Could End
Scenarios that spell the end of life as we know
, . ., - (, , , ,
), :
How the World Could End
by Ray N. Carnation
, , -
, :
How the World Could End
-
2. 73
Scenarios that spell the end of life as we know
by Ray N. Carnation
, , -
: .
. , - , - , . , , - ? , (. . " HTML5 " ).
, . - (
). , . , . . - , .
- . - , . HTML5 , , , , .
, , . . - , . , .
HTML, - . ( - , , .)
Right now, you're probably ...
Will you be the last person standing if one of these
apocalyptic scenarios plays out?
But don't get too smug ...
-
74 I.
, , , , , . - :
/* . */
.FloatFigure {
float: left;
margin-left: 0px;
margin-top: 0px;
margin-right: 20px;
margin-bottom: 0px;
}
/* */
.FloatFigure p {
max-width: 200px;
font-size: small;
font-style: italic;
margin-bottom: 5px;
}
. 2.4 .
. 2.4. . , . ,
, ,
-
2. 75
, , , , HTML5 - , .
, -
. -
:
Will you be the last person standing if one of
these apocalyptic scenarios plays out?
, - . ( , - , .) -
.FloatFigure p, -
.FloatFigure figcaption.
,
(FloatFigure), . , , -
, , . -, , , , - . . - .
. , . (, -
, HTML, - .)
, , -
, alt .
alt , :
A human skull lies on the sand
, , . . , .
-
76 I.
, - . , , , . , - , , . 2.5.
. 2.5. .
- , :
...(in a suitably robotic voice) "Who's your daddy now?"
We don't know how the universe started, so we can't be sure it
won't just end, maybe today.
Unexplained Singularity
-
2. 77
:
.PullQuote {
float: right;
max-width: 300;
border-top: thin black solid;
border-bottom: thick black solid;
font-size: 30;
line-height: 130%;
font-style: italic;
padding-top: 5px;
padding-bottom: 5px;
margin-left: 15px;
margin-bottom: 10px;
}
.PullQuote img {
vertical-align: bottom;
}
HTML5 -. , . , , . . 2.1.
2.1.
IE Firefox Chrome Safari Opera Safari iOS Android
9 4 8 5 11.1 4 2.1
, . , - . . , , . .
HTML5, - -. - , Google -. ( http://code.google.com/websstats. Internet
-
78 I.
Explorer, . . .)
Google - , - . , - , -. , , header, , - - .
, Google , , ( ) -. . , , footer, header, menu, nav, HTML5 , . search copyright -.
, , , , , . - . - , HTML , . HTML5.
- , . HTML5 ( , , - ) . , , - .
, HTML5, , , , , . , . , - HTML5:
article, aside, figure, figcaption, footer, header, hgroup,
nav, section, summary {
display: block;
}
, - HTML5, . . display block. , - , . . .
- , Internet Explorer 8
-
2. 79
. , , IE , . , - : IE , JavaScript. , - JavaScript- IE -
:
document.createElement('header')
, , http://tinyurl.com/nlcjxm. ,
:
...
...
- html5shim.googlecode.com , . JavaScript-
, , - HTML5, . , , . .
, html5.js , , Internet Explorer. -, JavaScript, , :
, (IE 9 ) , - .
, , Internet Explorer - . , -
-
80 I.
IE , . , - .
-, , , . MOTW , . " JavaScript-" 1.
Modernizr (. . " Modernizr" 1). , html5.js . , Modernizr , .
, , . - , . HTML5 , , - , ( ). , - , HTML5, , .
, . 2.6 , - .
- -, . - , . - , (About Us) .
. , - , , - -. , - , . 2.1. -, , . . 2.6.
-
2. 81
. 2.6. HTML5
, - . , , - , - . , , "" , . . , . -
, . , - . , "" , . " HTML5" . , -
-, , , CSS-. , -, , , - - .
: ( ), .
-
82 I.
- -
. 2.6 -.
-, - , . -, .
HTML5 - - -. , - HTML.
. . , - , ( ) . , - , -. , - ( ASP.NET PHP) ( Drupal WordPress).
. -, Dreamweaver Expression Web, - . , - -, , , . . , . . - - .
, , : , - , .
. 2.6 -. -,
. - :
Apocalypse Today
, , - : , . - .
: , ? , -. -, , - , HTML5. -, , - , . . -
-
2. 83
, . -, , -
. , - -, ( "Articles" "About Us" ) . - " . " .
, , -. ( , - CSS3 , . "- " 8.) -, , - .
- , , . ( - JavaScript, - , , , Google AdSense. - .)
-, HTML, - . HTML5 -
: .
, , . - , . " " (. . 2.5). - , . . .
? ?
HTML, . - , . . . ( , , , - .) -
-
84 I.
-, , - - , .
. 2.6 . "Apocalypse Today" . , "Articles" "About Us" , . . (- , . , , , Google.)
, . , , , . . - , , . HTML5 . . "" , , , , . , . ( - HTML5 .)
, , -. , - HTML5. - - , - .
, -. - . ; - . , ( . 2.6) - . , , - - .
. . 2.6. . , - .
, , , . 2.7.
. 2.7 , - , . , - (. . - , ).
-
2. 85
[ ]
. 2.7.
, . 2.7 , - -, -. , - .
. 2.6 . , - , -. (- ) .
, - :
Articles
How The World Could End
Would Aliens Enslave or Eradicate Us?
...
About Us
Apocalypse Today is a world leader in conspiracy theories ...
-
86 I.
.
("Articles" "About Us") . , , - - , - .
. - , - . , ( ) ( ).
"About Us" . - , - . , ; , - . , , - , , .
. - , , - . ( , " ", .) - - , , , , JavaScript - .
, . , . - , , -, , . . , , - .
, , , -, . - , , . - :
aside.NavSidebar
{
position: absolute;
top: 179px;
-
2. 87
left: 0px;
padding: 5px 15px 0px 15px;
width: 203px;
min-height: 1500px;
background-color: #eee;
font-size: small;
}
, ,
, , . ( - , www.prosetech.com/html5 - , .)
, , , -, (. 2.8).
, , -
. , : -
-.
-
. 2.8. (. . 2.6)
, - : -, , . - -,
-
88 I.
JavaScript. - , . :
var box = document.getElementById("myBox");
box.style.display = "none";
. , :
var box = document.getElementById("myBox");
box.style.display = "block";
, HTML5 , . , , .
:
1
,
, ( - Chrome), , , - . , , - .
,
.
- -
. , , . . , .
-
. - JavaScript- , , , JavaScript / .
HTML5 -. , , (
) , , .
, HTML5 . , - , , , . , -
-
2. 89
, , - -.
: , - ? , - - (. . 2.9 ).
. 2.9. , .
, , . : ,
-, .
, , . . 2.9 .
, - (. . 2.9). JavaScript, , - . - .
, . , -
-
90 I.
, .
, . ., , , - www.nytimes.com.
- , -. . , , . . - , , . , . , .
, - . , . , - . 2.9:
...
The views expressed on this site do not ...
. -, , "" . , :
#FatFooter {
position: fixed;
bottom: 0px;
height: 145px;
width: 100%;
background: #ECD672;
border-top: thin solid black;
font-size: small;
}
- ( #FatFooter),
-
2. 91
(, , .FatFooter). ,
, JavaScript . - , - .
, , , , . :
...
The views expressed on this site do not...
, , , -. - - , , .
HTML5 . , HTML-. : , - , . - , HTML-. , , http://html5doctor.com, .
, - . , , - , -
, .
? , , ,
-
92 I.
, . , - . - :
, , - "About Us" - ;
, , , , - ;
, ;
. , . - , - (. ).
. - - , . , HTML5 , , . HTML5 - , , - .
, . - -, .
HTML5
HTML5 , - -. - . , - . - - , . - , . , , , - .
, . . - . - , .
-
2. 93
, . - - (, , ), - HTML5.
-?
, - . HTML5 . .
HTML-. http://gsnedders. html5.org/outliner . HTML5 (. . " HTML5" 1), : , URL . Outline this! .
Chrome. Chrome - h5o. http://code.google.com/p/h5o . - , -, , , , , . ,
. 2.10. - ,
-
94 I.
(. 2.10). h5o JavaScript- bookmarklet Firefox Internet Explorer. , - .
Opera. h5o Opera. , Chrome, http://tinyurl.com/3k3ecdy.
-, , -
(, , . .). , . , - , .
, HTML5:
How the World Could End
...
...
Mayan Doomsday
...
Robot Takeover
...
Unexplained Singularity
...
Runaway Climate Change
...
Global Epidemic
...
...
:
1. How the World Could End
1. Mayan Doomsday
2. Robot Takeover
3. Unexplained Singularity
4. Runaway Climate Change
5. Global Epidemic
-
2. 95
( ) . , - , MS Word 2010.
:
1
2
2
3
2
:
1. 1
1. 2
2. 2
1. 3
3. 2
, .
-. , , , :
1
2
1
3
2
:
1. 1
1. 2
2. 1
1. 3
2. 2
, . , , . - - , , - , - . - -. , , , .
-
96 I.
,
. , , . , , , . , , , : .
, - HTML5:
How the World Could End
...
...
Mayan Doomsday
...
Robot Takeover
...
Unexplained Singularity
...
Runaway Climate Change
...
Global Epidemic
...
...
- , http://gsnedders.html5.org/outliner, :
1. Untitled Section
1. How the World Could End
1. Mayan Doomsday
2. Robot Takeover
3. Unexplained Singularity
4. Runaway Climate Change
5. Global Epidemic
-
2. 97
, - . , , .
"Untitled Section" . , - . - , . , - , .
, , - - . 2.6. :
1. Apocalypse Today
1. Untitled Section
1. Articles
2. About Us
2. How the World Could End
1. Mayan Doomsday
2. Robot Takeover
3. Untitled Section
4. Unexplained Singularity
5. Runaway Climate Change
6. Global Epidemic
: , . , . , .
, . - , , , , . , -, , . HTML5 , , , .
?
- - -.
, , -, , - . ,
-
98 I.
- -, , , -.
HTML , - , . . . , - , , , . , , , - , .
HTML5 . , - . , - . . , , , , . .
: HTML5 , . , , - , . . , , . . - .
- - . , . , , :
,
...
...
...
...
...
...
...
...
...
-
2. 99
, , :
1. Untitled Section for the
1. ,
1.
1.
2.
2.
3. Untitled Section for the
1.
2.
:
1. Untitled Section for the
1. ,
1.
1.
2.
2.
3. Untitled Section for the
4.
5.
-
, ,
. , , , .
, , HTML5 -
(. . , , . .), , .
-
, . . .
. , :
,
...
...
...
-
100 I.
...
...
...
...
...
...
-. , , . . (. " . ?" ). - , .
, , . - (. . ), , . . , . , , , , .
, -, . - . -, :
,
...
...
-
2. 101
...
...
...
...
...
...
...
-
, , , . - , , . . .
.
, - .
. , , . . . , .
, - . , , - - ( , -). HTML5 . -, . " -" , , -, .
-
3
HTML5. - - , - .
-. - - . 2 , . , - , - . - , , -. , , , , -, . . - , - .
, HTML5, - . , - . - , - HTML5, , , - W3C. "" , - .
3
-
3. 103
- , . , - - , . - . 3.1.
3.1.
, , , ( , )
, . , , ,
.
, , .
. -, " ", - (, " " "")
, HTML . - ,
, - (. . , , . .), . -
, -.
. , - : -. , - ( , , )
. HTML5 -
-
104 I.
, -, - , , -. , , . , ( , , , , . .), - .
HTML5 . -, - . -, , HTML5 -, , - . . - : , .
- . , . , , - (, ) - . , , . - :
2012-03-21/time>.
, ( ), - , HTML5. , - .
. -, - . -, , - . , - , , . , :
::
, -, - . , -
-
3. 105
, datetime, :
21- .
:
21- .
, - :
:+00:00
, ( 24- ), . "" ( "") . . - - http://en.wikipedia.org/wiki/Time_zone. -, , UTC+4:001, . . . 16:30 :
16:30.
, - , -
datetime, -.
, . , T, :
21- 16:30.
pubdate. -,
(, , ). :
21- 2011 .
, , . - Internet Explorer, . " - " 2.
1 UTC (Universal Time, Coordinated) .
-
106 I.
JavaScript-
- , JavaScript. , .
, , . 3.1.
. 3.1. . , ,
. 3.1. . Calculate JavaScript, - .
. - , , - :
Your BMI:
:
Your BMI:
-
3. 107
JavaScript , . . , :
var resultElement = document.getElementById("result");
Internet Explorer, , . " - " 2. , - IT JavaScript.
. - , - :
Height:
feet
inches
Weight:
pounds
...
, form ( , ) for ( , ). :
Your EMI:
, - , . . , - , -, , .
, . 4. , JavaScript, , 2. , , http://reboot-me.com/prosetech/html5.
, . , - :
-
108 I.
In = 2009, Facebook made a bold grab to own everyone's
content, forever. This is the text they put in their
terms of service: You hereby grant Facebook an
irrevocable, perpetual, non-exclusive, transferable,
fully paid, worldwide license (with the right to
sublicense) to use, copy, publish, stream, store,
retain, publicly perform or display, transmit, scan, reformat,
modify, edit, frame, translate, excerpt, adapt, create
derivative works and distribute (through multiple tiers),
any user content you post
...
, , , . 3.2.
. 3.2.
- ( , , , , ) () () .
, - . HTML5 , , , , -. , , -, - .
-
3. 109
, .
, -. ( -
CSS, ), -.
, - , - , , - - .
( ), , HTML5. :
mark {
background-color: yellow;
color: black;
}
Internet Explorer, - , . " - " 2.
,
, , , - - , HTML5 . , , , , -, . .? HTML5 , . . -, , . - , HTML5 -, -.
. , -, HTML5 (Ian Hickson), WHATWG, - - . : -, - , - . , HTML, - , .
. ARIA,
-
110 I.
- . - , , -, HTML-.
Accessible Rich Internet Applications
Accessible Rich Internet Applications (ARIA, -) HTML.
, role, -. , :
, role - banner:
, , 2, HTML5 . - - :
. : ARIA . ( . www.w3.org/TR/wai-aria/roles#landmark_roles.) : - ARIA HTML5, , . . ARIA HTML5. . , HTML5 (, banner article), (, toolbar search).
ARIA HTML-. aria-required , -. aria-invalid . , , , , - .
ARIA, . , ARIA HTML5 - , , - - -
-
3. 111
. - , , . . - ARIA, HTML5 .
ARIA ( WAI-ARIA, . . WAI) . www.w3.org/TR/wai-aria.
Resource Description Framework
Resource Description Framework (RDFa, - ) - - . RDFa - , : , . -. . - RDFa , HTML-. XHTML, HTML5. - RDFa - HTML5. , , RDFa HTML5, . . XML.
RDFa . , http://en.wikipedia.org/wiki/RDFa. - Google Rich Snippets (. . " -" ) RDFa Google.
, - -, - - . - , - - , , RDFa. ; , Google, , 94% , - , - .
, , . - . , - . -
-
112 I.
-, , -: . , - , - HTML5 . , , .
, , - . , -. - - http://microformats.org/wiki/Main_Page-ru. : hCard hCalender, .
hCard
hCard , . - 2 hCard, .
- class, -. , , . , .
hCard , class
vcard. -
, , . class
fn. - :
Mike Rowe Formatte
class - , , , , -
. class -, , .
hCard , , , URL -, , , , , . .
-
3. 113
, vcard. - hCard, :
Mike Rowe Formatte
Web Developer
The Magic Semantic Company
www.magicsemantics.com
641-545-0234
hCard . - http://microformats.org/wiki/hcard-ru.
, hCard , -. , hCard -, , - . , - .
, -. -, . - , .
. - , - .
, . , - , .
- . , "About Me", - (. 3.3).
HTML- :
About Me
This website is the work of Mike Rowe Formatte.
His friends know him as The Big M.
You can contact him where he works, at
The Magic Semantic Company (phone
641-545-0234 and ask for Mike).
-
114 I.
0r, visit him there at:
42 Jordan Gordon Street, 6th Floor
San Francisco, CA 94105
USA
www.magicsemantics.com
. 3.3. "About Me"
-
, - :
About Me
This website is the work of
Web Developer
Mike Rowe Formatte.
His friends know him as The Big M.
-
3. 115
You can contact him where he works, at
The Magic Semantic Company (phone
641-545-0234 and ask for Mike).
0r, visit him there at:
42 Jordan Gordon Street,
6th Floor
San Francisco,
CA
94105
USA