Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML教學

228 views

Published on

aaa

Published in: Education
  • Be the first to comment

  • Be the first to like this

HTML教學

  1. 1. 著作權所有 © 旗標出版股份有限公司 第 1 章 認識 HTML
  2. 2. 2 1-1 什麼是 HTML  逛遍網路上形形色色的網頁 , 有的是令人 目眩神迷、唱作俱佳的多媒體網頁;有的 是內容豐富別具特色的部落格;有的則是 功能齊全、不出門就能 Shopping 的購物 網站;不論是哪一種網頁 , 都是以 HTML 為基礎建構而成的。  不論您是想架設自己的部落格 , 或是想學 習網頁程式設計 , 學會 HTML 才能真正 了解網頁的運作 , 進而做到更精細的設定 , 使您的網頁更加完美。
  3. 3. 3 1-1-1 HTML 與網頁的關係  如果您平常是用 Internet Explorer 做為 瀏覽程式 , 執行『檢視』功能表中的『原 始檔』命令後 , Internet Explorer 就會 顯示另外一個視窗 , 視窗內所呈現的就是 您所看到之網頁的原始文件內容 , 如下圖 所示:
  4. 4. 4 1-1-1 HTML 與網頁的關係
  5. 5. 5 1-1-1 HTML 與網頁的關係
  6. 6. 6 1-1-1 HTML 與網頁的關係  我們稱這個原始文件為 HTML 網頁文件 , 您要製作網頁時 , 就是要做出一個如上圖 所示的 HTML 文件 , 因此我們必須學習 HTML (HyperText Markup Language), 中文可稱之為『超文字標記語言』。
  7. 7. 7 1-1-2 HTML 文件是由標籤組成的  由前圖我們可以看到 , HTML 文件中除了 可在瀏覽器中所看到的文字外 , 還多出一些 奇怪的文字 , 像是 <head> 、 <frameset> 等等 , 我們稱 這些由小於 "<" 及大於 ">" 符號所組成 的記號為『標籤』 (tag) 。
  8. 8. 8 目前常見的編輯器簡介  以下對幾種比較知名的軟體做一些簡略的 介紹供大家參考:  Adobe Dreamweaver  Microsoft FrontPage  NVU
  9. 9. 9 1-4-1 純粹文字的 HTML 文件  其實 HTML 文件只是個普通的文字檔 , 您可以在 Windows 的記事本 ( 或其它 文書編輯程式 ) 中輸入以下內容 , 並儲存 為 HTML 文件 ( 假設命名為 ex01- 01.html) :
  10. 10. 10 1-4-1 純粹文字的 HTML 文件
  11. 11. 11 1-4-1 純粹文字的 HTML 文件  將檔案命名為 .htm ( 或是 .html) 之後 , 瀏覽器就會將這個檔案視為 HTML 文件了 。  請您將同一個檔案複製後 , 重新命名為 .txt 檔案 , 再以 IE 瀏覽器開啟來觀看 , 便會發現有些微的差異:
  12. 12. 12 1-4-1 純粹文字的 HTML 文件  雖然只要將檔案的副檔名改成 .htm 或 .html 即可產生一個 HTML 文件 , 但 HTML 文件必須以標籤來控制所有的圖片 和文字 , 才能展現出特色 , 意即標籤是 HTML 的核心所在 , 若不使用標籤便失去 了儲存成 HTML 文件的意義了。
  13. 13. 13 1-4-1 純粹文字的 HTML 文件
  14. 14. 14 1-4-2 在 HTML 文件加入標籤  若您曾經使用過 IE 瀏覽器的『檢視 / 原 始檔』功能 , 來觀看別人的網頁 , 就會發 現其中包含了許多 HTML 標籤 , 其格式 如下:
  15. 15. 15 1-4-2 在 HTML 文件加入標籤  標籤名稱都是英文 , 也沒有大小寫的區別。 例如 <body> 、 <BODY> 、 <bOdY> 的效果都是相同的。基本上 HTML 標籤依 其用法可分為 2 種:  前後包夾型  單槍匹馬型
  16. 16. 16 前後包夾型  這種標籤必須成對出現 , 第二個標籤就是 在標籤名稱前加上一個斜線 “ /”, 例如在文 件中有一個 <body> 標籤 , 在稍後就會 有一個 </body> 的標籤 , 在這 2 個標 籤間的文字就會被加上此標籤所定義的效 果。不過有些也可視情況省略對應的結束 標籤 , 例如 <p> 。
  17. 17. 17 單槍匹馬型  這種標籤只需出現一次 , 像是將 <br> 、 <hr> 等等。
  18. 18. 18 1-4-2 在 HTML 文件加入標籤  雖然 HTML 的語法要求並不嚴格、彈性較 大;不過在 XHTML 中對語法的要求較嚴 謹 , 標籤的大小寫是不同的 , 因此建議您 一律使用小寫的標籤;而本書所有的範例 也都使用小寫的標籤。
  19. 19. 19 1-4-3 什麼是標籤屬性  標籤的屬性 (Attribute) 可視為是標籤的 『參數』 , 可以讓同一個標籤展現出不同 的效果。加入屬性時的標籤格式如下:  屬性不一定只有一個 , 有多個屬性時的寫 法如下:
  20. 20. 20 1-5 最基本的 HTML 標籤  在這一節我們要介紹以下 4 個最基本的 HTML 標籤 , 這幾個標籤架構出 HTML 文件的結構。  也就是說 , 一般看到的 HTML 文件都是 由這幾個標籤形成主體 , 再加上其它的標 籤擴充。  雖然實際上 , 不使用這些標籤也能做出漂 亮的網頁 , 不過為了建立良好的文件架構 , 以及避免瀏覽器的誤判 , 建議大家還是應 該在文件中使用這些標籤:
  21. 21. 21 1-5 最基本的 HTML 標籤  <html> : HTML 文件的開始與結束  <head> :標示文件資訊  <title> :文件標題  <body> :標示本文
  22. 22. 22 1-5-1 HTML 文件的開始與結束 - <html>  這個標籤表示 HTML 文件的開始與結束 , 意即 HTML 文件應以 <html> 開始 , 檔案最後則應以 </html> 做為結束:
  23. 23. 23 1-5-1 HTML 文件的開始與結束 - <html>  實際上 , 如果想偷懶 , 不加上 <html> 標籤也是可以的。不過 , 往後若有機會學 習網頁程式語言 (ASP 、 PHP 等 ) 時 , 加上 <html> 標籤可以讓您的網頁結構 分明 , 更容易閱讀。  所以 , 建議您還是養成習慣 , 將文件加上 <html> 標籤。
  24. 24. 24 1-5-2 HTML 和瀏覽器溝通的資訊 - <head>  <head> 標籤是用來標示文件的資訊 , 主 要是用以敘述 HTML 文件 ( 如說明此 HTML 文件的用途 ) 及宣告程式碼 ( 如宣 告 Java Script 程式 ) 等。這些資訊只存 在於 HTML 文件當中 , 用瀏覽器觀看網 頁時 , 並不會看到這些資訊。
  25. 25. 25 1-5-2 HTML 和瀏覽器溝通的資訊 - <head>  下列 3 種資訊可以放在 <head></head> 標籤之中: 1. <title></title> : HTML 文件的標 題。 2. <meta></meta> :記錄此 HTML 文件的相關資訊 , 如此文件建立的日期 , 使用的軟體等。 3. <script></script> :宣告使用的 程式碼 , 如 Java Script 的程式碼。
  26. 26. 26 1-5-2 HTML 和瀏覽器溝通的資訊 - <head>  雖然上述的資訊應該要放在 <head></head> 標籤之中 , 但若是省 略了 <head></head> 標籤 , 其中的 資訊仍會正常運作 , 並不會被當成本文顯 示在瀏覽器上。
  27. 27. 27 1-5-3 出現在瀏覽器上方的網頁標 題- <title>  上述可放在 <head></head> 標籤中 , 最常見、也是大家都會用的資訊 , 就是網 頁的標題 , 這個標題會出現在瀏覽器視窗 的標題欄上 , 例如:
  28. 28. 28 1-5-3 出現在瀏覽器上方的網頁標 題- <title>  在瀏覽器視窗的標題欄顯示如上圖所示的 『阿標的攝影手札』 字樣 , 可用 <title> 標籤來定義:
  29. 29. 29 1-5-3 出現在瀏覽器上方的網頁標 題- <title>  瀏覽器就會將 <title> 標籤之間的文字顯 示在其視窗的標題欄上 , 但不會出現在文 件之中。如果我們未指定 <title>, 就 IE 瀏覽器而言 , 會以用此文件的路徑 做為文 件的標題。  另外請注意 , 即使文件中未使用 <head> 標籤 , 仍然可以用 <title> 標籤來指定文 件的標題。
  30. 30. 30 1-5-4 網頁的內容- <body>  <body> 標籤是用來標示本文的部份:
  31. 31. 31 1-5-4 網頁的內容- <body>  在 <body> 標籤之間可輸入任何想顯示 在網頁上的文字 , 也是大家發揮個人特色 所在。簡單的說 , 若是將事先編輯好的文 字檔加到 <body> 標籤之中 , 馬上就完 成一個 HTML 文件了。  前例中 , 只用了基本的標籤 , 而未用到任 何段落格式設定的標籤 , 故所有的字就會 一個接一個、一行接一行地顯示出來。
  32. 32. 32 1-5-4 網頁的內容- <body>  文件中的空格並非沒有作用。當文件中有 空格時 , 瀏覽器只會空『一格』 , 而且即 使用十個、二十個空格連在一起 , 其效果 仍跟只空一格是一樣的 , 至於換行在 IE 中是沒有效的 ( 有些瀏覽器則視為一個空 格 ) 。我們可從下列幾種情形瞭解文件中換 行與空白的效果:
  33. 33. 33 1-5-4 網頁的內容- <body>
  34. 34. 34 1-5-4 網頁的內容- <body>  <body> 標籤還有許多屬性可設定 , 如設 定背景圖片的 background 屬性、設定 文字顏色的 text 屬性等 , 往後會陸續在 相關的章節介紹。

×