HTML語法教學

概述html　html的結構　網頁顏色設定　加入背景圖像　加入水平分線　文字設定　插入超連結　插入圖片

走馬燈　插入表格　安裝音樂　視訊　分割視窗　鎖死右鍵　刪除蹦出廣告視窗

HTML的全名是HyperText Markup Language，是編寫網頁的基本語言，而它並不是一個程式， 只是一些插在普通文件內的碼( code )，這些碼可以控制我們的瀏覽器要怎樣把文件顯示出來, 就是你現在所看到的頁面就是用HTML來控制的，它可控制字體的大小，也可以插入連結或圖像。

一個HTML檔稱為HTML document，存檔的副檔名為htm或 html，編寫的方式有很多種， 最原始的方法是用windows內的記事本或各種文書編輯軟體，而現在有一種軟體也是編寫HTML碼， 但具有預覽及插入特效的功能，如Dida 網頁速寫器，編寫完成後記得儲存成*.htm或*.html 即可。

若你想看一個網頁的HTML檔，只要在瀏覽器內按下滑鼠右鍵，再選擇 檢視原始檔(view)即可。

　　一份標準的HTML文件是由元素所組成的，元素是由標籤(Tag)以及文件內容所組成。 文件內容可以是文字、圖形、甚至是影像、聲音等等。而標籤又是啥東東呢？？ 一個開始標籤(< >)是由一個小於符號(<)和一個大於符號(>)所構成的 一個起始標籤中加一道斜線"/"就構成了結束標籤(</>) 而一對標籤是由一個起始標籤和一個結束標籤所構成的。

HTML document有一固定的格式，瀏覽器才可以辨識及分析，進而顯示在你的眼前，而基本格式為 :

<html>
<head>
<title>
</title>
</head>
<body>
您所要在瀏覽器顯示的內容
</body>
</html>

有兩個須要注意的地方，每一個開啟碼是由<　> 兩個符號所框住的，而關閉碼是由</　> 所框住的，而每一個HTML碼有開就要有關，後面的單元會逐一的介紹。

●基本標籤解說●

<html>.....</html>
 此標籤是放置在網頁文件的開始，製作網頁時，網頁內容和其他標籤加在<html>起始標籤和</html>結尾標籤之間。

<head>.....</head>
 此標籤是用來放置網頁文件的資訊，如標題、內容型態…等等，主要用來讓瀏覽器判別用的，所以在<head>.....</head>之間的內容，基本上並不會顯示在網頁中。

<title>標題文字</title>
 此標籤就是文件的標題，當瀏覽器瀏覽文件時，在瀏覽器視窗的標題欄左方會顯示出設定標題，但標題不會顯示在網頁中。

<body>文件內容</body>
 此標籤就是文件的主體，在網頁上顯示的內容，都是放置在<body>起始標籤和</body>結尾標籤內。

<!--註解文字-->
用來做HTML程式的註解說明，在實際執行網頁時，是不會產生作用的。

　

<body　bgcolor="#xxxxxx"　text="#xxxxxx"　 link="#xxxxxx"　vlink="#xxxxxx"　 alink="#xxxxxx">

  1. bgcolor=控制背景顏色
  2. text=控制文字顏色
  3. link=控制連結顏色
  4. vlink=控制已閱讀過的顏色
  5. alink=控制正在連結的顏色
  6. 顏色色碼對照表(一)　　顏色色碼對照表(二)
  7. 顏色英文名稱對照表一　　　顏色英文名稱對照表二

　　而xxxxxx六個數值代表紅／綠／籃的顏色元素值，為A∼F及0∼9等所組合起來的六個數值， 配色的功力就得看您自己嚕，右邊有我所製做的調色區有16的6次方種顏色供您參考 :

　　另外在xxxxxx的部份也可用顏色的英文單字代替，但xxxxxx之前的#要去掉，如text="#000000"可換成 text="BLACK"

若您覺得背景顏色太單調，想要換成背景圖像的話，就得要在<body>內加入background的屬性了。如果你的背景圖檔檔名為 back.gif，則<body>內便要寫成 :

<body background="back.gif" text="#000000" link="#0066cc" vlink="#336600">

　　PS:如果圖像的檔案跟您網頁的檔案不在同一目錄裡，則必須輸入完整路徑，如http://www.123.com.tw/back.gif。

  bgproperties="fixed"(使背景圖像固定不動，不過只有IE有效果)

