Ch02 HTML設計實務 網頁程式設計
大綱 HTML基礎 HTML基本架構 HTML文字編排
什麼是HTML Tim Berners-Lee在1991年建立HTML，1993年HTML1.0版由Berners-Lee和Connolly完成，經過3.2版到目前的最新版HTML 4.0x版。 HTML是一種文件的編排語言，擁有一組預設的標籤集，並不能定義標示文件的標籤。 標籤:使用一般字串的符號,可以在欲編排文字內容標示使用的編排格式 屬性:每一個標籤可以有一些屬性定義文字內容的細部編排
HTML的範例 <html> <head> <title>HTML範例</title> <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>
什麼是XML XML是eXtensible Markup Language的縮寫 與HTML一樣，由標籤所組成的網頁語言 標籤必須以成對型式出現 元素名稱的英文字母大小寫會被視為不同 XML讓電腦之間的通訊更容易 在網際網路的資料交換，XML是目前最通行的方式 Microsoft Office可以將資料儲存成XML格式 使用在手機通訊的WAP協定上的WML，是XML的一種應用
XML範例 <?xml version="1.0" encoding="Big5"?> <myRecord> <customer> <name> ABC Books </name> <order> <book>快快與慢慢</book> <price>250</price> </order> <book>蓋房子</book> <book>小花貓的房間</book> <price>200</price> </customer> <customer> <name> 天下 </name> <order> <book>邊界</book> <price>150</price> </order> <book>青蛙與蟾蜍</book> <price>100</price> </customer> </myRecord>
什麼是XHTML HTML在4.0版之後，即由XHTML所取代 XHTML是將HTML與XML結合所產生 <p>Ch02</p> <hr></hr> 或<hr /> 元素與屬性名稱必須是小寫的英文字母 屬性的數值必須使用雙引號或單引號包含起來 <h1 align=“center”> 屬性一定要指定數值 <input type=“checkbox” checked=“checked” /> XHTML限定只能使用id，不能使用name屬性 屬性的數值中不可以有&字元
瀏覽程式檢視HTML原始碼 HTML編排的文件需要使用瀏覽程式才能顯示編排的結果。
檢視HTML原始碼
HTML原始碼(以記事本)
瀏覽程式預覽HTML文件 HTML標籤建立的HTML文件只是份單純的文字檔案，需要使用瀏覽程式(例如:IE)才能將編排的結果顯示在使用者的面前。
HTML文件的架構 HTML文件的基本架構可以分為數個區塊，標示文件的不同用途，HTML文件的架構分為三個區塊，如下表所示：
HTML文件的架構 <html> 標示著一份HTML文件 <head> HTML文件的標題 表頭區… 表頭區… </head> <body>HTML文件內容 本體區… </body> </html>
HTML撰寫的注意事項 HTML文件是由標籤組成。 HTML標籤是一種巢狀標籤。 HTML標籤指令並不分英文字母的大小寫。 可以“或‘符號括起來 HTML文件的換行。 [Enter]鍵(換行作用)在瀏覽程式中無作用,要使用<br> HTML文件的連續空白。 連續空白會簡化成為一個空白 不同的瀏覽程式支援不同標籤的格式。 註解文字。<!-- … -->
標題文字 HTML文件在瀏覽程式視窗的標題列可以顯示一列標題文字，這個名稱就是瀏覽程式「我的最愛」功能表的書籤名稱，其基本語法如下所示： <title>....</title> 上述標籤是位於<head>和</head>區塊
文件色彩 <body>的區塊標籤擁有屬性可以指定整份HTML文件的文字和背景色彩，其基本語法如下所示： 文字色彩：<body text=value> 背景色彩：<body bgcolor=value>
文字編排 標題文字 字體變化 字型標籤和色彩 <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屬性：色彩值或色彩名稱。
文字編排 換行符號 段落編排 保留段落編排格式 置中對齊 插入水平線 設定區塊範圍 <br /> <p align=left | center | right> … </p> align屬性：可以分別將段落向左、置中和向右對齊。 保留段落編排格式 <pre>....</pre> 置中對齊 <center>....</center> 插入水平線 <hr /> 設定區塊範圍 <div>
文字編排 項目符號與編號 項目編號：<ol> 項目符號：<ul> <li>項目1 ….. </ol> 項目符號：<ul> <li>項目 </ul>
插入圖片 <img src="filename" width=value height=value align=left | right> src屬性：圖片檔案名稱和路徑，可以使用gif、jpg或png格式的圖片檔。 width屬性：圖片的寬度，可以是點數或百分比(影像的寬度佔螢幕的百分之幾)。 height屬性：圖片的高度，可以是點數或百分比。 align屬性：圖片和文字在同一列顯示的編排位置。 設定網頁的背景圖片 <body background=“cake.jpg”>
建立超連結 <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:wangdaj@mail.nkmu.edu.tw>寫信給我</a>
建立表格 表格標籤: <table border=value> border屬性：顯示表格框線的寬度 <tr> <td>........</td> ……. </tr> <td>.........</td> …….. …… </table> border屬性：顯示表格框線的寬度
視窗分割 左右分割: <frameset cols="value,value,"> <frame> </frameset> cols屬性：定義左右分割框架的大小，使用「,」符號分隔的每一個值為各區域的大小，可以使用百分比或點數，屬性的每一個值對應一個<frame>標籤。 <frame>標籤：定義框架內容，也就是顯示的HTML文件。