Download presentation
Presentation is loading. Please wait.
1
使用HTML製作個人網頁 柴惠敏 台灣大學 物理治療學系
2
網頁與網站 網頁(page): 網站(web site):由許多網頁組成有內容的主題 瀏覽器(browser):觀賞網頁的軟體
首頁(home page) 以notepad撰寫HTML程式語言或以FrontPage軟體直接編寫 網站(web site):由許多網頁組成有內容的主題 瀏覽器(browser):觀賞網頁的軟體 IE (Internet Explorer)或NetScape
3
何謂 HTML？ 全名為 “Hyper Text MarkUp Language”，即「超文件標記語言」
是一種標記描述語言，介 於網頁排版與幕後排版之間的一種語言，是最簡單的網頁編輯語言 本課程將介紹以簡單基本的 HTML 編輯程式 ，可以真正地了解 HTML 的基本語法與基本架構
4
使用HTML撰寫網頁的步驟 撰寫網頁：在NotePad或FrontPage內，撰寫HTML程式語言
觀賞網頁：將寫好的程式以 .htm或 .html的副檔名儲存後，即可以瀏覽器中觀賞 修改網頁：開啟「檢視」中的「原始檔」修改、儲存，再按「重新整理」後，即可重新瀏覽 Biomechnics is a discipline of science, newly developed and in the process of becoming established.
5
製作個人網頁 基本語法 基本語法結構 <BODY>整體表現的設定 顏色值表 文章排版 清單設計 表格、圖形、多媒體、走馬燈 框架
6
基本語法結構 <html> <head> <title> (網頁的標題) </title>
<body> (指令及內容區) 這是我第一個網頁 </body> </html>
7
<BODY>整體表現的設定 <body bgcolor=#ffffff(背景底色為白色)
background=“背景圖片檔名" text=#003366(文字為墨藍色) link=(超連結文字顏色) vlink=(已瀏覽超連結文字顏色) alink=(正在瀏覽的超連結文字顏色)> 顏色值的輸入請參見「顏色值表」
8
顏色值表 # FF0000 紅色 # 008080 藍綠色 # FF00FF 洋紅色 # 0000FF 藍色 # FF6600 朱色
# FFAAAA 粉紅色 # FF8800 橙黃色 # FFFF00 黃色 # 00FF00 鮮綠色 # 00AA00 綠色 #88CCFF 淺藍色 # 55CCFF 水藍色 # 藍綠色 # 0000FF 藍色 # 紫色 # C00080 紫紅色 # 7700FF 紫藍色 # 深灰色 # C0C0C0 淺灰色 # 褐色 # FFFFFF 白色 # 黑色
9
顏色值表-黃綠色系 淺綠色 # 淺黃色 # 004000 鮮綠色 # FFFF00 黃色 #海藻綠色 #FFAA00金黃色
#004000墨綠色 橄欖綠色 # 黃綠色 #008000綠色 # 淺黃色 # FFFF00 黃色 #FFAA00金黃色 # 深黃色
10
顏色值表—藍紫色系 #88CCFF 淺藍色 # 800080 紫色 水藍色 # C00080 紫紅色 青色 # 7700FF 紫藍色
# 藍綠色 深藍綠色 深藍色 # 0000FF藍色 天藍色 冰藍色 # 紫色 # C00080 紫紅色 # 7700FF 紫藍色 # 深灰色 # C0C0C0 淺灰色 # 褐色 # FFFFFF 白色 # 黑色
11
製作個人網頁 基本語法 文章排版 清單設計 表格、圖形、多媒體、走馬燈 框架 文章段落的設定 標題文字的設定 一般字型的設定 其他字型的變化
樣式指令 清單設計 表格、圖形、多媒體、走馬燈 框架
12
文章段落的設定 強迫分行 .............. <br>
關閉分行 <nobr> </nobr> 分段 <p> </p> 原始文字樣式 <pre> </pre> 置中對齊 <center> </center> 插入直線<hr>
13
分段<P>語法 <p align=left/center/right> ……<br>
分段的例子
14
標題文字的設定 <hn align=left/center/right> </hn> 說明：
hn：標題文字的字體大小，n以數字 1-6表示， 1 最大而 6示最小，且字體加粗 六種標題文字
15
基本文字的設定<FONT> <font color=(顏色代碼) size=(大小，標準=3)
face=“Arial” > </font> 說明： SIZE：字體大小，以數字 1-7表示 ，7最大而 1 最小 FACE：字體型式，如：標楷體、新細明體、Time New Roman 、Arial等。
16
其他字型的變化 粗體<B>...... </B> 斜體<I>....... </I>
底線<U> </U> 刪除線<S> </S> 文字下標<SUB> </SUB> 文字上標<SUP> </SUP> 大一號字<BIG> </BIG> 小一號字<SMALL> </SMALL>
17
插入水平線<HR> <hr color=(顏色代碼) width=(長度數字或百分比) size=(高度數字或百分比)
align=left/center/right> 說明: 分隔段落用 通常與書籤超連結併用
18
網頁指定語言格式 <head>
<meta http-equiv="Content-Type" content="text/html; charset=big5"> <title> …. </title> </head> 說明 網頁的文字設定顯示，與瀏覽者的電腦文字格式有關，故儘量減少使用罕見字型 以Netscape瀏覽時，無論設定為何，中文會是以細明體顯示。若是加上上述指令，則可正確顯示
19
特殊字元 space = “ ” < = “<” > = “>” “ = "
20
樣式<STYLE>指令 <style=“font-family:’Arial’; line-height:150%;
margin-left: 10”; color:#------> </style> 說明 可置於<body>或<p>或文字間
21
製作個人網頁 基本語法 文章排版 清單、表格、圖案設計 圖形、多媒體、走馬燈 框架
22
選項清單設計 <ul style=“line-height:150%; color=“#ff0000”>
<li>項目一</li> <li>項目二</li> <li>項目三</li> </ul>
23
標號清單設計 <ol type=“任選1 / A / a / I / I” start=“標號起始數字”>
<li>項目一</li> <li>項目二</li> <li>項目三</li> </ol>
24
表格之基本格式 表格說明 <CAPTION>.......................</CAPTION>
定義標題 <TH> </TH> 定義列 <TR> </TR> 定義儲存格 <TD> </TD> 寫法: <TABLE> <CAPTION>表格說明.</CAPTION> <TR>標題列<TH>標題內容</TH> <TH>......</TH></TR> <TR>第二列<TD>儲存格內容</TD> <TD>......</TD></TR> <TR>第三列<TD>儲存格內容</TD> <TD>......</TD></TR> </TABLE>
25
表格設計 <TABLE BORDER=數字 WIDTH=數字或數字%
BGCOLOR=#------ CELLSPANCING=數字> ※說明： 1.BORDER：意為「表格邊線」。 2.WIDTH：意為「表格寬度」。 3.BGCOLOR：意為「表格底色」，其中------要使用 0-9 及 A-F 來表示，顏色值的輸入請參見「顏色值表」。 4.CELLSPACING：意為「表格框線」。
26
定義標題 ◎<TH>內容語法如下： <TH ALIGN=# BGCOLOR=#------> ※說明：
1.ALIGN：意為「內容位置」，而 #= LEFT / CENTER / RIGHT 選擇其中一個即可。 2.BGCOLOR：意為「此格底色」，其中------要使用 0-9 及 A-F 來表示，顏色值的輸入請參見「顏色值表」。
27
<TD>儲存格的用法 <TD ALIGN= LEFT / CENTER / RIGHT BGCOLOR=#------
COLSPAN=數字 ROWSPAN=數字> 說明： ALIGN：為「內容位置」 BGCOLOR：為「此格底色」顏色值參見「顏色值表」 COLSPAN：為「合併行數」，無法和rawspan 合用 ROWSPAN：為「合併列數」，無法和colspan 合用
28
製作個人網頁 基本語法 文字排版 清單設計 表格、圖形、多媒體、走馬燈 框架
29
插入圖形<IMG> <IMG SRC=“圖片來源檔名” WIDTH=“數字” ，如94 HEIGHT=“數字”，如87
ALT=“圖片資訊” ALIGN=“選項為 LEFT / MIDDLE / RIGHT / TOP / BOTTOM “ BORDER=“數字”> </IMG>
30
插入走馬燈<Marquee>
DIRECTION=“LEFT/RIGHT” LOOP=“出現次數”，無限次=-1 BEHAVIOR=“SCROLL/SLIDE/ALTERNATE” BGCOLOR=“顏色代碼” WIDTH=“數字”，如657 HEIGHT=“數字”，如26> <FONT>……..</FONT> </MARQUEE>
31
◎<A>內容語法如下： <A HREF="網頁名稱或網站位址" TARGET="目標名稱"> ※說明： 1.HREF：意為「鏈結目標」，如：<A HREF="Mario.html"> 、<A HREF=" 等。 2.TARGET：意為「目標框位」，時常與「定義框架」來使用 ，因敘述不易，故可以 下載範例 (ZIP格式) 來參 考，可見「框架建立」之說明。
32
您停留本站時間
Similar presentations
