تصاوير ميتوانند طراحي وظاهر يك صفحه وب را بهبود بخشند.
مثال
<img src="pic_trulli.jpg" alt=" Italian Trulli" >
مثال ـ تصويري ديگر
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
مثال ـ تصوير گل در چين
<img src="img_chania.jpg" alt="Flowers in Chania" width="460" height="345">
تگHTML img براي قراردادن تصوير در يگ صفحه استفاده ميشود .
تصوير بصورت فني در يك صفحه درج نميگردد، بلكه تصوير بصورت پيوندي در صفحه نمايش داده ميشود. تگ<img> باعث ايجادي فضائي براي نمايش تصوير ميشود .
تگ تصوير ازنوع عناصر تهي است، فقط داراي ويژگي است و بدون تگ انتهائي است. اين تگ داراي دو ويژگي ضروري مطابق زيراست.
ويژگي ضروريsrc مسير url فايل تصوير را مشخص ميكند .
نكته ـ هنگاميكه صفحه بار گذاري ميشود، در آن لحظه مرورگر تصوير را از وب سرور دريافت ميكند. وآنرا در صفحه قرار ميدهد .مطمئن شويد كه تصوير نسبت به صفحه وب درهمان نقطه باقي ميماند. در غيراينصورت بازديد كننده با يك پيوند شكسته خورده مواجه ميشودو متن جايگزين تصوير ميشود.
مثال
<img src="img_chania.jpg" alt="Flowers in Chania" >
ويژگيalt در تگ تصوير يك متن جايگزين را براي تصوير مشخص ميكند .در صورتيكه كاربر بهر دليلي نتواند تصوير را مشاهده كند، آن متن بجاي تصوير ظاهرميشود.
متن مشخص شده درalt بايد توصيف كننده تصوير باشد .
مثال ـ
<img src="img_chania.jpg" alt="Flowers in Chania" >
اگر مرورگر بهر دليلي تصوير را پيدا نكند، متن مشخص شده درalt جايگزين تصوير ميشود.
مثال ـ نمونه نبودن تصوير
<img src="wrongname.gif" alt="Flowers in Chania">
صفحه خوان يك نرم افزاريست كه كدهاينكته -HTML را ميخواند واجازه ميدهد كه بيان گوياي خود كاربر گوش كند .اين برنامه كدهارا بيان ميكند .اين نرم افزار براي كسانيكه بينائي ضعيف ويا تجربه كمتري دارند مفيد ميبا.شد.
ميتوان با ويژگيstyle ابعاد تصوير يعنيwidth و height آنرا مشخص كرد .
مثال ـ مشخص نمودن ابعاد تصوير
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
روش ديگر مشخص كردن ابعاد، استفاده مستقيم از ويژگي هايheight و widthدر تگ <img> ميباشد. مطابق مثال زير
مثال ـ مشخص نمودن ابعاد تصوير بطور مستقيم در تگ تصور
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
در اين فرم اعلام ابعاد مقدار آنها هميشه برحسب پيكسل ميباشد.
توجه ـ هميشه عرض وارتفاع تصوير را مشخص كنيد، اگر مشخص نشود در هنگام بارگيري ممكن است تصوير سوسوبزند.
اعلام ابعاد بهر دو صورت درHTML قابل قبول ميباشد .ولي پشنهاد ميشود از style استفاده كنيد. در صورتيكه ازstyle استفاده شود، از لغو ابعاد جلوگيري ميشود. اما استفاده از ابعاد در حالت مستقيم، ممكن است لغو شود.
مثال ـ در مثال زير ابعاد تعريف شده تصويراول لغو ميگردد وعرض آن باstyle در بالا تغيير ميكند.
<!DOCTYPE html> <html> <head> <style>/* This style sets the width of all images to 100%: */ img { width: 100%; } </style></head> <body> <h2>Width/Height Attributes or Style?</h2> <p>The first image uses the width attribute (set to 128 pixels), but the style in the head section overrides it, and sets the width to 100%.</p> <img src="html5.gif" alt="HTML5 Icon" width="128" height="128"> <p>The second image uses the style attribute to set the width to 128 pixels, this will not be overridden by the style in the head section:</p> <img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;"> </body> </html> <!DOCTYPE html> <html> <body> <h2>Images in Another Folder</h2> <p>It is common to store images in a sub-folder. You must then include the folder name in the src attribute:</p> <img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;"> </body> </html>
اگر تصوير در يگ زيرپوشه ديگر باشد، بايد زيرپوشه درsrc درج شود .مطابق نمونه زير
مثال ـ
<img src="/xampp/vbtest/imag/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
برخي از وبسايت ها به تصويري ازسرور ديگري اشاره ميكنند. در اين حالت بايد درsrc آدرس url كامل مشخص شود .
مثال
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com" style="width:104px;height:142px;">
نكته ـ در استفاده از تصاوير خارجي دقت كنيد، آنها ممكن است تحت قانون كپي رايت باشند. اگر مجوزاستفاده ازآنرا نداشته باشيد، ممكن بطور ناخواسته تغيير يا حذف شوند.
مثال ـ تصوير متحرك
<img src="programming.gif" alt="Computer man" style="width:48px;height:48px;">
براي استفاده تصوير در پيوند بايد<img> در داخل <a> قرار بگيرد.
مثال ـ تصوير در يك پيوند
<a href="default.asp"> <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;"> </a>
براي شناوري تصوير بسمت راست يا چپ ازCSS floatاستفاده ميشود .اين ويژگي بايد درstyle تگ تصوير معرفي شود ، وميتواند دومقدارright ياleft راداشته باشد .
اگر تصوير با حالت شناور در پارگرافي يا عنصر متني قرار گيرد، متن ها در سمت چپ يا راست آن قرار ميگيرد .به مثال توجه فرمائيد.
مثال ـ نمونه تصوير شناور:
<p> <img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;"> A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image. <p> <img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;"> A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image. </p> <p><strong>Float the image to the left:</strong></p> <p> <img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;"> A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image. </p>
در زير رايج ترين فايلهاي تصويري كه در بيشتر مرورگرها پشتيباني ميشوند، آمده است
| Abbreviation | File Format | File Extension |
|---|---|---|
| APNG | Animated Portable Network Graphics | .apng |
| GIF | Graphics Interchange Format | .gif |
| ICO | Microsoft Icon | .ico, .cur |
| JPEG | Joint Photographic Expert Group image | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
| PNG | Portable Network Graphics | .png |
| SVG | Scalable Vector Graphics | .svg |
نكته ـ بارگزاري تصاوير بزرگ زمانبراست، در انتخاب تصاوير دقت نمائيد.