Writer範本

Size: px

Start display at page:

Download "Writer範本"

征茸安
5 years ago
Views:

1 HTML 與 CSS (1) HTML 及 CSS 簡介 - HTML 及 CSS * 超文件標示語言 (Hypertext markup language, HTML) # 說明網頁意義的語言 * 層疊樣式單 (Cascading style sheet, CSS) # 告訴瀏覽器如何顯示網頁以及控制顯示格式的語言 * HTML 與 CSS 的歷史 # :HTML2, 簡單 ( 醜陋 ) 的網頁格式顯示 # :HTML3 HTML4, 人們及企業開始嚴肅看待網際網路, 希望網頁看來美觀, 各家瀏覽器激烈競爭, 各自發展獨家且不相容的 HTML, 跨平台 HTML 之撰寫非常困難 # :CSS 已明確定義, 但各家瀏覽器對於 CSS 之支援各自不同, 同一瀏覽器的前後版本也可能不相容, 跨平台 HTML 及 CSS 之撰寫還是有很大問題 # : 所有瀏覽器對於 CSS 都可支援, 唯獨 IE 5 是當時普遍使用但對 CSS 支援很差的瀏覽器 # 2009 : 可以放心假設所有瀏覽器對於 CSS 都有很好的支援 (IE 6 IE 7 例外 ),HTML 與 CSS 熬了 18 年終於步上正軌 ( 生逢此時, 各位太幸運了! ;-) - HTML 文件 * 超文件標示語言 (Hypertext markup language, HTML): 用來產生網頁的標示語言 * 網頁也稱為 HTML 頁 (HTML page) 或 HTML 文件 (HTML document) * 標示語言 (Markup language): 利用一群符號來標示一份文件應如何顯示 * 超文件標示語言是根據標準一般標示語言 (Standard generalized markup language, SGML) 所衍生而來 - 基本 HTML 語法 * HTML 文件為文字檔案, 內含格式化指令稱為標籤 (Tag), 以決定資料該如何顯示 * 標籤功能 : 顯示文字特殊效果 ( 例如粗體斜體 ) 使用者可點選的控制元件 ( 例如點選框 ) 顯示多媒體資料 ( 例如影像音訊視訊 ) * 標籤由 < 及 > 所包含, 分為開始及結束標籤, 結束標籤需加上斜線 /, 例如 : <b> </b> # 要看到 < 及 > 字元, 需使用 < 與 > * 開始及結束標籤及其所包含文字, 統稱為元素 (Element), 所包含文字稱為內容 (Content) * 有些元素不需要結束標籤, 稱為空元素 (Empty element), 例如插入一橫線 <hr> * HTML 基本架構 <html> <head> <title> </title> </head> <body> </body> 1

</html> * 所有 HTML 文件均以 <html> 元素為根元素 (Root element), 在一份文件中根元素包含所有其他元素 * <head> 元素緊跟在 <html> 標籤之後, 其中放置 <title> 元素, 以便在視窗標題區呈現標題,<head> 元素稱為文件標頭 (Document head) * <body> 元素緊跟在 <head> 元素之後, 稱為文件本體

