HTML語法教學

2024-12-22

文章推薦指數： 80 %

投票人數：10人

HTML的全名是HyperText Markup Language，是編寫網頁的基本語言，而它並不是一個程式，只是一些插在普通文件內的碼( code )，這些碼可以控制我們的瀏覽器要怎樣把文件顯示 ... 色　碼　表 HTML教學導覽聲明　　　　概述html　　 html的結構　網頁顏色設定加入背景圖像加入水平分線清單設定方式標題文字　　文字設定　　強迫換行　　文字格式化　插入超連結　文件內的連結插入圖片　　表格製作　　分割視窗　　安裝音樂　　跑馬燈　　　特殊字元　　符號特輯　　聲明　　本文章是轉載自網路上某網站之文章，忘了原文出處，加上豬頭站長也粉懶惰，所以就隨手放在這裏，不再另寫一篇文章了．我想大家的用意都是讓各位網友能熟悉ＨＴＭＬ語法，殊途同歸，也希望網友們能好好利用，才不枉原作者的一番苦心，以下是原文部份. 　　接觸網路一年多了，在這一年之中逛了不少的好站，深深的覺得ＨＴＭＬ語法與網路的重要性，其實ＨＴＭＬ並不困難，而寫ＨＴＭＬ碼的好處為你可以知道你的網頁是那裡出了問題，修改比較容易，當然，像ＦＰ９８這類的網頁編輯軟體也很方便，而且效果強大，但我還是覺得如果是初學者的話，最好能先從基本的ＨＴＭＬ碼學起，其實ＨＴＭＬ並不困難，因為它們是成雙成對的，前有一個開始指令，後就有一個結束指令，畢竟ＨＴＭＬ碼也算是做網頁的基礎，基礎先打好才能夠越爬越高唷！！與你(妳)我共免之..... 回目錄概述html 　　HTML的全名是HyperTextMarkupLanguage，是編寫網頁的基本語言，而它並不是一個程式，只是一些插在普通文件內的碼(code)，這些碼可以控制我們的瀏覽器要怎樣把文件顯示出來,就是你現在所看到的頁面就是用HTML來控制的，它可控制字體的大小，也可以插入連結或圖像。

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

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

　　一份標準的HTML文件是由元素所組成的，元素是由標籤(Tag)以及文件內容所組成。

文件內容可以是文字、圖形、甚至是影像、聲音等等。

而標籤又是啥東東呢？？一個開始標籤(<>)是由一個小於符號()所構成的一個起始標籤中加一道斜線"/"就構成了結束標籤(>)而一對標籤是由一個起始標籤和一個結束標籤所構成的。

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

您所要在瀏覽器顯示的內容　　有兩個須要注意的地方，每一個開啟碼是由兩個符號所框住的，而關閉碼是由　>所框住的，而每一個HTML碼有開就要有關，後面的單元會逐一的介紹。

回目錄網頁顏色設定 bgcolor=控制背景顏色 text=控制文字顏色 link=控制連結顏色 vlink=控制已閱讀過的顏色 alink=控制正在連結的顏色　　而xxxxxx六個數值代表紅／綠／籃的顏色元素值，為A～F及0～9等所組合起來的六個數值，配色的功力就得看您自己嚕，右邊有我所製做的調色區有16的6次方種顏色供您參考: 　　另外在xxxxxx的部份也可用顏色的英文單字代替，但xxxxxx之前的#要去掉，如text="#000000"可換成text="BLACK" 回目錄加入背景圖像　　若您覺得背景顏色太單調，想要換成背景圖像的話，就得要在內加入background的屬性了。

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

bgproperties="fixed"(使背景圖像固定不動，不過只有IE有效果) 回目錄加入水平分線如果想要在網頁內加入一條像下面的水平線，加入

的碼即可。

這是上面那一條線的原始碼: size=控制線的寬度 align=控制線是靠左(left)／靠右(right)／中間(center) width=控制線的長度，可用數字或百分比 noshade=控制線沒有陰影 color=控制線的顏色回目錄清單設定方式圓頭清單只要加入

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

