ch.13 html 網頁實作

Ch.13 HTML 網頁實作

HTML 全名為 Hyper Text Markup Language 。西元 1991 年提出。主要為方便分享資料所設計。主要顯示文字與超連結。網頁內的內容皆可以透的 HTML 標準稱為 HTML5

過不同的標籤定義。最新。

源流與發展

一般 HTML 網頁皆可透過網頁瀏覽器瀏覽。目前主流的瀏覽器有

Microsoft Internet ExplorerMozilla FirefoxGoogle ChromeApple SafariOpera

HTML 瀏覽器

大部分的標籤都是成雙成對的，有開始標籤，就會有結尾標籤。如：

<html>…..</html><body>….</body>

網頁瀏覽器會將 HTML 轉譯成我們平常所看到的網頁效果、排版與顏色等。

HTML 標籤

基本 HTML 網頁架構：<!DOCTYPE HTML PUBLIC … ><html>

<head> … </head><body> … </body>

</html>

HTML 網頁架構

一般網頁起始於 <html> ，結尾於 </html> 。網頁的主要內容，如表格、圖片、文字、影片與超

連結多媒體內容等，皆必須置於 <body>...</body> 之中

<head>…</head> 用來定義網頁文件等訊息，如網頁的標題等。

HTML 網頁內容與標籤

每個標籤內可能定義了多個屬性。<body background=“bg.jpg”>….</body> background 為 <body> 的屬性之一，代表的是

網頁所使用的背景圖片，而 bg.jpg 為其背景圖片之檔案名稱。

HTML 標籤與屬性

格式化標籤超連結及圖片標籤表格標籤列表標籤表單標籤頁框標籤樣式標籤 Meta 標籤程式標籤

HTML 標籤

<!DOCTYPE> 定義文件型態是採用哪個 HTML 版本

<html>網頁文件必須包含在 <html> 標籤內， <html> 又包含了 <head> 及 <body> 兩標籤

<body> 網頁文件的主體，

<h1> to <h6> heading ，標題 1 ～ 6

<p> paragraph ，段落符號，兩段落之間空隔比 <br> 大

<br /> break ，跳行符號

<hr /> horizontal ，畫一條水平線

 註解用

HTML 基本標籤

HTML 格式化標籤<b> bold ，定義為粗體字<big> 定義為大字體<center> 字體置中<cite> citation ，定義為引用字<code> 定義為電腦程式字<em> emphasis, 定義為句意強調字<font> 定義字型，顏色，字體大小<i> 定義斜體字<pre> preformatted ，以事先定好的格式顯示<small> 定義小字體<strike> 定義為刪除字<strong> 定義為重要性強調字<sub> 定義為下標字<sup> 定義為上標字<u> 定義為字畫底線

<a> anchor ，定義超連結

<img /> image ，定義圖片

<map> 定義地圖

<area /> 定義地圖內的區塊

HTML 超連結及圖片標籤

HTML 表格標籤<table> 定義表格

<caption> 定義表格名稱

<th> table header ，定義表格項目標題

<tr> table row ，定義表格列

<td> table data ，定義表格列內每格的內容

<thead> table header ，定義表格 header 資訊

<tbody> table body ，定義表格 body 訊

<tfoot> table footer ，定義表格 footer 資訊

HTML 列表標籤

<ul> 定義無序號列表

<ol> 定義有序號列表

<li> 定義列表項目

<dl> 定義「定義列表」

<dt> 定義列表項目

<dd> 定義列表說明

<form> 定義表單讓使用者可以輸入

<input /> 輸入控制

<textarea> 文字輸入區

<button> 輸入按鈕

<select> 定義下拉式選單

<optgroup> 定義選項可為群組

<option> 定義下拉式選單之選項

<label> 給輸入元件命名

HTML 表單標籤

<frame /> 定義頁框

<frameset> 定義頁框組

<iframe> 定義內嵌網頁

HTML 頁框標籤

純文字編輯。如直接透過任何純文字編輯器，如 Windows 記事本。

透過 W3School TryIt Editor 編輯，並可即時預覽。

HTML 編輯軟體 -1

標籤與屬性查詢 : ( 英文網站 ): http://www.w3schools.com/tags/ ( 中文網站 ):

http://www.w3school.com.cn/tags/ 這兩個網站都有 HTML 的教程

HTML 好站推薦

利用文書編輯軟體，如大家常用的 Word 編寫網頁內容與繪製表格等。

編輯完畢後儲存成 html 或 htm 的檔案格式。

由於該類文書編輯軟體並非針對專業網頁製作所設計，因此若要網頁動態化，或是各種精緻化功能都會有問題。


透過專業網頁編輯軟體，方便設計者撰寫 HTML 以及 Javascript 等語法。