若要使背景只出現一次，可加入CSS語法來控制：

<body background="back.gif" style="background-position: center;background-repeat: no-repeat;">

  1. background-position ：left/center/right
  2. background-repeat：repeat/no-repeat
  • 背景顏色

<boby bgcolor="#cc0033">

如果想要在網頁內加入一條像下面的水平線，加入<hr>的碼即可。

這是上面那一條線的原始碼 :

<hr size="5" align="center" noshade width="90%" color="0000ff">

  1. size=控制線的寬度
  2. align=控制線是靠左(left)／靠右(right)／中間(center)
  3. width=控制線的長度，可用數字或百分比
  4. noshade=控制線沒有陰影
  5. color=控制線的顏色

如果要把文字變成粗體，就要加上<b>的碼了

如果要把文字變成斜體，就要加上<i>的碼了

如果要把文字加上底線，就要加上<u>的碼了

　　耗子洞HTML教學　<b>耗子洞HTML教學</b>

　　耗子洞HTML教學　<i>耗子洞HTML教學</i>

　　耗子洞HTML教學　<u>耗子洞HTML教學</u>

文字換行：

如果覺得您的文字太長，想要您的文字跳到下一行，就要加上<br>或<p>的碼 ,而<p>是比<br>多跳一行的

在<p>的標籤內，可以加入align=left／right／center這樣就可以控制在<p>之後的物件是靠左／靠右／置中了 :

如果在<p>內有加入align的屬性，記得加上</p>的關閉碼

文字的控制

文字的控制要加上<font>的碼，它可以控制文字的大小，顏色，字型，在<font>裡加上一些屬性就可以控制

<font face="Arial" color="#cc33ff" size="7">Good morning</font>

上面的碼會做出下面的文字 :

Good morning

  1. face=控制文字字體，填入字體名稱
  2. color=控制文字顏色
  3. size=控制文字大小，數字1∼7

文字化格式：

用<pre>的碼可以將你所要顯示的文字格式一模一樣的顯示在瀏覽器上，再用</pre>來關閉

　例：

　　<pre>
　　格式會跟你打的一樣唷
　　看到了嗎
　　會一模一樣唷！！
　　</pre＞

特殊控制

底色文字

語法：

<font style=width:100%;filter:glow(color=底色,strength=50)><center>輸入你要出現的字</center></font>

發亮文字

語法：

<font color=字體顏色 size=字體大小 face=字體 style=width:100%;filter:glow(color=陰影顏色)>輸入你要出現的字</font>

立體文字

語法：

<div style="FILTER: shadow(color=陰影色碼); WIDTH: 460px; HEIGHT: 30px"><FONT color=#文字色碼 size=文字大小>輸入你要寫的字</div></font>

變色文字

語法：

<img src= width=0 height=0 onerror="setInterval('font.style.color=Math.random()*255*255*255',500)"><font id="font">輸入你要出現的字</font>

　彩色漸變文字產生器

　　連結為一個網頁不可少的東西，沒有連結就那都不能去，如要差入一個連結便要加入<a href="URL">的碼 ,URL就是所要連結的網址

連到網站

<a href="http://www.kimo.com">奇摩站</a>

如果是要連結在同一系統內的檔案，則將URL改成相對的路徑即可

連結到同一目錄內的檔案

<a href="index.htm">回首頁</a>

連結在子目錄的檔案

<a href="a.1.htm">連到a目錄裡的1.htm</a>

FTP的連結方式

<A HREF="ftp://ftp.hinet.net"></A>

當然也可以加上目錄名稱，甚至檔案名稱。
<A HREF="ftp://ftp.hinet.net/windows/windows95/simtel.net/inet/ ws_ftp32.zip">ws_ftp32.zip</A>
如此一來按一下就可以下載WS FTP的檔案

E-MAIL的連結方式

<A HREF="mailto:service@e4fancy.com">站長的信箱</A>

而在<a href="URL">的標籤中，可插入target="_new／_top／_blank／_self／name"
來改變連結所開啟頁面的狀態!!

在target裡的參數如下 :

  1. _new=開啟新視窗，。在一個新視窗開啟，不過只會一直在同一個新視窗開啟，不會另外在開一個新視窗
  2. _top=整頁。是整個大視窗，而不是所分割後的視窗
  3. _blank=開啟新視窗。跟_new差不多，只是會一直出現新的視窗，而不會在同一個新視窗開啟'
  4. _self=相同的框架。指的是所點選連結的視窗
  5. name=指定框架。在frame有介紹，是給frame中設定的框架名稱(name)

