Chapter 13 HTML網頁實作

Report
Ch.13 HTML網頁實作
源流與發展





HTML全名為 Hyper Text Markup Language。
西元 1991 年提出。
主要為方便分享資料所設計。
主要顯示文字與超連結。
網頁內的內容皆可以透的 HTML 標準稱為 HTML5過
不同的標籤定義。
 最新。
HTML瀏覽器
 一般 HTML 網頁皆可透過網頁瀏覽器瀏覽。
 目前主流的瀏覽器有
Microsoft Internet Explorer
Mozilla Firefox
Google Chrome
Apple Safari
Opera
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 格式化標籤
<b>
<big>
<center>
<cite>
<code>
<em>
<font>
<i>
<pre>
<small>
<strike>
<strong>
<sub>
<sup>
<u>
bold,定義為粗體字
定義為大字體
字體置中
citation,定義為引用字
定義為電腦程式字
emphasis, 定義為句意強調字
定義字型,顏色,字體大小
定義斜體字
preformatted,以事先定好的格式顯示
定義小字體
定義為刪除字
定義為重要性強調字
定義為下標字
定義為上標字
定義為字畫底線
HTML 超連結及圖片標籤
<a>
anchor,定義超連結
<img />
image,定義圖片
<map>
定義地圖
<area />
定義地圖內的區塊
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>
定義列表說明
HTML 表單標籤
<form>
定義表單讓使用者可以輸入
<input />
輸入控制
<textarea>
文字輸入區
<button>
輸入按鈕
<select>
定義下拉式選單
<optgroup>
定義選項可為群組
<option>
定義下拉式選單之選項
<label>
給輸入元件命名
HTML 頁框標籤
<frame />
定義頁框
<frameset>
定義頁框組
<iframe>
定義內嵌網頁
HTML 樣式及Meta標籤
樣式標籤
<style>
定義文件內的CSS樣式
<div>
division,定義區段,同區段可以使用同樣的樣式
<span>
功能類同div,但是span範圍較小。
Meta 標籤
<title>
定義文件標題
<meta>
定義文件meta資訊,譬如編碼
HTML 程式標籤
<script>
定義網頁內的Javascript程式碼
<applet>
定義內嵌的Java程式碼
<object>
定義內嵌物件
<param />
定義內嵌物件的參數
HTML 編輯軟體-1
 純文字編輯。如直接透過任何純文字編輯器,如
Windows 記事本。
 透過 W3School TryIt Editor 編輯,並可即時預覽。
HTML好站推薦




標籤與屬性查詢:
(英文網站): http://www.w3schools.com/tags/
(中文網站): http://www.w3school.com.cn/tags/
這兩個網站都有HTML的教程
HTML 編輯軟體-2
 利用文書編輯軟體,如大家常用的 Word 編寫網頁內
容與繪製表格等。
 編輯完畢後儲存成 html 或 htm 的檔案格式。
 由於該類文書編輯軟體並非針對專業網頁製作所設
計,因此若要網頁動態化,或是各種精緻化功能都
會有問題。
HTML 編輯軟體-3
 透過專業網頁編輯軟體,方便設計者撰寫 HTML 以
及 Javascript 等語法。
 較著名的網頁編輯軟體:
Microsoft FrontPage
Namo WebEditor
Adobe Dreamweaver
Microsoft Expression Web
 Kompozer 為免費的網頁開發工具。
HTML Kompozer
13-2 HTML 網頁實作
以 2010 年 4 月 21 日所擷取的淡江大學首頁為例
TKU網頁結構設計分析
網頁結構分析(1) – table標籤
t1-12.jpg (1,2)
t1-11.jpg (1,1)
t1-21.jpg (2,2)
t1-31.jpg (3,2)
t1-22.jpg(2,3)
網頁結構分析(1) – HTML 碼
<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>
網頁結構分析(2) – td 含 table
網頁結構分析(2) – HTML 碼



















<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>
網頁結構分析(3) – td 插入影片
網頁結構分析(3) – 找到 td
原 HTML 語法
<tr>
<td valign="top" align="center"> <img src="t2-12-1.jpg"></td>
</tr>
網頁結構分析(3) – HTML 碼
替換為新的 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>
取得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 為學生於淡江大學之學號。
FTP 軟體下載與安裝
 至 Google 搜尋 FileZilla,下載後安裝。
FTP 軟體 -- Filezilla 設定
 啟動Filezilla,並做好連線設定後,連線登入。
 請從選單「檔案」中選「站台管理員」,先輸入站
名名稱(如ftp.s00)
 主機名稱100年度大一新生請填寫 ftp.s00.tku.edu.tw,
99年度學生請填寫 ftp.s99.tku.edu.tw,依此類推。
 使用者請輸入學號,密碼請輸入學校提供的密碼,
按確認就可以將ftp.s00站台儲存起起來,下一次就
不必再輸入。
 設定好了按「連線」登入ftp.s00.tku.edu.tw
FTP 軟體 – Filezilla 畫面
Filezilla 連線TKU 提供之ftp 空間
瀏覽放在TKU網頁空間之網頁
啟動瀏覽器,輸入網址
http://s00.tku.edu.tw/~ID,看看是否能夠看到你
寫的網頁。如果可以就是成功了。
之後如果網頁檔案更新,只要將有更動的檔案
傳入 ftp.s00.tku.edu.tw 即可。
13-3 動態 HTML
CSS 簡介
 HTML主要是用標籤來定義文件的結構。
 CSS (Cascading Style Sheets) 主要是用來定義HTML
文件要如何顯示。
 同一個網頁內容,因為不同的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 點:
 當有多個選擇器要共用相同的宣告時, 可以合併寫在
一起, 但選擇器要使用逗號 "," 做區隔。
常見定義CSS的三種方式
 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>
常見定義CSS的三種方式
 External Style Sheet (外部樣式表,用 <link > 標籤連
結 CSS 檔)
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head>
CSS 簡介
<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 範例
於 <head>…</head> 中加入下列語法
<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>
三種常見的選擇器
 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}
CSS 免費資源
 (英文網站): http://www.w3schools.com/css/
 (中文網站): http://www.w3school.com.cn/css/
 無名小站有針對CSS提供畫面美化的服務,有興趣者
可以去試試看,不僅可以藉此更深入了解CSS的用法,
還可以做出個人風格的網頁來。
動態 HTML 免費資源
 DynamicDrive (http://www.dynamicdrive.com/)
13-4 HTML 學以致用
HTML 編輯器- CKEditor
 ckEditor(http://ckeditor.com/demo)
CKEditor 編輯畫面
CKEditor 顯示網頁
HTML 編輯器- Blogger
HTML 編輯器- Blogger
Google 問卷客製化
Google 問卷加入HTML編輯
Google 問卷整合HTML
Google 問卷 – Facebook發佈
Google問卷 – 調查結果
Google問卷 – 結果分析

similar documents