PowerPoint Presentation

Size: px

Start display at page:

Download "PowerPoint Presentation"

あやかとべ
9 years ago
Views:

4 HTML5 Level.1 Markup Professional HTML5 Level.2 Application Development Professional

23 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title> </title> </head> <body> </body> </html>

24 A. <!DOCTYPE html> B. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN"> C. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> D. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> E. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "

25 A. html B. head C. meta D. title E. body

26 A. html B. head C. meta D. title E. body

27 <link rel="stylesheet" href="style.css"> <style> </style> <script> </script> type="text/css" type="text/javascript"

29 center, font, basefont big, strike, acronym, tt applet, dir, isindex frameset, frame, noframes

30 body text, link, vlink, alink, bgcolor, background align, valign, border, size, width, height

31 A. align B. name C. border D. width E. height

33 small, strong, i, b, s, u hr, dl

37 <h1> 1 <strong>!?</strong></h1> <p> <strong> </strong> </p>

39 <article> <hr> <p> HTML5 </p> </article>

41 <dl> <dt><dfn> </dfn></dt> <dd> </dd> </dl>

42 <dl> <dt> </dt><dd> </dd> <dt> </dt><dd> </dd> </dl> <p> </p> <p> </p>

44 <p> <i>marsupenaeus japonicus</i> </p>

46 <p> <b>wai-aria</b> </p>

48 <p> <s>9,800 </s> 4,980 </p>

50 <p> This <u>izu</u> a pen. </p>

63 63

64 <ruby> <rb> </rb> <rt> </rt> </ruby>

65 <ruby> <rb> </rb><rb> </rb> <rt> </rt><rt> </rt><rt> </rt> </ruby>

66 <ruby> <rb> </rb><rb> </rb> <rt> </rt><rt> </rt><rt> </rt> <rtc> <rt>osha</rt><rt>man</rt><rt>be</rt> </rtc> </ruby>

67 <ruby> <rb> </rb> <rp> </rp><rt> </rt><rp> </rp> </ruby>

77 <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>

79 Web Accessibility Initiative Accessible Rich Internet Applications

82 <ul> <li> 1</li> <li> 2</li> <li> 3</li> </ul> <div> 1 </div> <div> 2 </div> <div> 3 </div>

83 <ul role="tablist"> <li role="tab"> 1</li> <li role="tab"> 2</li> <li role="tab"> 3</li> </ul> <div role="tabpanel"> 1 </div> <div role="tabpanel"> 2 </div> <div role="tabpanel"> 3 </div>

84 <tablist> <tab> 1</tab> <tab> 2</tab> <tab> 3</tab> </tablist> <tabpanel> 1 </tabpanel> <tabpanel> 2 </tabpanel> <tabpanel> 3 </tabpanel>

85 <ul role="tablist"> <li role="tab" id="t1"> 1</li> <li role="tab" id="t2" > 2</li> <li role="tab" id="t3" > 3</li> </ul> <div role="tabpanel" aria-labelledby="t1"> </div> <div role="tabpanel" aria-labelledby="t2" > </div> <div role="tabpanel" aria-labelledby="t3" > </div>

86 <h1 role="presentation"> </h1> <p role="presentation" > </p> <div> </div>

87 <table role="presentation"> <tr> <td aria-owns="rd1 rd2" id="sex"> </td> <td role="radiogroup" aria-labelledby="sex"> <label><input type="radio" id="rd1" > </label> <label><input type="radio" id="rd2" > </label> </td> </tr> </table>

90 A. id="" B. id="123" C. id="_abc" D. id="(^_^;)" E. id="top container"

91 A. <a> </a> B. <a name=" "> </a> C. <a target=" "> </a> D. <a href=" " download=" "> </a> E. <a href=" "><h1> </h1></a>

93 A. alt B. width C. height D. width E. height

94 A. border="" B. border="0" C. border="1" D. border="2" E. border="1025"

95 Tables should not be used as layout aids. If a table is to be used for layout it must be marked with the attribute role="presentation".

100

101

102

103

104

105

106

107

108

109

110

111

112

113 div.inner div.inner

114 #logo div#logo body div#logo

115

116

117 rgb( Red, Green, Blue ) rgba( Red, Green, Blue, Alpha )

118 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;

119 hsla( Hue, Saturation, Lightness, Alpha ) 0 0% 0% % 100% 1.0

120

121 #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;

122

123 transform: rotate(45deg); transform: translate(50px); transform: scale(1.5);

124 transform: rotate(45deg);

125 transform: translate(100px, 50px); = position: relative; left: 100px; top: 50px;

126 transform: scale(2.0);

127 transform: scale(2) rotate(45deg);

128

129 Demo

130

131 Demo

132

133

134

135

136 <!DOCTYPE html> <html lang="ja" manifest=".appcache"> </html>.appcache text/cache-manifest UTF-8

137 CACHE MANIFEST CACHE: styles/default.css images/background.png NETWORK: comm.cgi FALLBACK: offline.html SETTINGS: prefer-online

138 CACHE MANIFEST # # # styles/default.css images/background.png NETWORK: * FALLBACK: offline.html

139

140 <link media="screen" > <style media="screen" > screen { }

141 <link media="screen " > <style media="screen " > screen { }

142

143

144

145 dpi dots per inch dpcm dots per centimeter

146 <link media="screen and (max-width: 1000px)" > <link media="only screen and (min-width: 500px) and (max-width: 1000px)" >

147 Open the Future with HTML5.

~/WWW-local/compIID (WWW IID ) $ mkdir WWW-local $ cd WWW-local $ mkdir compiid 3. Emacs index.html n (a) $ cd ~/WWW/compIID

~/WWW-local/compIID (WWW IID ) $ mkdir WWW-local $ cd WWW-local $ mkdir compiid 3. Emacs index.html n (a) $ cd ~/WWW/compIID 10 10 10.1 1. 2. 3. HTML(HyperText Markup Language) Web [ ][ ] HTML Web HTML HTML Web HTML ~b08a001/www/ ( ) ~b08a001/www-local/ ( ) html ( ) 10.2 WWW WWW-local b08a001 ~b08a001/www/ ~b08a001/www-local/