這是一般的小圓點這是空心的小圓點這是實心正方黑點數字清單跟小圓頭的方式很像，只要加入

清單1
清單2
清單3

耗子: 是這裡的站長
電腦: 已成為人類生活的一部分

標題文字1

標題文字2

標題文字3

標題文字4

標題文字5

標題文字6

的碼了如果要把文字變成斜體，就要加上的碼了如果要把文字加上底線，就要加上的碼了　　耗子洞HTML教學　耗子洞HTML教學 　　耗子洞HTML教學　耗子洞HTML教學 　　耗子洞HTML教學　耗子洞HTML教學文字的控制文字的控制要加上的碼，它可以控制文字的大小，顏色，字型，在裡加上一些屬性就可以控制 Good morning 上面的碼會做出下面的文字: Goodmorning face=控制文字字體，填入字體名稱 color=控制文字顏色 size=控制文字大小，數字1～7 回目錄強迫換行　　如果覺得您的文字太長，想要您的文字跳到下一行，就要加上
或
的碼: 　　斷行1
　　斷行2

　　上面的碼會顯現強迫換行效果: 　　而

是比
多跳一行的。

　　在

的標籤內，可以加入align=left／right／center這樣就可以控制在

之後的物件是靠左／靠右／置中了 : 　　如果在

內有加入align的屬性，記得加上
的關閉碼回目錄文字格式化用
的碼可以將你所要顯示的文字格式一模一樣的顯示在瀏覽器上，再用
來關閉
格式會跟你打的一樣唷看到了嗎會一模一樣唷！！
格式會跟你打的一樣唷看到了嗎會一模一樣唷！！回目錄插入超連結文字之超連結　　連結為一個網頁不可少的東西，沒有連結就那都不能去，如要差入一個連結便要加入的碼 : 　　按下下面的連結會連到奇摩站唷!! 奇摩站　　記得要加上的關閉碼唷，不然瀏覽器會把之後的東西都連到奇摩站 URL就是所要連結的網址如果是要連結在同一系統內的檔案，則將URL改成相對的路徑即可連結到同一目錄內的檔案回首頁連結在子目錄的檔案連到a目錄裡的1.htm FTP的連結方式 &LTAHREF="ftp://ftp.hinet.net"&GT中華電信HINETFTP&LT/A&GT 當然也可以加上目錄名稱，甚至檔案名稱。

&LTA HREF="ftp://ftp.hinet.net/windows/windows95/simtel.net/inet/ ws_ftp32.zip"&GT 如此一來按一下就可以下載WSFTP的檔案&/A&GT GOPHER的連結方式範例如下: &LTAHREF="gopher//gopher.ntu.edu.tw"&GT台大的GOPHER&LT/A&GT 指定要進入的GOPHER主機，同樣可以加上目錄名稱。

