html教學

html教學

網頁的跑馬燈

跑馬燈

<marquee>跑馬燈</marquee>

跑馬燈內的屬性有 :

  • bgcolor="#aaff00″這裡加上背景顏色
  • direction=這是控制跑馬燈的進行方冋rightupdown
  • scrollamount=這是控制跑馬燈的快慢
  • behavior=這是控制跑馬燈的進行形式
    slide文字碰到底邊就會停止/alternate左右碰撞
  • width=加上這可以設定行進的寬度
  • height=加上這可以設定行進的高度
廣告

網頁的圖片插入

當然一個較好的網頁,圖片也是不能缺少的。

插入圖片的標籤碼︰<img src="圖片地址“>

例子︰<img src="http://pooito.edu.mo/logo(center).gif">

圖片的屬性有以下︰

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

html網頁的內部鏈結(錨點)

這個功能是用於一些文字內容較多的網頁使用,可能你會在一些的教學網頁中,在網頁的上方會看到一些鏈結,你按下這些鏈結後,頁面不會發生跳轉,只是滑動條往下滑動,這種鏈結就是網頁的內部鏈結。

使用方法︰

只需用<a name="目標名稱"></a>把鏈結的目標內部內容括好

而目標名稱是任意的名稱

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

格式︰

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

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

P.S.這兩個的目標名稱必需是一樣的。

網頁的超鏈結

文字之超連結

  超鏈結可以說是網頁中的一個重要元素,如果一個網頁沒有超鏈結,那麼這個網頁就不能有互動性。

如果要把文字變成超鏈結,只需要在網頁中加入<a href="URL">你的文字</a>的代碼(URL是代表你要鏈結到的地址,包括網頁,例如︰GOOGLE)

例子︰

<html>

<head>
</head>

<body>

<a href="http://yahoo.com.hk">YAHOO</a>

</body>

</html>

以上的網頁會有一個YAHOO的文字,你點下了它,網頁就會鏈結到YAHOO的網站

而在<a href="URL">的標籤碼中,其中的一個屬性是target,它是用來改變鏈結時開啟頁面的狀態,而開啟頁面的狀態有四種,分別是_new_top_blankname

詳細解釋,在target裡的參數如下 :

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

超鏈結除了可以是文字外,也可以是圖片

html的清單

圓點清單(無序清單)

無序清單的標籤碼為<ul>清單內容</ul>

而在清單內容中,要用<li></li>來括著清單的物件,例如<li>apple</li>

例子︰

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

上面的網頁顯示結果為︰

  • 物件1
  • 物件2
  • 物件3

<ul>的標籤內還有一些參數可以讓顯出的效果不同 :

<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=起始的數值

 

html之文字格式化

文字格式化

用<pre>的標籤碼可以將你所要顯示的文字格式一模一樣地顯示在瀏覽器上,再用</pre>來關閉 <pre>

例子︰

<html>

<head>

<title>文字格式化</title>

</head>

<body>

<pre>

培道中學

電腦學會 你好!

</pre>

</body>

</html>

 

網頁的輸出結果為︰
培道中學

電腦學會 你好!

html的換行和段落

強迫換行︰

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

  斷行1<br>
  斷行2

  以上的結果為︰

斷行1

斷行2


段落︰ 

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

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

  注意︰段落<p>與<br>的不同是<p>要有結束標籤碼</p>

html的文字屬性設定

如果要把文字變成粗體,就要加上<b>的碼了

如果要把文字變成斜體,就要加上<i>的碼了

如果要把文字加上底線,就要加上<u>的碼了

  例子 <b>例子</b>

  例子 <i>例子</i>

  例子 <u>例子</u>

文字的屬性控制要使用<font></font>的標籤碼來括著,它可以控制文字的大小,顏色,字型。

<font size="7″>例子</font>

上面的html碼的結果如下︰

例子

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

html的標題文字大小

網頁的標題文字可分出六種大小,分別是 :

<h1>標題文字大小1</h1>
<h2>標題文字大小2</h2>
<h3>標題文字大小3</h3>
<h4>標題文字大小4</h4>
<h5>標題文字大小5</h5>
<h6>標題文字大小6</h6>

以上的結果為︰

標題文字大小1

標題文字大小2

標題文字大小3

標題文字大小4

標題文字大小5
標題文字大小6