較著名的網頁編輯軟體：Microsoft FrontPageNamo WebEditorAdobe DreamweaverMicrosoft Expression Web

Kompozer 為免費的網頁開發工具。


HTML Kompozer

13-2 HTML 網頁實作以 2010 年 4 月 21 日所擷取的淡江大學首頁為例

TKU 網頁結構設計分析

網頁結構分析 (1) – table 標籤

t1-11.jpg (1,1)

t1-12.jpg (1,2)

t1-21.jpg (2,2) t1-22.jpg(2,3)

t1-31.jpg (3,2)

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>TKU Website Structure</title> </head> <body> <table cellspacing=0 cellpadding=0> <tr> <td rowspan=3> <img src="t1-11.jpg"></td> <td colspan=2> <img src="t1-12.jpg"></td> </tr> <tr> <td> <img src="t1-21.jpg"> </td> <td> <img src="t1-22.jpg"> </td> </tr> <tr> <td colspan=2> <img src="t1-31.jpg"></td> </tr> </table>

網頁結構分析 (1) – HTML 碼

網頁結構分析 (2) – td 含 table

<table> <tr> <td valign="top"> <table> <tr> <td> <img src="t2-11-1.jpg"> </td> </tr> <tr> <td> <img src="t2-11-2.jpg"> </td> </tr> </table> </td> <td> <table> <tr> <td valign="top" align="center"> <img src="t2-12-1.jpg"></td> </tr> <tr> <td> <img src="t2-12-2.jpg"></td> </tr> </table> </td> <td> <img src="t2-13.jpg"> </td> </tr> <tr> <td colspan=3> <img src="t2-21.jpg"> </td> </tr> </table>

網頁結構分析 (2) – HTML 碼

網頁結構分析 (3) – td 插入影片

網頁結構分析 (3) – 找到 td

<tr> <td valign="top" align="center"> <img src="t2-12-1.jpg"></td> </tr>

原 HTML 語法

<tr> <td valign="top" align="center"> <iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/RechrtUxfQc" frameborder="0" allowfullscreen></iframe> </td></tr><tr><td style="color:#0000ff;background-color:#ffccff"><center><h3> 淡江大戲 Part <a href= "http://www.youtube.com/watch?v=RechrtUxfQc&playnext=1&list=PLA134F7F5E4A537D2" >[1]</a><a href= "http://www.youtube.com/watch?v=MRWX49Furew&feature=related">[2]</a><a href= "http://www.youtube.com/watch?v=METhdbL_iMw&feature=related">[3]</a> <a href= "http://www.youtube.com/watch?v=ZyDbq-lEKTo&feature=related">[4]</a><a href= "http://www.youtube.com/watch?v=NlsrJbVvjaA&feature=related">[5]</a></h3><center> </td> </tr>

網頁結構分析 (3) – HTML 碼替換為新的 HTML 語法

取得 YouTube 影片之內嵌碼

網頁 -- 顏色表示法

<td style="color:#0000FF;background-color:#FFCCFF">

顯示在 <td> 格中背景是粉紅底(FFCCFF) ，前景顏色是藍色 (0000FF) 。這裡顏色是用 RGB 色彩三原色表示， R 是紅色(Red) ， G 是綠色 (Green) ， B 是藍色(Blue) ， RGB 每種顏色各有 256種組合，十進位數字為 00~255 ，十六進位數字為00~FF 。

網頁 – 顏色及 RGB值

學校針對 100 學年度新生提供的伺服器如下 Web 伺服器： s00.tku.edu.tw

FTP 伺服器： ftp.s00.tku.edu.tw

學生上傳網頁成功後，瀏覽自己網頁的 URL 為 http://s00.tku.edu.tw/~ID

ID 為學生於淡江大學之學號。

淡江大學網頁空間

http://s00.tku.edu.tw/~ID

至 Google 搜尋 FileZilla ，下載後安裝。

FTP 軟體下載與安裝

啟動 Filezilla ，並做好連線設定後，連線登入。請從選單「檔案」中選「站台管理員」，先輸入站名名稱

( 如 ftp.s00) 主機名稱 100 年度大一新生請填寫

ftp.s00.tku.edu.tw ， 99 年度學生請填寫 ftp.s99.tku.edu.tw ，依此類推。

使用者請輸入學號，密碼請輸入學校提供的密碼，按確認就可以將 ftp.s00 站台儲存起起來，下一次就不必再輸入。

設定好了按「連線」登入 ftp.s00.tku.edu.tw

FTP 軟體 -- Filezilla 設定

ftp://ftp.s00/

FTP 軟體 – Filezilla 畫面

Filezilla 連線 TKU 提供之 ftp 空間

瀏覽放在 TKU 網頁空間之網頁啟動瀏覽器，輸入網址 http://s00.tku.edu.tw/~ID，看看是否能夠看到你寫的網頁。如果可以就是成功了。

