HTML CODE
back to........ch pun
本文章是轉載自網路上某網站之文章，站長忘了原文出處加上懶惰，所以就隨手放在這裏，我想大家的用意都是讓各位網友能熟悉ＨＴＭＬ語法，殊途同歸，也希望網友們能好好利用，才不枉原作者的一番苦心，以下是原文部份.
接觸網路深深的覺得ＨＴＭＬ語法與網路的重要性，其實ＨＴＭＬ並不困難，而寫ＨＴＭＬ碼的好處為你可以知道你的網頁是那裡出了問題，修改比較容易，當然，像ＦＰ９８這類的網頁編輯軟體也很方便，而且效果強大，但我還是覺得如果是初學者的話，最好能先從基本的ＨＴＭＬ碼學起，其實ＨＴＭＬ並不困難，因為它們是成雙成對的，前有一個開始指令，後就有一個結束指令，畢竟ＨＴＭＬ碼也算是做網頁的基礎，基礎先打好才能夠越爬越高唷！！ 與你(妳)我共免之.....
回目錄
HTML的全名是HyperText Markup Language，是編寫網頁的基本語言，而它並不是一個程式， 只是一些插在普通文件內的碼( code )，這些碼可以控制我們的瀏覽器要怎樣把文件顯示出來, 就是你現在所看到的頁面就是用HTML來控制的，它可控制字體的大小，也可以插入連結或圖像。
一個HTML檔稱為HTML document，存檔的副檔名為htm或 html，編寫的方式有很多種， 最原始的方法是用windows內的記事本或各種文書編輯軟體，而現在有一種軟體也是編寫HTML碼， 但具有預覽及插入特效的功能，如Dida 網頁速寫器，編寫完成後記得儲存成*.htm或*.html 即可。
若你想看一個網頁的HTML檔，只要在瀏覽器內按下滑鼠右鍵，再選擇 檢視原始檔(view)即可。
一份標準的HTML文件是由元素所組成的，元素是由標籤(Tag)以及文件內容所組成。 文件內容可以是文字、圖形、甚至是影像、聲音等等。而標籤又是啥東東呢？？ 一個開始標籤(< >)是由一個小於符號(<)和一個大於符號(>)所構成的 一個起始標籤中加一道斜線"/"就構成了結束標籤(</>) 而一對標籤是由一個起始標籤和一個結束標籤所構成的。
HTML document有一固定的格式，瀏覽器才可以辨識及分析，進而顯示在你的眼前，而基本格式為 :
有兩個須要注意的地方，每一個開啟碼是由< > 兩個符號所框住的，而關閉碼是由</ > 所框住的，而每一個HTML碼有開就要有關，後面的單元會逐一的介紹。
<body bgcolor="#xxxxxx" text="#xxxxxx" link="#xxxxxx" vlink="#xxxxxx" alink="#xxxxxx">
而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.demo.net/back.gif bgproperties="fixed"(使背景圖像固定不動，不過只有IE有效果) 回目錄
如果想要在網頁內加入一條像下面的水平線，加入<hr>的碼即可。
這是上面那一條線的原始碼 :
<hr size="5" align="center" noshade width="90%" color="0000ff">
只要加入<ul>的碼，便可製出有小圓頭的清單 :
<ul> <li>物件清單1 <li>物件清單2 <li>物件清單3 </ul>
上面的原始碼會顯示成下面的樣子 :
在<ol>的標籤內加入一些參數就可以讓顯出的效果有所變動唷 :
<ul type=disc>
<ul type=circle>
<ul type=square>
跟小圓頭的方式很像，只要加入<ol>的碼，便可製出有數字的清單 :
<ol> <li>清單1 <li>清單2 <li>清單3 </ol>
一般做為解釋一樣動作，加入以下的碼便可做一個定義清單
<dl> <dt>網剛 <dd>是這裡的站長 <dt>電腦 <dd>已成為人類生活的一部分 </dl>
瀏覽器可分出六種大小的標題文字,原始碼如下 :
<h1>標題文字1</h1> <h2>標題文字2</h2> <h3>標題文字3</h3> <h4>標題文字4</h4> <h5>標題文字5</h5> <h6>標題文字6</h6>
上面的碼會造出下面六種大小的標題文字 :
如果要把文字變成粗體，就要加上<b>的碼了
如果要把文字變成斜體，就要加上<i>的碼了
如果要把文字加上底線，就要加上<u>的碼了
網剛HTML教學 <b>網剛HTML教學</b>
網剛HTML教學 <i>網剛HTML教學</i>
網剛HTML教學 <u>網剛HTML教學</u>
文字的控制要加上<font>的碼，它可以控制文字的大小，顏色，字型，在<font>裡加上一些屬性就可以控制，大小由1...至到...7
大小1的設定是<font face="Arial" color="#cc33ff" size=" 1">Good morning</font>以後如此類推。
上面的碼會做出下面的文字 :
Good morning！早晨
如果覺得您的文字太長，想要您的文字跳到下一行，就要加上<br>或<p>的碼 :
斷行1<br> BR是break_line的縮寫 斷行2<p> P代表 Paragraph
上面的碼會顯現強迫換行效果 :
而<p>是比<br>多跳一行的，因為它是段落。
在<p>的標籤內，可以加入align=left／right／center這樣就可以控制在<p>之後的物件是靠左／靠右／置中了 :
如果在<p>內有加入align的屬性，記得加上</p>的關閉碼
用<pre>的碼可以將你所要顯示的文字格式一模一樣的顯示在瀏覽器上，再用</pre>來關閉
<pre> 格式會跟你 打的一樣唷 看到了嗎？ 一模樣唷！ </pre>
格式會跟你 打的一樣唷 看到了嗎？ 一模樣唷！
連結為一個網頁不可少的東西，沒有連結就那都不能去，如要差入一個連結便要加入編碼:
按下下面的連結會連到奇摩站唷!!
奇摩站
記得要加上</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="ftp://ftp.hinet.net">中華電信 HINET FTP</A>
當然也可以加上目錄名稱，甚至檔案名稱。
範例如下:
指定要進入的GOPHER主機，同樣可以加上目錄名稱。
範例如下: 範例1:文字連結 <A HREF="mailto:service@ibc.com">站長的信箱</A> 站長的信箱
而在<a href="URL">的標籤中，可插入target="_new／_top／_blank／name" 來改變連結所開啟頁面的狀態!!
在target裡的參數如下 :
而在<a href="URL">的標籤中，可插入STYLE="text-decoration:none" 來消除連結的底線
當然所有的連結方式．並不一定用文字,用圖片也可以唷！
看到上t方的網頁導覽或回教學導覽按下去是不是會跳到網頁內的某個地方，一共有兩個步驟 :
（１）給目標地一個名稱，而這個名稱是在按下連結時會跳到的地方 :
<a name="目標名稱">目標地點</a>
（２）插入一個連結，而這個連結是當你按下這個連結時便會跳到目標地點 :
<a href="#目標名稱">跳到目標地點</a>
在連結的標籤內，必須加上#在目標名稱前
圖像是一個美化網頁的重要因素，要插入圖像，就要加入<img src="圖檔名">例如
<img src="http://www.demo.net/images/demo.gif">
上面的碼會做出下面的效果 :
其中<img src="**.gif"> 內還可加入下列屬性，來變化圖檔 :
表格是每一個網頁不可缺少的東西，首先我們要加入<table>的碼，在<table>的標籤內可以控制整個表格的長度和外框的粗細 :
<table width="300" border="1" cellspacing="2">
這只是一開始的設定，必須在<table>後加上<td>，才會新開一個儲存格，再用</td>來關閉儲存格 :
若想跳到下一行，加上<tr>即可 :
當然亦可使用<th>:
<td><th>內的屬性如下 :
若想為表格加上標題，來標明整個表格的主題，可在<table>後加上<caption>的標籤
colspan的用法 :
rowspan的用法 :
其實你現在看到的畫面已經有運用分割視窗的碼了
首先要加入 <frameset cols=數字或比例,數字或比例>(左右分割畫面)或 <frameset rows=數字或比例,數字或比例>(上下分割畫面)
也可以寫成這樣 :
<frameset cols=120,*>
用120參數意思是左邊的頁面長度120，*的參數為剩餘的空間都給右方的頁面使用
在<frameset>之後便要加上<frame>的碼，如果左邊頁面的顯示檔案為left.htm， 而右邊的頁面顯示的檔案為right.htm，如下所示 :
在<frameset>內的控制屬性如下 :
要分割頁面的原始碼如下，不須加上<body>碼 :
在<frame>內的特性 :
看到這整個頁面了沒，按下左邊．右邊的主選單，是不是會在中間的視窗顯示內容，而主選單都不會變呢，這就是利用了上面所說的name的屬性 :
<frame src="left.htm" name="left"> <frame src="right.htm" name="right">
而我們想要在按下左邊頁面裡的連結時，只改變右邊頁面的內容，則在左邊頁面的連結標籤裡要加上 target="center002" :
<a href="right.htm" target="right">回首頁</a>
加入背景音樂只要在<head>跟</head>之間插入下列原始碼即可讓你的網站有悅耳的聲音唷 :
<bgsound src="music.mid" loop="1">
經過本身的測試，bgsound的語法在netscape並無法出現背景音樂，而支援netcape的語法則可在兩大M牌與N牌的瀏覽器都可出現背景音樂，下面就是介紹netspace的背景音樂語法:
<embed src="music.mid" loop="1" hidden="true" autostart="true">
可以放在<body>跟</body>之間做網頁物件使用，也可以加入hidden=true的屬性使面版隱藏做為背景音樂使用
若您覺得網頁太單調，想要加上變化的話，跑馬燈是不可少的．只要加上<marquee>即可
<marquee>跑馬燈</marquee>
跑馬燈
在<marquee>內的屬性 :
HTML span 標籤是一個非常古老卻非常好用的標籤，透過 span 標籤可以讓我們輕易的修改網頁中的各種小區塊，例如替文章中的特定文字做出特效，包含修改文字顏色、修改文字大小、替文字增加底線、修改文字的字型、把文字變粗 ... 等，都可以透過 HTML span 標籤把特定文字標示出來再賦予樣式的變化，來輕鬆達到網頁設計師所想要的風格，除此之外，span 標籤也經常被來來做一些網頁元件的樣式控制，使用非常便利。
HTML span 標籤是一個 "區域" 形態，也就是一個 span 標籤組只會佔用自己本身的空間，不會像 DIV 標籤那樣一次佔掉一整行的空間，許多的網頁設計都是採用 DIV 標籤與 span 標籤的搭配設計，用 DIV 標籤做大範圍的排版，再用 span 標籤進行細部美化。 *span 在 caption 下能在style=text-align:L,C,R,有效調配左中右, 但在普通的句子卻不能。那句子配置在左中右，可以用 P align=L,C,R 指令達成。(參考:強迫換行)
增加 HTML span 的內距
HTML DIV 標籤用法從以前僅用來標示一個網頁區塊到現在直接用來做網頁排版，這都是因為 CSS 技術的進步與普即所至，如果要靈活運用 HTML DIV 標籤就要從最基本的語法開始學習，這樣才知道如何在 DIV 標籤內加入樣式設計，熟悉 DIV 區塊的用法之後，幾乎可以大幅度的取代傳統 Table 的排版方式，本篇就從基本語法以及幾個常見的 DIV 應用範例實際操作。 標準的一組 HTML DIV 區塊會有一個開始的 <div> 標籤以及一個結束的 </div> 標籤，通常要設定各種 DIV 區塊的樣式都在開頭的 <div> 內，例如設定 id、class 或 style 樣式，開頭 <div> 與結束 </div> 之間的位置就是區塊內容。