範例

而在<a href="URL">的標籤中，可插入STYLE="text-decoration:none"
來消除連結的底線

　　當然所有的連結方式．並不一定用文字,用圖片也可以唷！

<a href="tw.yahoo.com"><img src="**.gif"></a>

文件內的連結

看到上方的網頁導覽或回教學導覽按下去是不是會跳到網頁內的某個地方，一共有兩個步驟 :

（１）給目標地一個名稱，而這個名稱是在按下連結時會跳到的地方 :

<a name="目標名稱">目標地點</a>

（２）插入一個連結，而這個連結是當你按下這個連結時便會跳到目標地點 :

<a href="#目標名稱">跳到目標地點</a>

在連結的標籤內，必須加上#在目標名稱前

連結文字變色：

程式碼：將此語法放在</head>之前,綠色部分可以照自己喜歡的更改

<style>
<!--
A:link {color: FFFF00; font-family: 標楷體}
A:visited {color: 000000; font-family: 細明體}
A:active {text-decoration: none; font-family: 新細明體}
A:hover {text-decoration: none; color: FF7700}
-->
</style>

連結文字取消底線：


程式碼：將下列語法貼於</head>之前：

<style>
<!--
A:{text-decoration:none}
-->
</style>

　

圖像是一個美化網頁的重要因素，要插入圖像，就要加入<img src="圖檔名">

其中<img src="**.gif">內還可加入下列屬性，來變化圖檔 :

  • width=控制圖檔長度
  • height=控制圖檔高度
  • align=控制圖檔left(靠左)／right(靠右)／center(置中)
  • border=控制外框粗細，不外框便設成0

普通捲動
<marquee>這裡是您要填的內容</marquee>
這裡是您要填的內容

文字碰到左邊就會停止
<marquee behavior="slide">這裡是您要填的內容</marquee>
這裡是您要填的內容
　

文字碰到右邊就會停止
<marquee behavior="slide" direction="right">這裡是您要填的內容</marquee>
這裡是您要填的內容

預設捲動
<marquee behavior="scroll">這裡是您要填的內容</marquee>
這裡是您要填的內容

來回捲動
<marquee behavior="alternate">這裡是您要填的內容</marquee>
這裡是您要填的內容

向左捲動
<marquee direction="left">這裡是您要填的內容</marquee>
這裡是您要填的內容

向右捲動
<marquee direction="right">這裡是您要填的內容</marquee>
這裡是您要填的內容

捲動次數(可自行更改參數)
<marquee loop="2">這裡是您要填的內容</marquee>
這裡是您要填的內容

設定捲動寬度
<marquee width="380">這裡是您要填的內容</marquee>
這裡是您要填的內容

設定捲動高度
<marquee height="50">這裡是您要填的內容</marquee>
這裡是您要填的內容
設定背景顏色"#??????"=RGB (16進位顏色或文字輸入)
<marquee bgcolor="#??????">這裡是您要填的內容</marquee>
　

設定捲動速度(可自行更改參數)
<marquee scrollamount="30">這裡是您要填的內容</marquee>
這裡是您要填的內容

向下捲動
<marquee direction="down">這裡是您要填的內容</marquee>
這裡是您要填的內容
向上捲動
<marquee direction="up">這裡是您要填的內容</marquee>
這裡是您要填的內容
●表格標籤-<table>及屬性應用●

<table>.....</table>
 <table>標籤可以說是建立表格時最重要的一個標籤，在開始時一定要加上起始標籤<table>，結果時必須加上結尾標籤</table>，不然瀏覽器無法顯示出來。

width、height-表格寬度、高度
用法： <table width="表格寬度值" height="表格寬度值">
說明：在表格中，你可以任意的設定表格的寬度、高度等，但高度對於網頁來說比較不重要，因為表格會自動的調整高度。

border-表格邊框
用法： <table border="寬度值">
說明：設定表格的框線，寬度值越大，它的框線越粗，寬度值為零或是沒有寫上border時，代表表格沒有框線。

bgcolor-表格背景顏色
用法： <table bgcolor="色碼">
說明：設定表格內的背景顏色。

background-表格背景圖片
用法： <table background="圖片路徑">
說明：表格的背景顏色除了利用色碼來顯示外，還可以加上圖片當背景顏色。

