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/ ( W 3 ) (W local ) ~b08a001/www/index.html ~b08a001/www-local/index.html URL http://www.twcu.ac.jp/~b08a001/ http://www-local.twcu.ac.jp/~b08a001/ ( ) ~/WWW-local/compIID/index.html ( ) ~/WWW/index.html ( ) $ cp -r ~/WWW-local/compIID ~/WWW CoPy Recursive -r (recursive) 64
10.3 10 10.3 10.3.1 1. 2. ~/WWW-local/compIID (WWW IID ) $ mkdir WWW-local $ cd WWW-local $ mkdir compiid 3. Emacs index.html n (a) $ cd ~/WWW/compIID (b) $ cp ~asakawa/www/template.html./index.html (c) Emacs (d) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" > <meta http-equiv="content-style-type" content="text/css" > <title> </title> <style type="text/css"> <!-- --> </style> </head> <body> <h1> </h1> <p> </p> <hr> <address> <b08a001@cis.twcu.ac.jp><br> 2008 12 17 <br> </address> </body> </html> 65
10.3 10 (e) HTML 10.1 1. 1-3(c) 2. ( ) <p> </p> 3. Opera 4. Opera HTML 10.1 ( ) 10.3.2 1. Emacs ~/WWW-locl/compIID/index.html 2. HTML 3. 4. Opera 5. 2 66
11 HTML 11 HTML 11.1 HTML HTML(HyperText Markup Language) XHTML(eXtended HyperText Markup Language) HTML (markup) HTML <h1> </h1> h1 (element) <h1> h1 </h1> h1 (content) <html lang="ja"> </html> html <html lang="ja"> html lang="ja" lang ja 11.2 HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> HTML4.01 Strict HTML4.01 Strict DTD html head body <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <html> <head> html </head> <body> body </body> body </html> html HTML HTML 1 67
11.3 head 11 HTML 11.3 head head title meta style link meta title title style h1 body title <style type="text/css"> <!-- h1{ color: navy; background: aqua; text-align: center } body{ background-color: white; color: black } --> </style> <!-- --> /* */ 11: left center right 12: (HTML4.0 ) black navy blue green teal lime aqua maroon purple olive gray silver red fuchsia yellow white 68
11.4 body 11 HTML 13: (HTML4.0 ) orange #FFA500 springgreen #00FF7F skyblue #87CEEB royalblue #4169E1 violet #EE82EE (# 2 16 3 ) color: #FFA500 216 http://html.eweb-design.com/0204_cn.html http://e-words.jp/p/r-colornames.html 11.4 body 11.5 (Heading) h1 h6 h1 h6 h1 11.6 <!-- --> 11.7 (Paragraph) p <p> </p> ) p 1 (forced line BReak) br <br /> 3 & ; pre (preformatted text= ) <pre> </pre> 69
11.8 11 HTML 11.8 blockquote </blockquote> ( ) cite 11.9 ( ) 11.9.1 (Unordered List) ul li </li> </ul> <ul> <li> </li> <li> </li> <li> </li> </ul> 11.9.2 (Ordered List) ol li </li>, </ol> <p> </p> <ol> <li> </li> <li> </li> <li> </li> </ol> <p> </p> 70
11.10 ( ) 11 HTML 11.9.3 (Definition List) dl dt (Definition Term) dd (Definition Description) verb /dl, </dt>, </dd> <dl> </dl> <dt> </dt> <dd> </dd> <dt> </dt> <dd> </dd> <dt> </dt> <dd> </dd> 11.10 ( ) (table) table border (0.3mm ) (border ) summary caption (caption ) (Table Row ) tr (Table Data cell) td th th th abbr (1,1) (1,2) (2,1) (2,2) (3,1) (3,2) 71
11.11 11 HTML <table border="5" summary="4 2 "> <tr><th abbr="head"> </th><th abbr="head"> </th></tr> </table> <tr><td>(1,1)<td>(1,2)</tr> <tr><td>(2,1)<td>(2,2)</tr> <tr><td>(3,1)<td>(3,1)</tr> 11.11 URL a (anchor) href <a href=" URL"> </a> <a href="http://www.twcu.ac.jp/"> </a> HTML HTML hobby.html (index.html) hobby.html <a href="./hobby.html"> </a> (./ ) URL </a> <a href="http://www-local.twcu.ac.jp/~b08a001/compiid/hobby.html"> 11.12 img (IMaGe) src (SouRCe) alt (ALTernative) alt width (pixel= ) height top_image02.jpg index.html <IMG src="./top_image02.jpg" alt=" "> 72
11.13 11 HTML <img src="./top_image02.jpg" alt=" " width="270" height="60"> 11.13 index.html abcd.gif style <style type="text/css"> <!-- --> h1{ color: green; text-align: center } body{ background-image: url("./abcd.gif"); color: black } </style> 11.14 11.14.1 ( ) style <style type="text/css"> <!-- --> span.attention { color: red} span.warning { color: yellow} </style> ( attention, warning ) <span class="attention"> </span> <span class="warning"> </span> 11.14.2 ( ) span style <span style="color:red"> </span> 73
11.15 11 HTML 11.14.3 style a:link { color: } a:visited { color: } a:active { color: } blue purple ( ) red a:link {color: blue} a:visited {color: purple} a:active {color: red } 11.14.4 skyblue navy style table{ background-color: skyblue } tr{ color : navy } 11.14.5 style address {color: blue} address blue 11.15 body p address, blockquote, center, dir, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul 74
11.16 11 HTML a, abbr, acronym, applet, b, basefont, bdo, big, br, button, cite, code, dfn, em, font, i, iframe, img, input, kbd, label, map, object, q, s, samp, script, select, small, span, strike,strong, sub, sup, textarea, tt, u, var center, dir, isindex, menu, noframes applet, basefont, font, iframe, strike, u Transitional Frameset 11.16 11.16.1 HTML HTML gif, jpeg, png 3 htmq.com 11.16.2 AppleWorks gimp Excel PNG PC ( ) PC USB 11.16.3 1. 2. 3. 4. 5. 6. [OK] 75
11.17 font-family 11 HTML 11.17 font-family style <style type="text/css"> <!-- --> p#font1{font-family: serif} p#font2{font-family: sans-serif} p#font3{font-family: cursive} p#font4{font-family: fantasy} p#font5{font-family: monospace} </style> body <p id="font1"> serif <br> HTML(HyperText Markup Language) XHTML(eXtended HyperText Markup Language) </p> 11.18 DIV style <style type="text/css"> <!-- --> div#fbox{border: solid 3px aqua; padding-left: 10px; padding-left: 10px} </style> body 76
11.18 DIV 11 HTML <div id="fbox"> <p> </p> <p> </p> </div> <p> </p> 77