2 </html> * 所有 HTML 文件均以 <html> 元素為根元素 (Root element), 在一份文件中根元素包含所有其他元素 * <head> 元素緊跟在 <html> 標籤之後, 其中放置 <title> 元素, 以便在視窗標題區呈現標題,<head> 元素稱為文件標頭 (Document head) * <body> 元素緊跟在 <head> 元素之後, 稱為文件本體 (Document body) * 當瀏覽器開啟一份 HTML 文件時, 瀏覽器依據標籤指示來組合及格式化文件內容, 此程序稱為解析 (Parsing) 或呈現 (Rendering), 例如將文字以粗體呈現 : <p><b> 本段落將以粗體在瀏覽器中呈現 </b></p> * 之前的 HTML 的標籤不分大小寫, 因此 <b> 亦可用 <B> 代替, 但下一代 HTML, 亦即 XHTML 則區分標籤大小寫, 並且要求全部使用小寫 * 可利用各種參數 ( 稱為屬性,Attribute) 來組態 HTML 元素, 屬性放在開始標籤的右邊角括號之前, 其語法為 :attribute="value" # 例如利用 src (Source) 屬性在 HTML 文件中插入一影像 : <img src="mygraphic.gif" /> * 瀏覽器忽略 HTML 文件中的空行 - 產生 HTML 文件 * HTML 文件是純文字檔, 需使用可產生純文字檔的編輯器來編輯 * 亦有所見即所得 (What you see is what you get, WYSIWYG) 編輯器, 例如 : Dreamweaver,Frontpage 等, 利用視覺工具加入 HTML 標籤, 並自動加入其他標籤 * 練習 1 1. 執行純文字編輯器, 開啟新檔並儲存為 dessertshop.html, 檔案中輸入下列標籤 <html> </html> 2. 在 <html> 及 </html> 兩個標籤之間輸入下列元素 : <head> <title> 甜點商店 </title> </head> 3. 在 </html> 標籤之上輸入下列元素 : <body> <basefont face="arial"> </body> 4. 在 </body> 標籤之上輸入下列元素 : <font color="olive"><h1> 甜點商店 </h1> <hr> <h2> 開店時間 </h2></font> <font color="blue"><p> 星期一到星期四,7:45 a.m. -- 9:45 p.m.<br> 星期五,7:45 a.m. -- 4:30 p.m.<br> 星期六,9:00 a.m. -- 4:00 p.m.<br> 星期日, 中午 -- 9:00 p.m.</p></font> <hr> <font color="olive"><h2> 要什麼甜點?</h2></font> <font color="blue"> <ul> <li> 餅乾和糕點 </li> <li> 蛋糕和派 </li> 2

3 <li> 美食巧克力 </li> </ul></font><hr> <font color="olive"><h2> 付款方式 </h2></font> <font color="blue"><p> 現金, 自動櫃員機, 信用卡, 美國運通, 發現卡, 大來卡 </p></font> 5. 存檔後, 另外開啟瀏覽器觀看該檔案 * 練習 2:lexmark.html <html> <head> <title> 碳粉匣銷售 </title> </head> <body> <h1> 碳粉匣銷售 </h1> <hr> <h2>lexmark 碳粉匣 </h2> <p><b> 型號 #</b>:lex <br> <b> 相容性 </b>:optra 4049/3112/3116<br> <b> 價格 </b>:$2,000</p> <p><b> 型號 #</b>:lex <br> <b> 相容性 </b>:optra 4019/4028/4029<br> <b> 價格 </b>:$2,200 < 有折扣喔!></p> </body> </html> (2) 建立正確格式的網頁 - HTML 版本 * 1993 年 :1.0 版 * 1995 年 :2.0 版 * 1996 年 :3.2 版 * 1999 年 :4.01 版, 之後由 XHTML (Extensible HTML) 取代 * 2011 年 :5.0 版 ( 尚在研發中 ), 包含 HTML 4 及 XHTML 1 - XHTML 文件型態定義 (Document type definition, DTD) * 一個符合 XHTML 法則及要求的文件稱為格式良好 (Well formed) * 需包含 <!DOCTYPE> 宣告, 以及 <html>,<head>,<body> 元素 * 在 XHTML 1.0 版中, 過時的 HTML 標籤 :<applet>, <basefont>, <center>, <dir>, <font>, <isindex>, <menu>, <s>, <strike>, <u> * 3 種 DTD: 過渡 (transitional), 嚴格 (strict), 及框架 (frameset), 主要區別在於其包容過時 HTML 元素的程度 # 過渡 DTD (Transitional DTD): 允許使用過時的 HTML 元素,<!DOCTYPE> 宣告如下 : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " # 框架 DTD (Frameset DTD): 與過渡 DTD 相同但包含 <frameset> 及 <frame> 元素, 以便將瀏覽器之視窗分為 2 個或多個框架,<!DOCTYPE> 宣告如下 : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " # 嚴格 DTD (Strict DTD): 不允許過時 HTML 元素, 也不包含 <frameset> 及 <frame> 元素,<!DOCTYPE> 宣告如下 : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3

