Imaheng HTML

Ginagamit ang HTML upang ipakita ang imahe sa dokumento.

Halimbawa

Idinikit ang imahe
Ang halimbawa na ito ay nagpapakita kung paano ipakita ang imahe sa web page.
Idinikit ang imahe mula sa iba't ibang lugar
Ang halimbawa na ito ay nagpapakita kung paano ipakita ang mga imahe mula sa iba't ibang lokasyon sa web page.

（Maaari mong mahanap ang mas maraming halimbawa sa ibaba ng pahina.。）

Ang taga-imahe (<img>) at ang katangian ng pinagmulan (Src)

Sa HTML, ang imahe ay tinukoy ng taga-imahe <img>.

<img> ay walang kapasidad na tag, ibig sabihin, ito ay naglalaman lamang ng mga katangian at walang nakasara na tag.

Para sa pagpapakita ng imahe sa pahina, kailangan mong gamitin ang katangian ng pinagmulan (src). Ang src ay tumutukoy sa "source". Ang halaga ng katangian ng pinagmulan ay ang URL ng imahe.

Ang sintaks na ginagamit para sa paglalarawan ng imahe ay:

<img src="url" />

Ang URL ay tumutukoy sa lugar kung saan nasa imahe. Kung ang imahe na may pangalan na "boat.gif" ay nasa direktoryo ng images sa www.codew3c.com, ang kanyang URL ay http://www.codew3c.com/images/boat.gif.

Ipinapakita ng browser ang imahe sa lugar kung saan lumilitaw ang taga-imahe sa dokumento. Kung ilagay mo ang taga-imahe sa gitna ng dalawang pahina, ipapakita muna ng browser ang unang pahina, pagkatapos ay ang imahe, at sa wakas ang ikalawang pahina.

Pamagpalit ang katangian ng kapalit (Alt)

alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。

<img src="boat.gif" alt="Big Boat">

当浏览器无法载入图像时，替换文本属性可告诉读者他们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

基本的注意事项 - 有用的提示：

假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。

更多实例

背景图片
本例演示如何向 HTML 页面添加背景图片。
排列图片
本例演示如何在文字中排列图像。
浮动图像
本例演示如何使图片浮动至段落的左边或右边。
调整图像尺寸
本例演示如何将图片调整到不同的尺寸。
为图片显示替换文本
本例演示如何为图片显示替换文本。在浏览器无法载入图像时，替换文本属性告诉读者们失去的信息。为页面上的图像都加上替换文本属性是个好习惯。
制作图像链接
本例演示如何将图像作为一个链接使用。
创建图像映射
本例显示如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。
把图像转换为图像映射
本例显示如何把一幅普通的图像设置为图像映射。

图像标签

标签 描述
<img> 定义图像。
<map> 定义图像地图。
<area> 定义图像地图中的可点击区域。