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