4 " * 準則 : 最好使用嚴格 DTD * 練習 : 在 dessertshop.html 裡的 <html> 之前加上嚴格 DTD 的 <!DOCTYPE> 宣告, 並儲存為 dessertshop1.html, 瀏覽該檔案 - 撰寫正確格式的文件 * 需有 <!DOCTYPE> 宣告 <html> <head> 及 <body> 等元素 * <html> 標籤應改為 <html xmlns=" * XHTML 標籤區分大小寫 * 所有 XHTML 元素都要有結束標籤 # 此外, 空元素例如 <hr>, <br>, <img > 必須寫為 <hr />, <br />, <img /> * 屬性值必須包含在兩個雙引號內 * XHTML 元素之巢狀順序必須正確 # 例如, 下列的標籤順序必須對應 :<p><b><i> 此段落為粗體及斜體 </i></b></p> # 但 HTML 允許如下順序 :<p><b><i> 此段落為粗體及斜體 </b></p></i> * 練習 : 將 dessertshop1.html 依下列修改, 並儲存為 dessertshop2.html: 1. 修改 <html> 標籤為 <html xmlns=" 2. 將 <basefont> 及 6 個 <font> 元素刪除 ( 亦需刪除 </font> 標籤 ) 3. 在 <hr> 及 <br> 標籤中加上一空格及斜線 :<hr />,<br />, 瀏覽該檔案 - 層疊樣式單 (CSS) 利用一致性的格式設定, 使文件的呈現一致化, 亦即相同的元素使用相同的格式 * 利用 CSS 可統一設定文字對齊字型背景顏色等, 使整份文件看來非常一致 * CSS 可放在 HTML 檔案中, 亦可獨立成為一檔案, 以提供許多文件使用 * CSS 特性 (CSS property) # CSS 樣式由 2 部分組成並以冒號分隔, 此稱為宣告 (Declaration) 或樣式宣告 (Style declaration) - 特性 (Property): 某項 CSS 樣式 - 值 (Value): 決定該樣式的視覺效果 # 例如 :color:blue * 行內樣式 (Inline style) # 在一份文件中對於某元素加入樣式資訊 # 例如將某段落設定為 Verdana 字型 : <p>this paragraph does not use CSS ( 本段落不使用 CSS)</p> <p style="font-family:verdana">paragraph formatted with inline styles ( 使用行內樣式所格式化的段落 )</p> # 使用多項行內樣式, 利用分號區隔, 例如 : <p style="font-family:verdana; color:blue; text-align:center;">paragraph formatted with <strong>inline</strong> styles ( 使用行內樣式所格式化的段落 )</p> # 行內樣式無法提供相同文件中的其他元素使用, 亦無法提供其他文件使用 # 練習 : 將 dessertshop2.html 依下列修改, 並儲存為 dessertshop3.html: 1. 如下修改 <body> 標籤 : <body style="font-family: Arial; color: blue; background-color: transparent"> 2. 如下修改 <h1> 標籤 : <h1 style="font-family: Arial; color: olive"> 3. 如下修改 3 個 <h2> 標籤 : <h2 style="font-family: Arial; color: olive"> 4

* 內部樣式單 (Internal style sheet) # 所設定的樣式可提供整份文件使用 # 產生內部樣式單 : 在 <head> 元素中加入 <style> 元素, 如下 : <style type="text/css"> style declarations ( 樣式宣告 ) # 在樣式宣告中, 每個樣式設定格式如下 : 選項 { 特性 : 值 (selector

