Chapter14 HTML簡介與簡易網頁製作 shwang@szmc.edu.tw 網路應用入門(一) Chapter14 HTML簡介與簡易網頁製作 shwang@szmc.edu.tw
課程大綱 HTTP and HTML運作機制 HTTP 相關技術 HTML 介紹 HTML 架構 文字與圖片 超鏈結 表格
HTTP and HTML運作機制 網站應用程式 瀏覽器 1. HTTP 要求 2. HTTP 回應 網站伺服器 用戶端 PC In HTTP, the browser sends an HTTP request. The webserver application program sends back an HTTP response message. HTML 文件 3
HTTP and HTML運作機制1 HTML 文件 瀏覽器 網站應用程式 用戶端 PC 2 圖檔 網站伺服器 顯示結果 Many people do not realize that the complex webpages they see on their browser screens are created from multiple files. The first file is an HTML document that contains rich text and tags (placeholders) for graphics files, sound files, and other types of files. 顯示結果 4
HTTP and HTML運作機制2 HTML 文件 1. HTML 文件 瀏覽器 網站應用程式 2 圖檔 用戶端 PC 網站伺服器 Each file download requires an HTTP request-response process. There are three HTTP cycles: one for the HTML document and one for each of the two graphic files. The HTML document is downloaded first because it has tags identifying other files that need to be downloaded. 顯示結果 5
HTTP and HTML運作機制3 2. 網站應用程式 瀏覽器 3. 2 用戶端 PC 圖檔 網站伺服器 顯示結果 <Read the text at the bottom of the slide.> 顯示結果 6
HTTP 相關技術 WWW 運作機制 Server 端應用伺服軟體 Browser (瀏覽器) Apache * IIS Browser (瀏覽器) Internet Explorer (7.0, or 8.0) Firefox URL (Uniform Resource Locator)
HTML <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Hello World</title> </head> <body> <p>這是我的第一份HTML文件</p> </body> </html>
HTML網頁結構 <html> <head> <title> 頁面標頭</title> <body> <h1>標題 level 1</h1> <p>The first paragraph is here.</p> </body> </html>
空白與換行 空白 <p> </p> 換行 <br>
HTML 註解 單行: <!-- This is a comment. --> 多行: <!-- This is another comment. 2nd line 3rd line <h1>Heading level 1</h1> -->
標題字型範例 <h1>Heading 1</h1> <p>The first paragraph is here.</p><hr /> <p>The second paragraph is here. There is a span area <span style="color:red">red area</span>. E = m<i>c</i><sup>2</sup></p>
標題文字<hx> h1, h2, h3, h4, h5, h6
超鏈結 <a href="…" …>…</a> <a href=“3c.html">3C商品</a> <a href="books/1.html">商品1</a> <a href="../books/2.html">商品2</a> <a href="/books/3.html">商品3</a> <a href="http://www.microsoft.com.tw/"><img src="mstw.jpg" alt="" /></a>
超鏈結到EMAIL <a href="mailto:shwang@szmc.edu.tw">e-mail</a> <a href=" mailto:shwang@szmc.edu.tw?subject=hello!">…</a> 勿使用存放於Server上之絕對路徑檔案 (File)，否則易造成錯誤連結，找不到網頁 例如"file:///C|/windows/"
目標(target)屬性 _blank （開新視窗） _parent （開在父層視窗框架） _self （開在同一視窗框架） _top <a href=“http://www.szmc.edu.tw/” target=“_blank”>樹人醫專</a> _blank （開新視窗） _parent （開在父層視窗框架） _self （開在同一視窗框架） _top
表格 (Table)
<table border="1"> <tr> <caption>人事資料</caption> <tr> <th>姓名</th> <th>年齡</th> <th>電話</th> </tr> <td>李大華</td> <td>25</td> <td>12345678</td> <td>陳小明</td> <td>21</td> <td>23456789</td> </table>
完整之網頁完成範例
檢視完整網頁範例之原始碼
The End