8 Web Web XHTML XHTML 1 Web Web 1 Web XHTML Web Web XHTML XHTML Extensible HyperText Markup Language( ) Web HTML XML HTML Web 2 XHTML XHTML HTML 4.01 XHTML XHTML 1.0 3 XHTML XHTML XHTML Web 1 2 Netscape Netscape Navigator Microsoft Internet Explorer 3 XHTML 1.1 XHTML 2.0 XHTML 1.0 129
8 Web 8.1 Web Web 8.3 XHTML Web (1) (2) 2 8.1.1 Web Web Web Web 4 Web Web 2 5 PC Web Microsoft Internet Explorer Netscape Navigator Mozilla Firefox Web Web 6 Web Web ( ) Web Web Internet Explorer 7 URL Web ( 8.1 8.2 ) URL Web URL 8.1: Internet Explorer 8.2: Internet Explorer URL Uniform Resource Locator 8 Resource, 4 Web 5 6 Web Apache Software Foundation Apache Microsoft IIS(Internet Information Services) 7 Internet Explorer URL Microsoft 8 URI(Uniform Resource Identifier) 130
8.1. Web Locator URL 8.3 URL URL 3 http://www.waseda.jp/mnc/index-j.html スキーム オーソリティ パス 8.3: Uniform Resource Locator,URL http ftp Web HTTP(Hyper Text Transfer Protocol) 9 URL http IP 0 255 4 133.9.1.3 IP IP ( ) IP ns.cfi.waseda.ac.jp 133.9.1.3 10 / ( ) ( ) ( ) ( http://www.yahoo.co.jp/ ) index.html index.htm http://www.yahoo.co.jp/ http://www.yahoo.co.jp/index.html Web HTTP Transfer Protocol Web 9 2 URL 10 DNS(Domain Name System) 131
8 Web 8.1.2 Web (1) (2) ( ) 1 Web XHTML XHTML txt XHTML html 11 XHTML html Web Web XHTML Web Web Adobe Flash Web Web XHTML html Web 8.1 8.1.3 Web Web URL Web Web HTML Web (XHTML ) (Word 11 htm web html MS-DOS Windows 3.1 3 htm html html 132
8.1. Web 8.1: Web JPEG jpg Joint Photographic Experts Group GIF gif CompuServe 256 PNG png Portable Network Graphics GIF GIF JPEG PNG PDF pdf Portable Document Format Adobe Adobe Adobe Reader Word doc Microsoft Word VBA(Visual Basic for Applications) Word VBA Excel xls Microsoft Excel VBA(Visual Basic for Applications) Excel VBA CSS css Cascading Stylesheet Web VBscript vbs Visual Basic Script BASIC Microsoft JavaScript js Netscape Web Web Web Web Web PDF) (JavaScript VBS) Web Web Web 133
8 Web 8.2 XHTML XHTML PC FTP 8.2.1 XHTML Windows ( ) Macintosh XHTML Windows MacOS 1 Windows TeraPad (http://www5f.biglobe.ne.jp/%7et-susumu/) MacOS mi(http://www.mimikaki.net/) mi Web 8.2.2 FTP FTP File Transfer Protocol HTTP 134
8.2. XHTML HTTP Web Web Web Web (XHTML ) Web Web ID 12 Web Web Web FTP ID Web 13 FTP FTP FTP FTP Web FTP FTP Windows FTP Windows Macintosh FTP Windows: WinSCP http://winscp.net/eng/docs/lang:jp MacOS: Fetch 14 http://fetchsoftworks.com/ 8.2.3 XHTML FTP Web GNU Image Manipulation Program GIMP 12 13 FTP 14 25 Fetch Softworks URL Licensing Educational/Charitable Fetch 135
8 Web http://www.geocities.jp/gimproject/gimp2.0.html http://www.geocities.jp/gimpfile/gum_jp/index.html GIMP PC Web 2 XHTML W3C Markup Validation Service http://validator.w3.org/ Another HTML-lint gateway http://openlab.ring.gr.jp/k16/htmllint/htmllint.html XHTML W3C XHTML 8.2.4 Web Web FTP Windows MacOS GIMP XHTML Web XHTML 8.3 XHTML 8.3.1 XHTML XHTML valid Web XHTML XHTML 15 15 1 1 / XHTML 136
8.3. XHTML <html> <h1> XHTML </h1> <p> XHTML </html> ( ) index.html Web Web 8.4 8.4: XHTML 8.4 index.html XHTML XHTML <p> < > XHTML ( 8.5 ) <p> (paragraph) 1 <h1> 1 XHTML 137
8 Web 要 素 の 開 始 <p> はじめての XHTML マークアップされた 要 素 そのもの 要 素 の 終 了 8.5: Extensible Hypertext Markup Language Markup Language XHTML <html> /<html> html XHTML XHTML 158 8.3.2 Web Web 8.6 > > > 16 Web XHTML 17 XHTML 16 17 Web Web Lynx w3m 138
8.4. 章 節 項 段 落 項 段 落 8.6: XHTML Web 1 Web Web PC CPU Web Web XHTML 1 Web XHTML 8.4 XHTML 1.0 8.2 8.3 Web XHTML 1.0 HTML 4.01 XHTML 1.0 ( ) XHTML Basic 18 XHTML attribute 18 Web XHTML Basic XHTML XHTML Web XHTML 139
8 Web 8.2: html ( 16) 8.3: ( 8.2) html, head, title, body h1, h2, h3, h4, h5, h6, p, blockquote, pre, address br, cite, q, em, strong, dfn, abbr, acronym a ul, ol, dl, dt, dd, li caption, table, th, tr, td img meta 8.5 8.5.1 8.10 8.3 XHTML <html> <h1> XHTML</h1> <p> XHTML. </html> <html> HTML HTML 140
8.5. <html> </html> <h1> h heading h 1 1 Web Web 19 h1 >h2 >h3 4 6 index.html <h1> XHTML</h1> <h2> 2 </h2> <h3> 3 </h3> <p> XHTML <p> 2 1 <p > paragraph p index.html Web index.html Web Web ( 8.7 ) 8.7: Web 20 2 1. 2. 3. 19 20 141
8 Web 1 XHTML 2 ( ) <h1> <p> </h1> 2 XHTML 3 XHTML (white space characters) 2 1 XHTML <p> 4 <p> 5 <p> 6 <p> 7 4 5 6 7 6 7 7 Web 142
8.5. 2 ( ) XHTML XHTML <h 1> </h 1> (preformatted ) <pre ></pre > 7 <p> 7 <pre> </pre> XHTML 143
8 Web <blockquote> <p> </blockquote> 2 blockquote blockquote <p> <address> 169-8050 1-104 </address> Web FAX Web 21 Web Web 8.5.2 building block 21 Web Web 144
8.5. br cite q em strong dfn abbr acronym br line break XHTML 1 address br <address> 169-8050<br /> 1-104<br /> </address> br (/) br 1 <br / > br br address br cite q cite <blockquote> <p> <cite>,,,1937 6.</cite> </blockquote> blockquote q <p> <q> </q> 145
8 Web q p Web ( ) Web Web 1 XHTML em strong em emphasize em 2 em strong (bold) dfn definition 3 <p> <em> </em> <strong> </strong> <dfn>dfn </dfn> abbr acronym abbreviation( ) acronym( ) abbr by the way BTW (United Nations) UN <p> <abbr title=" "> </abbr> <acronym title="waseda university InterNet Domain">WIND</acronym> abbr acronym Web XHTML WIND title 146
8.6. 8.5.3 < =" " =" "> 1 1 2 ( ) ( ) title blockquote cite (cite ) <blockquote cite="http://www.waseda.jp/mnc/" title="mnc "> XML 8.6 1 a a 1 XHTML XHTML Web Web 8.6.1 <p> <a href="http://www.waseda.jp/"> </a> <a href="http://www.keio.ac.jp/"> </a>. href href URL 1 accesskey <p> <a href="http://www.waseda.jp/" accesskey="1"> </a> <a href="http://www.keio.ac.jp/" accesskey="2"> </a> 147
8 Web Alt 1 Web 1 8.6.2 <h1> <a name="midashi1"> </a> </h1>......... <h1> <a name="midashi2"> 2 </a> </h1> midashi1 midashi2 index.html URL http://www.example.ac.jp/index.html#midashi1 a 22 <h1> <a href="http://www.waseda.jp/"> </a> </h1> <p> <a href="http://www.waseda.jp/jp/okuma/"><img src="okuma.jpg" /></a> 22 okuma.jpg 148
8.7. a p <a href="http://www.waseda.ac.jp/"> <p> </a> 8.7 ( ) XHTML 8.7.1 ul (unordered list) <p> <ul> </ul> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> li(list item) li XHTML 8.7.2 ol(ordered list) 149
8 Web <ol> </ol> <li> </li> <li> </li> <ul > <ol > XHTML ol 23 8.7.3 li <ul> <li> <ul> <li> </li> <li> </li> <li> </li> </ul> </li> <li> <ul> <li> </li> <li> </li> <li> </li> </ul> </li> </ul> <li ></li > <li > li 1 (li ) dl(definition list) dt(definition term) dd (definition definition) 23 150
8.8. <dl> </dl> <dt> </dt> <dd> 1-6-1</dd> <dt> </dt> <dd> 2-15-45</dd> 8.8 1 8.8 早 稲 田 大 学 生 の 平 均 身 長 体 重 平 均 備 考 身 長 体 重 一 年 生 175 72 表 題 (Caption) 表 見 出 し (Table Header) 二 年 生 178 70 行 (Table Row) 三 年 生 173 65 四 年 生 177 68 セル(Table Data) 8.8: 8.8.1 2 2 2 2 <table border="1"> <tr><td> </td><td> </td></tr> <tr><td> </td><td> </td></tr> </table> 1 table table border 1 2 3 1 border 24 24 Web CSS(Cascading Style Sheets) 151
8 Web 2 1 tr(table row) tr tr 2 td(table data) td ( ) 8.8.2 tr tr td tr td 2 3 3 2 1 1 1 ( ) <table border="1"> <tr><td colspan="2"> </td></tr> <tr><td> </td><td> </td></tr> <tr><td> </td><td> </td></tr> </table> あ う 五 十 音 い え 8.9: 1 HTML 2 td 1 colspan 3 colspan 1 2 2 ( ) <table border="1"> <tr><td rowspan="2"> </td><td> </td><td> </td></tr> <tr><td> </td><td> </td></tr> </table> あ い あいうえお う え 8.10: 2 1 2 1 3 2 2 3 3 <table border="1"> <caption> </caption> <tr><td></td><th colspan="2"> </th></tr> <tr><th rowspan="2"> </th><td> </td><td> </td></tr> <tr><td> </td><td> </td></tr> </table> 五 十 音 五 十 音 あ い あいうえお う え 8.11: Web CSS 152
8.9. 1 caption caption table <table > </table > td th Web th td 8.9 8.9.1 XHTML XHTML XHTML ( ) XHTML XHTML Web 1 Open Clip Art Library(http://www.openclipart.org/) ( 132 8.1.2 ) GIF JPEG PNG GIF PNG JPEG http://www.isc.tamu.edu/ lewing/linux/sit3-shine.7.gif Web URL penguin.gif XHTML 153
8 Web <p> <img src="penguin.gif" alt=" "/> img br img src alt 2 src source URL(URI) XHTML alt alternative alt <p> <img src="penguin.gif" width="100" height="100" alt=" "/> 100 ( 100 ) Web XHTML XHTML 8.9.2 Web Web PC Web img src URL XHTML URL Web Web <p> <img src="http://www.waseda.jp/img/waseda_logo.gif" alt="waseda Logo"/> XHTML Web 154
8.10. Web Web 8.10 ( ) valid XHTML XHTML XHTML XHTML XHTML 4 1. XML 2. XHTML (DOCTYPE ) 3. ( ) 4. ( ) XHTML 8.10.1 XML XML XML <?xml version="1.0" encoding="shift_jis"?> xml 1.0 Shift_JIS XML XML 1 XML 155
8 Web 4 25 ( ) XML UTF-8 UTF-16 TeraPad Windows MacOS JIS 8.10.2 DOCTYPE DOCTYPE XHTML XHTML( HTML) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> 3 1 7 <! (markup declaration) 2 1 DOCTYPE <!DOCTYPE html XML XML PUBLIC DTD(Document Type Declaration) ( XHTML ) (-//W3C) (//) (DTD XHTML 1.0 Transitional//EN) W3C(World Wide Web Consortium) (DTD) (XHTML 1.0 Transitional) (//) (EN) XHTML DOCTYPE 25 JIS ISO-2022-JP EUC JIS UTF-8 ISO-2022-JP Windows MacOS JIS 156
8.10. DTD URL > DOCTYPE DOCTYPE XHTML DOCTYPE DOCTYPE DOCTYPE 1 8.10.3 head XML DOCTYPE 26 <head> <title> </title> <meta http-equiv="content-type" content="text/html; charset=shift_jis"/> <meta name="author" content=" " /> <meta name="keywords" content=" " /> <meta name="description" content=" " /> </head> <head ></head > 5 title title head title Web ( 8.12 ) title 8.12: title 4 meta meta HTML Shift JIS head title 26 Web address 157
8 Web name content name content author keywords description title meta link script head 8.10.4 html body html body 1 XHTML html DOCTYPE (156 ) <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> html 3 2 XHTML (ja) ISO( ) ISO 639-1 ja 2 XHTML 1.0 HTML XML XML xml:lang="ja" HTML lang="ja" XHTML 1.0 xmlns (Name Space) XHTML ( ) 27 XML XML (XHTML 1 ) XHTML Web XBRL(Extensible Business Reporting Language) MathML SVG(Scalable Vector Graphics) NewsML 1 XML ( ) title XHTML XML URL URL URL html XHTML 1 html 28 ( ) html ( 180 27 Adobe Flash Apple QuickTime Flash QuickTime Flash Player 28 html html html 1 XHTML 1 158
8.11. ) Windows C:Y html head body head body body XML DOCTYPE XHTML <?xml version="1.0" encoding="shift_jis"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <meta http-equiv="content-type" content="text/html; charset=shift_jis"/> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <title> </title> </head> <body> <h1> </h1> <p> </body> </html> 8.13 XHTML html 8.11 8.11.1 Valid XHML XHTML style h1 18 h1 24 159
8 Web XML 宣 言 DOCTYPE 宣 言 html 要 素 head 要 素 title 要 素 body 要 素 h1 要 素 p 要 素 8.13: XHTML cascade Cascading Style Sheet CSS XHTML CSS XHTML 8.11.2 CSS XHTML CSS CSS XHTML 2 CSS p.strong { color: #ff0000; } p.strong XHTML p strong class #ff0000 { color: #ff0000; } color #ff0000 value RGB Red Green Blue 00 FF 16 256 XHTML 160
<p class="strong"> 8.12. class p p { color: #ff0000; } class class.strong { color: #ff0000; } <h1 class="strong"> </h1> <p class="strong"> <div class="strong> <h1> </h1> </div> <p> <span class="strong"> </span> W3C Web CSS Web CSS CSS style.css XHTML XHTML <head> <title> </title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> Web XHTML style.css CSS CSS 8.12 Web 161
8 Web ( ) 1 Web Web Web Google Web Google 1 Page Rank ([7]) 29 Google 2 Web 1 Web Web 30 29 Search Engine Optimization SEO SEO Web 30 1 162
8.13. 8.13 HTML Web FFFTP 2010 1 FFFTP 2010 31 8.13.1 FFFTP FFFTP 1. FFFTP 8.14 FFFTP 8.14 8.14: 2. 8.15 OK FFFTP WWW Waseda-net @ Waseda-net 31 WinSCP 163
8 Web 8.15: 3. 8.16 1 8.16: 4. 8.17 PC 5. FFFTP Web 32 8.14 Web FTP Web Web 6 HTML-lit gateway http://www.mnc.waseda.ac.jp/htmllint/htmllint.html HTML 32 FFFTP http://www.waseda.jp/itc/waseda-net/www-ftp.html 164
8.14. 8.17: 165