تصاویر

تصاویر اولین عناصر غیر متنی بودند که در وب به وجود آمدند.

اکثر فرمت های تصویری که در کامپیوترتان پیدا می شود بر روی وب نیز قابل استفاده هستند. فرمت های از قبیل .png، .jpg، .gif و غیره…

سینتکس

عنصر تصویر با تگ <img> مشخص می شود. این تگ از نوع تگ هایی می باشد که فقط تگ آغاز دارند.

با استفاده از ویژگی src می توانیم مکان یا همان آدرس تصویر را مشخص کنیم. که این آدرس می تواند شبیه آدرس لینک ها از نوع نسبی یا مطلق باشد.

<p>
  <img src="http://assets.css-tricks.ir/images/skull-love.png">
</p>

خروجی:

ویژگی مهم دیگری که این عنصر دارد alt نام دارد. درون این ویژگی توضیحی برای تصویر می نویسیم.

<p>
  <img src="skull-love.png" alt="جمجمه عاشق">
</p>

کاربرد alt چیست؟

• اگر به هر دلیلی تصویر توسط مرورگر نمایش داده نشود این متن به جای آن نمایش داده می شود تا کاربر حداقل بداند تصویر در چه رابطه است.
• همیشه یک انسان به عنوان کاربر صفحه نیست بلکه گاهی ربات ها سایت را بررسی می کنند. به عنوان مثال ربات موتور جستجوی گوگل. این رباط توسط توضیحی که در alt وجود دارد تصویر را درک می کند.

ابعاد

هر تصویر دارای دو بعد عرض و ارتفاع می باشد. به عنوان نمونه تصویر مثال بالای دارای عرض 300 پیکسل و ارتفاع 300 پیکسل می باشد.

مرورگر بصورت خودکار تصاویر را با اندازه کامل آنها نمایش می دهد. همچنین امکان تغییر این اندازه توسط ما وجود دارد که در آینده در این رابطه بحث خواهیم کرد.

هیچ تصویری را بدون یک alt مناسب رها نکنیم.

خطی یا بلاک؟

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

همچنین خروجی مثال زیر این موضوع را به وضوح نشان می دهد:

<p>
  این جمجمه <img src="http://assets.css-tricks.ir/images/skull-love.png" width="100" height="100"> جمجمه عشق است.  
</p>

خروجی:

این جمجمه جمجمه عشق است.