HTML 文件

資料庫程式設計 – PHP+MySQL ：第三章 HTML 語言 下一頁

第三章 HTML 語言

3-1 網頁前端設計與 HTML

內容：

3-1-1 HTML 常用標籤

3-1-2 HTML 簡介

3-1-3 製作 HTML 文件

在網頁系統的製作方面可區分為前端設計與後端設計，前端網頁設計係利用『瀏覽器』執行設計內容再顯示出來，設計網頁工具有 HTML、CSS、JavaScript、JQuery、、等等語言。後端設計係由『網頁伺服器』執行其設計來製作 HTML 文件，最普遍使用工具是 PHP 程式。

本書並不打算詳細介紹製作前端網頁的製作方法，它是另外一門課程，如果再混擾於課程內，且會失去本課程的重心。但還是要透過網頁介面存取資料庫，因此，本書除了介紹一些常用的 HTML 語法，重點在『表單』與『表格』製作方面。即是透過『表單』來查詢資料庫系統，又系統回應查詢結果大多以『表格』方式，因此須利用 HTML 的『表格』製作方法，將其顯示於網頁上。本章僅介紹表格製作方法，至於表單於第 # 章介紹。

3-1-1 HTML 常用標籤

我們並不打算詳細介紹 HTML 標籤(太多了)，僅介紹較常用或後面章節會用到的部分。

標籤	功能
<! --- 注解 -->	注解
<html>… </html>	Html 文件
<head>… </head>	文件前頭
<title> … </title>	文件標頭
<body> … </body>	文件內容
<b> … </b>	粗體字
<u> … </u>	字體底線
<i> … /i>	斜體字
<font face=”標楷字”> …</font>	指定字體
<font size=+3> … </font>	放大(縮小)字體
<font color=”#FF0000”> … </font>	字體顏色
<ul type=”disc”> <li>… </li> </ul>	無序項目排列(含個別項目標籤)
<ol type=”1”> <li>… </li> </ol>	有序項目排列(含個別項目標籤)
<p> … </p>	文件內容分段
<center> … </center>	對落處理 – 置中
<div align=”center”> … </div>	區段段落處理 – 置中
<div align=”left”> … </div>	區段段落處理 - 靠左
<img src=”圖片來源”>	插入圖片
<a href=”連結位置”> 連結名稱 </a>	超連結(文字或圖片)
<table width=”值” heigh=”值” border=”值”> <tr> <td> … </td> <td> … </td> </tr> <tr> …. </tr>	表格宣告
	插入第一列
	插入第一個儲存格
	插入第二個儲存格
	結束第一列
	插入第二列

3-1-2 HTML 簡介

超文字標籤語言(HyperText Markup Language, HTML)是描述靜態文件表示方法，而它並不是一個程式，只是插在文件中的標示碼( code )，這些碼可以控制我們的瀏覽器要怎樣把文件顯示出來，它可控制字體的大小，插入連結或圖像。為了讓文件多采多姿，我們設定許多標示碼來顯示不同的樣式，這些碼統稱為『標籤』(Markup)。

一個HTML檔稱為HTML document，存檔的副檔名為htm或html，編寫工具有很多種，最原始的方法是用windows內的記事本或各種文書編輯軟體，編寫完成後記得儲存成*.htm或*.html 即可。

一份標準的HTML文件是由多個元素所組成的，每個元素由標籤(Tag)以及文件內容所組成。文件內容可以是文字、圖形、甚至是影像、聲音等等。一個開始標籤(< >)是由一個小於符號(<)和一個大於符號(>)所構成的一個起始標籤中加一道斜線"/"就構成了結束標籤(</>)，而一對標籤是由一個起始標籤和一個結束標籤所構成的。

3-1-3 製作HTML 文件

製作 HTML 步驟如下：(文件如下)

<head>

</head>

<body>

文件內容寫在這裡 !!

各種標誌符號 < … > 也寫在這裡

</body>

</html>

(1) 步驟 1：利用記事本製作文件(如Example_1.html)後儲存於 C://AppServ/WWW 目錄下。