Ch02 HTML設計實務 網頁程式設計 大綱 • HTML基礎 • HTML基本架構 • HTML文字編排 2 什麼是HTML • Tim Berners-Lee在1991年建立HTML，1993 年HTML1.0版由Berners-Lee和Connolly完成， 經過3.2版到目前的最新版HTML 4.0x版。 • HTML是一種文件的編排語言，擁有一組預 設的標籤集，並不能定義標示文件的標籤。 – 標籤:使用一般字串的符號,可以在欲編排文字內 容標示使用的編排格式 – 屬性:每一個標籤可以有一些屬性定義文字內容 的細部編排 3 HTML的範例 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. <html> <head> <title>HTML範例</title> </head> <body> <p align="center"> 弟子規<br> <font size="1" color="#FF0000">弟子規,</font><br> <font size="2" color="#00FF00">聖人訓,</font><br> <font size="3" color="#0000FF">首孝弟,</font><br> <font size="4" color="#55FF00">次謹信,</font><br> <font size="5" color="#0055FF">泛愛眾,</font><br> <font size="6" color="#FF0055">而親仁,</font><br> <font size="7" color="#5500FF">有餘力,</font><br> <font size="7" color="#00FF55">則學文.</font><br> </body> </html> 4 什麼是XML • • • • • • XML是eXtensible Markup Language的縮寫 與HTML一樣，由標籤所組成的網頁語言 標籤必須以成對型式出現 元素名稱的英文字母大小寫會被視為不同 XML讓電腦之間的通訊更容易 在網際網路的資料交換，XML是目前最通行的方 式 • Microsoft Office可以將資料儲存成XML格式 • 使用在手機通訊的WAP協定上的WML，是XML的 一種應用 5 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. XML範例 <?xml version="1.0" encoding="Big5"?> <myRecord> <customer> <name> ABC Books </name> <order> <book>快快與慢慢</book> <price>250</price> </order> <order> <book>蓋房子</book> <price>250</price> </order> <order> <book>小花貓的房間</book> <price>200</price> </order> </customer> 20. <customer> 21. <name> 22. 天下 23. </name> 24. <order> 25. <book>邊界</book> 26. <price>150</price> 27. </order> 28. <order> 29. <book>青蛙與蟾蜍</book> 30. <price>100</price> 31. </order> 32. </customer> 33. </myRecord> 6 什麼是XHTML • HTML在4.0版之後，即由XHTML所取代 • XHTML是將HTML與XML結合所產生 • XHTML所有元素都必須有開始標籤、內容、結束標籤 – <p>Ch02</p> – <hr></hr> 或<hr /> • 元素與屬性名稱必須是小寫的英文字母 • 屬性的數值必須使用雙引號或單引號包含起來 – <h1 align=“center”> • 屬性一定要指定數值 – <input type=“checkbox” checked=“checked” /> • XHTML限定只能使用id，不能使用name屬性 • 屬性的數值中不可以有&字元 7 瀏覽程式檢視HTML原始碼 • HTML編排的文件需要使用瀏覽程式才能顯 示編排的結果。 • 瀏覽程式是一個HTML標籤的解譯程式，可 以顯示一份HTML文件。 • 瀏覽程式可以檢視網頁的原始檔的HTML標 籤。 8 檢視HTML原始碼 9 HTML原始碼(以記事本) 10 瀏覽程式預覽HTML文件 • HTML標籤建立的HTML文件只是份單純的文字檔 案，需要使用瀏覽程式(例如:IE)才能將編排的結 果顯示在使用者的面前。 11 HTML文件的架構 • HTML文件的基本架構可以分為數個區塊， 標示文件的不同用途，HTML文件的架構分 為三個區塊，如下表所示： 區塊 <html> …. </html> <head> …. </head> <body> … </body> 說明 HTML 文件的內容使用<html>標籤包圍，在這標籤間的內容 告訴瀏覽程式這是一份 HTML 文件，內含<head>和<body>兩 大區塊 HTML 文件的標題區塊，定義文件標題、文件網址和文件本 身的相關定義 HTML 文件實際的編排內容是放在這個區塊 12 HTML文件的架構 <html> 標示著一份HTML文件 <head> HTML文件的標題 表頭區… </head> <body>HTML文件內容 本體區… </body> </html> 13 HTML撰寫的注意事項 • HTML文件是由標籤組成。 • HTML標籤是一種巢狀標籤。 • HTML標籤指令並不分英文字母的大小寫。 • HTML標籤能夠擁有數個屬性值。 – 可以“或‘符號括起來 • HTML文件的換行。 – [Enter]鍵(換行作用)在瀏覽程式中無作用,要使用<br> • HTML文件的連續空白。 – 連續空白會簡化成為一個空白 • 不同的瀏覽程式支援不同標籤的格式。 • 註解文字。<!-- … --> 14 標題文字 • HTML文件在瀏覽程式視窗的標題列可以顯 示一列標題文字，這個名稱就是瀏覽程式 「我的最愛」功能表的書籤名稱，其基本 語法如下所示： <title>....</title> • 上述標籤是位於<head>和</head>區塊 15 文件色彩 • <body>的區塊標籤擁有屬性可以指定整份 HTML文件的文字和背景色彩，其基本語法 如下所示： – 文字色彩：<body text=value> – 背景色彩：<body bgcolor=value> 色彩 黑 白 紅 綠 藍 黃 色彩名稱 black white red green blue yellow 色彩值 #000000 #ffffff #ff0000 #00ff00 #0000ff #ffff00 16 文字編排 • 標題文字 – <hn>....</hn> ,n=1 ~~ 6 數字愈大,字愈小 • 字體變化 – – – – – 粗體字：<b>...</b> 斜體字：<i>...</i> 底線字：<u> … </u> (此標籤從HTML4.0開始即被取消) 上標：<sup>…</sup> 下標：<sub>…</sub> • 字型標籤和色彩 – <font face="font_name" size=number color=value >....</font> – face屬性：字型名稱，如果不只一個請使用「,」分隔，文字內容可以使用 這些字型中的任一個，如果指定的字型不存在，就使用預設字型。 – size屬性：為1~7的數字，也可以使用+或-號，表示比預設尺寸大幾級或少 幾級，數字愈大，尺寸愈大 – color屬性：色彩值或色彩名稱。 17 文字編排 • 換行符號 – <br /> • 段落編排 – <p align=left | center | right> … </p> – align屬性：可以分別將段落向左、置中和向右對齊。 • 保留段落編排格式 – <pre>....</pre> • 置中對齊 – <center>....</center> • 插入水平線 – <hr /> • 設定區塊範圍 – <div> 18 文字編排 • 項目符號與編號 – 項目編號：<ol> <li>項目1 <li>項目2 ….. ….. </ol> – 項目符號：<ul> <li>項目 <li>項目 ….. ….. </ul> 19 插入圖片 • <img src="filename" width=value height=value align=left | right> – src屬性：圖片檔案名稱和路徑，可以使用gif、jpg或png 格式的圖片檔。 – width屬性：圖片的寬度，可以是點數或百分比(影像的 寬度佔螢幕的百分之幾)。 – height屬性：圖片的高度，可以是點數或百分比。 – align屬性：圖片和文字在同一列顯示的編排位置。 • 設定網頁的背景圖片 – <body background=“cake.jpg”> 20 建立超連結 • <a href="protocol://domain/file#bookmark" target="frame_name"> … </a> – 例如:<a href=http://www.nkmu.edu.tw>高海大</a> – href屬性：設定超連結的目的地。 – target屬性：設定超連結目的地HTML文件顯示的框架名稱或視窗。 • 建立影像的超連結 <a href=“prev.html”> <img src=“上一頁.gif” width=“64” height=“32” alt=“上一頁” /> </a> • 使用超連結來寄電子郵件 <a href=mailto:[email protected]>寫信給我</a> 21 建立表格 • 表格標籤: 表格標籤 <table> …. </table> <tr> …. </tr> <td> …. </td> 說明 建立表格，所有的其它標籤都需要在此標籤中 定義表格的一列 定義一列有多少個儲存格 <table border=value> border屬性：顯示表格框線 的寬度 <tr> <td>........</td> ……. </tr> <tr> <td>.........</td> …….. </tr> …… …… </table> 22 視窗分割 • 左右分割: <frameset cols="value,value,"> <frame> <frame> </frameset> •cols屬性：定義左右分割框架的大小，使用「,」符 號分隔的每一個值為各區域的大小，可以使用百分比 或點數，屬性的每一個值對應一個<frame>標籤。 •<frame>標籤：定義框架內容，也就是顯示的 HTML文件。 23
© Copyright 2024 ExpyDoc
