°o.O HTML教學導覽 O.o°－ω。艾媽の手作 Mapin-cloth 小舖。ω

色　碼　表

轉載: http://www.powmo.com/ae.html

聲明	概述html	html的結構	網頁顏色設定	加入背景圖像
加入水平分線	清單設定方式	標題文字	文字設定	強迫換行
文字格式化	插入超連結	文件內的連結	插入圖片	表格製作
分割視窗	安裝音樂	跑馬燈	特殊字元	符號特輯

<聲明>
本文章是轉載自網路上某網站之文章，忘了原文出處，加上豬頭站長也粉懶惰，所以就隨手放在這裏，不再另寫一篇文章了．我想大家的用意都是讓各位網友能熟悉ＨＴＭＬ語法，殊途同歸，也希望網友們能好好利用，才不枉原作者的一番苦心，以下是原文部份.

　　接觸網路一年多了，在這一年之中逛了不少的好站，深深的覺得ＨＴＭＬ語法與網路的重要性，其實ＨＴＭＬ並不困難，而寫ＨＴＭＬ碼的好處為你可以知道你的網頁是那裡出了問題，修改比較容易，當然，像ＦＰ９８這類的網頁編輯軟體也很方便，而且效果強大，但我還是覺得如果是初學者的話，最好能先從基本的ＨＴＭＬ碼學起，其實ＨＴＭＬ並不困難，因為它們是成雙成對的，前有一個開始指令，後就有一個結束指令，畢竟ＨＴＭＬ碼也算是做網頁的基礎，基礎先打好才能夠越爬越高唷！！與你(妳)我共免之.....

<概述html>
HTML的全名是HyperText Markup Language，是編寫網頁的基本語言，而它並不是一個程式，只是一些插在普通文件內的碼( code )，這些碼可以控制我們的瀏覽器要怎樣把文件顯示出來, 就是你現在所看到的頁面就是用HTML來控制的，它可控制字體的大小，也可以插入連結或圖像。　　一個HTML檔稱為HTML document，存檔的副檔名為htm或 html，編寫的方式有很多種，最原始的方法是用windows內的記事本或各種文書編輯軟體，而現在有一種軟體也是編寫HTML碼，但具有預覽及插入特效的功能，如Dida 網頁速寫器，編寫完成後記得儲存成*.htm或*.html 即可。

　　若你想看一個網頁的HTML檔，只要在瀏覽器內按下滑鼠右鍵，再選擇檢視原始檔(view)即可。一份標準的HTML文件是由元素所組成的，元素是由標籤(Tag)以及文件內容所組成。文件內容可以是文字、圖形、甚至是影像、聲音等等。而標籤又是啥東東呢？？一個開始標籤(< >)是由一個小於符號(<)和一個大於符號(>)所構成的一個起始標籤中加一道斜線"/"就構成了結束標籤(</>) 而一對標籤是由一個起始標籤和一個結束標籤所構成的。

/////////////////////////////////////////////////////////

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

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

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

//////////////////////////////////////////////////////////////

網頁顏色設定
<body　bgcolor="#xxxxxx"　text="#xxxxxx"　 link="#xxxxxx"　vlink="#xxxxxx"　 alink="#xxxxxx">

bgcolor=控制背景顏色
text=控制文字顏色
link=控制連結顏色
vlink=控制已閱讀過的顏色
alink=控制正在連結的顏色

　　而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有效果)

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

/////////////////////////////////////////////////////////////////////////////////

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

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

//////////////////////////////////////////////////////////////////////////////////

清單設定方式 圓頭清單

只要加入<ul>的碼，便可製出有小圓頭的清單 :

上面的原始碼會顯示成下面的樣子 :

物件清單1
物件清單2
物件清單3

在<ol>的標籤內加入一些參數就可以讓顯出的效果有所變動唷 :

<ul type=disc> 這是一般的小圓點

<ul type=circle> 這是空心的小圓點

<ul type=square> 這是實心正方黑點

數字清單跟小圓頭的方式很像，只要加入<ol>的碼，便可製出有數字的清單 :

上面的原始碼會顯示成下面的樣子 :