之後如果網頁檔案更新，只要將有更動的檔案傳入 ftp.s00.tku.edu.tw 即可。

http://s00.tku.edu.tw/~ID

ftp://ftp.s00.tku.edu.tw/

13-3 動態 HTML

HTML 主要是用標籤來定義文件的結構。 CSS (Cascading Style Sheets) 主要是用來定義

HTML 文件要如何顯示。同一個網頁內容，因為不同的 CSS 而造成顯示產生差異。

CSS 簡介

CSS 的基本寫法

每一條 CSS 規則分為選擇器 (Selector) 和宣告 (Declaration) 兩個部分 , 其中宣告 (Declaration) 則是由屬性 (Property) 和值 (Value) 所組成的 , 例如：

CSS 的基本寫法

所謂的選擇器是用來選擇這條規則要套用的對象 , 例如我們要設定 <h1> 標籤的字型大小為 12點 , 顏色為紅色時 , 寫法如下：

CSS 的基本寫法

上例中 , <h1> 標籤是我們套用的對象 , 因此選擇器就是 h1 。 font-size 及 color 是我們要設定的字型屬性； 12pt 及 red 是分別指定給 font-size 及color 屬性的值。

當選擇器包含多個宣告時 , 請務必使用分號 "； " 來區隔宣告。

CSS 的基本寫法

我們也可以同時讓多個選擇器共用相同的宣告 , 例如要把 <h1> 、 <h2> 、 <h3> 標籤的字型大小都設為 12 點：

當有多個選擇器要共用相同的宣告時 , 可以合併寫在一起 , 但選擇器要使用逗號 "," 做區隔。

Inline Styles ( 行內樣式，在個別標籤中使用 style 屬性 )

<p style=“color:sienna;margin-left:20px”> 這裡是一段文字 </p>

常見定義 CSS 的三種方式

Internal Style Sheet ( 內嵌樣式表，在 < head > 中用 <style > 標籤定義 CSS)

<head><style>hr {color:sienna;}p {margin-left:20px;}body {background-image:url("imagesmypic.gif");}</style></head>


External Style Sheet (外部樣式表，用 <link > 標籤連結 CSS 檔 )

<head><link rel="stylesheet" type="text/css"

href="mystyle.css"></head>


<body><h1>淡江大學</h1><hr><h2>World Wide Web</h2><table border="1" width="100%"><tbody><tr><th align="left">Chapter</th><th align="left">Title</th></tr><tr><td width="10%">13</td><td width="50%">雲端服務</td></tr><tr><td width="10%">14</td><td width="50%">智慧型手機</td></tr></tbody></table><br><hr></body>

CSS 簡介

CSS 範例<style type="text/css">body{ font-family:"lucida calligraphy",arial,'sans serif'; background-color:#DCDCDC; color:#8A2BE2; margin:10px;}h1 {font-size:250%;}h2 {font-size:150%;}th {background-color:#D3D3D3;}td {background-color:#FFFAF0A;}</style>

於 <head>…</head> 中加入下列語法

The tag Selector ( 標籤選擇器 ) The class Selector ( 類選擇器 ) The id Selector (id 選擇器 )

三種常見的選擇器

類選擇器

html<h1 class="bluefont"> 這是第一行 </h1><p class="right"> 這是第一行 </p><p class="center"> 這是第二行 </p><p class="bluefont"> 這是第三行 </p> css

p.right {text-align:right}p.center {text-align:center}.bluefont {color:blue}

id 選擇器

html<p id="red"> 這是第一行 </p><p id="green"> 這是第二行 </p><p id="blue"> 這是第三行 </p> css#red {color:red}#green {color:green}p#blue {color:blue}

( 英文網站 ): http://www.w3schools.com/css/ ( 中文網站 ):

http://www.w3school.com.cn/css/

無名小站有針對 CSS 提供畫面美化的服務，有興趣者可以去試試看，不僅可以藉此更深入了解 CSS 的用法，還可以做出個人風格的網頁來。

CSS 免費資源

http://www.w3schools.com/css/

http://www.w3school.com.cn/css/

DynamicDrive (http://www.dynamicdrive.com/)

動態 HTML 免費資源

http://www.dynamicdrive.com/



13-4 HTML 學以致用

ckEditor(http://ckeditor.com/demo)

HTML 編輯器 - CKEditor

http://ckeditor.com/demo

http://ckeditor.com/demo

CKEditor 編輯畫面

CKEditor 顯示網頁

HTML 編輯器 - Blogger

Google 問卷客製化

Google 問卷加入 HTML 編輯

Google 問卷整合 HTML

Google 問卷 – Facebook 發佈

Google問卷 – 調查結果

Google問卷 – 結果分析

ch.13 html 網頁實作

Documents