ایچ تی ایم ال تصویر

HTML ਦੀ ਵਰਤੋਂ ਨਾਲ ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਚਿੱਤਰ ਦਿਖਾਇਆ ਜਾ ਸਕਦਾ ਹੈ。

ਉਦਾਹਰਣ

ਚਿੱਤਰ ਜੋੜਨ
ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਦਿਖਾਇਆ ਗਿਆ ਹੈ ਕਿ ਕਿਵੇਂ ਵੈੱਬਪੰਨ 'ਚ ਚਿੱਤਰ ਦਿਖਾਇਆ ਜਾ ਸਕਦਾ ਹੈ。
ਵੱਖ-ਵੱਖ ਸਥਾਨਾਂ ਤੋਂ ਚਿੱਤਰ ਜੋੜਨ
ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਦਿਖਾਇਆ ਗਿਆ ਹੈ ਕਿ ਕਿਵੇਂ ਹੋਰ ਫੋਲਡਰ ਜਾਂ ਸਰਵਰ 'ਤੇ ਚਿੱਤਰ ਨੂੰ ਵੈੱਬਪੰਨ 'ਚ ਦਿਖਾਇਆ ਜਾ ਸਕਦਾ ਹੈ。

（ਇਸ ਪੰਨ ਦੇ ਨੇੜੇ ਹੋਰ ਉਦਾਹਰਣ ਮਿਲ ਸਕਦੇ ਹਨ)

ਚਿੱਤਰ ਟੈਗ (<img>) ਅਤੇ ਸੋਰਸ ਲੀਕਾਜ਼ (Src)

HTML ਵਿੱਚ, ਚਿੱਤਰ <img> ਟੈਗ ਰਾਹੀਂ ਦੇਣ ਜਾਂਦਾ ਹੈ。

<img> ਖਾਲੀ ਟੈਗ ਹੈ, ਮਤਲਬ ਕਿ ਇਹ ਸਿਰਫ਼ ਲੀਕਾਜ਼ਾਂ ਨੂੰ ਸਮੇਤ ਹੈ ਅਤੇ ਕੋਈ ਬੰਦ ਟੈਗ ਨਹੀਂ ਹੈ。

ਚਿੱਤਰ ਨੂੰ ਪੰਨ 'ਤੇ ਦਿਖਾਉਣ ਲਈ, ਤੁਸੀਂ ਸੋਰਸ ਲੀਕਾਜ਼ (src) ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ। src 'ਸੋਰਸ' ਨੂੰ ਦਿਖਾਉਂਦਾ ਹੈ। ਸੋਰਸ ਲੀਕਾਜ਼ ਦਾ ਮੁੱਲ ਚਿੱਤਰ ਦਾ URL ਸਥਾਨ ਹੈ。

ਚਿੱਤਰ ਦੇਣ ਦੀ ਗਰੰਥਾ ਹੈ:

<img src="url" />

URL ਚਿੱਤਰ ਦੀ ਸਥਿਤੀ ਨੂੰ ਦਿਖਾਉਂਦਾ ਹੈ। ਜੇਕਰ 'boat.gif' ਨਾਮ ਦਾ ਚਿੱਤਰ www.codew3c.com ਦੇ images ਫੋਲਡਰ ਵਿੱਚ ਹੈ, ਤਾਂ ਇਸ ਦਾ URL http://www.codew3c.com/images/boat.gif ਹੋਵੇਗਾ。

ਬਰਾਊਜ਼ਰ ਚਿੱਤਰ ਨੂੰ ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਚਿੱਤਰ ਟੈਗ ਦੇ ਸਥਾਨ 'ਤੇ ਦਿਖਾਉਂਦਾ ਹੈ। ਅਗਰ ਤੁਸੀਂ ਚਿੱਤਰ ਟੈਗ ਦੋ ਪੈਰਾਗ੍ਰਾਫਾਂ ਵਿਚਕਾਰ ਰੱਖੋ, ਤਾਂ ਬਰਾਊਜ਼ਰ ਪਹਿਲਾਂ ਪਹਿਲਾ ਪੈਰਾਗ੍ਰਾਫ ਦਿਖਾਵੇਗਾ, ਫਿਰ ਚਿੱਤਰ ਅਤੇ ਆਖਰਕਾਰ ਦੂਜਾ ਪੈਰਾਗ੍ਰਾਫ ਦਿਖਾਵੇਗਾ。

ਬਦਲ ਟੈਕਸਟ ਲੀਕਾਜ਼ (Alt)

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

