HTML 結構

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

3-2 HTML 結構

內容：

3-2-1 HTML 文件結構

3-2-2 程式範例：展示唐詩

3-2-3 程式範例：製作公告文件

3-2-1 HTML 文件結構

圖 3-1 HTML 文件格式

圖 3-1是HTML 文件的基本格式，說明如下：

(1) <html xmls=”http://www.w3.org/199/xtm”> </html>：標示此範圍內是 HTML 文件，其中 xmls 參數是指定文件格式的版本。

(2) <head> …</head>：網頁的前頭。這區域裡面指定本文件的相關參數。

(3) <meta … />：網頁前頭內指定本文件的規範內容。

(4) <title> … </title>：網頁標頭。此區段文字會出現在瀏覽器網頁的標頭上。

(5) <body> … </body>：網頁內容。欲顯示在網頁內的文字、格式、、等等，都在這區塊內編寫。

3-2-2 程式範例：展示唐詩

(A) 網頁功能： Ex3_1.html

吾人需要製作一只展示唐詩『遊子吟』的網頁，期望期格式如下：

(B) 製作技巧：

依照題目需求，我們需要將遊子吟詩句張貼於網頁的中央，無論網頁大小如何改變，他都會在中央，因此，我們必須利用 <center>與</center> 標示語句放在該詩句的前後。

(C) 程式範例：(利用記事本輸入，並儲存為 “Ex3_1.html”)

<head>

</head>

<body>

<center> 慈母手中線，遊子身上衣。

臨行密密縫，意恐遲遲歸。

誰言寸草心，報得三春暉？

</center>

</body>

</html>

(D) 程式說明：

(1) <center> … </center>：區段內文字放置於網頁的中央。

(2) ：換行。

3-2-3 程式範例：製作公告文件

(A) 網頁功能： Ex3_2.html

吾人需要將一份公告在網頁上顯示，請您幫他製作出來，內容與格式如下：

(B) 製作技巧：

這份文件乍看起來，要用 HTML 來編寫好像很困難的樣子，但又利用 Word 來製作就非常簡單，之間差異在哪裡？原因是我們用 Word 製作時，Word 系統會自動幫我們插入標示符號，但用 HTML 製作時，必須自行輸入這些符號，就會感覺很複雜。其實，也有 HTML 文件製作工具會自動幫我們插入這些標示符號，這就是 Frontpage 或 Dreamweaver 等工具。但我們要利用 HTML 來編寫網頁資料庫程式，所以還是需要認識一些它的特性。我們可以將上述文件特性歸納下來，比較好設計，如下：

(1) 所有字體皆是『標楷題』(face=”標楷體”)。

(2) 第一行字體較大，大約是 8 號字(size=”8”)。

(3) 第 2~7 行以不同顏色顯示(color=”red”、”blue”、”black”..)。

(4) 每改變一次文字參數需用 … 區塊包起來。

(5) 字體顏色可參考：http://www.w3schools.com/tags/ref_colornames.asp網站，或用 google 查詢。

(B) 程式說明：

(1) … ：該區域內文字顯是參數。

(2) ：文字段落，會強迫換行，相當於 的功能。

(3) ….：字體設定參數內，可以再重新設定，成為巢狀的設定。

(A) 程式範例：(利用記事本輸入，並儲存為 “Ex3_2.html”)

<head>

</head>

<body>

翻轉教室公佈事項

(1) 上課前一天請自行收視 youtube 課程說明。

(2) 課堂上播放每單元 youtube 課程內容，以不超過 10 分鐘為限。

(3) 課堂上學生輸入程式範例練習，有疑問隨時提問老師。

(4) youtube 播放挑戰題的製作技巧後，請學生自行挑戰，有疑問立即提問老師。

(5) 下課之前，學生必須將程式範例與挑戰題的製作結果上傳給老師。

(6) 學生每次上課至少練習 4~5 題程式，一個學期練習 70 題以上，一定會寫程式。

</body>

</html>

(B) 程式說明：

(1) … ：該區域內文字顯是參數。

(2) ：文字段落，會強迫換行，相當於 的功能。

(3) ….：字體設定參數內，可以再重新設定，成為巢狀的設定。

翻轉工作室：粘添壽

course_db 關聯圖

資料庫程式設計：

第一章系統環境架設
第二章資料庫簡介與 course_db
第三章 HTML 語言
- 3-1 網頁前端設計與 HTML
- 3-2 HTML 結構
- 3-3 表格製作
- 3-4 自我挑戰

翻轉電子書系列：