5 * 內部樣式單 (Internal style sheet) # 所設定的樣式可提供整份文件使用 # 產生內部樣式單 : 在 <head> 元素中加入 <style> 元素, 如下 : <style type="text/css"> style declarations ( 樣式宣告 ) # 在樣式宣告中, 每個樣式設定格式如下 : 選項 { 特性 : 值 (selector {property: value), 其中選項 (Selector) 為某個標籤, 例如將整份文件的段落均設為藍色 p {color: blue # 針對某個選項設定多個特性時, 以分號區隔 # 練習 : 複製 lexmark.html 為 lexmark1.html, 並將 <head> 元素中加入 <style> 元素 ( 其中 em 表示以該數字乘上未格式化的文字作為文字大小 ), 並另存新檔 <style type="text/css"> h1 {color: navy; font-size: 2em; font-family: serif h2 {color: red; font-size: 1.5em; font-family: Arial body {color: blue; font-family: Arial; font-size:.8em; font-weight: normal # 針對多個選項設定相同特性時, 以逗號區隔, 例如 : <style type="text/css"> h1, h2, h3 {color: navy # 練習 : 將 dessertshop3.html 依下列修改, 並儲存為 dessertshop4.html: 1. 將行內樣式設定 <body>, <h1>, 及 <h2> 刪除 2. 在 <head> 元素中加入下列 <style> 元素 : <style type="text/css"> body {font-family: Arial; color: blue; background-color: transparent h1, h2 {font-family: Arial; color: olive * 外部樣式單 (External style sheet) 獨立文字檔, 內含樣式宣告, 可提供許多檔案分享, 使所有檔案的格式均一致 # 檔案內容僅包含樣式設定, 且檔案之副檔名為.css # 在 HTML 文件中, 在 <head> 元素中利用 <link> 元素來參考外部樣式單, 如下 ( 其中 company.css 為外部樣式單檔案 ): <link rel="stylesheet" href="company.css" type="text/css" /> # 練習 : 將 dessertshop4.html 依下列修改, 並儲存為 dessertshop5.html: 1. 將 <style> 元素中之 body, h1, h2 內部樣式複製到另一名為 dessert.css 的樣式檔, 並儲存該檔案, 刪除 <style> 元素 2. 在 <head> 元素中加入 : <link rel="stylesheet" href="dessert.css" type="text/css" /> - 利用標籤的 id 與 class 設定格式 * id 可用來指定某一個特定標籤, 不可重複, 例如 : <p id="myparagraph">this is my paragraph.</p> * class 可用來指定許多標籤, 例如 : <p class="similar">this is paragraph 1.</p> <p class="similar">this is paragraph 2.</p> <div class="similar">this is div 1.</div> <div class="similar">this is div 2.</div> 5

6 * 指定 id 或 class 後, 即可使用 CSS 來做設定 : #myparagraph { font-weight: bold; margin-top: 20px; text-align: center; p.similar { color: blue;.similar { background-color: yellow; - 內容型態元素 (Content type element) * 當瀏覽器要求一份 HTML 文件時, 伺服器送出 2 份資料 : 回覆標頭及該網頁 # 回覆標頭 (Response header) - 說明網頁的內容資料型態 - 利用 <meta> 標籤來記錄標頭資訊 * 練習 : 在 dessertshop5.html 的 <head> 元素中加入下列資料, 並儲存為 dessertshop6.html <meta http-equiv="content-type" content="text/html; charset=utf-8" /> - 網頁驗證 (Validating web pages) * 當瀏覽器開啟一份格式不良的網頁時, 會忽略錯誤格式並盡可能呈現網頁 * 可利用驗證分析器 (Validating parser) 來分析網頁的格式 # 線上驗證 : - W3C Markup validation service: - Web design group (WDG): * 練習 : 分別利用 W3C 及 WDG 之 "validate by file upload" 來驗證 dessertshop6.html, 並更正所有錯誤 ( 亦驗證各個版本之 dessertshopx.html) (3) HTML 常用標籤 - 字元處理 * 粗體字 :<b> </b>, <strong> </strong> * 斜體字 :<i> </i>, <em> </em> * 底線 :<u> </u> * 字型及顏色 : 例如 <span style="color:red; font-size:14pt"> </span> - 表列項目及編號 * 無序排列 (Unordered list):<ul> </ul> # 預設項目符號為圓點 (Disc), 亦可設為空心圓 (Circle) 實心方塊 (Square) 等 # 例如 : <ul> 無序排列 <li> 項目 1</li> <li> 項目 2</li> 6

7 <li> 項目 3</li> </ul> # 例如 : <ul type="circle"> 無序排列 <li> 項目 1</li> <li> 項目 2</li> <li> 項目 3</li> </ul> * 有序排列 (Ordered list):<ol> </ol> # 預設編號符號為 1, 2, 3, 亦可設為 A (A~Z), a (a~z), I (I, II, III, ), i (i, ii, iii, ) 等 # 例如 : <ul> 有序排列 <li> 項目 1</li> <li> 項目 2</li> <li> 項目 3</li> </ol> # 例如 : <ul type="a"> 有序排列 <li> 項目 1</li> <li> 項目 2</li> <li> 項目 3</li> </ol> - 段落 * 段落 :<p> </p> * 斷行 :<br /> * 無格式設定 ( 依照所輸入的格式, 不做任何處理, preformatted):<pre> </pre> - 分區 (Division):<div> </div> * 置中對齊 :<div style="width:200px; margin:0px auto;"> center </div> * 靠左對齊 :<div style="float:left; width:200px; "> left </div> * 靠右對齊 :<div style="float:right; width:200px; "> right </div> * 例如 : <div style="width:200px; margin:0px auto;"> center </div> <div style="float:left; width:200px; "> left </div> <div style="float:right; width:200px; "> left </div> <div style="clear:both; background: green"> <h5 >SEARCH LINK 1</h5> <a target="_blank" href=" </div> <div style="background: red"> <h5 >SEARCH LINK 2</h5> <a target="_blank" href=" </div> 7

