 |
什麼是 HTML
 |
HTML=HyperText Markup Language 。
|
|
HTML 是描述網頁內容的語言。
|
|
HTML 內容由伺服器負責儲存，由瀏覽器負責解讀並呈現其內容。
|
|
|
誰需要學習 HTML
|
希望了解 HTML 結構者。
|
|
更專業的網頁製作者。
|
|
希望在網頁中撰寫程式(CGI 、 ASP 、...)者。
|
|
動態網頁製作者。
|
|
|
標示(TAG)與區塊
|
標示是給瀏覽器的指令，指示瀏覽器以何種形式呈現網頁內容。 HTML 的標示符號為『<>』，下面例子中的<H1>、<HR>、<UL>、<LI>等都是 HTML 的標示。
|
|
標示無大小寫之區別。(小寫意義相同)
|
|
區塊是同一個標示作用的範圍。下例中的<H1>...</H1>為一個區塊。
|
|
區塊的起始符號為<TAG>，結束為</TAG>。
|
|
大部分的標示都會有其作用區塊設定，但並非全部均為必須。為求 HTML 的完整與可讀，建議養成習慣，每一個 TAG 均指定其作用範圍(區塊)。
|
|
經由 TAG 的作用，瀏覽器可以以完全不同於 HTML 的模樣來呈現網頁內容
HTML Format
<H1>初試 HTML 語法</H1>
<HR>
<H2>使用 HTML 的基本觀念</H2><P>
<UL>
<LI>標示的觀念</LI>
<LI>區塊的觀念</LI>
<LI>參數的觀念</LI>
</UL> |
Presented By the Browser
初試 HTML 語法
使用 HTML 的基本觀念
|
|
|
標示的屬性
 |
標示的格式通常為<標示名稱 屬性一="xxx" 屬性二="yyy" .....>
|
|
經由屬性的指定，可以讓標示更為有彈性。不同的標示，一般都有一組其可搭配使用的屬性。
<IMG SRC="cloud.jpg" height=200 width=300>
上例中， IMG 為標示， SRC 、 height 、 width 均為其屬性。
|
|
|
標示的階層
|
標示有階層觀念。
|
|
一個完整的 HTML 網頁的基本結構如下：
|
<HTML>
<HTML>到</HTML>之間代表一份 HTML 文件。大部分的瀏覽器會把延伸檔名為".htm"或".html"的檔案自動視為 HTML 文件，因此省略此一標示並不會影響瀏覽結果。但是為了完整性與可讀性，建議不要省略。
|
|
<HEAD>
用來設定 HTML 文件的標題、作者等資訊。這些資訊不會顯示在瀏覽視窗上，存在主要目的在於便於管理。省略並不會影響顯示內容。
|
|
<BODY>
<BODY>與</BODY>之間的內容經瀏覽器解釋後，會呈現在瀏覽器的視窗中，這是 HTML 文件的主體。
|
|
|
|
|
HTML 中的超文字(Hypertext)
|
Hypertext 指的是 HTML 中非文字的部份，而這非文字的部份主要是圖形與超鏈結。
|
|
圖形
|
標示<IMG>是 HTML 中用來插入圖形的標示。屬性"SRC"用來指定圖形來源，"height"及"width"則是用來指定圖形的高與寬，"align"則是用來指定圖形對正的方式。
|
|
Examples
<IMG SRC="003.jpg">
<IMG SRC="images/003_small.jpg" height=100 width=100 align="center">
<IMG SRC="http://nmc.nchu.edu.tw/chu/images/caterpillar.JPG" align="left" height=100 width=100>
|
|
|
鏈結
|
標示<A>是 HTML 中用來表示鏈結的標示。屬性"HREF"用來指定鏈結目標。
|
|
Examples
<A HREF=index.htm>網頁製作首頁</A>
<A HREF="http://www.nchu.edu.tw">中興大學</A>
<A HREF=images/003.jpg>這是一張圖</A>
<A HREF=images/003.jpg><IMG SRC="images/003_small.gif"></A>
|
|
|
|
Some Words About HTML
|
HTML 文件中連續的多個空白，只會被瀏覽器視為一個空白。下面兩個敘述顯示結果是一樣的。
<H1> HTML 文件</H1>
<H1> HTML 文件</H1>
|
|
HTML 換行字元是沒有作用的。下面兩個敘述顯示結果一樣：
<H1> 這是
第一行</H>
<H1>這是第一行</H>
|
|
標示不分大小寫。下面兩個敘述顯示結果一樣：
<h1> HTML 測試</h1>
<H1>HTML 測試</H1>
|
|
註解標示為<! 註解內容>
|
|
|
文字外觀的一些標示
|
<B>
將文字設為粗體字
|
|
<I>10
將文字設為斜體字
|
|
<U>
將文字加底線
|
|
<SUP>
將文字設為上標字
|
|
<SUB>
將文字設為下標字
|
|
<TT>
採等寬字形來顯示文字
一般字是這樣的 Windows
等寬字是這樣的 Windows
|
|
<FONT>
文字特性標示，一般會跟隨以下屬性使用：
|
SIZE
設定字形大小， Example 如下：
<FONT SIZE= +2> FONT SIZE = 5(or 18 pt)</FONT>
<FONT SIZE= -2> FONT SIZE= 1 (or 8 pt)</FONT>
|
|
COLOR
設定字形顏色。這個屬性的值可以是文字(如"RED"、"GREEN"、"YELLOW"等)，或是一個包含符號"#"及代表三原色(紅綠藍)的六個十六進位的數字"#RRGGBB"，其中:
#000000 代表黑色
#0000FF 代表藍色
#00FF00 代表綠色
#FF0000 代表紅色
|
|
FACE
設定字體， Example:
<FONT FACE=標楷體>標楷體</FONT>
|
|
|
|
一些與段落相關標示
|
<H1> ~ <H6>
這是預設的段落標題。
|
|
<PRE>
該段落採用等寬字形，空白鍵與換行符號在此段落中，都會生效。
|
|
<BLOCKQUOTE>
段落縮排。
|
|
<OL>
標號清單，搭配<LI>使用
<OL>
<LI>標號清單一<BR>
<LI>標號清單二<BR>
<LI>標號清單三<BR>
</OL> |
經瀏覽器解釋後
|
|
<UL>
項目清單，搭配<LI>使用
<OL>
<LI>標號清單一<BR>
<LI>標號清單二<BR>
<LI>標號清單三<BR>
</OL> |
經瀏覽器解釋後
|
|
|
段落的對齊
|
單一段落的對齊
| 靠左 |
<P ALIGN="left"> 段落內容</P> |
| 置中 |
<P ALIGN="center"> 段落內容</P> |
| 靠右 |
<P ALIGN="right"> 段落內容</P> |
|
|
連續多段落的對齊
使用<DIV ALIGN="xxx">多段落均置其中</DIV>
|
|
|
表格標示
表格標示結構如下：
|
