1 / 95

第 2 章 HTML 語法

第 2 章 HTML 語法. 製作. 認識 HTML - 簡介 HTML. 在以往建構靜態網頁時，可以利用網頁設計工具進行設計，但是想要學習動態網頁的製作時，則必須捨棄這些工具直接運用 HTML 撰寫網頁。 以 HTML 語法撰寫的檔案稱做 HTML 文件。儲存 HTML 文件時，並未運用特別的檔案格式，而是以 .htm 或 .html 為副檔名儲存的純文字檔。. 認識 HTML - 簡介 HTML. 您可使用任何文書編輯軟體建立、編輯 HTML 文件，如 Windows 中的文字編輯軟體 – NotePad 。.

gary
Download Presentation

第 2 章 HTML 語法

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 第 2 章 HTML語法 製作

  2. 認識HTML - 簡介HTML • 在以往建構靜態網頁時，可以利用網頁設計工具進行設計，但是想要學習動態網頁的製作時，則必須捨棄這些工具直接運用HTML撰寫網頁。 • 以HTML語法撰寫的檔案稱做HTML文件。儲存HTML文件時，並未運用特別的檔案格式，而是以.htm或.html為副檔名儲存的純文字檔。

  3. 認識HTML - 簡介HTML • 您可使用任何文書編輯軟體建立、編輯HTML文件，如Windows中的文字編輯軟體 –NotePad。

  4. 認識HTML - HTML的標籤與元件觀念 • HTML的標籤 • HTML控制資料顯示格式的方式，是透過兩個兩個一組的HTML標籤（亦可稱之為標記）將欲控制的文字包夾於中間。 • 每一組HTML標籤的開頭標籤之語法為『<標籤名稱>』，結尾標籤之語法則為『</標籤名稱>』。

  5. 認識HTML - HTML的標籤與元件觀念 • HTML文件內HTML標籤控制文字顯示的語法如下所示。 • 以下HTML敘述將控制（或稱定義）位元文化這幾個字在瀏覽器顯示時，為一個文字段落。 <標籤名稱>欲控制文字</標籤名稱> <P>位元文化</P>

  6. 認識HTML - HTML的標籤與元件觀念 • 元件的觀念 • 運用一組HTML標籤將一段文字包夾在中間時，這段文字與包夾文字的HTML標籤將稱為一個元件。 • 以下敘述將利用Align屬性，控制『位元文化』這四個字組成的段落，以置中方式對齊。 <P Align=Center>位元文化</P>

  7. 認識HTML - HTML的標籤與元件觀念 • HTML的階層觀念 • 整個HTML文件就像是一個大元件，將包含許多小元件。 • HTML文件最外層的元件，將由<HTML>標籤建立。 • 在<HTML>標籤建構的元件內，還包含由<HEAD>標籤與<BODY>標籤所建立的兩個主要子元件。

  8. 認識HTML - HTML的標籤與元件觀念 • 所有HTML文件的最基本架構如下所示： <HTML> <HEAD> …… </HEAD> <BODY> …… </BODY> </HTML>

  9. 認識HTML - HTML的標籤與元件觀念 • HTML標籤的架構如下圖所示：

  10. 認識HTML - HTML的標籤與元件觀念 • 以下語法<HEAD>標籤與<BODY>標籤彼此交錯是不對的，當標籤交錯時，將無法區別兩個元件的範圍。

  11. 認識HTML - HTML的標籤與元件觀念 • 超連結 • 網頁的超連結是以下加底線，並以不同顏色與網頁中其他文字區隔。 • 當滑鼠游移到超連結上時，游標將變成手形圖示，告訴您可以點選該文字，連結至其他網頁，如下圖所示。

  12. 認識HTML - HTML的標籤與元件觀念 • 超文字與多媒體 • 網頁內除了可以包含文字外，也可以置入圖片、影像、聲音、動畫等多媒體資料。 • 這些多媒體資料同樣利用HTML標籤，標示成為文件內的一個元件，以下為建立圖片元件的HTML敘述。 <IMG src="http://192.168.1.10/poweredby.gif>

  13. 認識HTML - HTML的標籤與元件觀念 • 在HTML文件內還有一些比較特殊的小觀念必須注意： • HTML文件內以按下 鍵的方式分行，顯示於瀏覽器時，並不會有任何效果。若網頁內容的文字欲換行，必須使用<BR>標籤。 • HTML文件的文字間，不論您鍵入幾個空白鍵，瀏覽器僅顯示為一格空白。若希望在HTML文件內顯示數個空白時，必須利用『&nbsp;』代表空白。當n個『&nbsp;』串連在一起時，瀏覽器內將顯示n個空白。

  14. 認識HTML - HTML的標籤與元件觀念 • 在HTML的標籤中，英文大小寫的意義相同，也就是說<HTML>與<html>是一樣的。 • 使用不同瀏覽器瀏覽同一份HTML文件時，顯示的網頁可能不盡相同，因為不同的瀏覽器解譯HTML語法會有些許差異。

  15. 認識HTML - HTML的標籤與元件觀念 • 雖然HTML是一個標準語法，但Netscape與IE基於此標準語法，將各自訂定一些只能在該廠牌瀏覽器內，才能正常顯示的特殊語法。若希望所有瀏覽器都能正常瀏覽所製作的網頁時，應該避免使用這些自訂語法，本書所說明的HTML語法為HTML 4.0。

  16. 認識HTML - HTML小助教 • 啟動後的畫面如下圖所示： 檢視區 按下此鈕可立即執行 輸入的HTML語法， 並在檢視區看到結果 輸入區

  17. HTML標籤運用基本觀念- HTML標籤的語法 • 定義元件的開始標籤之基本語法如下： • 結束標籤的建立方式： <標籤名稱 屬性1="值1" 屬性2="值2" …> </標籤名稱>

  18. HTML標籤運用基本觀念- HTML標籤的語法 • HTML文件某個元件的完整定義語法如下： <標籤名稱 屬性1="值1" 屬性2="值2" …>元件資料< /標籤名稱>

  19. HTML標籤運用基本觀念- HTML文件基本架構 • HTML文件的典型結構如下： <HTML> <HEAD><TITLE>標題文字</TITLE></HEAD> <BODY> …… </BODY> </HTML>

  20. HTML標籤運用基本觀念- HTML文件基本架構 • <HTML>標籤 • 整個文件被區分為兩大部份： • 由<HEAD>標籤建立的文件標頭 • 由<BODY>標籤建立的文件主體

  21. HTML標籤運用基本觀念- HTML文件基本架構 • <HEAD>標籤 由<HEAD>標籤定義的元件中，是放置有關這份HTML文件的資訊，例如：文件的標題、編碼方式…等等。 • <TITLE>標籤 此標籤使用於<HEAD>標籤內，用於標示此HTML文件的標題名稱。

  22. HTML標籤運用基本觀念- HTML文件基本架構 • <BODY>標籤 • 由<BODY>標籤建立的元件，為此HTML文件的內容主體。 • 此HTML文件欲顯示的所有文件內容都將放在這個元件中。 • 在這個元件中，可以利用各種HTML標籤，控制網頁顯示內容的格式、編排與效果。

  23. HTML標籤運用基本觀念-文件主體標籤<BODY></BODY> • bgcolor屬性 • 控制文件的背景顏色，語法為： • 16進位數值的方式指定顏色，語法如下： bgcolor="顏色" #RRGGBB • RR代表紅色、GG代表綠色、BB代表藍色

  24. HTML標籤運用基本觀念-文件主體標籤<BODY></BODY> • 常用的基本顏色名稱列於下表。

  25. HTML標籤運用基本觀念-文件主體標籤<BODY></BODY> • 以下HTML敘述將產生背景顏色為藍色的HTML文件。 <HTML> <BODY bgcolor=blue> 文件背景為藍色 </BODY> </HTML>

  26. HTML標籤運用基本觀念-文件主體標籤<BODY></BODY> • 上述HTML敘述鍵入HTML小助教後，顯示的畫面如下：

  27. HTML標籤運用基本觀念-文件主體標籤<BODY></BODY> • text屬性 此屬性用於控制網頁內文字的顏色，語法為： text=顏色值 • link屬性 網頁中未被點選過之超連結的顏色，語法為： link=顏色值

  28. HTML標籤運用基本觀念-文件主體標籤<BODY></BODY> • vlink屬性 設定網頁中已經連結過之超連結的顏色，語法如下： vlink=顏色值 • alink屬性 按下滑鼠時之顏色 alink=顏色值

  29. HTML標籤運用基本觀念-文件主體標籤<BODY></BODY> • background屬性 指定做為HTML文件背景的圖片，可以使用的圖檔格式為GIF與JPG，語法如下： background="檔案名稱與路徑"

  30. 文字版面編排標籤- 標題標籤<Hn></Hn> • <Hn>標籤用於標示網頁的標題文字，被標示的文字將以粗體方式顯示在網頁中，語法如下： <Hn>標題文字</Hn>

  31. 文字版面編排標籤- 標題標籤<Hn></Hn> • 以下HTML敘述將建立出六種層級的標題 <HTML> <BODY> <H1>標題1</H1> <H2>標題2</H2> <H3>標題3</H3> <H4>標題4</H4> <H5>標題5</H5> <H6>標題6</H6> 以上為網頁中可用的各等級標題。 </BODY> </HTML>

  32. 文字版面編排標籤- 標題標籤<Hn></Hn> • 上述HTML敘述鍵入HTML小助教後，顯示的效果如下：

  33. 文字版面編排標籤- 標題標籤<Hn></Hn> • Align屬性 <Hn>標籤內較為常用的屬性為align，此屬性用於控制標題的對齊方式，語法如下： align= left 或 center 或right

  34. 文字版面編排標籤- 標題標籤<Hn></Hn> • 以下HTML敘述將示範不同的標題對齊方式 <HTML> <BODY> <h1 align=center>置中標題</h1> <h1 align=left>靠左標題</h1> <h1 align=right>靠右標題</h1> </BODY> </HTML>

  35. 文字版面編排標籤- 標題標籤<Hn></Hn> • 上述HTML敘述鍵入HTML小助教後所，顯示的效果如下：

  36. 文字版面編排標籤- 段落標籤<P></P> • 在瀏覽器中，不同段落文字間將以一行空白間隔，以區別文字的不同段落，語法如下： <P>文字</P> • 在<P>標籤中較常用的屬性為align屬性，透過此屬性可以控制段落的對齊方式，語法如下： align= left 或 center 或right

  37. 文字版面編排標籤- 段落標籤<P></P> • 以下HTML敘述，將示範不同的標題對齊方式。 <HTML> <BODY> <P align=center>置中段落</P> <P align=left>靠左段落</P> <P align=right>靠右段落</P> </BODY> </HTML>

  38. 文字版面編排標籤- 段落標籤<P></P> • 上述HTML敘述鍵入HTML小助教後，所顯示的效果如下：

  39. 文字版面編排標籤- 換行標籤<BR> • 換行標籤是一個沒有結尾標籤的標籤，HTML文件中任何位置只要使用了<BR>標籤，當文件顯示於瀏覽器中時，該位置後的文字將顯示於下一行。 • 若欲將某位置後的文字顯示於下一行時，必須在該位置使用<BR>標籤。

  40. 文字版面編排標籤- 換行標籤<BR> • 以下HTML敘述將示範利用<BR>標籤將文字分行顯示。 <HTML> <BODY> 第一行<BR> 第二行<BR> </BODY> </HTML>

  41. 文字版面編排標籤- 換行標籤<BR> • 上述HTML敘述鍵入HTML小助教後，所顯示的效果如下：

  42. 文字版面編排標籤 - 水平分隔線<HR> • Size屬性 設定水平線的粗細，單位為像素（pixel）。 • Width屬性 水平線的寬度，單位可使用像素（pixel），或螢幕的百分比 。 • align屬性 控制水平分隔線的對齊方式，有置中、靠左、靠右三種，語法 如下： align=center或left或right

  43. 文字版面編排標籤 - 水平分隔線<HR> • color屬性 線條的顏色，顏色可用英文名稱或是16進位數值設定。 語法如下： color=顏色值 • noshade屬性 水平線不顯示3D陰影。

  44. 文字版面編排標籤 - 水平分隔線<HR> • 以下HTML敘述將示範建立各種不同的水平分隔線。 <HTML> <BODY> <HR align=left> <HR align=left width= 50%> <HR size=10 width= 50%> <HR size=20 color="blue"> <HR size=20> <HR size=20 noshade> </BODY> </HTML>

  45. 文字版面編排標籤 - 水平分隔線<HR> • 上述HTML敘述鍵入HTML小助教後，顯示的效果如下：

  46. 文字版面編排標籤- 置中對齊<CENTER></CENTER> • 以下示範運用<CENTER>標籤控制段落文字的水平對齊為 置中對齊。 <HTML> <BODY> <CENTER> <P>我是郭尚君</P>請多指教 </CENTER> </BODY> </HTML>

  47. 文字版面編排標籤- 置中對齊<CENTER></CENTER> • 上述HTML敘述鍵入HTML小助教後，顯示效果如下：

  48. 文字版面編排標籤- 有序號條列標籤<ol></ol> • 有序號條列標籤的語法如下： <ol> <li>條列1 <li>條列2 <li>條列3 …… </ol>

  49. 文字版面編排標籤- 有序號條列標籤<ol></ol> • type屬性 此屬性用於控制序號的種類。 語法如下： type=1或A或a或I或i

  50. 文字版面編排標籤- 有序號條列標籤<ol></ol> • start屬性 以下為設定序號開始之編號的語法，n可以是2、C或是vi。 start=n

More Related