E-MAIL 範例如下: 範例1:文字連結 &LTA HREF="mailto:[email protected]"&GT站長的信箱&LT/A&GT 站長的信箱而在的標籤中，可插入target="_new／_top／_blank／name" 來改變連結所開啟頁面的狀態!! 在target裡的參數如下: _new=在一個新視窗開啟，不過只會一直在同一個新視窗開啟，不會另外在開一個新視窗 _top=在同一個視窗出現，不過是整個大視窗，而不是所分割後的視窗 _blank=跟_new差不多，只是會一直出現新的視窗，而不會在同一個新視窗開啟 ='' name=在frame有介紹，是給frame的name 而在的標籤中，可插入STYLE="text-decoration:none" 來消除連結的底線　　當然所有的連結方式．並不一定用文字,用圖片也可以唷！回目錄文件內的連結看到上方的網頁導覽或回教學導覽按下去是不是會跳到網頁內的某個地方，一共有兩個步驟: （１）給目標地一個名稱，而這個名稱是在按下連結時會跳到的地方 : 目標地點（２）插入一個連結，而這個連結是當你按下這個連結時便會跳到目標地點 : 跳到目標地點在連結的標籤內，必須加上#在目標名稱前回目錄插入圖片圖像是一個美化網頁的重要因素，要插入圖像，就要加入上面的碼會做出下面的效果: 其中內還可加入下列屬性，來變化圖檔 : width=控制圖檔長度 height=控制圖檔高度 align=控制圖檔left(靠左)／right(靠右)／center(置中) border=控制外框粗細，不外框便設成0 回目錄表格製作表格是每一個網頁不可缺少的東西，首先我們要加入的碼，在
的標籤內可以控制整個表格的長度和外框的粗細 : width=控制表格長度，可用數字或百分比 cellspaing=控制儲存格的分隔距離，內定為2 background=背景圖檔 border=控制外框粗細，不外框便設成0 這只是一開始的設定，必須在
後加上來關閉儲存格:
，才會新開一個儲存格，再用儲存格1 儲存格2
儲存格1 儲存格2 若想跳到下一行，加上即可: 儲存格1 儲存格2 儲存格3 儲存格4 儲存格1 儲存格2 儲存格3 儲存格4 當然亦可使用: 儲存格1 儲存格2 儲存格3 儲存格4 儲存格1 儲存格2 儲存格3 儲存格4 內的屬性如下 : align=控制水平是left(靠左)／right(靠右)／center(置中) valign=控制垂直是top(靠上)／middle(置中)／bottom(靠下) background=背景圖檔 colspan=使一個儲存格橫跨N個欄位 rowspan=使一個儲存格下跨N個列若想為表格加上標題，來標明整個表格的主題，可在後加上
的標籤公佈欄
儲存格1 儲存格2
儲存格3 儲存格4

公佈欄儲存格1 儲存格2 儲存格3 儲存格4 colspan的用法: 儲存格A1 儲存格B1 儲存格B2 儲存格B3 &LT/table> 儲存格A1 儲存格B1 儲存格B2 儲存格B3 rowspan的用法: 儲存格A1 儲存格B1 儲存格B2 儲存格B3 &LT/table> 儲存格A1 儲存格B1 儲存格B2 儲存格B3 回目錄分割視窗其實你現在看到的畫面已經有運用分割視窗的碼了首先要加入 (左右分割畫面)或 (上下分割畫面) 也可以寫成這樣: 用*的意思是左邊的頁面長度為120，而剩餘的空間都給右方的頁面使用在之後便要加上的碼，如果左邊頁面的顯示檔案為left.htm，而右邊的頁面顯示的檔案為right.htm，如下所示: 在內的控制屬性如下: framespacing=控制兩個frame之間的距離 frameborder=控制frame外框的粗細 border=控制外框粗細，不外框便設成0 要分割頁面的原始碼如下，不須加上碼: frame內的特性在內的特性 : noresize=讓瀏覽者不可改變frame的size，就加上這行 scrolling=auto/no控制frame是可以/不可以捲動 name=給frame的名字，下面有介紹如何應用　　看到這整個頁面了沒，按下左邊．右邊的主選單，是不是會在中間的視窗顯示內容，而主選單都不會變呢，這就是利用了上面所說的name的屬性: 而我們想要在按下左邊頁面裡的連結時，只改變右邊頁面的內容，則在左邊頁面的連結標籤裡要加上 target="center002": 回首頁回目錄安裝音樂 IE 加入背景音樂只要在跟之間插入下列原始碼即可讓你的網站有悅耳的聲音唷 : src=設定你想要撥放的midi音樂檔名 loop=音樂重撥次數，如想不斷撥放便設成infinite Netscape 經過本身的測試，bgsound的語法在netscape並無法出現背景音樂，而支援netcape的語法則可在兩大M牌與N牌的瀏覽器都可出現背景音樂，下面就是介紹netspace的背景音樂語法: