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

Size: px

Start display at page:

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

れいなかむら
7 years ago
Views:

1 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 ( ) ~/WWW-local/compIID/index.html ( ) ~/WWW/index.html ( ) $ cp -r ~/WWW-local/compIID ~/WWW CoPy Recursive -r (recursive) 64

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" " <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> <[email protected]><br> <br> </address> </body> </html> 65

3 (e) HTML (c) 2. ( ) <p> </p> 3. Opera 4. Opera HTML 10.1 ( ) Emacs ~/WWW-locl/compIID/index.html 2. HTML Opera

4 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" " HTML4.01 Strict HTML4.01 Strict DTD html head body <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <head> html </head> <body> body </body> body </html> html HTML HTML 1 67

5 11.3 head 11 HTML 11.3 head head title meta style link meta title title style h1 body title <style type="text/css">  </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

6 11.4 body 11 HTML 13: (HTML4.0 ) orange #FFA500 springgreen #00FF7F skyblue #87CEEB royalblue #4169E1 violet #EE82EE (# ) color: #FFA body 11.5 (Heading) h1 h6 h1 h6 h  11.7 (Paragraph) p <p> </p> ) p 1 (forced line BReak) br <br /> 3 & ; pre (preformatted text= ) <pre> </pre> 69

7 HTML 11.8 blockquote </blockquote> ( ) cite 11.9 ( ) (Unordered List) ul li </li> </ul> <ul> <li> </li> <li> </li> <li> </li> </ul> (Ordered List) ol li </li>, </ol> <p> </p> <ol> <li> </li> <li> </li> <li> </li> </ol> <p> </p> 70

8 11.10 ( ) 11 HTML (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> ( ) (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

9 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> URL a (anchor) href <a href=" URL"> </a> <a href=" </a> HTML HTML hobby.html (index.html) hobby.html <a href="./hobby.html"> </a> (./ ) URL </a> <a href=" img (IMaGe) src (SouRCe) alt (ALTernative) alt width (pixel= ) height top_image02.jpg index.html <IMG src="./top_image02.jpg" alt=" "> 72

10 HTML <img src="./top_image02.jpg" alt=" " width="270" height="60"> index.html abcd.gif style <style type="text/css">  h1{ color: green; text-align: center } body{ background-image: url("./abcd.gif"); color: black } </style> ( ) style <style type="text/css">  span.attention { color: red} span.warning { color: yellow} </style> ( attention, warning ) <span class="attention"> </span> <span class="warning"> </span> ( ) span style <span style="color:red"> </span> 73

11 HTML 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 } skyblue navy style table{ background-color: skyblue } tr{ color : navy } style address {color: blue} address blue 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

12 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 HTML HTML gif, jpeg, png 3 htmq.com AppleWorks gimp Excel PNG PC ( ) PC USB [OK] 75

13 11.17 font-family 11 HTML 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> DIV style <style type="text/css">  div#fbox{border: solid 3px aqua; padding-left: 10px; padding-left: 10px} </style> body 76

14 11.18 DIV 11 HTML <div id="fbox"> <p> </p> <p> </p> </div> <p> </p> 77

6 2 1

6 2 1 6 1 6 (1) (2) HTML (3) 1 Web HTML 1 Web 1 Web Web 6 2 1 6 3 1.1 HTML(XHTML) Web HTML(Hyper Text Markup Language) ( ) html htm HTML XHTML(XHTML 1.0 Transitional)