HTML CODE


back to........ch pun

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

聲明

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

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

回目錄


概述 html

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

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

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

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

回目錄


HTML 的結構

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

<html>
<head>
<title>
標題顯示在你網頁的TAG
</title>
</head>
<body>
你要在網頁上顯示的內容
</body>
</html>

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

回目錄


網頁顏色設定

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

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

  而xxxxxx六個數值代表紅/綠/籃的顏色元素值,為AF09等所組合起來的六個數值, 配色的功力就得看您自己嚕,右邊有我所製做的調色區有166次方種顏色供您參考 :

  另外在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">

  • 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. 清單1
  2. 清單2
  3. 清單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>裡加上一些屬性就可以控制,大小由1...至到...7

大小1的設定是<font face="Arial" color="#cc33ff" size=" 1">Good morning</font>以後如此類推。

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

Good morning!早晨

Good morning!早晨

Good morning!早晨

Good morning!早晨

Good morning!早晨

Good morning!早晨

Good morning!早晨

  • face=控制文字字體,填入字體名稱
  • color=控制文字顏色
  • size=控制文字大小,數字17

回目錄


強迫換行

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

  斷行1<br> BR是break_line的縮寫
  斷行2<p> P代表 Paragraph

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

  而<p>是比<br>多跳一行的,因為它是段落。

  在<p>的標籤內,可以加入align=leftrightcenter這樣就可以控制在<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的連結方式

<A HREF="ftp://ftp.hinet.net">中華電信 HINET FTP</A>

當然也可以加上目錄名稱,甚至檔案名稱。

<A HREF="ftp://ftp.hinet.net/windows/windows95/simtel.net/inet/ ws_ftp32.zip"> WS FTP的檔案</A >

如此一來按一下就可以下載

GOPHER的連結方式

範例如下:

<A HREF="gopher://gopher.ntu.edu.tw">台大的GOPHER</A>

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

E-MAIL

範例如下:
範例1:文字連結
<A HREF="mailto:service@ibc.com">站長的信箱</A>
站長的信箱

而在<a href="URL">的標籤中,可插入target="_new_top_blankname"
來改變連結所開啟頁面的狀態!!

target裡的參數如下 :

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

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

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

回目錄


文件內的連結

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

(1)給目標地一個名稱,而這個名稱是在按下連結時會跳到的地方 :

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

(2)插入一個連結,而這個連結是當你按下這個連結時便會跳到目標地點 :

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

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

回目錄


插入圖片

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

<img src="http://www.demo.net/images/demo.gif">

 若果屬同一個網址,可用
" ./../file.gif "

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

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

  • width=控制圖檔長度
  • height=控制圖檔高度
  • align=控制圖檔left(靠左)right(靠右)center(置中),中置不成功。
  • border=控制外框粗細,不外框便設成0
"./../file.gif" align="center" border="0" width="?" height="?"

回目錄


表格製作

表格是每一個網頁不可缺少的東西,首先我們要加入<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>
</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>
</table>
儲存格 A1 儲存格 B1
儲存格 B2
儲存格 B3

回目錄


分割視窗

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

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

也可以寫成這樣 :

<frameset cols=120,*>

用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=讓瀏覽者不可改變framesize,就加上這行
  • 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=這是空控制行進的方巷喔rightupdown
  • scrollamount=這是空控制行進的步伐喔
  • behavior=這是空控制行進的方式喔:
    slide文字碰到底邊就會停止/alternate左右碰撞
  • width=加上這可以設定行進的寬度
  • height=加上這可以設定行進的高度

回目錄


特殊字元
HTML特殊字元
HTML字元 實際顯示
&amp; &
&quot; "
&lt; <
&gt; >
&nbsp; 代表空白

回目錄


符號特輯
§
°

回目錄


SPAN 用法

  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 指令達成。(參考:強迫換行)

SPAN 標籤語法

  <span style="border:2px red solid;font-size:12px;background-color:green;padding:10px;"> 增加 HTML span 的內距</span>

增加 HTML span 的內距

回目錄


DIV 用法

  HTML DIV 標籤用法從以前僅用來標示一個網頁區塊到現在直接用來做網頁排版,這都是因為 CSS 技術的進步與普即所至,如果要靈活運用 HTML DIV 標籤就要從最基本的語法開始學習,這樣才知道如何在 DIV 標籤內加入樣式設計,熟悉 DIV 區塊的用法之後,幾乎可以大幅度的取代傳統 Table 的排版方式,本篇就從基本語法以及幾個常見的 DIV 應用範例實際操作。
標準的一組 HTML DIV 區塊會有一個開始的 <div> 標籤以及一個結束的 </div> 標籤,通常要設定各種 DIV 區塊的樣式都在開頭的 <div> 內,例如設定 id、class 或 style 樣式,開頭 <div> 與結束 </div> 之間的位置就是區塊內容。

DIV 標籤語法
<DIV align=right> <div style="width:400px; height:50px; border:2px white solid; padding:5px; font-size:13px; background-color:blue; text-align:left;"> HTML DIV 標籤範例 </div></DIV>
HTML DIV 標籤範例
說明:外的<DIV></DIV>,align=(left,center,right)是用來移動整個方塊,靠左,中,右。

回目錄


back to........ch pun