align-表格對齊方向
用法： <table align="方向">
說明：align屬性就是設定整個表格在網頁中靠左、靠中或是靠右對齊，設定型態以left、center和right來設定，和圖片的align的情況一樣。

例：

<table　width="80"　height="40"　bgcolor="blue"　border="5">
<tr>
<td>1</td>
</tr>
</table>

說明：

寬80、高40，背景顏色為藍色，邊框寬度值為5的表格

●表格列-<tr>及屬性應用●

<tr>.....</tr>
 表格有分欄和列，<tr>標籤就是代表著列的起頭，它是加在<table>起始標籤和</table>結尾標籤內， 有多少個<tr>標籤就代表有多少列。而<tr>和</tr>標籤間可以包含著<th> 或<td>兩種標籤，分別代表標題或是表格內文。

bgcolor-表格列背景顏色
用法： <tr bgcolor="色碼">
說明：設定表格中每一列的背景顏色。

align-表格列水平對齊方向
用法： <tr align="方向">
說明：設定表格中每一列所有儲存格內容的水平對齊方向，設定型態有left、center和right三種。

valign-表格列垂直對齊方向
用法： <tr valign="方向">
說明：設定表格中每一列所有儲存格內容的垂直對齊方向，設定型態有top、middle和bottom三種。top是將文字放置在最頂端；middle是將文字放置在居中的位置；bottom是將文字放置在最底端。預設值為middle。

例：

<table width="100" border="1">
<tr bgcolor="red">
 <td>1</td>
</tr>
<tr align="right">
 <td>2</td>
</tr>
<tr bgcolor="yellow" valign="top">
 <td>3</td>
</tr>
</table>

說明：

第一列背景顏色為紅色 ，第二列內容對齊右邊 ，第三列內容對齊頂端，背景顏色為黃色

●表格欄-<td>●

<td>儲存格文字</td>
<td>標籤就是儲存格，也就是所要置資料的欄位，同樣的，<td>標籤必須和<tr>標籤一起配合使用的。

●欄位標題-<th>●

<th>標題文字</th>
<th>標籤就是儲存格標題，也就是欄位的標題，被<th>標籤所包含的內容文字會變成粗體字型，並靠中對齊。

●<td>和<th>屬性應用●

bgcolor-表格欄背景顏色
用法： <td bgcolor="色碼"> <th bgcolor="色碼">
說明：設定表格中每一欄的背景顏色。

align-表格欄水平對齊方向
用法： <td align="方向"> <th align="方向">
說明：設定儲存格內容水平的對齊方向。設定型態有left、chenter和right三種，預設值為center。

valign-表格欄垂直對齊方向
用法： <td valign="方向"> <th valign="方向">
說明：設定儲存格內容垂直的對齊方向。設定型態有top、middle和bottom三種，預設值為middle。

width-表格欄寬度
用法： <td width="表格寬度值"> <th valign="表格寬度值">
說明：<table>標籤可以設定寬度，它的百分比長度是相對於瀏覽器視窗，而<td>和<th>標籤的寬度是相對於表格的寬度。

height-表格欄高度
用法： <td height="表格寬度值"> <th height="表格寬度值">
說明：height屬性就是用於設定儲存格的高度，高度的設定值也是以用pixel為單位或是百分比來設定。

colspan-橫向合併
用法： <td colspan="合併的儲存格數"> <th colspan="合併的儲存格數">
說明：設定表格欄位的橫向合併。

rowspan-縱向合併
用法： <td rowspan="合併的儲存格數"> <th rowspan="合併的儲存格數">
說明：設定表格欄位的縱向合併。

例一：

<table border="1">
<tr>
 <td valign="bottom">1</td>
 <td bgcolor="blue">2</td>
 <td width="20" align="right">3</td>
 <td height="40" bgcolor="red">4</td>
</tr>
</table>

說明：

第一欄向下對齊 ，第二欄背景顏色為藍色 ，第三欄表格寬度值為20，向右對齊 ，第四欄表格高度值為40，背景顏色為紅色

例二：

<table border="1" align="center">
<tr>
 <td colspan="3" align="center">1</td>
</tr>
<tr>
 <td>2</td>
 <td>3</td>
 <td>4</td>
</tr>
</table>

說明：

第一列合併第二列的三欄

例三：

<table border="1" align="center">
<tr>
 <td rowspan="3" >1</td>
 <td>2</td>
</tr>
<tr>
 <td>3</td>
