HTML語法教學

(溫教授改編) HTML語法教學

　

色　碼　表

HTML教學導覽 ( 溫教授複製 http://www.powmo.com/ 網頁 )

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

聲明

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

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

概述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>的碼即可。

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

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

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

清單設定方式

圓頭清單

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

<ul>
<li>物件清單1
<li>物件清單2
<li>物件清單3
</ul>

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

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

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

<ul type=disc>

這是一般的小圓點

<ul type=circle>

這是空心的小圓點

<ul type=square>

這是實心正方黑點

數字清單

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

<ol>
<li>清單1
<li>清單2
<li>清單3
</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>耗子
<dd>是這裡的站長
<dt>電腦
<dd>已成為人類生活的一部分
</dl>

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

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

標題文字

瀏覽器可分出六種大小的標題文字,原始碼如下 :

<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">Good morning</font>

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

Good morning

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">的碼 :

　　按下下面的連結會連到奇摩站唷!!

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

URL就是所要連結的網址

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

連結到同一目錄內的檔案

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

連結在子目錄的檔案

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

FTP的連結方式

&LTA HREF="ftp://ftp.hinet.net"&GT中華電信 HINET FTP&LT/A&GT

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

GOPHER的連結方式

範例如下:
&LTA HREF="gopher//gopher.ntu.edu.tw"&GT台大的GOPHER&LT/A&GT

指定要進入的GOPHER主機，同樣可以加上目錄名稱。

E-MAIL

範例如下:
範例1:文字連結
&LTA HREF="mailto:service@powmo.com"&GT站長的信箱&LT/A&GT
站長的信箱

而在<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 name="目標名稱">目標地點</a>

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

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

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

插入圖片

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

<img src="http://www.powmo.com/images/powmologo.gif">

上面的碼會做出下面的效果 :

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

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

表格製作

表格是每一個網頁不可缺少的東西，首先我們要加入<table>的碼，在<table>的標籤內可以控制整個表格的長度和外框的粗細 :

<table width="300 border="1 cellspacing="2>

width=控制表格長度，可用數字或百分比
cellspaing=控制儲存格的分隔距離，內定為2
background=背景圖檔
border=控制外框粗細，不外框便設成0

這只是一開始的設定，必須在<table>後加上<td>，才會新開一個儲存格，再用</td>來關閉儲存格 :

<table border=1>
<td>儲存格1</td>
<td>儲存格2</td>
</table>

儲存格1

儲存格2

若想跳到下一行，加上<tr>即可 :

<table border=1>
<td>儲存格1</td>
<td>儲存格2</td>
<tr>
<td>儲存格3</td>
<td>儲存格4</td>
</table>

儲存格1	儲存格2
儲存格3	儲存格4

當然亦可使用<th>:

<table border=1>
<th>儲存格1</th>
<th>儲存格2</th>
<tr>
<td>儲存格3</td>
<td>儲存格4</td>
</table>

儲存格1	儲存格2
儲存格3	儲存格4

<td><th>內的屬性如下 :

align=控制水平是left(靠左)／right(靠右)／center(置中)
valign=控制垂直是top(靠上)／middle(置中)／bottom(靠下)
background=背景圖檔
colspan=使一個儲存格橫跨 N 個欄位
rowspan=使一個儲存格下跨 N 個列

若想為表格加上標題，來標明整個表格的主題，可在<table>後加上<caption>的標籤

<table border=1>
<caption>公佈欄</caption>
<td>儲存格1</td>
<td>儲存格2</td>
<tr>
<td>儲存格3</td>
<td>儲存格4</td>
</table>

公佈欄
儲存格1	儲存格2
儲存格3	儲存格4

colspan的用法 :

<table border=1>
<td colspan=3 align=center>儲存格 A1</td>
<tr>
<td>儲存格 B1</td>
<td>儲存格 B2</td>
<td>儲存格 B3</td>
&LT/table>

儲存格 A1
儲存格 B1	儲存格 B2	儲存格 B3

rowspan的用法 :

<table border=1>
<td rowspan=3 align=center>儲存格 A1</td>
<td>儲存格 B1</td>
<tr>
<td>儲存格 B2</td>
<tr>
<td>儲存格 B3</td>
&LT/table>

儲存格 A1	儲存格 B1
	儲存格 B2
	儲存格 B3

分割視窗

其實你現在看到的畫面已經有運用分割視窗的碼了

首先要加入
<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的名字，下面有介紹如何應用

　　看到這整個頁面了沒，按下左邊．右邊的主選單，是不是會在中間的視窗顯示內容，而主選單都不會變呢，這就是利用了上面所說的name的屬性 :

<frame src="left.htm" name="left">
<frame src="right.htm" name="right">

而我們想要在按下左邊頁面裡的連結時，只改變右邊頁面的內容，則在左邊頁面的連結標籤裡要加上 target="center002" :

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

安裝音樂

IE

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

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

src=設定你想要撥放的midi音樂檔名
loop=音樂重撥次數，如想不斷撥放便設成infinite

Netscape

經過本身的測試，bgsound的語法在netscape並無法出現背景音樂，而支援netcape的語法則可在兩大M牌與N牌的瀏覽器都可出現背景音樂，下面就是介紹netspace的背景音樂語法:

<embed src="music.mid" loop="1" hidden="true" autostart="true">

src=設定你想要撥放的midi音樂檔名
loop=音樂重撥次數，如想不斷撥放便設成true
autostart=是否要在音樂檔傳完之後，就自動播放音樂。true是要，flace是不要。內定值是不要。
width=控制面版寬度
high=控制面版高度
align=控制面版與旁邊文字的對齊方式，跟<img>的語法一樣
hidden=true(如果寫上這個屬性的話，就會完全隱藏控制面板，但無法設定控制面板的寬和高。)
controls=控制面版樣式為console(正常面版)／smallconsole(較小面版)／playbutton(只顯示撥放按鈕)／pausebutton(只顯示暫停按鈕)／stopbutton(只顯示停止按鈕)／volumelever(只顯示音量調整)

可以放在<body>跟</body>之間做網頁物件使用，也可以加入hidden=true的屬性使面版隱藏做為背景音樂使用

跑馬燈

　　若您覺得網頁太單調，想要加上變化的話，跑馬燈是不可少的．只要加上<marquee>即可

<marquee>跑馬燈</marquee>

跑馬燈

在<marquee>內的屬性 :

bgcolor="#aaff00"這裡加上背景顏色，顏色可以自己改喔
direction=這是空控制行進的方巷喔right／up／down
scrollamount=這是空控制行進的步伐喔
behavior=這是空控制行進的方式喔：
slide文字碰到底邊就會停止／alternate左右碰撞
width=加上這可以設定行進的寬度
height=加上這可以設定行進的高度

特殊字元

HTML特殊字元
HTML字元	實際顯示
&	&
"	"
<	<
>	>
	代表空白

符號特輯

┌

┬

┐

├

┼

┤

└

┴

┘

─

│

↑

↓

←

→

§

∮

《

》

〈

〉

【

】

『

』

〝

〞

‘

’

“

”

☆

★

︵

︶

﹝

﹞

（

）

○

●

◎

※

∵

∴

：

‧

。

，

°

、

；

！

？

　　

＊

∥

﹋

╰

╯

◣

◢

◥

◤

█

□

◇

♂

♀

▼

∞

備註、PRE/XMP

備註  原貌呈現 <PRE></PRE> <XMP> 格式會跟你打的一樣唷看到了嗎會一模一樣唷！

相關網站

1. (溫教授) HTML教學: http://jeromehome.m-school.tw/nknu-www/www/sub-html/HTML教學.htm
2. HTML 測試                 https://www.ifreesite.com/runcode.htm
    ShowHTML測試         http://jeromehome.m-school.tw/nknu-www/www/sub-html/showhtml-new.htm
                                      http://m7.dfps.tp.edu.tw/chen/main5/ahtml/01.asp
                                       https://htmledit.squarefree.com/

........

2 則留言:

名牌就是你自己2021年10月3日凌晨12:53
https://i.imgur.com/SXwbAgJ.png
回覆刪除
回覆
名牌就是你自己2021年10月3日凌晨12:54
https://i.imgur.com/cdPOEZW.png
回覆刪除
回覆

訂閱：文章 (Atom)