Download presentation
Presentation is loading. Please wait.
1
第 2 章 HTML 初步 著作權所有 © 旗標出版股份有限公司
2
本章提要 一個最簡單的 HTML 文件 簡單的格式變化 連到其他網頁—建立超連結 將個人首頁上傳至 Web 伺服器
3
一個最簡單的 HTML 文件 沒有標籤的文字檔也可以瀏覽 加入標籤 基本的標籤 實例
4
沒有標籤的文字檔也可以瀏覽 請用編輯程式輸入如下的內容, 並以 Ex02-01.htm 存檔：
5
沒有標籤的文字檔也可以瀏覽 接著開啟 IE 執行檔案 / 開啟舊檔命令：
6
沒有標籤的文字檔也可以瀏覽 不妨將同一個檔案複製成 Ex02-01.txt, 並將這個純文字檔拉曳到瀏覽器中, 仔細觀察, 與先前 .htm 的效果還是有些微差異：
7
加入標籤 雖然只要將副檔名改成 .htm 就可以產生一個 HTML 文件, 但若沒有用到 HTML 標籤則畫面單調沒有變化。
用 IE 的檢視 / 原始檔功能可以看到 HTML 標籤像這樣子：
8
加入標籤 標籤名稱都是英文且無大小寫之分, 基本上 HTML 標籤依其用法可分為 2 類：
前後包夾型, 這種標籤必須成對出現, 例如： <BODY>…</BODY>, 在兩個標籤間的文字就會被加上此標籤所定義的效果。 單槍匹馬型, 這種標籤只需出現一次, 像：<BR>、<HR> 等等。
9
基本的標籤 若是使用 HotDog 之類的 HTML 編輯軟體, 則開啟一個的 HTML 檔案時, 這些軟體會在文件中加入一些基本的標籤, 例如：
10
基本的標籤 上圖除了 meta 外的四對標籤可算是 HTML 文件最基本的標籤：
1.<HTML></HTML> 文件的開始與結束 2.<HEAD></HEAD> 標示文件資訊 3.<BODY></BODY> 標示本文 4.<TITLE></TITLE> 文件標題
11
<HTML></HTML>
這個標籤表示 HTML 文件的開始與結束, 所以要在文件開頭上 <HTML>, 在檔案最末加上 </HTML>：
12
<BODY></BODY>
文件資訊是用 <HEAD> 標籤所包含住的, 本文部份則是用 <BODY> 標籤來定義：
13
<TITLE></TITLE>
14
實例
15
實例 存檔後, 用 IE 開啟該檔案：
16
簡單的格式變化 在瀏覽器中, 不管文句、段落的換行與空格一律依 HTML 標籤來安排文件的段落格式：
17
控制文章段落 <BR> 換行
18
不使用 <BR> 的換行 換行不一定要使用 <BR> 標籤, 只要文字已達到視窗的右邊界時, 程式會自動從出現空白的地方移到下一行顯示, 此動作稱為 Wrap。其換行的位置會依視窗的大小自動調整, 比起 <BR> 標籤的硬性規定彈性更大。
19
不使用 <BR> 的換行
20
控制文章段落 <P> 分段
21
控制文章的段落 <PRE> 使用原有的排列
22
控制文章的段落 <HR> 加上分隔線
23
設定標題文字 設定標題的標籤共有 6 個, 分別是 <H1>、<H2>、…至 <H6>, 數字愈大, 所顯示的文字愈小：
24
對齊文字 前面在介紹標籤時, 只是在 "<>" 中加入元素的名稱, 其實很多元素還有屬性可供設定。加入屬性時的標籤格式如下：
屬性不一定只一個, 有多個屬性時的寫法如下：
25
對齊文字 <P ALIGN> 設定對齊方向
26
對齊文字 <P ALIGN> 設定對齊方向
27
對齊文字 <CENTER> 向中對齊
28
<HR> 標籤的變化
29
<HR> 標籤的變化
30
實例
31
實例
32
連到其他網頁—建立超連結 善用 URL 建立超連結 實例
33
善用 URL 要連上 Internet 上的網頁或是其它的資源, 我們必須先知道對方的 URL 才行。在 HTML 文件中, 就是利用標籤註明 URL, 也就是建立一個超連結, 使用者只要在超連結的文字上按一下, 就可連接過去。
34
建立超連結 在 HTML 文件中要建立超文字連結的標籤為 <A> 標籤 (Anchor), 其使用方式如下：
35
建立超連結 例如要建立一個連向旗標公司首頁的連結, 其做法如下：
36
建立超連結 在 <A> 和 </A> 標籤之間的旗標公司就會被瀏覽器以藍色的文字加上底線顯示, 同時只需在這幾個字上按一下, 便可直接上該網站：
37
建立本機檔案連結 如果要連結到本機中, 位於同一個資料夾的其他檔案, 則只須指定檔案名稱即可 (不需要加上 http)：
如果檔案是在子資料夾內, 再加上子資料夾名稱即可：
38
建立 FTP 連結 指定 FTP 站的位址, 當然也可加上資料夾或檔案名稱：
39
建立 Gopher 連結 指定所要進入的 Gopher 主機, 同樣可加上目錄名稱：
40
建立 News 連結 指定所要進入的新聞群組名稱。在新聞群組的超連結上按一下, IE 會自動啟動預設的 Outlook Express 閱讀新聞郵件：
41
建立 連結 常常可看到一種按了之後可寫信給該網站作者的連結, 此種 URL 是用 mailto： 來指定, 例如：
42
實例
43
實例
44
實例
45
實例
46
大小寫的問題 在使用 <A> 標籤建立與其它檔案的連結時, 要特別注意檔案名稱的大小寫問題。因為目前多數的 WWW 主機都是使用 UNIX 系統, 在 UNIX 系統中檔案名稱的大小寫是有區別的, 所以在建立連結時, 需特別注意 <A HREF="…"> 中所指的檔案名稱與主機上的檔案名稱大小寫要符合。
47
將個人首頁上傳至 Web 伺服器 上傳前的準備動作—確認首頁名稱 以 IE 上傳首頁文件 以 WS_FTP 上傳首頁文件 展示個人首頁
48
上傳前的準備動作—確認首頁名稱 HTML 文件若要成為個人網站的首頁, 請先向系統理員確認 Web 伺服器規定的首頁名稱。
舉例來說, 若 Web 伺服器規定首頁名稱為 default.htm, 在瀏覽器的網址列輸入 時, 伺服器實際上會傳送 default.htm 這個 HTML 文件給瀏覽器。
49
以 IE 上傳首頁文件
50
以 IE 上傳首頁文件
51
以 IE 上傳首頁文件
52
以 WS_FTP 上傳首頁文件 2 1 3 4 5 6 保留預設值
53
以 WS_FTP 上傳首頁文件
54
展示個人首頁 啟動 IE, 在網址列輸入 伺服器名稱/帳戶名稱即可：
Similar presentations
