HTML <img> ਟੈਗ

کدو3سی در لائن تیچرنل

ایچ تی ام ال سیریز تیچرنل
براوزر اسکریپت
سرور اسکریپت
پروگرامنگ تیچرنل
ایکس ام ال سیریز تیچرنل
سائت بندن منول
منول مرجع

کورس تیبل

منول مرجع

HTML عناصر (حروف آرایه)
HTML عناصر (فونکشن آرایه)
HTML بروزر سپورتی
ایچ تی ام ال عوامل عوامل
HTML واقعیت
ایچ تی ام ال رنگ نام
HTML کینس
HTML ویدئو/آوو
ایچ تی ام ال زبان
HTML دستاویز نوع
ایچ تی ام ال URL کد
HTML لینگو کد
HTML ਦੇਸ਼ ਕੋਡ
HTTP ਸੰਦੇਸ਼
HTTP ਮੈਥਡ
کلیید شارٹ کیوٹ

HTML ਟੈਗ

<!-->
<!DOCTYPE>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
<bdi>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<data>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<dir>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<h1> - <h6>
<head>
<header>
<hgroup>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<legend>
<li>
<link>
<main>
<map>
<mark>
<menu>
<meta>
<meter>
<nav>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<picture>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<search>
<section>
<select>
<small>
<source>
<span>
<strike>
<strong>
<style>
<sub>
<summary>
<sup>
<svg>
<table>
<tbody>
<td>
<template>
<textarea>
<tfoot>
<th>
<thead>
<time>
</a></li> <li><a href="/pa/tags/tag_tr.html" title="HTML <tr> ਟੈਗ"><tr></a></li> <li><a href="/pa/tags/tag_track.html" title="HTML <track> ਟੈਗ"><track></a></li> <li><a href="/pa/tags/tag_tt.html" title="HTML <tt> ਟੈਗ"><tt></a></li> <li><a href="/pa/tags/tag_u.html" title="HTML <u> ਟੈਗ"><u></a></li> <li><a href="/pa/tags/tag_ul.html" title="HTML <ul> ਟੈਗ"><ul></a></li> <li><a href="/pa/tags/tag_var.html" title="HTML <var> ਟੈਗ"><var></a></li> <li><a href="/pa/tags/tag_video.html" title="HTML <video> ਟੈਗ"><video></a></li> <li><a href="/pa/tags/tag_wbr.html" title="HTML <wbr> ਟੈਗ"><wbr></a></li> </ul> </div> <div><h3><center> ਵਿਸ਼ੇਸ਼ ਕੋਰਸ </center><h3> <h2>ਕੋਰਸ ਸਿਫਾਰਸ਼:</h2> <ul> <li><a href="/pa/howto/index.html" title="CodeW3C.com ਦਾ ਪੋਕੇਟ">CodeW3C.com ਦਾ ਪੋਕੇਟ</a></li> </ul> </div> </div> <div id="maincontent"> <div class="idea"> <a href="/"><button>English</button></a> <a href="/zh/"><button>中文</button></a> <a href="/oldzh/"><button>繁體中文</button></a> <a href="/ru/"><button>Русский</button></a> <a href="/fr/"><button>Français</button></a> <a href="/de/"><button>Deutsch</button></a> <a href="/es/"><button>Español</button></a> <a href="/pt/"><button>Português</button></a> <a href="/ja/"><button>日本語</button></a> <a href="/ko/"><button>한국어</button></a> <a href="/it/"><button>Italiano</button></a> <a href="/ar/"><button>عربي</button></a> <a href="/hi/"><button>हिंदी</button></a> <a href="/bn/"><button>বাংলা</button></a> <a href="/ms/"><button>Bahasa Malaysia</button></a> <a href="/my/"><button>မြန်မာ</button></a> <a href="/vi/"><button>Tiếng Việt</button></a> <a href="/th/"><button>ภาษาไทย</button></a> <a href="/lo/"><button>ລາວ</button></a> <a href="/id/"><button>Bahasa Indonesia</button></a> <a href="/ur/"><button>اردو</button></a> <a href="/ha/"><button>Hausa</button></a> <a href="/pl/"><button>Język polski</button></a> <a href="/pa/"><button>ਪੰਜਾਬੀ</button></a> <a href="/sv/"><button>Svenska</button></a> <a href="/da/"><button>Dansk</button></a> <a href="/nl/"><button>Nederlands</button></a> <a href="/tr/"><button>Türkçe</button></a> <a href="/fi/"><button>suom.</button></a> <a href="/el/"><button>Ελληνικά</button></a> <a href="/fa/"><button>فارسی</button></a> <a href="/sw/"><button>Kiswahili</button></a> <a href="/te/"><button>తెలుగు</button></a> <a href="/tl/"><button>wikang Galu</button></a> </div> <h1>HTML <img> ਟੈਗ</h1> <div class="prenextnav"> <ul> <li> ਪਿਛਲਾ ਪੰਨਾ <a href="/pa/tags/tag_iframe.html" title="HTML <iframe> ਟੈਗ"><iframe></a></li> <li> ਅਗਲਾ ਪੰਨਾ <a href="/pa/tags/tag_input.html" title="HTML <input> ਟੈਗ"><input></a></li> </ul> </div> <div> <h2>ਵਿਵਰਣ ਅਤੇ ਵਰਤੋਂ</h2> <p><code><img></code> ਟੈਗ ਨੂੰ</p> <p>ਤਕਨੀਕੀ ਰੂਪ ਵਿੱਚ ਚਿੱਤਰ ਨੂੰ ਪੰਨੇ ਵਿੱਚ ਲਗਾਇਆ ਨਹੀਂ ਗਿਆ ਹੈ, ਬਲਕਿ ਚਿੱਤਰ ਨੂੰ ਪੰਨੇ ਨਾਲ ਜੋੜਿਆ ਗਿਆ ਹੈ。<code><img></code> ਟੈਗ ਇੱਕ ਕੰਟੇਨਰ ਬਣਾਉਂਦਾ ਹੈ ਜੋ ਚਿੱਤਰ ਨੂੰ ਹਵਾਲਾ ਦਿੰਦਾ ਹੈ。</p> <p><code><img></code> ਟੈਗ ਦੋ ਲੋੜੀਦੇ ਲੋੜੀਦੇ ਅਤੇ ਮਹੱਤਵਪੂਰਣ ਲੋੜੀਦੇ ਹਨ:</p> <ul> <li><a href="/pa/tags/att_img_src.html" title="HTML <img> src ਸਪੈਸ਼ਲ">src</a> - ਚਿੱਤਰ ਦੀ ਪਥ ਨਿਰਧਾਰਿਤ ਕਰੋ</li> <li><a href="/pa/tags/att_img_alt.html" title="HTML <img> alt ਸਪੈਸ਼ਲ">alt</a> - ਜੇਕਰ ਕੋਈ ਕਾਰਨ ਨਾਲ ਚਿੱਤਰ ਨਾ ਦਿਖਾਇਆ ਜਾ ਸਕਦਾ ਹੈ, ਤਾਂ ਚਿੱਤਰ ਦਾ ਬਦਲੇ ਟੈਕਸਟ ਨਿਰਧਾਰਿਤ ਕਰੋ</li> </ul> <p class="important"><span>ਧਿਆਨ:</span>ਇਸ ਤੋਂ ਇਲਾਵਾ ਹਮੇਸ਼ਾ ਚਿੱਤਰ ਦੀ ਚੌਡਾਈ ਅਤੇ ਉਚਾਈ ਨਿਰਧਾਰਿਤ ਕਰੋ। ਅਗਰ ਚੌਡਾਈ ਅਤੇ ਉਚਾਈ ਨਹੀਂ ਨਿਰਧਾਰਿਤ ਹੋਣ, ਤਾਂ ਚਿੱਤਰ ਲੋਡ ਕਰਨ ਦੇ ਸਮੇਂ ਪੰਨਾ ਝਾਂਟਾ ਸਕਦਾ ਹੈ。</p> <p class="tip"><span>ਸੁਝਾਅ:</span>ਦੂਜੇ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਚਿੱਤਰ ਨਾਲ ਜੋੜਨ ਲਈ ਇਹ ਕਰੋ <code><img></code> ਟੈਗ ਨੂੰ <a href="/pa/tags/tag_a.html" title="ایچ تی ام ال <a> تیگ"><a></a> ਟੈਗ ਅੰਦਰ (ਹੇਠ ਦੇ ਉਦਾਹਰਣ ਨੂੰ ਦੇਖੋ)。</p> <h3>ਹੋਰ ਦੇਖੋ:</h3> <p>HTML ਟੂਰ<a href="/pa/html/html_images.html" title="HTML ਚਿੱਤਰ">HTML ਚਿੱਤਰ</a></p> <p>HTML DOM ਰੈਫਰੈਂਸ ਮੈਨੂਅਲ<a href="/pa/jsref/dom_obj_image.html" title="HTML DOM Image ਆਬਜੈਕਟ">Image ਆਬਜੈਕਟ</a></p> <p>CSS ਟੂਰ<a href="/pa/css/css3_images.html" title="CSS ਚਿੱਤਰ ਸਟਾਈਲ">ਚਿੱਤਰ ਦੇ ਸਟਾਈਲ ਸੈਟ ਕਰੋ</a></p> <p class="note"><span>ਹੋਰ ਪੜ੍ਹਣ ਲਈ:</span><a href="#how-to-use-image">ਚਿੱਤਰ ਦੀ ਸਹੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰਨਾ ਹੈ</a></p> </div> <div> <h2>ਇੰਟਰਐਕਸ਼ਨ</h2> <h3>ਉਦਾਹਰਣ 1</h3> <p>ਹੇਠ ਦੇ ਉਦਾਹਰਣ ਵਿੱਚ ਅਸੀਂ ਪੰਨੇ ਵਿੱਚ ਇੱਕ ਕੋਡਵੈਕ3ਸ.ਕੰਮ ਦੇ ਇੰਜੀਨੀਅਰ ਵੱਲੋਂ ਸ਼ਾਂਘਾਈ ਫਲਾਵਰ ਪੋਰਟ ਵਿੱਚ ਫੁੱਲਾਂ ਦਾ ਚਿੱਤਰ ਲਗਾਇਆ ਹੈ:</p> <pre class="language-html"> <img src="tulip.jpg" alt="ਸ਼ਾਂਘਾਈ ਫਲਾਵਰ ਪੋਰਟ - ਟੁਲੀਪ" /> </pre> <p class="tiy"><a target="_blank" href="/pa/tiy/t.html?f=tags_img_1">ਸਵੈ ਦੀ ਜਾਂਚ ਕਰੋ</a></p> <img src="/i/photo/tulip.jpg" alt="上海鲜花港 - 郁金香" style="display: block; margin: 0 auto;" /> <h3>ਉਦਾਹਰਣ 2</h3> <p>ਚਿੱਤਰ ਨੂੰ ਕਿਵੇਂ ਜੋੜਨ ਦਾ ਦੂਜਾ ਉਦਾਹਰਣ:</p> <pre class="language-html"> <img src="dancer.png" alt="ਨਰਸ" width="500" height="749"> </pre> <p class="tiy"><a target="_blank" href="/pa/tiy/t.html?f=tags_img_2">ਸਵੈ ਦੀ ਜਾਂਚ ਕਰੋ</a></p> <p class="tip"><span>ਸੁਝਾਅ:</span>ਪੰਨੇ ਦੇ ਨੀਚੇ ਹੋਰ ਉਦਾਹਰਨਾਂ ਮਿਲਣਗੇ。</p> </div> <div> <h2>ਲੋੜ</h2> <table class="dataintable"> <tr> <th style="width:20%;">ਲੋੜ</th> <th style="width:30%;">ਮੁੱਲ</th> <th>ਵਰਣਨ</th> </tr> <tr> <td><a href="/pa/tags/att_img_alt.html" title="HTML <img> alt ਸਪੈਸ਼ਲ">alt</a></td> <td><i>ਟੈਕਸਟ</i></td> <td>ਚਿੱਤਰ ਦੀ ਬਦਲੇ ਟੈਕਸਟ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰੋ。</td> </tr> <tr> <td>crossorigin</td> <td> <ul> <li>anonymous</li> <li>use-credentials</li> </ul> </td> <td>ਪਰਮਿਟ ਕਰੋ ਕਿ ਤੀਜੇ ਪਾਰਸ਼ਵਿਕ ਸਾਈਟਾਂ ਦੇ ਚਿੱਤਰਾਂ ਨੂੰ ਕ੍ਰਾਸ ਓਰੀਜਨ ਦੇ ਨਾਲ ਮਿਲਾਇਆ ਜਾਵੇ ਅਤੇ ਕੈਂਵਾਸ (canvas) ਦੇ ਨਾਲ ਵਰਤਿਆ ਜਾਵੇ。</td> </tr> <tr> <td><a href="/pa/tags/att_img_height.html" title="HTML <img> height ਸਪੈਸ਼ਲ">height</a></td> <td><i>ਪਿਕਸਲ</i></td> <td>ਚਿੱਤਰ ਦੀ ਉਚਾਈ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰੋ。</td> </tr> <tr> <td><a href="/pa/tags/att_img_ismap.html" title="HTML <img> ismap ਸਪੈਸ਼ਲ">ismap</a></td> <td>ismap</td> <td>ਚਿੱਤਰ ਨੂੰ ਸਰਵਰ ਪਾਸੇ ਦੇ ਚਿੱਤਰ ਮੈਪਿੰਗ ਵਜੋਂ ਨਿਰਧਾਰਿਤ ਕਰੋ。</td> </tr> <tr> <td><a href="/pa/tags/att_img_loading.html" title="HTML <img> loading ਸਪੈਸ਼ਲ">loading</a></td> <td> <ul> <li>eager</li> <li>lazy</li> </ul> </td> <td>ਬਰਾਉਜ਼ਰ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰੋ ਕਿ ਉਹ ਚਿੱਤਰ ਨੂੰ ਤੁਰੰਤ ਲੋਡ ਕਰੇ ਜਾਂ ਕੁਝ ਸ਼ਰਤਾਂ ਨੂੰ ਪੂਰਾ ਕਰਨ ਤੋਂ ਬਾਅਦ ਲੋਡ ਕਰੇ。</td> </tr> <tr> <td><a href="/pa/tags/att_img_longdesc.html" title="HTML <img> longdesc ਸਪੈਸ਼ਲ">longdesc</a></td> <td><i>URL</i></td> <td>ਚਿੱਤਰ ਦੀ ਵਿਸਤ੍ਰਿਤ ਵਰਣਨ ਦੀ URL ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰੋ。</td> </tr> <tr> <td><a href="/pa/tags/att_img_referrepolicy.html" title="HTML <img> referrerpolicy ਸਪੈਸ਼ਲ">referrerpolicy</a></td> <td> <ul> <li>no-referrer</li> <li>no-referrer-when-downgrade</li> <li>origin</li> <li>origin-when-cross-origin</li> <li>unsafe-url</li> </ul> </td> <td>ਚਿੱਤਰ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨ ਦੇ ਸਮੇਂ ਵਰਤਣ ਵਾਲੀ ਹਵਾਲਾ ਸੂਚਨਾ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰੋ。</td> </tr> <tr> <td>sizes</td> <td><i>ਸਾਈਜ਼</i></td> <td>ਵੱਖ-ਵੱਖ ਪੰਨਿਆਂ ਦੀ ਬੈਨਾਰ ਸਾਈਜ਼ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰੋ。</td> </tr> <tr> <td><a href="/pa/tags/att_img_src.html" title="HTML <img> src ਸਪੈਸ਼ਲ">src</a></td> <td><i>URL</i></td> <td>ਚਿੱਤਰ ਦੀ ਪਥ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰੋ。</td> </tr> <tr> <td>srcset</td> <td><i>URL-list</i></td> <td>ਵੱਖ-ਵੱਖ ਹਾਲਾਤਾਂ ਵਿੱਚ ਵਰਤੇ ਜਾਣ ਵਾਲੇ ਚਿੱਤਰ ਫਾਈਲਾਂ ਦੀ ਸੂਚੀ ਨਿਰਧਾਰਿਤ ਕਰੋ</td> </tr> <tr> <td><a href="/pa/tags/att_img_usemap.html" title="HTML <img> usemap ਸਪੈਸ਼ਲ">usemap</a></td> <td>#<i>mapname</i></td> <td>ਚਿੱਤਰ ਨੂੰ ਕਸਟਮਰ ਸਰਵਰ ਇਮੇਜ ਮੈਪਿੰਗ ਵਜੋਂ ਪਰਿਭਾਸ਼ਿਤ ਕਰੋ</td> </tr> <tr> <td><a href="/pa/tags/att_img_width.html" title="HTML <img> width ਸਪੈਸ਼ਲ">width</a></td> <td><i>ਪਿਕਸਲ</i></td> <td>ਚਿੱਤਰ ਦੀ ਚੌੜਾਈ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰੋ</td> </tr> </table> </div> <div> <h2>ਸਾਰਵਤਰਿਕ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ</h2> <p><code><img></code> ਟੈਗ ਇਵੈਂਟ ਪ੍ਰਤੀਯੋਗਿਤਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਸਮਰਥਤ ਕਰਦਾ ਹੈ <a href="/pa/tags/html_ref_standardattributes.html" title="ایچ تی ام ال عوامل عوامل">HTML ਵਿੱਚ ਸਾਰਵਤਰਿਕ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ</a>。</p> </div> <div> <h2>ਈਵੈਂਟ ਪ੍ਰਤੀਯੋਗਿਤਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ</h2> <p><code><img></code> ਟੈਗ ਇਵੈਂਟ ਪ੍ਰਤੀਯੋਗਿਤਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਸਮਰਥਤ ਕਰਦਾ ਹੈ <a href="/pa/tags/html_ref_eventattributes.html" title="HTML ਈਵੈਂਟ ਸਪੈਸ਼ਲ">HTML ਵਿੱਚ ਈਵੈਂਟ ਪ੍ਰਤੀਯੋਗਿਤਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ</a>。</p> </div> <div> <h2>ਹੋਰ ਉਦਾਹਰਣ</h2> <h3>ਉਦਾਹਰਣ 3</h3> <p>ਚਿੱਤਰ ਨੂੰ ਜਾਂਦਾਰ ਕਰੋ (CSS ਦੀ ਵਰਤੋਂ ਕਰਕੇ):</p> <pre class="language-html"> <img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:bottom"> <img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:middle"> <img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:top"> <img src="flower.gif" alt="[#1#]" width="90" height="90" style="float:right"> <img src="flower.gif" alt="[#1#]" width="90" height="90" style="float:left"> </pre> <p class="tiy"><a target="_blank" href="/pa/tiy/t.html?f=tags_img_align_css">ਸਵੈ ਦੀ ਜਾਂਚ ਕਰੋ</a></p> <h3>ਉਦਾਹਰਣ 4</h3> <p>ਚਿੱਤਰ ਦੇ ਕਿਨਾਰੇ ਨੂੰ ਜੋੜੋ (CSS ਦੀ ਵਰਤੋਂ ਕਰਕੇ):</p> <pre class="language-html"> <img src="flower.gif" alt="[#1#]" style="border:5px solid black"> </pre> <p class="tiy"><a target="_blank" href="/pa/tiy/t.html?f=tags_img_border_css">ਸਵੈ ਦੀ ਜਾਂਚ ਕਰੋ</a></p> <h3>ਉਦਾਹਰਣ 5</h3> <p>ਚਿੱਤਰ ਨੂੰ ਖੱਬੇ ਅਤੇ ਉੱਚੇ ਮਾਰਜਿਨ ਜੋੜੋ (CSS ਦੀ ਵਰਤੋਂ ਕਰਕੇ):</p> <pre class="language-html"> <img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:0px 50px"> </pre> <p class="tiy"><a target="_blank" href="/pa/tiy/t.html?f=tags_img_hspace_css">ਸਵੈ ਦੀ ਜਾਂਚ ਕਰੋ</a></p> <h3>ਉਦਾਹਰਣ 6</h3> <p>ਚਿੱਤਰ ਨੂੰ ਉੱਪਰ, ਹੇਠ ਅਤੇ ਬਾਹਰ ਮਾਰਜਿਨ ਜੋੜੋ (CSS ਦੀ ਵਰਤੋਂ ਕਰਕੇ):</p> <pre class="language-html"> <img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:50px 0px"> </pre> <p class="tiy"><a target="_blank" href="/pa/tiy/t.html?f=tags_img_vspace_css">ਸਵੈ ਦੀ ਜਾਂਚ ਕਰੋ</a></p> <h3>ਉਦਾਹਰਣ 7</h3> <p>ਕਿਵੇਂ ਕਿਸੇ ਹੋਰ ਫੋਲਡਰ ਜਾਂ ਹੋਰ ਵੈੱਬਸਾਈਟ ਤੋਂ ਇੱਕ ਚਿੱਤਰ ਜੋੜੋ:</p> <pre class="language-html"> <img src="/photo/flower.gif" alt="Flower" width="180" height="180"> <img src="https://www.codew3c.com/photo/tree.png" alt="Tree" width="150" height="161"> </pre> <p class="tiy"><a target="_blank" href="/pa/tiy/t.html?f=tags_img_diffloc">ਸਵੈ ਦੀ ਜਾਂਚ ਕਰੋ</a></p> <h3>ਉਦਾਹਰਣ 8</h3> <p>ਕਿਵੇਂ ਚਿੱਤਰ ਨੂੰ ਵੈਬਲਿੰਕ ਦੇ ਰੂਪ ਵਿੱਚ ਵਰਤਣਾ:</p> <pre class="language-html"> <a href="https://www.codew3c.com"> <img src="w3logo.png" alt="codew3c.com" width="400" height="225"> </a> </pre> <p class="tiy"><a target="_blank" href="/pa/tiy/t.html?f=tags_img_link">ਸਵੈ ਦੀ ਜਾਂਚ ਕਰੋ</a></p> <h3>ਉਦਾਹਰਣ 9</h3> <p>ਕਿਵੇਂ ਕਿਸੇ ਚਿੱਤਰ ਵਿੱਚ ਕਿਸੇ ਕਿਸੇ ਖੇਤਰ ਨੂੰ ਕਿਕਟੋਰ ਬਣਾਓ, ਹਰੇਕ ਖੇਤਰ ਇੱਕ ਵੈਬਲਿੰਕ ਹੁੰਦਾ ਹੈ:</p> <pre class="language-html"> <img src="life.png" alt="Life" usemap="#lifemap" width="650" height="451"> <map name="lifemap"> <area shape="rect" coords="10,208,155,338" alt="AirPods" href="airpods.html"> <area shape="rect" coords="214,65,364,365" alt="iPhone" href="iphone.html"> <area shape="circle" coords="570,291,75" alt="Coffee" href="coffee.html"> </map> </pre> <p class="tiy"><a target="_blank" href="/pa/tiy/t.html?f=tags_areamap_1">ਸਵੈ ਦੀ ਜਾਂਚ ਕਰੋ</a></p> </div> <div id="how-to-use-image"> <h2>ਵਧੇਰੇ ਪੜ੍ਹੋ - ਕਿਵੇਂ ਚਿੱਤਰਾਂ ਦਾ ਸਹੀ ਵਰਤੋਂ ਕਰਨਾ ਹੈ</h2> <p>HTML ਅਤੇ XHTML ਦੇ ਸਭ ਤੋਂ ਅਤਿਅੰਤ ਲੱਕੜੀਆਂ ਵਿੱਚੋਂ ਇੱਕ, ਦਸਤਾਵੇਜ਼ ਦੇ ਟੈਕਸਟ ਵਿੱਚ ਚਿੱਤਰ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਸਮਰੱਥਾ ਹੈ, ਜਿਸ ਵਿੱਚ ਚਿੱਤਰ ਦਸਤਾਵੇਜ਼ ਦਾ ਅੰਦਰੂਨੀ ਆਬਜੈਕਟ (ਇਨਲਾਈਨ ਚਿੱਤਰ) ਵਜੋਂ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ, ਜਾਂ ਇੱਕ ਅਲੱਗ ਦਸਤਾਵੇਜ਼ ਵਜੋਂ ਹੋਰ ਸੂਚਨਾ ਨੂੰ ਡਾਊਨਲੋਡ ਕਰਨ ਲਈ ਸੰਬੰਧਤ ਹੋਵੇ, ਜਾਂ ਦਸਤਾਵੇਜ਼ ਦੇ ਪਿੱਨੇ ਵਜੋਂ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ。</p> <p>ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਚਿੱਤਰਾਂ ਦਾ ਸਹੀ ਵਰਤੋਂ ਕਰਨ ਨਾਲ (ਸਟੈਟਿਕ ਜਾਂ ਐਨੀਮੇਟਿਡ ਆਇਕਾਨ, ਫੋਟੋ, ਵਿਸ਼ੇਸ਼ਣ, ਚਿੱਤਰਾਂ ਆਦਿ) ਦਸਤਾਵੇਜ਼ ਨੂੰ ਜ਼ਿਆਦਾ ਜਾਗਰੂਕ ਅਤੇ ਆਕਰਸ਼ਕ ਬਣਾਇਆ ਜਾਵੇਗਾ, ਅਤੇ ਜ਼ਿਆਦਾ ਪ੍ਰੋਫੈਸ਼ਨਲ ਅਤੇ ਸੂਚਨਾਤਮਕ ਹੋਵੇਗਾ, ਅਤੇ ਅਸਾਨ ਤੌਰ 'ਤੇ ਵੱਖ-ਵੱਖ ਸਰਕਾਰਾਂ ਵਿੱਚ ਫੈਲਣਾ ਸੰਭਵ ਹੋਵੇਗਾ। ਇੱਕ ਚਿੱਤਰ ਨੂੰ ਵੀ ਸਪੈਸ਼ਲ ਵੈਬਲਿੰਕ ਬਣਾਇਆ ਜਾ ਸਕਦਾ ਹੈ。</p> <p>ਪਰ ਜੇਕਰ ਚਿੱਤਰਾਂ ਦਾ ਅਧਿਕ ਵਰਤੋਂ ਕੀਤਾ ਜਾਵੇ, ਤਾਂ ਦਸਤਾਵੇਜ਼ ਖੁੱਟ-ਖੁੱਟ ਹੋ ਜਾਵੇਗਾ, ਅਤੇ ਗ਼ੁੰਮਸ਼ੁੱਧ ਹੋ ਜਾਵੇਗਾ, ਅਤੇ ਪੜ੍ਹਣ ਲਈ ਅਸੰਭਵ ਹੋ ਜਾਵੇਗਾ, ਅਤੇ ਉਸ ਪੰਨੇ ਨੂੰ ਡਾਊਨਲੋਡ ਕਰਨ ਅਤੇ ਦੇਖਣ ਲਈ ਉਸਰਾਹ ਵਧੇਗਾ.</p> <p>ਹੇਠ ਲਿਖੇ ਲੇਖ ਨੂੰ ਪੜ੍ਹੋ ਅਤੇ ਵੈੱਬ 'ਤੇ ਦੋ ਪ੍ਰਮੁੱਖ ਚਿੱਤਰ ਫਾਰਮੈਟਾਂ: GIF ਅਤੇ JPEG ਨੂੰ ਸਿੱਖੋ, ਅਤੇ ਚਿੱਤਰਾਂ ਦਾ ਸਹੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰਨਾ ਹੈ:</p> <ul> <li><a href="/pa/media/media_gif.html" title="ਮਲਟੀਮੀਡੀਆ ਸਿੱਖਿਆ - GIF ਚਿੱਤਰ">GIF ਚਿੱਤਰ</a></li> <li><a href="/pa/media/media_jpeg.html" title="ਮਲਟੀਮੀਡੀਆ ਸਿੱਖਿਆ - JPEG ਚਿੱਤਰ">JPEG ਚਿੱਤਰ</a></li> <li><a href="/pa/media/media_browserimages.html" title="ਮਲਟੀਮੀਡੀਆ ਸਿੱਖਿਆ - Web 'ਤੇ ਚਿੱਤਰ ਵਰਤਣਾ">ਵੈੱਬ 'ਤੇ ਚਿੱਤਰ ਵਰਤਣਾ</a></li> </ul> </div> <div> <h2>ਮੂਲਤਬੀ ਸੀਐੱਸਐੱਸ ਸੈਟਿੰਗ</h2> <p>ਮਿਆਰ ਵਾਲੇ ਬਰਾਊਜ਼ਰ ਨੇ ਹੇਠ ਲਿਖੇ ਮੂਲਤਬੀ ਮੁੱਲਾਂ ਨਾਲ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨਗੇ <code><img></code> ਅਣੂਰਜੀਕਰਣਕਾਰੀ ਮੁੱਲ:</p> <pre class="language-css"> img { display: inline-block; } </pre> <p class="tiy"><a target="_blank" href="/pa/tiy/t.html?f=tags_img_default_css">ਸਵੈ ਦੀ ਜਾਂਚ ਕਰੋ</a></p> </div> <div> <h2>ਬਰਾਉਜ਼ਰ ਸਮਰਥਨ</h2> <table class="browser-support"> <tr> <th class="bsChrome">ਚਰਮ</th> <th class="bsEdge">ਐਜ਼</th> <th class="bsFirefox">ਫਾਇਰਫਾਕਸ</th> <th class="bsSafari">ਸੈਫਾਰੀ</th> <th class="bsOpera">ਓਪੇਰਾ</th> </tr> <tr> <td>ਚਰਮ</td> <td>ਐਜ਼</td> <td>ਫਾਇਰਫਾਕਸ</td> <td>ਸੈਫਾਰੀ</td> <td>ਓਪੇਰਾ</td> </tr> <tr> <td>ਸਮਰਥਨ</td> <td>ਸਮਰਥਨ</td> <td>ਸਮਰਥਨ</td> <td>ਸਮਰਥਨ</td> <td>ਸਮਰਥਨ</td> </tr> </table> </div> <div class="prenextnav"> <ul> <li> ਪਿਛਲਾ ਪੰਨਾ <a href="/pa/tags/tag_iframe.html" title="HTML <iframe> ਟੈਗ"><iframe></a></li> <li> ਅਗਲਾ ਪੰਨਾ <a href="/pa/tags/tag_input.html" title="HTML <input> ਟੈਗ"><input></a></li> </ul> </div><div style="background-color:#fcfdf8; padding:0;"> </div> </div>  <div id="sidebar"> <div><h3><center> ਟੂਲਸ </center><h3> <h5 id="tools_reference"><a href="/pa/tags/index.html">HTML ਰੈਫਰੈਂਸ ਮੈਨੂਅਲ</a></h5> <h5 id="tools_example"><a href="/pa/html/html_examples.html">HTML ਇੰਸਟੈਂਸ</a></h5> <h5 id="tools_quiz"><a href="/pa/html/html_quiz.html">HTML ਟੈਸਟ</a></h5> <h5 id="tools_tutorial"><a href="/pa/html/index.html">HTML ਸਿੱਖਿਆ</a></h5> </div> <div><h3><center> ਸਪਾਂਸਰ ਲਿੰਕ </center><h3> <div id="sbtg"> <script src="/myjs/zzsr.js"></script> </div> </div> </div> <div id="footer"> <p id="p1"> CodeW3C.com ਵੱਲੋਂ ਪ੍ਰਦਾਨ ਕੀਤੀ ਗਈ ਸਮਗਰੀ ਸਿਖਲਾਈ ਅਤੇ ਟੈਸਟ ਲਈ ਹੈ, ਸਮਗਰੀ ਦੀ ਸਹੀਤਾ ਨਹੀਂ ਦਿੱਤੀ ਜਾਂਦੀ ਹੈ।ਇਸ ਸਾਇਟ ਦੀ ਸਮਗਰੀ ਦੀ ਵਰਤੋਂ ਨਾਲ ਆਉਣ ਵਾਲੇ ਜੋਖਮ ਇਸ ਸਾਇਟ ਨਾਲ ਸਬੰਧਤ ਨਹੀਂ ਹਨ।ਸਾਰੇ ਹਕਾਇਤ ਅਧਿਕਾਰ, ਸਾਰੇ ਹੱਕ ਸੁਰੱਖਿਆ ਕੀਤੇ ਗਏ ਹਨ。 </p> <p id="p2"> <a href="/pa/about/index.html" title="ਬਾਰੇ CodeW3C.com">ਬਾਰੇ CodeW3C.com</a> <a href="/pa/about/about_helping.html" title="CodeW3C.com ਦੀ ਮਦਦ">CodeW3C.com ਦੀ ਮਦਦ</a> <a href="/pa/about/about_use.html" title="ਬਾਰੇ ਵਰਤੋਂ">ਵਰਤੋਂ ਸ਼ਰਤ</a> <a href="/pa/about/about_privacy.html" title="ਬਾਰੇ ਨਿੱਜ">ਨਿੱਜ ਪ੍ਰਬੰਧ</a> <a href="http://www.comfortsoftwaregroup.com/" target="_blank"><img src="/comfortsoftwaregroup.png"></a> <a href="http://www.ce4e.com/" target="_blank"><img src="/poweredby.png" alt="با سی سی ای 4 ای کوم پاورد"></a> </p> </div> </div>  <script src="/myjs/tongji.js"></script> </body> </html>