2
3
4
HTML 5 Level.1 Markup Professional HTML 5 Level.2 Application Development Professional 5
6
7
8
9
http://www.html5exam.jp/ @html5cert https://www.facebook.com/html5exam http://www.pearsonvue.com/japan/registration/ 10
11
12
<table> <tr><th> </th><th> </th><th> </th></tr> <template id="row"> <tr><td></td><td></td><td></td></tr> </template> </table> http://www.w3.org/tr/html5/scripting-1.html#the-template-element 13
14
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title> </title> </head> <body> </body> </html> 15
<link rel="stylesheet" href="style.css"> <style> </style> <script> </script> type="text/css" type="text/javascript" 16
17
18
19
20
21
22
23
24
25
26
27
28
29
<ruby> <rb> </rb> <rt> </rt> </ruby> 30
<ruby> <rb> </rb><rb> </rb> <rt> </rt><rt> </rt><rt> </rt> </ruby> 31
<ruby> <rb> </rb><rb> </rb> <rt> </rt><rt> </rt><rt> </rt> <rtc> <rt>me</rt><rt>man</rt><rt>betsu</rt> </rtc> </ruby> 32
<ruby> <rb> </rb> <rp> </rp><rt> </rt><rp> </rp> </ruby> 33
34
35
36
37
38
39
40
41
http://www.w3.org/tr/html5/dom.html#global-attributes 42
<ol> <li data-length="11m32s"> </li> <li data-length="08m55s"> </li> <li data-length="22m04s"> </li> <li data-length="13m46s"> </li> <li data-length="30m00s"> </li> </ol> 43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
div.inner div.inner 0 0 1 0 1 0 0 1 1 60
#logo div#logo body div#logo 1 0 0 1 0 1 1 0 2 61
62
rgb( Red, Green, Blue ) rgba( Red, Green, Blue, Alpha ) 63
color: rgba( 255, 255, 255, 0.0 ); color: rgba( 255, 255, 255, 0.2 ); color: rgba( 255, 255, 255, 0.4 ); color: rgba( 255, 255, 255, 0.6 ); color: rgba( 255, 255, 255, 0.8 ); color: rgba( 255, 255, 255, 1.0 ); The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/ 64
hsla( Hue, Saturation, Lightness, Alpha ) 0 0% 0% 0.0 360 100% 100% 1.0 65
330 0 30 300 270 240 60 90 120 210 150 180 66
#box01{ opacity: 0.1 }; #box02{ opacity: 0.2 }; #box03{ opacity: 0.3 }; #box04{ opacity: 0.4 }; #box05{ opacity: 0.5 }; #box06{ opacity: 0.6 }; #box07{ opacity: 0.7 }; #box08{ opacity: 0.8 }; #box09{ opacity: 0.9 }; #box10{ opacity: 1.0 }; The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/ 67
68
transform: rotate(45deg); transform: translate(50px); transform: scale(1.5); 69
transform: rotate(45deg); 70
transform: translate(100px, 50px); 71
transform: translate(100px, 50px); = position: relative; left: 100px; top: 50px; 71
transform: scale(2.0); 72
transform: scale(2) rotate(45deg); 73
74
Demo 75
76
Demo 77
78
79
<link media="screen" > <style media="screen" > </style> @media screen { } 80
<link media="screen " > <style media="screen " > </style> @media screen { } 81
82
83
84
dpi dots per inch dpcm dots per centimeter 85
<link media="screen and (max-width: 1000px)" > <link media="only screen and (min-width: 500px) and (max-width: 1000px)" > 86
87
http://www.w3.org/tr/html5/browsers.html#offline 88
http://www.w3.org/tr/html5/browsers.html#manifests 89
CACHE MANIFEST CACHE: styles/default.css images/background.png NETWORK: comm.cgi FALLBACK: offline.html SETTINGS: fast 90
CACHE MANIFEST # styles/default.css images/background.png NETWORK: * SETTINGS: prefer-online FALLBACK: offline.html 91
<!DOCTYPE html> <html lang="ja" manifest=".appcache"> </html>.appcache text/cache-manifest UTF-8 92
Open the Future with HTML5. 93