通用HTML(4)-【物件插入篇】

在早期的網站中,網頁格式大多由文字或圖片所組成,在XHTML中針對文字的排板有許多的標籤,這已經在前面三節提到過了,接下來就是跟大家介紹網頁中的「物件」,圖片即是物件的一種。稍微偷瞄一下本節介紹的元素標籤就會發現,有很基礎的物件,也有進階的物件,因為這幾篇XHTML的介紹是以標籤〝功能〞作區分,因此就只好在這麼早的時候就提到比較進階的標籤了。

基本上如果你是初學者,只要學會超連結(a)和插入圖片(img)以及水平線(hr)就可以了,其它的都是進階物件。style是用來設定網頁CSS樣板用的,在CSS的單元會詳細介紹;script是用來寫程式的,最常見的是JAVA語言,因此這個部份也丟給JavaScript單元即可;至於applet就給有興趣的人找相關的資料吧。

最後是關於object和embed物件,雖然本節對常用的屬性有做介紹,不過大部份的人是用不到啦,簡單的來說用抄的會比較快!因為不同的物件會有差異,本節的範例是最常見的Flash物件,有需要的時候再看就可以了,一般來說我們去引用別人的Flash貼紙或影片,該公司都會提供已經寫好的程式碼,只要複製貼上即可。

元素標籤

a(超連結)、img(圖片)、hr(分隔線)、style(CSS樣板)、script(腳本語言)、noscript(不支援腳本)、embed(物件)、object(物件)、param(物件參數)、applet(JavaApplet)

關連文章:HTML5影片播放HTML5播放音樂

a Microsoft Office FrontPageAdobe Dreamweaver CS3

說明:插入超連結(link)或錨點(anchor)。當我們點選超連結的時候,就會從目前的網頁跳到另外一個網頁畫面,這是組成網際網路最重要的元素。

屬性:

  • class="類別":指定物件類別。
  • dir="顯示方向(ltr | rtl)":由左到右(ltr)或由右到左(rtl),預設值是「ltr」。
  • href="超連結位置”:指定連結到的網址或錨的位置。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • lang="所屬語言":標籤包覆文字所屬的語言。
  • style="樣式":設定顯示樣式。
  • tabindex="數字":使用Tab時的瀏覽順序。
  • target="目標視窗ID(_blank | _parent | _search | _self | _top)":指定網頁開啟的位置,若不指定則在原視窗開啟,通常使用_blank開新視窗,或設定視窗ID在指定的視窗中開啟。
  • title="標題":指定一個標題,當滑鼠移到超連結上時會顯現。

【範例】

這是一個錨
超連結連到google(本視窗)
超連結連到google(另開視窗)
連到錨

【結果】

這是一個錨
超連結連到google(本視窗)
超連結連到google(另開視窗)
連到錨

embed Microsoft Office FrontPageAdobe Dreamweaver CS3

說明:內嵌一個物件到網頁中,與Object作用相同,考慮到瀏覽器支援的問題,常與Object結合使用。除了下面通用的屬性外,還會針對物件類別給予專屬的參數。

屬性:

  • src="物件位置”:必要屬性,指定物件的位置。
  • type="媒體類別":必要屬性,說明物件的種類,有固定內容。
  • align="水平位置(left | center | right)":指定段落的水平位置,不建議使用,已漸漸被CSS取代。
  • alt="文字":指定物件的替代文字,當物件無法載入時,則顯示該 文字。
  • class="類別":指定物件類別。
  • height="高度":以像素為單位,設定物件高度。
  • id="物件ID":指定物件所屬ID,在同一個 頁 面中ID不能重覆。
  • style="樣式":設定顯示樣式。
  • title=" 標題":指定一個標題。
  • width="寬度":以像素為單位,設定物件寬度。

【範例】


【結果】



hr Microsoft Office FrontPageAdobe Dreamweaver CS3

說明:插入水平線,沒有結尾標籤。

屬性:

  • align="水平位置(left | center | right)":指定段落的水平位置,不建議使用,已漸漸被CSS取代。
  • class="類別":指定物件類別。
  • size="大小(1~3)":指定水平線的粗細,預設值為3,不建議使用,已漸漸被CSS取代。
  • id="物件ID":指定物件所屬ID,在同一個 頁 面中ID不能重覆。
  • style="樣式":設定顯示樣式。
  • title=" 標題":指定一個標題。
  • width="寬度":指定水平線的寬度,不建議使用,已漸漸被CSS取代。

【範例】



【結果】



img Microsoft Office FrontPageAdobe Dreamweaver CS3

說明:在網頁中插入圖片,沒有結尾標籤。

屬性:

  • src="圖片位置”:必要屬性,指定圖檔的位置。
  • align="水平位置(left | center | right)":指定段落的水平位置,不建議使用,已漸漸被CSS取代。
  • alt="文字":指定圖片的替代文字,當圖片無法載入時,則顯示該文字。
  • class="類別":指定物件類別。
  • height="高度":以像素為單位,設定圖片高度。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • style="樣式":設定顯示樣式。
  • title="標題":指定一個標題,當滑鼠移到超連結上時會顯現。
  • usemap="map名稱":連結map元素,參考進階格式篇
  • width="寬度":以像素為單位,設定圖片寬度。

【範例】

google大力水手圖示

【結果】

google大力水手圖示

object Microsoft Office FrontPageAdobe Dreamweaver CS3

說明:內嵌一個物件到網頁中,與embed作用相同,考慮到瀏覽器支援的問題,常與embed結合使用。Object傳給物件的參數是透過param來指定。

屬性:

  • class="類別":指定物件類別。
  • classid="物件類別識別碼":指定物件的識別碼,有固定內容,加入這個屬性比較容易正常瀏覽。
  • codebase="編碼位置":指定物件編碼資料的位置,加入這個屬性比較容易正常瀏覽。
  • data="物件位置":此物件的位置。
  • height="高度":以像素為單位,設定物件高度。
  • id="物件ID":指定物件所屬ID,在同一個 頁 面中ID不能重覆。
  • style="樣式":設定顯示樣式。
  • title=" 標題":指定一個標題。
  • type="媒體類別":說明物件的種類,有固定內容。
  • width="寬度":以像素為單位,設定物件寬度。

【範例】(範例結果請參考param標籤)



param Microsoft Office FrontPageAdobe Dreamweaver CS3

說明:傳遞參數給object或applet。不同瀏覽器對於播放影片位置的name要求不同,常見的有src、data、movie。

屬性:

  • name="屬性名稱":傳給物件的屬性名稱。
  • value="屬性值":指定物件的屬性值。

【範例】


【結果】