8 * 練習 : 交通示意圖及校園平面圖網站導覽教職員學生一般訪客選項 (Menu) 內容 (Content) 頁尾 (Footer) - 表格 * 格式 : <table>  <caption> 表格標題 </caption>  <tr>  <td> 內容 </td>  <td> 內容 </td>  <td> 內容 </td>  <tr>  <td> 內容 </td>  <td> 內容 </td>  <td> 內容 </td>  </table> * 範例 : <style> table { margin: 0 auto; width: 250; height: 250; border-collapse: collapse; td { border: 1px; border-style: solid; border-color: red; padding: 20px; <table> <tr> <td style="text-align:center;"> <p> 會員管理系統 </p> <p> 帳號 :</p> <p> 密碼 :</p> <p> 記住我的帳號密碼 </p> <p><a href=""> 馬上申請會員 </a></p> 8

9 </td> <td>test</td> <tr> <td>test</td> <td>test</td> </table> * 儲存格縱向合併 :<td rowspan=" 合併的格數 "> <table > <tr> <td>upper left</td> <td rowspan="2">right</td> <tr> <td>lower left</td> </table> * 儲存格橫向合併 :<td colspan=" 合併的格數 "> <table > <tr> <td>upper left</td> <td>upper right</td> <tr> <td colspan="2">lower</td> </table> (4) 層疊樣式單應用範例 - 層疊樣式單 (Cascading style sheet, CSS): 設定顏色字型及連結樣式等 * 先利用內部樣式單進行編輯及實驗, 完成後再改為外部樣式單 * 練習 :aboutme.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <head> <title> 自我介紹 </title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body>  <ul> <li><a href="self.html"> 自我介紹 </a></li> <li><a href="town.html"> 我的出生地 </a></li> <li><a href="school.html"> 我的母校 </a></li> <li><a href="specialty.html"> 我的專長 </a></li> </ul> 9

10  <h1> 自我介紹 </h1> <p> 歡迎來到自我介紹網頁!</p> <p> 本網頁介紹我的出生地我的母校以及我的專長目前沒有圖片, 但至少有樣式 ; 也有連結, 但連不到任何地方!</p> <p> 應該還有很多內容可以加入, 但目前還沒有任何概念 </p>  <address> 最後修改 :3/1/2012<br /> 網頁設計 : 王大明 </address> </body> </html> * 加上顏色 # 在 <head> 元素中加入 <style> 元素, 設定 <body> 元素之文字及背景顏色 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> body { color: purple; background-color: #d8da3d * 設定連結之樣式 # 連結項目看起來像清單 : 取消清單樣式, 使其看起來像選項 # 選項 <li> 背景設為白色 (background: white), 右邊界設為黑色 (border-right: 1em solid black) # 連結 <a> 設為無底線 (text-decoration: none) # 連結未被點選者顯示藍色, 已被點選者設為紫色 <style type="text/css"> body { color: purple; background-color: #d8da3d ul { list-style-type:none; width:9em li { background:white; 10

11 margin:0.5em; padding:0.3em; border-right:1em solid black a { text-decoration: none a:link { color:blue a:visited { color:purple * 在網頁編輯上方加上橫線 <style type="text/css"> body { color: purple; background-color: #d8da3d ul { list-style-type:none; width:9em li { background:white; margin:0.5em; padding:0.3em; border-right:1em solid black a { text-decoration: none a:link { color:blue a:visited { color:purple address { margin-top: 1em; padding-top: 1em; border-top: thin dotted * 將樣式單放到另一檔案 # 將 <style> 元素的內容 ( 不包含 <style > 及標籤 ) 複製到一個新的文字檔, 以檔名 aboutme.css 存檔 # 在 <head> 元素中設定連結到樣式檔 <head> <title> 自我介紹 </title> 11

12 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="aboutme.css" /> </head> - 利用 <div> 及 CSS 進行網頁佈局 (Page layout) * 主要概念 : 將內容 (Content) 與呈現 (Presentation) 分開處理, 使兩者鬆散連結 (Loosely coupled) * HTML 內容如下, 需佈局之區塊利用 <div> 標籤標示, 每個區塊均有其 ID ( 存檔 : layout.html): <div id="wrapper"> <div id="header"> 網頁標題或橫幅影像 </div> <div id="navigation"> <b> 選單 </b><br /> 交通資訊 <br /> 住宿資訊 <br /> 用餐資訊 </div> <div id="content"> 網頁內容 </div> <div id="link"> 文字連結 </div> <div id="footer"> 網頁設計 : 王大明 </div> </div> * 建立外部 CSS 檔案 ( 存檔 :layout.css), 利用浮動 (float) 屬性來排列區塊 : #wrapper { width: 600px; margin: 0 auto; #header { height: 100px; background-color: #ffa500; #navigation { float: left; width: 100px; height: 200px; background-color: #ffd700; #content { height: 200px; overflow: auto; background-color: #eeeeee; #link { clear: left; height: 60px; background-color: #9999ff; #footer { height: 60px; background-color: #00ff00; 12

13 (5) 表單及表單元件 - 表單 (Form) * 透過表單接受使用者輸入, 由伺服器端語言處理資料, 和使用者互動, 格式 : <form action=" 處理程式 " method=" 傳送方式 "> </form> * 在表單中可加入各式可讓使用者輸入之元件, 例如 : # 文字欄位 <input type="text" name=" 欄位名稱 " value=" 值 " /> # 密碼欄位 <input type="password" name=" 欄位名稱 " value=" 值 " /> # 表單確定鈕 <input type="submit" name=" 欄位名稱 " value=" 值 " /> # 多重勾選方塊 (checked 項目為選擇性 ) <input type="checkbox" name=" 欄位名稱 " value=" 值 " checked="checked" /> 字串 # 選擇鈕 (checked 項目為選擇性 ) <input type="radio" name=" 欄位名稱 " value=" 值 " checked="checked" /> 字串 # 下拉式選單 <select name=" 欄位名稱 " size=" 欄位高度 " MULTIPLE> 字串 <option value=" 值 " selected> 字串 </option> </select> # 文字區塊 <textarea name=" 欄位名稱 " cols=" 寬度 " rows=" 寬度 "> 內容 </textarea> * 練習 : 將下列資料儲存為 dataselect.html 檔, 於瀏覽器開啟 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <head> <title> 資料選擇 </title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body> <p> 會員管理系統 </p> <form action="" method="post">  <p> 帳號 :<br /> <input type="text" name="account" value="student" /> </p> <p> 密碼 :<br /> <input type="password" name="password" value="1234" /> </p> <p> <input type="checkbox" name="rememberme" value="true" checked="checked" /> 記住我的密碼 </p> <p><strong> 性別 </strong>: <input type = "radio" name="sex" value=" 男 " /> 男 <input type = "radio" name="sex" value=" 女 " checked="checked" /> 女 </p> <p><strong> 生日 </strong>: <select name="year" size="1"> <option>2010</option> <option>2011</option> <option>2012</option> 13

14 </select> 年 <select name="month"> <option>1</option> <option>2</option> <option>3</option> </select> 月 <select name="day"> <option>1</option> <option>2</option> <option>3</option> </select> 日 </p> <p><strong> 備註 </strong>:<br /> <textarea name="memo" cols="50" rows="5"></textarea> </p> <p><input type="submit" name="login" value=" 登入 " /></p> </form> </body> </html> 14

Writer範本

Writer範本第 2 章 HTML 與 CSS - HTML 及 CSS * 超文件標示語言 (Hypertext markup language, HTML) # 說明網頁意義的語言 * 層疊樣式單 (Cascading style sheet, CSS) # 告訴瀏覽器如何顯示網頁以及控制顯示格式的語言 * HTML 與 CSS 的歷史 # 1990 1994:HTML2, 簡單 ( 醜陋 ) 的網頁格式顯示