در یک صفحه وب، چیزی که وب را زیبا و جذاب می کند، عکس ها هستند. البته یک صفحه وب هر چقدر هم که عکس داشته باشد اگر با css ویرایش نشده باشد زیبا نیست. ولی عکس ها علاوه بر زیبایی اطلاعات را بهتر به کاربران می رسانند.

در این مطلب چگونگی درج تصویر در html و کار با تگ <img> را یاد می گیرید.

خصوصیت src:

این خصوصیت آدرس عکس را مشخص می کند. یعنی آدرسی که هنگام آپلود تصویر به شما داده می شود.

<img src="http://bayanbox.ir/view/370193548673645502/logoo.png">

خصوصیت alt:

هنگامی که یک تصویر بنا به هر دلیلی به درستی نشان داده نشود، متنی در کادری به جای تصویر نمایش داده می شود و به کاربر اعلان می کند که موضوع تصویر چیست.

<img src="http://bayanbox.ir/view/370193548673645502/logoo.png" alt="بیاموز">

خصوصیت title:

برای اینکه بتوانیم توضیحی مختصر از تصویر را به کاربر نمایش دهیم، باید از این تگ استفاده کنیم. این خصوصیت هنگامی که ماوس روی تصویر می رود، متن مشخص شده در این خصوصیت را در کادری کوچک به صورت tooltip نمایش داده می شود.

<img src="http://bayanbox.ir/view/370193548673645502/logoo.png" alt="بیاموز" title="بیاموز. یک وبلاگ کاملا آموزشی">

خصوصیت heght و width:

ما می توانیم اندازه یک عکس را هنگام درج آن تعیین کنیم. با این دو خصوصیت می توانیم عرض و ارتفاع عکس را تعیین کنیم. این دو خصوصیت کار ما بسیار خوب می کند. مثلا هنگامی که می خواهیم یک عکس را در دو جای وب با اندازه های متفاوت درج کنیم، دیگر نیازی نیست دو تصویر آپلود کنیم.

<img src="http://bayanbox.ir/view/370193548673645502/logoo.png" alt="بیاموز" title="بیاموز. یک وبلاگ کاملا آموزشی" width="100" height="50">