HTML簡介
課程進度表

 

什麼是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>

經瀏覽器解釋後

  1. 標號清單一
  2. 標號清單二
  3. 標號清單三

 

<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>

表格標示
表格標示結構如下:

        

<table border="2" width="80%">
<tr>
<td width="50%">儲存格一</td>
<td width="50%">儲存格二</td>
</tr>
<tr>
<td width="50%">儲存格三</td>
<td width="50%">儲存格四</td>
</tr>
</table>

                           經瀏覽器解釋後

儲存格一 儲存格二
儲存格三 儲存格四