PHP5與MySQL5 入門學習指南 凱文瑞克 著 第 5 章 HTML基礎
本章大綱 5-1 HTML簡介 5-2 HTML 基本架構 5-3 基本標籤與屬性 5-4 表格製作 5-5 表單製作 問題與討論
5-1 HTML簡介 在瀏覽器中所看到的各種內容我們稱之為”網頁” (webpage)。一個網站則是由許多網頁所建構而成。 HTML 文件檔 HTML 是原文 HyperText Markup Language 的縮寫, 中文的解釋是『超文字檔案標記語言』。 HTML 是一種標記語言 標籤可分成兩大類, 一種是屬於成對的標籤, 另一種則是單一的標籤。
由瀏覽器所看到的內容 利用”檢視原始檔案”所看到的內容
5-2 HTML 基本架構 1: <HTML> 2: <HEAD> 3: <TITLE>HTML我的測試網頁</TITLE> 4: </HEAD> 5: <BODY> 6: Hi ! 這是我第一個測試網頁 <BR> 7: 歡迎各位加入網際網路的大家庭 8: </BODY> 9: </HTML> 在 HTML 的架構中必須以標籤 <HTML> 開始, 以標籤 </HTML> 作為結束。這個標籤是來描述整個網頁的開始和結束。
標籤的功能 <HTML></HTML> :HTML 文件的開始與結束。 <HEAD></HEAD> :網頁的文件資料。 <TITLE></TITLE> :顯示網頁的標題列文字。 <BODY></BODY> :在 BODY 標籤之間所有的內容才是要顯示在網頁上的內容。 1: <HTML> 2: <HEAD> 3: <TITLE>HTML我的測試網頁</TITLE> 4: </HEAD> 5: <BODY> 6: Hi ! 這是我第一個測試網頁 <BR> 7: 歡迎各位加入網際網路的大家庭 8: </BODY> 9: </HTML>
5-3 基本標籤與屬性 5-3-1 基本標籤 5-3-2 文字標籤
5-3-1 基本標籤 <BR> : 分行 1: <HTML> 2: <TITLE>BR測試</TITLE> 3: <BODY> 4: 第一種寫法: 我寫了一行文字 5: 我也換行寫第二行。 6: <P> 7: 第二種寫法: 這是第一行文字<BR> 8: 這是第二行文字。 9: <P> 10: 第三種寫法: 這是第一行文字<BR>這也是第一行文字。 11: </BODY> 12: </HTML>
<PRE> : 排版格式 11: <PRE> 12: 例三 : 13: 靜夜思 14: 床前明月光, 1: <HTML> 2: <TITLE>BR_HR與PRE</TITLE> 3: <BODY> 4: 例一 :<BR> 5: 靜夜思床前明月光, 疑是地上霜, 舉頭望明月, 低頭思故鄉。 6: <HR> 7: 例二 :<BR> 8: 靜夜思<BR>床前明月光, <BR>疑是地上霜, <BR> 9: 舉頭望明月, <BR>低頭思故鄉。<BR> 10: <HR> 11: <PRE> 12: 例三 : 13: 靜夜思 14: 床前明月光, 15: 疑是地上霜, 16: 舉頭望明月, 17: 低頭思故鄉。 18: </PRE> 19: </BODY> 20: </HTML>
<HR> : 分隔線 1: <HTML> 2: <TITLE>BR_HR與PRE</TITLE> 3: <BODY> 4: 例一 :<BR> 5: 靜夜思床前明月光, 疑是地上霜, 舉頭望明月, 低頭思故鄉。 6: <HR> 7: 例二 :<BR> 8: 靜夜思<BR>床前明月光, <BR>疑是地上霜, <BR> 9: 舉頭望明月, <BR>低頭思故鄉。<BR> 10: <HR> 11: <PRE> 12: 例三 : 13: 靜夜思 14: 床前明月光, 15: 疑是地上霜, 16: 舉頭望明月, 17: 低頭思故鄉。 18: </PRE> 19: </BODY> 20: </HTML>
<P> : 分段標籤 1: <HTML> 2: <TITLE>BR與P標籤</HTML> 3: <BODY> 4: 利用BR標籤<BR> 5: 換一行顯示 6: <HR> 7: 利用P標籤<P> 8: 換一段顯示 9: </BODY> 10: </HTML>
<CENTER></CENTER> : 置中 1: <HTML> 2: <TITLE>BR_HR與PRE</TITLE> 3: <BODY> <CENTER> 4: 例一 :<BR> 5: 靜夜思床前明月光, 疑是地上霜, 舉頭望明月, 低頭思故鄉。 6: <HR> 7: 例二 :<BR> 8: 靜夜思<BR>床前明月光, <BR>疑是地上霜, <BR> 9: 舉頭望明月, <BR>低頭思故鄉。<BR> </CENTER> 10: <HR> 11: <PRE> 12: 例三 : 13: 靜夜思 14: 床前明月光, 15: 疑是地上霜, 16: 舉頭望明月, 17: 低頭思故鄉。 18: </PRE> 19: </BODY> 20: </HTML>
5-3-2 文字標籤 <B></B> : 粗體字 凡是在這個標籤之間的文字都會變成粗體的文字。 <I></I> : 斜體字 凡是在這個標籤之間的文字都會變成斜體的文字。 <Hn></Hn> : 字體的大小 n 是一個介於 1 到 6 之間的數字, 數字越小則字體越大。
文字標籤範例 1: <HTML> 2: <TITLE>文字變化</TITLE> 3: <BODY> 4: <PRE> 5: 一般文字 6: <B>粗體文字</B> 7: <I>斜體文字</I> 8: <B><I>粗體加斜體文字</I></B> 9: <H1>H1字體大小</H1> 10: <H2>H2字體大小</H2> 11: <H3>H3字體大小</H3> 12: <H4>H4字體大小</H4> 13: <H5>H5字體大小</H5> 14: <H6>H6字體大小</H6> 15: </PRE> 16: </BODY> 17: </HTML>
<A></A> : 超連結 超連結標籤其格式如下 <A HREF=”http://欲連接到網址”>網站的說明文字</A> 由HREF所指定的網址就是滑鼠點選後瀏覽器連結的位址. 1: <HTML> 2: <TITLE>超連結範例</TITLE> 3: <BODY> 4: <A HREF=”http://www.flag.com.tw>旗標資訊股份有限公司</A><BR> 5: <A HREF=”ftp://ftp.tku.edu.tw”>淡江大學檔案下載網站</A><BR> 6: <A HREF=”mailto:webmaster.flag.com.tw”>旗標資訊公司電子郵件信箱</A> 7: </BODY> 8: </HTML>
5-4 表格製作 表格的功能除了製作一般文件的表格以外, 在千變萬化的網頁中, 如何能讓網頁的內容能夠更整齊, 更能夠讓網頁網頁內容做不同的區分, 設計師常常會使用表格的方式讓網頁更能夠發揮特色。
表格範例 1: <HTML> 2: <TITLE>表格範例</TITLE> 3: <BODY> 4: <TABLE border=3> 5: <CAPTION>表格一標題</CAPTOPN> 6: <TR><TH width=100>編 號</TH><TH width=200> 項 目</TH></TR> 7: <TR><TD>1</TD><TD>HTML的應用</TD></TR> 8: <TR><TD>2</TD><TD>APACHE SERVER架設</TD> </TR> 9: <TR><TD>3</TD><TD>PHP＋MySQL</TD></TR> 10: </TABLE> 11: <BR><BR> 12: <TABLE border=0> 13: <CAPTION>表格二標題</CAPTION> 14: <TR><TH width=100>編 號</TH><TH width=200>項 目</TH></TR> 15: <TR bgcolor=#ffff00><TD align=left>1</TD><TD>HTML的應用</TD></TR> 16: <TR><TD align=center>2</TD><TD>APACHE SERVER架設</TD></TR> 17: <TR bgcolor=#ffff00><TD align=right>3</TD> <TD>PHP＋MySQL</TD></TR> 18: </TABLE> 19: </BODY> 20: </HTML>
表格的基本架構如下 <TABLE> |----<CAPTION> |----<TR> ------------------------</TR> |--<TD> … </TD> TD TD TD TR <TD>…..</TD> /TR TR /TR
表格標籤 <TABLE></TABLE> : 表格標籤, 表格的宣告及屬性的設定。 <CAPTION></CAPTION> : 表格標題, 在標籤之間的文字都會被視為表格的標題列。 <TR></TR> : 表格中的一列, 定義表格中的一列。 <TD></TD> : 欄位標籤, 定義 1 個欄位。 <TH></TH> : 標題欄位標籤, <TH> 標籤的功能與 <TD> 是相同的, 唯一不同的是 <TH> 適用於標題欄位, 例如範例 5-8 第 6 行定義二個標題欄位, 所以欄位資料字型都是以粗體並且置於欄位中央表示。
表格範例 1: <HTML> 2: <TITLE>表格範例</TITLE> 3: <BODY> 4: <TABLE border=3> 5: <TR><TD>第一列第1欄</TD><TD>第一列第2欄</TD><TD>第一列第3欄</TD</TR> 6: <TR><TD>第二列第1欄</TD><TD>第二列第2欄</TD><TD>第二列第3欄</TD</TR> 7: <TR><TD>第三列第1欄</TD><TD>第三列第2欄</TD><TD>第三列第3欄</TD</TR> 8: <TR><TD>第四列第1欄</TD><TD>第四列第2欄</TD><TD>第四列第3欄</TD</TR> 9: </TABLE> 10: </BODY> 11: </HTML>
表格屬性 【border】：框線寬度。 【bgcolor】：背景顏色。顏色的表示是以 RGB 3色的 16 進制為表示方式。 例如 #ff0000 表示紅色, #00ff00 為綠色, #0000ff 為藍色。 【width】：寬度設定。設定表格或欄位的寬度。 寬度設定有二種表示方式, 第一種是以圖素為單位。第二種是以百 分比表示。 【align】：資料位置屬性。設定資料所在的位置。 Align 屬性一共有三個分別是： center : 資料置中顯示 left ：資料靠左顯示 right ：資料靠右顯示
5-5表單製作 全球資訊網不僅僅是由伺服器端單向的顯示網頁給使用者端而已, 更可以和使用者做互動。例如搜尋引擎、電子商務等都必須要由使用者輸入相關的資訊, 再由伺服器端再給予適當的回應, 互動式網頁的製作就顯得相當重要。因此互動式的網頁就必須製作一個使用者介面讓使用者可以做輸入的動作。而伺服器端必須要有一個相對應的程式, 當伺服器獲得使用者所輸入的資料之後加以分析、判斷後在予以適當的回應。為了要能夠讓使用者可以做資料輸入的動作, 我們就必須要使用 HTML 來設計一個輸入的介面, 讓使用者可以輸入相當的資訊以提供伺服器運用。
表單應用 Client 填寫表單 回應表單 Server
表單範例 一個表單是由 <FORM></FORM> 做為開始及結束. 中間所有的輸入內容都會被視為同一組資料的輸入. 1: <HTML> 2: <TITLE>基本表單設計</TITLE> 3: <BODY> 4: <CENTER><B>強力搜尋引擎</B></CENTER> 5: <FORM> 6: 關鍵字 <INPUT TYPE=TEXT NAME=KeyString SIZE=50> 7: <INPUT TYPE=SUBMIT VALUE=" 搜尋 "><P> 8: 關鍵字法則 : 9: <INPUT TYPE=RADIO NAME=rule VALUE="and" checked>AND 10: <INPUT TYPE=RADIO NAME=rule VALUE="or">OR<BR> 11: </FORM> 12: </BODY> 13: </HTML> 一個表單是由 <FORM></FORM> 做為開始及結束. 中間所有的輸入內容都會被視為同一組資料的輸入.
<FORM></FORM> 設定表單。所有的表單內容都必須在這個標籤之間。當資料輸入完畢, 必須將輸入的資料送到伺服器端處理。 表單中就必須說明伺服器的位置以及資料的傳送方式。 ACTION : 設定伺服器的位置。 METHOD : 設定傳送方式
<FORM></FORM> ACTION 屬性設定表單傳送的位置。 <FORM ACTION=”http://abc.def.com.tw/test.php”> 在例子中表單的內容會被送到所指定的伺服器上的 test.php 程式做處理。 METHOD 屬性可以選擇表單傳送的方式 表單傳送的方式有兩種。 第一種方法GET, 他的傳送資料比較少, 一般來說適用於傳送比較少量的資料。在傳送的時候是以參數的方式傳遞。所以可以藉由變數直接取得變數的資料。 第二種方法 POST, 這種傳遞的方式, 可以傳送資料較長的內容傳遞。在伺服器端的程式則必須以標準輸入的方式來取得介面傳入的資料。 例 : <FORM ACTION=”http://abc.def.com.tw” METHOD=GET>
<INPUT> 輸入型態 設定輸入型態。這個標籤設定由瀏覽器輸入各種型態的資料輸入。各資料的型態是由型態的標籤來決定。 <INPUT TYPE=輸入資料形式 NAME=”資料名稱” VALUE=”設定值”> 1: <HTML> 2: <TITLE>基本表單設計</TITLE> 3: <BODY> 4: <CENTER><B>強力搜尋引擎</B></CENTER> 5: <FORM> 6: 關鍵字 <INPUT TYPE=TEXT NAME=KeyString SIZE=50> 7: <INPUT TYPE=SUBMIT VALUE=" 搜尋 "><P> 8: 關鍵字法則 : 9: <INPUT TYPE=RADIO NAME=rule VALUE="and" checked>AND 10: <INPUT TYPE=RADIO NAME=rule VALUE="or">OR<BR> 11: </FORM> 12: </BODY> 13: </HTML>
<INPUT> 屬性 NAME: 設定每一個資料輸入的名稱, 因為所有的資料必須放入伺服器端, 所以我們必須設定一個名稱一代表輸入的資料。 例 : <INPUT TYPE = TEXT NAME=person > 輸入的型態是一種文字型態, 而名稱為 person。 如果在瀏覽器中我們輸入了一個 ”john”, 則瀏覽器將會接收到一個名稱為 person 的變數, 並且其內容為 “john”。
點選AND選項, 會以變數 rule=‘and’傳給伺服器 <INPUT> 屬性 VALUE：設定資料的設定值。當資料輸入或被點選後傳回伺服器, 為了辨別在輸入介面中那一個選擇鈕被點選, 因此我們可以使用設定值加以判斷。 例如在下面的範例敘述中, 我們必須判斷 RADIO 的關鍵字法則是那一個被點選, 所以我們分別了設定兩個 RADIO的VALUE 值分別為 and 及 or。由這兩個值我們可以很輕易的在 rule 的回傳值中判定使用者的選擇是那一個。 9: <INPUT TYPE=RADIO NAME=rule VALUE="and" checked>AND 10: <INPUT TYPE=RADIO NAME=rule VALUE="or">OR<BR> 點選AND選項, 會以變數 rule=‘and’傳給伺服器
<INPUT> 屬性 TYPE : 設定資料輸入的形式, 分別有 文字輸入欄 (TEXT) 密碼欄(PASSWORD) 單一選擇鈕 (RADIO) 多重選擇鈕 (CHECKBOX) 按鈕 (BUTTON)
<INPUT> 屬性 TYPE:資料輸入的形式 文字輸入欄(TEXT)：顧名思義可以輸入文字資料。同時可配合 VALUE, SIZE 及MAXLENGTH 三個屬性。 SIZE可以設定顯示在瀏覽器的文字框長度。 MAXLENGTH 來限定輸入文字串的最大長度。 VALUE則是顯示預先顯示在文字欄位的文字。
<INPUT TYPE=TEXT SIZE=20 NAME=K> 文字框長度為 20 個字, 沒有限制輸入文字長度, 資料名稱為 K <INPUT TYPE=TEXT SIZE=20 MAXLENGTH=30 NAME=P> 文字框長度為 20 個字, 輸入的文字最多為 30 個字, 資料名稱為 P <INPUT TYPE=TEXT SIZE=10 VALUE=”請輸入姓名” NAME=YourName> 文字框長度為10個字, 沒有限制輸入文字長度, 文字框中顯示提示文字”請輸入姓名” , 資料名稱為 YourName
<INPUT> 屬性 TYPE:資料輸入的形式 密碼欄(PASSWORD)：在網路中常常需要確認身份, 最簡單的方式就是利用身份及密碼來確認使用者身份是否符合。 密碼欄的外觀和文字輸入欄相同, 可是當密碼欄輸入任何文字時都會以”*” 顯示出來。 例: <INPUT TYPE=PASSWORD NAME=MyPassword> 以 MyPassword 為資料變數名稱將使用者輸入的密碼傳回伺服器.
<INPUT> 屬性 TYPE:資料輸入的形式 單一選擇鈕：是在多個選擇中只能夠點選其中一項選擇。 每一個單一選擇鈕都有一個名稱, 在相同的名稱中只能夠選擇其中一個值作為名稱的值。 例: <INPUT TYPE=RADIO NAME=EDUCATION VALUE=”高中”>高中 <INPUT TYPE=RADIO NAME=EDUCATION VALUE=”大學”>大學 <INPUT TYPE=RADIO NAME=EDUCAITON VALUE=”研究所”>研究所 NAME 屬性為 EDUCATION 。也就是說, EDUCATION是三選一。如果點選大學則傳回EDUCATION=大學。
<INPUT> 屬性 TYPE:資料輸入的形式 多重選擇鈕：是在多個選擇中可以點選一個以上的選擇項。 選擇鈕可以用在複選的選項, 例如選擇嗜好、喜愛的食物、選購的物品等。 例: <INPUT TYPE=CHECKBOX NAME=C1 CHECKED>麵包 <INPUT TYPE=CHECKBOX NMAE=C2>漢堡 <INPUT TYPE=CHECKBOX NAME=C3>薯條 表示有 3 項選項, 可以同時選取 1~3 項. 第 1 欄中加註 CHECKED 屬性表示麵包為預選.也就是說網頁一開始便在麵包選項先打ˇ。
<INPUT> 屬性 TYPE:資料輸入的形式 按鈕可以分為兩種:送出鈕 (SUMIT) , 另一個式重寫鈕 (RESET)。 送出鈕可以使表單的資料送到 ACTION 所指定的程式中。重寫鈕可以清除表單中的資料。為了防止使用者在輸入時有部份的資料輸入錯誤, 此時可以按下重寫鈕可將表單中所有的資料清除重新輸入。
表單的應用 1: <HTML> 2: <TITLE>表單應用</TITLE> 3: <BODY> 4: <B>表單應用</B> 5: <FORM> 6: 姓名 <INPUT TYPE=TEXT NAME=ClientName SIZE=20><P> 7: 密碼 <INPUT TYPE=PASSWORD NAME=Passwd SIZE=10><P> 8: 性別 <INPUT TYPE=RADIO NAME=Sex VALUE="男性">男生 9: <INPUT TYPE=RADIO NAME=Sex VALUE="女性">女生<P> 10: 選讀課程:<BR> 11: <INPUT TYPE=CHECKBOX NAME=Class VALUE="國文">國文<BR> 12: <INPUT TYPE=CHECKBOX NAME=Class VALUE="英文">英文<BR> 13: <INPUT TYPE=CHECKBOX NAME=Class VALUE="數學">數學<P> 14: <INPUT TYPE=SUBMIT VALUE="填完了"> 15: <INPUT TYPE=RESET VALUE="重寫"><BR> 16: </FORM> 17: </BODY> 18: </HTML>
<SELECT>輸入型態 SELECT標籤是一種下拉式的選單, 可以在眾多的選項中選擇一個或多個選項. 格式如下 <SELECT NAME=”資料名稱”> <OPTION VLAUE=”回傳值>選項文字</OPTION> </SELECT> 例: <SELECT NAME=”HOBBY”> <OPTION VLAUE=”1”>騎馬</OPTION> <OPTION VLAUE=”2”>射箭</OPTION> <OPTION VLAUE=”3”>游泳</OPTION> </SELECT> 選擇了游泳則表單會傳回 HOBBY=3
SELECT範例 1: <HTML> 2: <TITLE>SELECT標籤的應用</TITLE> 3: <BODY> 4: <FORM ACTION="test.php" METHOD="GET"> 5: <SELECT NAME="HOBBY1"> 6: <OPTION VLAUE=”1”>騎馬</OPTION> 7: <OPTION VLAUE=”2”>射箭</OPTION> 8: <OPTION VLAUE=”3”>游泳</OPTION> 9: <OPTION VLAUE=”4”>登山</OPTION> 10: <OPTION VLAUE=”4”>逛街</OPTION> 11: </SELECT><P> 12: <SELECT MULTIPLE NAME="HOBBY2" SIZE=3> 13: <OPTION VLAUE=”1”>騎馬</OPTION> 14: <OPTION VLAUE=”2”>射箭</OPTION> 15: <OPTION VLAUE=”3”>游泳</OPTION> 16: <OPTION VLAUE=”4”>登山</OPTION> 17: <OPTION VLAUE=”4”>逛街</OPTION> 18: </SELECT><P> 19: <INPUT TYPE=SUBMIT VALUE="送出"> 20: <INPUT TYPE=RESET VLAUE="重選"> 21: </FORM> 22: </BODY> 23: </HTML> 第 5-11 行定義第一個 SELECT 選項. 在這個選項只能選出一個選項, 並以 HOBBY1 的名稱傳給 TEST.PHP. 第二個 SELECT 選單由第 12-18 行定義完成. 在第 12 行中設定 SIZE 屬性為 3 表示選單的視窗大小為 3 列. 由圖中可以看出二者的不同. MULTIPLE 屬性則表示一次可選取一個以上的選項. 使用者只需配 [Ctrl] 鍵在用滑鼠點選欲選取的選項就可以同時選取多個選項. 按下送出鍵後選項資料會以 HOBBY2 將資料送回 TEST.PHP 處理.
TEXTAREA文字區塊 輸入大量文字時, 例如留言版, 討論區等等, 就不適合使用TEXT型態. 此時我們應使用文字區塊. 例: <TEXTAREA NAME=”資料名稱” ROWS=”列數” COLS=”行數”> 預先出現在文字區中的文字 </TEXTAREA>
TEXTAREA屬性 TEXTAREA 型態的屬性包括 NAME 定義資料名稱, ROWS 定義文字區塊的列數 (高), COLS 定義文字區塊的行數 (寬).
TEXTAREA範例 <HTML> <TITLE>TEXTAREA文字區塊</TITLE> <BODY> <FORM ACTION="TEST" METHOD="POST"> <TEXTAREA NAME="message1"> 使用預設值的文字區 </TEXTAREA><p> <TEXTAREA NAME="message2" rows="5" cols="80"> 使用rows="5" cols="80"文字區 <TEXTAREA NAME="message3" rows="10" cols="50"> 使用rows="10" cols="50"的文字區 <INPUT TYPE=SUBMIT VALUE="送出"> <INPUT TYPE=RESET VALUE="重寫"> </FORM> </BODY> </HTML>
問題與討論 何謂HTML？ 其構成內容為何？ 請說明撰寫HTML的基本架構。 請將下列文字做成網頁： 人之初，性本善，性相近，習相遠， 苟不教，性乃遷，教之道，貴以專， 習孟母，擇鄰處，子不學，斷機杼。 請利用<PRE>標籤重做上一題。 請重做問題二，將每句的第一個字放大。例如：人之初， … 請說明<BR>和<P>標籤的功能為何？二者使用的時機有何不同？ 請製作一個網頁，內容包括PHP、Apache與W3C的網址說明，並製作成超連結可連結至指定網站。(網址請參閱本章及第一章)
問題與討論 請利用<TABLE>標籤製作一個3X4的表格，表格內容如下。 請製作一張表單內容包含姓名(TEXT)、性別(RADIO，男、女)、嗜好(CHECKBOX，游泳、登山、聽音樂、看電影)、送出(SUBMIT)及重寫(RESET)按鈕。 請製作一張登入表單內容包含姓名(TEXT)、密碼(PASSWORD) 、送出(SUBMIT)及重寫(RESET)按鈕。 第一季 第二季 第三季 A產品銷售 10 20 25 B產品銷售 30 15