</tr>
<tr>
 <td>4</td>
</tr>
</table>

說明：

第一欄合併第二欄的三列

加入背景音樂只要在<head>跟</head>之間插入下列原始碼即可讓你的網站有悅耳的聲音唷 :

<bgsound src="music.mid" loop="1">

  • src=設定你想要撥放的midi音樂檔名(須注意音樂檔格式)
  • loop=音樂重撥次數，如想不斷撥放便設成infinite

●加入音效標籤-<embed>及屬性應用●

<embed src="音效檔路徑"">
使用<embed>標籤加上標籤的屬性src來播放背景音樂，只要簡單的一句標籤指令，就能讓網頁更生動哦！

width、height-播放程式界面寬度、高度
用法： <embed width="寬度值" height="高度值">
說明：設定音效播放程式界面寬度和高度。

hidden-隱藏播放程式
用法： <embed hidden="true∣false">
說明：設定為true就會將播放程式隱藏，但是如果想讓播放程式顯示，就不必特地設定這屬性，因為預設值就是顯示播放程式。

loop-無限次播放
用法： <embed loop="數值∣true">
說明：使用loop這個屬性，設定數值為5就是代表連續播放5次，若將數值改成true就會無限播放。

autostart-手動播放
用法： <embed autostart="true∣false">
說明：這個屬性代表播放程式是否要自動播放音樂。true就代表要，false就代表不要。

例：

<embed　src="..\medias\dora.mid"　width="70"　height="25"　autostart="false"　loop="true">

說明：手動播放，寬度值70，高度值25

　

1.影片：

<embed src="這輸入影片網址" width="350" height="240" autostart=true enablecontextmenu="false"></embed>

width="350"　這是　播放器　寬度　(  可自行調整  )

height="240"　這是　播放器　高度　(  可自行調整  )

autostart=true　這是　是否要自動播放　(  如果不要自動播放，就將  true  改為  false  )

loop=-1　這是　播放次數　－１為無限次數　(  就是一直重復播放  )

enablecontextmenu="false"　這只是防右鍵　可不加入語法內

這是一般網頁用的播放器　裡面當然也有　播放　暫停　停止　的功能

2.Flash動畫：

<embed  src="madeapoop.swf" width="357" height="370">

首先要加入
<frameset cols=數字或比例,數字或比例>(左右分割畫面)或
<frameset rows=數字或比例,數字或比例>(上下分割畫面)

也可以寫成這樣 :

<frameset cols=120,*>

用*的意思是左邊的頁面長度為120，而剩餘的空間都給右方的頁面使用

在<frameset>之後便要加上<frame>的碼，如果左邊頁面的顯示檔案為left.htm， 而右邊的頁面顯示的檔案為right.htm，如下所示 :

<frameset cols=120,*>
<frame src="left.htm">
<frame src="right.htm">
</frameset>

在<frameset>內的控制屬性如下 :

  • framespacing=控制兩個frame之間的距離
  • frameborder=控制frame外框的粗細
  • border=控制外框粗細，不外框便設成0

要分割頁面的原始碼如下，不須加上<body>碼 :

<html>
<head>
<title>
</title>
</head>
<frameset cols=120,* frameborder="0" framespacing="0" border="0">
<frame src="left.htm">
<frame src="right.htm">
</frameset>
</html>

frame內的特性

在<frame>內的特性 :

  • noresize=讓瀏覽者不可改變frame的size，就加上這行
  • scrolling=auto/no控制frame是可以/不可以捲動
  • name=設定frame的名字，下面有介紹如何應用
  • target=框頁名稱，設定連結所欲出現的框頁位置
  • target=_top，連結位置為整個網頁
  • target=_self，連結位置為原來網頁
  • target=_blank，連結位置為新的網頁

例如：我們想要在按下左邊頁面裡的連結時，只改變右邊頁面的內容，則在左邊頁面的連結標籤裡要加上

<a href="right.htm" target="right">回首頁</a>

　

程式碼：請將此文字內容複製到HTML裡的</title>之後

<SCRIPT>
function click() { if (event.button==2) { alert("Stop Stealing The Code! 請勿拷貝本站資料!") } } document.onmousedown=click
</SCRIPT>

  • 本語法可消除大部份免費網站空間，蹦出式的廣告視窗。控制碼內容如下：

    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function open () {return true;}
    //-->
    </SCRIPT>

將語複製後置於<head>........</head>之間