alt="Big Boat">

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

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

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

更多实例

ਪਿੱਨ ਚਿਤਰ
ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਹੈਂਡਲਰ ਪੇਜ ਵਿੱਚ ਪਿੱਨ ਚਿਤਰ ਨੂੰ ਜੋੜਨ ਦੀ ਪ੍ਰਕਿਰਿਆ ਵਿਖਾਈ ਗਈ ਹੈ。
ਇਮੇਜ ਸਰਜਣ
ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਲਿਖਤ ਵਿੱਚ ਇਮੇਜ ਦੀ ਸਿਰਜਣਾ ਕਰਨ ਦੀ ਪ੍ਰਕਿਰਿਆ ਵਿਖਾਈ ਗਈ ਹੈ。
ਫਲੌਟ ਇਮੇਜ
ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਇਮੇਜ ਨੂੰ ਪੈਰਾਗ੍ਰਾਫ ਦੇ ਲੈਫਟ ਜਾਂ ਰਾਇਟ ਵੱਲ ਫਲੌਟ ਕਰਨ ਦੀ ਪ੍ਰਕਿਰਿਆ ਵਿਖਾਈ ਗਈ ਹੈ。
ਇਮੇਜ ਦਾ ਆਕਾਰ ਸੰਯੋਜਨ
ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਇਮੇਜ ਦਾ ਆਕਾਰ ਬਦਲਣ ਦੀ ਪ੍ਰਕਿਰਿਆ ਵਿਖਾਈ ਗਈ ਹੈ。
ਇਮੇਜ ਲਈ ਪਰਿਵਰਤਨ ਸਬੰਧੀ ਟੈਕਸਟ ਦਿਖਾਓ
ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਇਮੇਜ ਲਈ ਪਰਿਵਰਤਨ ਸਬੰਧੀ ਟੈਕਸਟ ਦਿਖਾਈ ਗਈ ਹੈ।ਬਰਾਉਜ਼ਰ ਇਮੇਜ ਨਹੀਂ ਲੋਡ ਕਰ ਸਕੇ ਤਾਂ ਪਰਿਵਰਤਨ ਸਬੰਧੀ ਟੈਕਸਟ ਲੜੀ ਪੜ੍ਹਦੇ ਹਨ।ਸਾਈਟ ਉੱਤੇ ਸਾਰੇ ਇਮੇਜਾਂ ਲਈ ਪਰਿਵਰਤਨ ਸਬੰਧੀ ਟੈਕਸਟ ਜੋੜਨਾ ਇੱਕ ਚੰਗਾ ਆਦਤ ਹੈ。
ਇਮੇਜ ਲਿੰਕ ਬਣਾਓ
ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਇਮੇਜ ਨੂੰ ਲਿੰਕ ਵਜੋਂ ਵਰਤਣ ਦੀ ਪ੍ਰਕਿਰਿਆ ਵਿਖਾਈ ਗਈ ਹੈ。
ਇਮੇਜ ਮੈਪ ਬਣਾਓ
ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਇੱਕ ਹਾਸਲ ਕਰਨ ਵਾਲੇ ਖੇਤਰ ਵਾਲੇ ਇਮੇਜ ਮੈਪ ਦੀ ਸਿਰਜਣਾ ਕਰਨ ਦੀ ਪ੍ਰਕਿਰਿਆ ਵਿਖਾਈ ਗਈ ਹੈ।ਹਰੇਕ ਖੇਤਰ ਇੱਕ ਹਾਈਪਰਲਿੰਕ ਹੈ。
ਇਮੇਜ ਨੂੰ ਇਮੇਜ ਮੈਪ ਵਿੱਚ ਬਦਲੋ
ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਇੱਕ ਆਮ ਇਮੇਜ ਨੂੰ ਇਮੇਜ ਮੈਪ ਵਜੋਂ ਸੈਟ ਕਰਨ ਦੀ ਪ੍ਰਕਿਰਿਆ ਵਿਖਾਈ ਗਈ ਹੈ。

ਇਮੇਜ ਟੈਗ

ਟੈਗ ਵਰਣਨ
<img> ਇਮੇਜ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰੋ。
<map> ਇਮੇਜ ਮੈਪ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰੋ。
<area> ਇਮੇਜ ਮੈਪ ਵਿੱਚ ਹਾਸਲ ਕਰਨ ਵਾਲੇ ਖੇਤਰ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰੋ。