程式語言教學誌 FB, YouTube: PYDOING: HTML 4.01 快速導覽

<img> 為行內元素 (inline element) ，用來在網頁中載入 JPEG 、 GIF 或 PNG 圖片。

起始標籤	結束標籤
需要	不需要

<img> 有幾個屬性

屬性	值	Deprecated or Obsolete
align	left center right justify	Deprecated in HTML 4.01, Obsolete in HTML5
border	pixel	Deprecated in HTML 4.01, Obsolete in HTML5
alt	描述文字
height	高度
hspace	pixel	Deprecated in HTML 4.01, Obsolete in HTML5
ismap	0 1
longdesc		HTML 4 only
name	元素名稱	Deprecated in HTML 4.01, Obsolete in HTML5
src	來源位置
width	寬度
usemap	來源位置
vspace	pixel	Deprecated in HTML 4.01, Obsolete in HTML5

舉例如下

<html>
<head>
<title>網頁標題</title>
</head>
<body>
圖片之前
<img src="example.jpg" />
圖片之後
</body>
</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：imgexample01.html
     功能：示範 HTML 4.01 標記語言的使用 
     作者：張凱慶
     時間：西元 2011 年 5 月 -->

利用瀏覽器 (broswer) 開啟，結果如下

我們可以利用 width 與 height 屬性 (attribute) 設定圖片在瀏覽器視窗中顯示的比例，例如下面將 width 與 height 都設定成 100% ，圖片就會充滿整個視窗

<html>
<head>
<title>網頁標題</title>
</head>
<body>
<img src="example.jpg" height="100%" width="100%" />
</body>
</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：imgexample02.html
     功能：示範 HTML 4.01 標記語言的使用 
     作者：張凱慶
     時間：西元 2011 年 5 月 -->

如下

下面將 width 與 height 都設定成 50% ，圖片就會佔視窗的四分之一

<html>
<head>
<title>網頁標題</title>
</head>
<body>
<img src="example.jpg" height="50%" width="50%" />
</body>
</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：imgexample03.html
     功能：示範 HTML 4.01 標記語言的使用 
     作者：張凱慶
     時間：西元 2011 年 5 月 -->

如下