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

 

3-2 HTML 結構

內容:

  • 3-2-1 HTML 文件結構

  • 3-2-2 程式範例:展示唐詩

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

3-2-1 HTML 文件結構

3-1 HTML 文件格式

3-1HTML 文件的基本格式,說明如下:

(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”)

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8” />

<title>Ex3_1.html</title>

</head>

<body>

   <center> <BR>

           <BR>

           <BR>

   </center>

</body>

</html>

(D) 程式說明:

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

(2) <BR>:換行。

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) 每改變一次文字參數需用 <font> …</font> 區塊包起來。

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

(B) 程式說明:

(1) <font face=”標楷體” …>  … </font>:該區域內文字顯是參數。

(2) <p>   </p>:文字段落,會強迫換行,相當於 <BR> 的功能。

(3) <font ..><font ..> ….</font></font>:字體設定參數內,可以再重新設定,成為巢狀的設定。

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8” />

<title>Ex3_2.html</title>

</head>

<body>

    <font face=”標楷體” size=”8” color=”red”>翻轉教室公佈事項</font><BR>

    <font face=”標楷體” size=”5”>

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

      <p><font color=”blue”>

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

      </font></p>

      <p><font color=”darkred”>

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

       </font></p>

      <p><font color=”green”>

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

      </font></p>

      <p><font color=”black”>

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

      </font></p>

      <p><font color=”red”>

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

      </font></p>

</font>

</body>

</html>

(B) 程式說明:

(1) <font face=”標楷體” …>  … </font>:該區域內文字顯是參數。

(2) <p>   </p>:文字段落,會強迫換行,相當於 <BR> 的功能。

(3) <font ..><font ..> ….</font></font>:字體設定參數內,可以再重新設定,成為巢狀的設定。

主講人:粘添壽博士

course_db 關聯圖

 

資料庫程式設計 - PHP+MySQL: