免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
Board logo

標題: HTML教學 [打印本頁]

作者: 麥多芬    時間: 2012-12-24 15:01     標題: HTML教學

本主題需向作者支付 10 金錢 才能瀏覽
作者: 麥多芬    時間: 2012-12-24 15:03

html的結構

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

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

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

回目錄


網頁顏色設定

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

  而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.123.com.tw/back.gif

回目錄


作者: 麥多芬    時間: 2012-12-24 15:03

加入水平分線

如果想要在網頁內加入一條像下面的水平線,加入<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>

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

  1. 清單1
  2. 清單2
  3. 清單3

定義清單

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

<dl>
<dt>耗子
<dd>是這裡的站長
<dt>電腦
<dd>已成為人類生活的一部分
</dl>

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

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

回目錄


作者: 麥多芬    時間: 2012-12-24 15:05

標題文字

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

<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

回目錄


強迫換行

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

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

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

  而<p>是比<br>多跳一行的。

  在<p>的標籤內,可以加入align=leftrightcenter這樣就可以控制在<p>之後的物件是靠左/靠右/置中了 :

  如果在<p>內有加入align的屬性,記得加上</p>的關閉碼

回目錄


作者: 麥多芬    時間: 2012-12-24 15:05

文字格式化

<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_blankname"
來改變連結所開啟頁面的狀態!!

target裡的參數如下 :

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

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

回目錄


作者: 麥多芬    時間: 2012-12-24 15:06

文件內的連結

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

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

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

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

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

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

回目錄


插入圖片

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

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

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

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

回目錄


作者: 麥多芬    時間: 2012-12-24 15:09

分割視窗

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

首先要加入
<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>內的控制屬性如下 :

要分割頁面的原始碼如下,不須加上<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>內的特性 :

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

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

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

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

回目錄


作者: 麥多芬    時間: 2012-12-24 15:10

安裝音樂

IE

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

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

Netscape

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

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

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

回目錄


跑馬燈

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

<marquee>跑馬燈</marquee>

跑馬燈

<marquee>內的屬性 :

回目錄



作者: 麥多芬    時間: 2012-12-24 15:10


特殊字元

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

回目錄


符號特輯

§
°   

回目錄






歡迎光臨 資訊科技 ND076DR-2 (http://nd076dr2.258club.com/) Powered by Discuz! 7.2