回到學院首頁選擇製網課程教學與製網有關的語言選擇輔助課程選擇網頁材料了解 HKIWC
The Best Web Hosting Company
 今昔HTML
 HTML概念
 標記一覽
 文件標記
 排版標記
 字體標記
 清單標記
 表格標記
 表單標記
 圖形標記Here
 連結標記
 框架標記
 影像地圖
 多媒體
 其他標記
 特殊字元
 調色原理
 StyleSheets
 加入實例
 本節實例
 疑難討論
 聯絡學院
 網絡辭典
歡迎到訪 PenPal Garden
ICQ 國際交友會
  ■ 本節主要介紹的標記:
<IMG>

欲明白本篇【HTML剖析】之標記分類請看 【標記一覽】。
亦請先明白圍堵標記與空標記的分別請看 【HTML概念】。

<IMG> :
<IMG> 稱圖形標記,主要用以插入圖片於網頁中,至於其它用處如配合影片檔案等的播 放及影像地圖(Image Map 或稱一圖多連結)則於不會在這節提及,請看【影像地圖】及 【其他標記】。

<IMG> 的一般參數設定:

例如 <img src="logo.gif" width=100 height=100 hspace=5 vspace=5 border=2 align="top" alt="Logo of PenPals Garden" lowsrc="pre_logo.gif">

  • src="logo.gif"
    圖片來源,接受 .gif, .jpg 及 .png 格式,前兩者通行己久,後者由 96 年開始發展, 於未來取代前兩者。若圖片檔與該 html 檔同處一目錄則只需寫上檔案名稱,否則 必須加上正確的途徑,相對及絕對皆可。兩者的分別請看 Composer 教室之【連結 進階】。
  • width=100 height=100
    設定圖片大小,此寬度、及高度一般採用 pixels 作單位。通常只設為圖片的真實 大小以免失真,若需要改變圖片大小最好事先使用圖像編輯工具。
  • hspace=5 vspace=5
    設定圖片邊沿空白,以免文字或其它圖片過於貼近。hspace 是設定圖片左右的空 間,vspace 則是設定圖片上下的空間,高度採用 pixels 作單位。
  • border=2
    圖片邊框厚度。
  • align="top"
    調整圖片旁邊文字的位置,你可以控制文字出現在圖片的偏上方、中間、底端、 左右等,可選值:top, middle, bottom, left, right,內定為 botom。Netscape 還支援 texttop, baseline, absmiddle, absbottom,
    texttop 表示圖片和文字依頂線對齊,
    baseline 表示圖片對齊到目前文字行底線值,
    absmiddle 表示圖片對齊到目前文字行絕對中央,
    absbottom 表示圖片對齊到目前文字行絕對底部,(絕對底部意指它考慮到比方 y 、g、q 等字的下緣)。
  • alt="Logo of PenPal Garden"
    這是用以描述該圖形的文字,若用者使用文字瀏覽器,由於不支援圖片,這些文 字更會代替圖片而被顯示。若於支援圖片顯示的瀏覽器,當鼠標移至圖片上該些 文字亦會顯示。
  • lowsrc="pre_logo.gif"
    設定先顯示低解像圖片,若所加入的是一張很大的圖片,下載需時很長,這張低 解像圖片會先被顯示以免瀏覽失卻興趣,通當是原圖片灰階版本。

例子一:
原始碼 <img src="girl.gif" width=100 height=112 border=0 alt="beautiful girl"> 普通插入
顯示結果
beautiful girl 普通插入

例子二:
原始碼 <img src="girl.gif" width=100 height=112 border=0 alt="beautiful" hspace=10 vspace=20"> 設定上下左右空白位置
顯示結果
beautiful 設定上下左右空白位置

例子三:
原始碼 <img src="girl.gif" width=100 height=112 border=4 alt="beautiful" hspace=10 vspace=20"> 設定上下左右空白位置
顯示結果
beautiful lady 設定字畫中間對齊,邊框厚度為 4。

例子四:
原始碼 <img src="girl.gif" width=100 height=112 alt="beautiful lady" align="right" border=0> 設定圖片靠右。
顯示結果
beautiful lady 設定圖片靠右。

例子五:
原始碼 <img src="girl.gif" width=200 height=220 alt="I'm not beautiful right now" border=0> 放大了的圖片
顯示結果
I'm not beautiful right now 放大了的圖片

The Best Web Hosting Company
Download Internet Explorer Download Netscape Netvigator