گروه مقاله : HTML 4
تاريخ انتشار : 1394/02/19 - 10:26
كد :403

تصاویر در HTML

<!DOCTYPE html>
<html>
<body>
 
<h2>Spectacular Mountains</h2>
<img src="pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px">
 
</body>
</html>
نتیجه :
 

Spectacular Mountains

 
 
نکته : بهتر است برای عکس طول و عرض  (width,height)مشخص کنید.
در این صورت، زمانی که صفحه در حال لود شدن است، مکان مورد نیاز برای عکس در بین دیگر عناصر صفحه رزرو شده است. بنابراین طرح صفحه در حال لود با طرح کاملاً لود شده ی صفحه، تفاوتی نخواهد داشت. اما اگر این خصوصیات را تنظیم نکنید، مرورگر نمی تواند اندازه عکس را تشخیص دهد و اگر تصویری در بین متن باشد. جای آن تا لود کامل تصویر خالی خواهد ماند.
 
فرم نوشتاری تگ img
 
در HTML، تصاویر به وسیله تگ <img> تعریف می شوند.
تگ <img> خالی می باشد(یک عنصر تهی می باشد)، این تگ تنها حاوی خصوصیت ها است و تگ بسته ای ندارد.
خصوصیت src آدرس وب (url) تصویر مورد نظرتان را مشخص می کند. 
src مخفف کلمه source می باشد.
 
<img src="url" alt="some_text">
 
خصوصیت ALT
 
 خصوصیت alt یک alternate text یا "متن جایگزین" را برای یک تصویر مشخص می کند، که اگر عکس نمایش داده نشود آن متن نمایش داده می شود.
ذکر خصوصیت alt الزامی است و بدون آن صفحه وب، استاندارد نخواهد بود.
مثال :
 
<img src="html5.gif" alt="The official HTML5 Icon">
 
اگر کاربری به دلایلی (مثل کند بودن اتصال، خطایی در خصوصیت scr رخ دهد یا اگر کاربر از یک screen reader استفاده کند) نتواند عکس را مشاهده کند، خصوصیت alt اطلاعاتی در مورد عکس ارائه می دهد.
 
اندازه عکس ( طول و عرض )
 
می توان از خصوصیتstyle  برای مشخص کردن طول و عرض عکس استفاده کرد.
مقدار این خصوصیت ها به طور پیش فرض بر اساس پیکسل (px) مشخص می شوند.
 
مثال :
 
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px">
html5.gif
نظرات كاربران :