清單1
清單2
清單3

type=A(控制清單之前數字的參數顯示成A. B. C......)
type=a (控制清單之前數字的參數顯示成a. b. c......)
type=I (控制清單之前數字的參數顯示成I. II. III......)
type=i (控制清單之前數字的參數顯示成i. i. iii......)
start=起始的數值

定義清單

一般做為解釋一樣動作，加入以下的碼便可做一個定義清單

<dl>
<dt>joe
<dd>昨日重現
<dt>blog
<dd>已成為生活的一部分
</dl>

上面的原始碼會顯示成下面的樣子 :

joe

昨日重現

blog

已成為生活的一部分

標題文字
瀏覽器可分出六種大小的標題文字,原始碼如下 :
<h1>標題文字1</h1>
<h2>標題文字2</h2>
<h3>標題文字3</h3>
<h4>標題文字4</h4>
<h5>標題文字5</h5>
<h6>標題文字6</h6>

上面的碼會造出下面六種大小的標題文字 :
標題文字1
標題文字2
標題文字3
標題文字4
標題文字5
標題文字6

文字設定
如果要把文字變成粗體，就要加上<b>的碼了
如果要把文字變成斜體，就要加上<i>的碼了
如果要把文字加上底線，就要加上<u>的碼了

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

文字的控制

文字的控制要加上<font>的碼，它可以控制文字的大小，顏色，字型，在<font>裡加上一些屬性就可以控制
<font　face="Arial"　color="#cc33ff"　size="7">joe</font>
上面的碼會做出下面的文字 :

joe

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

強迫換行
如果覺得您的文字太長，想要您的文字跳到下一行，就要加上<br>或<p>的碼 :

　　斷行1<br>
　　斷行2<p>

　　上面的碼會顯現強迫換行效果 :
　　而<p>是比<br>多跳一行的。

　　在<p>的標籤內，可以加入align=left／right／center這樣就可以控制在<p>之後的物件是靠左／靠右／置中了 :
　　如果在<p>內有加入align的屬性，記得加上</p>的關閉碼

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

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

格式會跟你打的一樣唷
看到了嗎
會一模一樣唷！！

插入超連結
文字之超連結
　　連結為一個網頁不可少的東西，沒有連結就那都不能去，如要差入一個連結便要加入<a href="URL" rel="nofollow ugc noreferrer noopener">的碼 :
　　按下下面的連結會連到奇摩站唷!!
奇摩站

　　記得要加上</a>的關閉碼唷，不然瀏覽器會把<a href="http://www.kimo.com">之後的東西都連到奇摩站

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

連結到同一目錄內的檔案 <a href="index.htm">回首頁</a>
連結在子目錄的檔案 <a href="a/1.htm">連到a目錄裡的1.htm</a>

而在

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

在target裡的參數如下 :

_new=在一個新視窗開啟，不過只會一直在同一個新視窗開啟，不會另外在開一個新視窗
_top=在同一個視窗出現，不過是整個大視窗，而不是所分割後的視窗
_blank=跟_new差不多，只是會一直出現新的視窗，而不會在同一個新視窗開啟 =''
name=在frame有介紹，是給frame的name

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

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

文件內的連結
看到上方的網頁導覽或回教學導覽按下去是不是會跳到網頁內的某個地方，一共有兩個步驟 :
（１）給目標地一個名稱，而這個名稱是在按下連結時會跳到的地方 :

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

<a href="#目標名稱">跳到目標地點</a>
在連結的標籤內，必須加上#在目標名稱前

文字連結:
<p><a href="http://tw.user.bid.yahoo.com/tw/show/auctions?userID=aiq1016&u=%3aaiq1016"><font color=#0000ff size=2>yahoo 拍賣 </font></a></p>

yahoo 拍賣

文字前小圖+文字+底色
<p><font style="BACKGROUND-COLOR: #111111"><img height=15 src="http://www.fuchu.or.jp/~tenshi/1kb/sozai/gif/icon/blog/sakura.gif" width=15 /><font color=#804040 size=1> </font><font color=#ff40ff size=3>釣魚相關網站</font></font> </p>

釣魚相關網站