1 / 75

資料處理 第三部份： Internet 第五章 製作網頁

資料處理 第三部份： Internet 第五章 製作網頁. 鄧姚文 joseph@im.knu.edu.tw http://w3.im.knu.edu.tw/~joseph/. What is HTML?. HyperText Markup Language 一種排版語言 一種多媒體語言 一種聯繫資訊的語言 一種與平台無關的語言 一種以 HTTP 傳輸的多媒體資料 構成 WWW 的基本原件. URI (Universal Resource Identifier).

beulah
Download Presentation

資料處理 第三部份： Internet 第五章 製作網頁

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 資料處理第三部份：Internet第五章 製作網頁 鄧姚文 joseph@im.knu.edu.tw http://w3.im.knu.edu.tw/~joseph/

  2. What is HTML? • HyperText Markup Language • 一種排版語言 • 一種多媒體語言 • 一種聯繫資訊的語言 • 一種與平台無關的語言 • 一種以 HTTP 傳輸的多媒體資料 • 構成 WWW 的基本原件

  3. URI (Universal Resource Identifier) • Every resource available on the Web has an address that may be encoded by a Universal Resource Identifier • URIs typically consist of three pieces: • The naming scheme of the mechanism used to access the resource. • The name of the machine hosting the resource. • The name of the resource itself, given as a path.

  4. URI（cont’d） • Typical format: • protocol://hostname.domain/directory/page.html • http://www.mnet.knu.edu.tw/~joseph/courses/linux/index.html • mailto:joseph@mnet.knu.edu.tw

  5. URI（cont’d） • Protocols or mechanisms used to access the resource: • http: HTML • ftp: File transfer • file: Local file • news: News group • gopher: Gopher • mailto: Sending e-mail • telnet: Remote login

  6. What is HTTP? • HyperText Transfer Protocol

  7. HTML Elements • Tag • Formatting commands • 大部分的 Tag 成對出現 • <td> … </td> • 成對的 Tag 不可交錯 • Right: <h1><b> … </b></h1> • Wrong: <h1><b> … </h1></b>

  8. 基本網頁構成 <HTML> <HEAD> <TITLE>This is the title.</TITLE> </HEAD> <BODY> This is the body. </BODY> </HTML>

  9. 基本網頁構成（cont’d） <TITLE>的效果 <BODY>內的文字

  10. 基本網頁構成（cont’d） • <HTML>…</HTML> • HTML 檔案開始與結束 • <HEAD>…<HEAD> • Information about the current document • <TITLE>…<TITLE> • To identify the contents of a document • Every HTML document must have a TITLE element in the HEAD section. • <BODY>…</BODY> • The body of a document contains the document's content

  11. Headings 章節標題 <H1>Heading Level 1</H1> <H2>Heading Level 2</H2> <H3>Heading Level 3</H3> <H4>Heading Level 4</H4> <H5>Heading Level 5</H5>

  12. Headings 章節標題（cont’d）

  13. Paragraph 段落 <H1>Heading Level 1</H1> <P>The first paragraph.</P> <P>The second paragraph.</P> <H2>Heading Level 2</H2>

  14. Paragraph 段落（cont’d）

  15. 強制斷行 <H4>Heading Level 4</H4> <P>Mail me to this address:<BR> Dept. Imformation Management<BR> Kai Nan University<BR> 1 Kai-Nan Rd., Luju Shiang<BR> Taoyuan, Taiwan 33845, ROC.</P> <H5>Heading Level 5</H5>

  16. 強制斷行（cont’d）

  17. Preformatted Text <pre> void Node::Remove() { if (prev) prev->next = next; else if (parent) parent->SetContent(null); if (next) next->prev = prev; parent = null; } </pre>

  18. Preformatted Text（cont’d）

  19. 特殊字元

  20. 特殊字元（cont’d）

  21. 字體變化 • 基本型 • 粗體字 • <b>bold</b> • 斜體字 • <i>italic</i> • 底線 • <u>underline</u>

  22. 字體變化（續） • 強調 • 粗體強調 • <strong>…</strong> • 斜體強調 • <em>emphasis</em>

  23. 字體變化（續） <h2>基本型</h2> <b>粗體</b>、<i>斜體</i>、<u>底線</u> <h2>強調</h2> 學習程式設計的基本要點是<strong>語法</strong>、<strong>變數</strong>、<strong>條件判斷</strong>、<strong>迴圈控制</strong>、<strong>副程式</strong><br> 但是學習寫好程式所需要的是<strong>英文</strong>、<strong>資料結構</strong>、<strong>演算法</strong>、更重要的是<em>不斷地練習</em>。

  24. 字體變化（續）

  25. 字體變化（續） • 刪除線 • <strike>…</strike> • 上標 • <sup>superscript<sup> • 下標 • <sub>subscript</sub> • 程式碼 • <code>…</code>

  26. 字體變化（續） <h2>刪除線</h2> 原價<strike>NT$ 12,000</strike><br> 特價<strong>NT$ 6,000</strong> <h2>上標與下標</h2> <code>E=MC<sup>2</sup></code><br> <code>S=A<sub>1</sub>+A<sub>2</sub>+...+A<sub>n</sub></code>

  27. 字體變化（續）

  28. 段落編排 • 靠左對齊 • <p align=“left”>…</p> • 置中對齊 • <p align=“center”>…</p> • <center><p>…</p></center> • 靠右對齊 • <p align=“right”>…</p>

  29. Images 圖片 <H1>Heading Level 1</H1> <P>The first paragraph. This is a really <em>interesting</em> topic!</P> <P>The second paragraph. <img src="tips.gif"></P> <H2>Heading Level 2</H2>

  30. Images 圖片（cont’d）

  31. Images 圖片（cont’d） <H1>Heading Level 1</H1> <P>The first paragraph. This is a really <em>interesting</em> topic!</P> <P>The second paragraph. <img src="tips.gif" width="27" height="36" alt="靈光一閃"> </P> <H2>Heading Level 2</H2>

  32. Images 圖片（cont’d）

  33. Link 連結 <H2>Heading Level 2</H2> <P>關於 HTML 更詳盡的細節，請參考 <a href="http://www.w3.org/TR/1999/REC-html401-19991224/">HTML 4.01 規格書</a> 。<P> <H3>Heading Level 3</H3>

  34. Link 連結（cont’d）

  35. Link 連結（cont’d） <P>The second paragraph. <a href="flash.html"><img src="tips.gif" alt="靈光一閃"></a> </P> <H2>Heading Level 2</H2> <P>關於 HTML 更詳盡的細節，請參考

  36. Link 連結（cont’d）

  37. Link 連結（cont’d） <BODY> <a name="firstLine">This is the first line.</a> <H1>Heading Level 1</H1> <P>The first paragraph. This is a really <em>interesting</em> topic!</P> <P>The second paragraph. <a href="flash.html"><img src="tips.gif" alt="靈光一閃"></a> </P> <H2>Heading Level 2</H2> <P>關於 HTML 更詳盡的細節，請參考 <a href="http://www.w3.org/TR/1999/REC-html401-19991224/">HTML 4.01 規格書</a> 。<P> 回到<a href="basic.html#firstLine">本文第一行</a>。 <H3>Heading Level 3</H3>

  38. Link 連結（cont’d）

  39. Link 連結（cont’d）

  40. Link 連結（cont’d） • 傳送電子郵件 • mailto:mailaddress <p>如果有任何問題， 請與 <a href="mailto:joseph@im.knu.edu.tw">鄧姚文</a>聯絡</p>

  41. Link 連結（cont’d）

  42. List 清單 <H3>Heading Level 3</H3> 無編號的項目清單 <ul> <li>the first list item</li> <li>the second list item</li> <li>the third list item</li> </ul>

  43. List 清單（cont’d）

  44. List 清單（cont’d） 有編號的項目清單 <ol> <li>the first list item</li> <li>the second list item</li> <li>the third list item</li> </ol>

  45. List 清單（cont’d）

  46. List 清單（cont’d） 定義式的項目清單 <dl> <dt>the first term</dt> <dd>its definition</dd> <dt>the second term</dt> <dd>its definition</dd> <dt>the third term</dt> <dd>its definition</dd> </dl>

  47. List 清單（cont’d）

  48. List 清單（cont’d） 混合使用項目 <ol> <li>the first list item</li> <li> the second list item <ul> <li>first nested item</li> <li>second nested item</li> </ul> </li> <li>the third list item</li> </ol>

  49. List 清單（cont’d）

  50. 文繞圖 <p><img src="sun.jpg" alt="sunburst graphic" width="32" height="21" align="left"> This text will be flowed around the right side of the graphic.</p> <p><img src="sun.jpg" alt="sunburst graphic" width="32" height="21" align="right"> This text will be flowed around the left side of the graphic.</p> <p><img src="sun.jpg" alt="sunburst graphic" width="32" height="21" align="left"> This text will be flowed around the right side of the graphic.<br clear="all"> This starts a new line below the floated image.</p>

More Related