در HTML، تصاویر با تگ <img> تعریف می شوند ، تگ <img> خالي است، شامل فقط صفات است و تگ بسته ندارد. ویژگی src نشانی اینترنتی (آدرس وب) تصویر را مشخص می کند:
ویژگی alt:
ویژگی alt یک متن جایگزین برای یک تصویر را فراهم می کند، اگر کاربر به دلایلی نتواند آن تصویر را مشاهده کند. متن جایگزین نمایش داده می شود. مقداری که برای ویژگی alt تعریف می شود، باید تصویر را توصیف کند:
زمانیکه به هر دلیلی مرورگر قادر به نمایش تصویر نباشد، ویژگی alt نمایش داده خواهد شد :
تنظیم اندازه تصویر:
شما می توانید از ویژگی Style برای مشخص کردن عرض (Width) و ارتفاع (Height) یک تصویر استفاده کنید:
مثال:
مثال : اندازه ی تصویر با style
| <img src="img_girl.jpg" alt="Girl in a jacket" style=" width:500px; height:600px"> |
همچنین می توانید بطور مستقیم از width و height استفاده کنید (خصوصیات width و ارتفاع همیشه عرض و height تصویر را در پیکسل تعریف می کند):
مثال : تنظیم اندازه تصویر با صفات width و height
| <"img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600> |
نکته : همیشه عرض و ارتفاع یک تصویر را مشخص کنید. چرا که اگر عرض و ارتفاع مشخص نشده باشند، زمانیکه که تصویر در صحفه وب، بارگیری می شود، صفحه وب ممکن است سوسو زده شود.
استفاده از Style یا width و height برای اندازه تصاویر؟
هم Style و هم width و height در HTML 0.5 پشتیبانی می شود. اما ما به شما توصیه می کنیم که از style برای تعریف طول و عرض تصویر استفاده کنید. چرا که از تغییرات ناخواسته در اندازه تصاویر جلوگیری می کند.
مثالی برای چگونگی استفاده از Style و ویژگی width و height در html :
مثال : روش های تنظیم عرض و ارتفاع
| <!DOCTYPE html> <html> <head> <style> img { width: 100%; } </style> </head> <body> <img src="html5.gif" alt="HTML5 Icon" width="128" height="128"> <img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;"> </body> </html> |
فراخوانی تصاویر از سایر فولدر های سیستم
اگر تصویر مورد نظر در فولدر دیگری قرار گرفته باشد و آنرا مشخص نکنید ، مرورگر انتظار دارد که تصویر را در همان پوشه محل قرار گیری فایل HTML، پیدا کند. با این حال، معمول است که تصاویر را در زیر پوشه ها ذخیره کنید. سپس باید نام پوشه را در ویژگی src وارد کنید:
مثال:
مثال : تصویر در سایر فولدرها
| <img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px"> |
تصویر در سایر سرورها
برخی از وب سایت ها تصاویر خود را در سرورهای image ذخیره می کنند.
در واقع، شما می توانید به تصاویر از هر آدرس وب در جهان دسترسی داشته باشید:
مثال : دسترسی به تصاویر از سایر سرورها
| <img src="http://codelab.pvlearn.com/images/pvlearn.png" alt="pvlearn.com"> |
استفاده از تصویر به عنوان لینک
برای استفاده از یک تصویر به عنوان یک لینک، تگ <img> را در داخل برچسب <a> قرار دهید.
مثال:
مثال :
| <a href="default.asp"> <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0"> </a> |
انیمیشن تصاویر
HTML اجازه ی تصاویر gif را می دهد :
مثال : تصاویر gif
| <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;border:0;"> </a> |
خصوصیت float برای تصویر
با استفاده از خصوصیت float می توانید تصاویر مورد نظر را راست چین و یا چپ چین کنید:
مثال : خصوصیت float
| <p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;"> The image will float to the right of the text.</p> <p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;"> The image will float to the left of the text.</p> |
نقشه های تصویر
با استفاده از تگ <map> می توانید یک image-map تعریف کنید که با کلیک روی بخش های مختلف تصویر به لینک های جداگانه ارجاع داده شوید:
مثال : تقسیم بندی
| <img src="workplace.jpg" alt="Workplace" usemap="#workmap"> <map name="workmap"> <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm"> <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm"> <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm"> </map> |
تنظیم تصویر به عنوان پس زمینه صفحه وب
برای اضافه کردن تصویر پس زمینه بر روی یک عنصر HTML، از ویژگی background-image در CSS استفاده کنید. برای افزودن یک تصویر پس زمینه در یک صفحه وب، باید ویژگی تصویر پس زمینه را در عنصر BODY مشخص کنید.
مثال : پس زمینه
| <body style="background-image:url('clouds.jpg')"> <h2>Background Image</h2> </body> |
برای اضافه کردن یک تصویر پس زمینه بر روی یک پاراگراف، ویژگی پس زمینه را در عنصر P مشخص کنید :
مثال : پس زمینه ی پاراگراف
| <body> <p style="background-image:url('clouds.jpg')"> ... </p> </body> |
عنصر <picture>
عنصر <picture> در html5 از انعطاف پذیری بیشتری نسبت به<imge> برخوردار است.
عنصر <picture> حاوی تعدادی از عناصر <source> است که هر کدام به منابع تصویری اشاره دارند. به این ترتیب مرورگر می تواند تصویری را انتخاب کند که به بهترین شکل متناسب با نمای فعلی و / یا دستگاه باشد.
هر عنصر <source> داراي صفاتي است که توصيف مي کند هنگامي که تصوير آنها مناسب تر است.
مرورگر از اولین عنصر <source> با مقادیر تطبیق تطابق استفاده می کند و هر عنصر <source> زیر را نادیده می گیرد.
مثال : عنصر picture
| <picture> <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg"> <source media="(min-width: 465px)" srcset="img_white_flower.jpg"> <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;"> </picture> |
نکته : همیشه یک عنصر <img> را بعنوان آخرین عنصر کودک عنصر <picture> تعیین کنید.
عنصر <img> توسط مرورگرهایی که از عنصر <picture> پشتیبانی نمی کند یا اگر هیچ کدام از تگ <source> مطابقت ندارند استفاده می شود.
screen reader در html
screen reader یک برنامه نرم افزاری است که کد HTML را می خواند، متن را تبدیل می کند و به کاربر اجازه می دهد تا به محتوای آن گوش دهد. خوانندگان صفحه نمایش برای افرادی که دچار اختلال دید و یا معلولیت هستند مفید است.
خلاصه ی فصل
از المان <img> برای تعریف تصویر استفاده کنید.
از ویژگی src برای تعریف URL تصویر استفاده کنید.
برای تعیین یک متن متناوب برای یک تصویر از ویژگی HTML alt استفاده کنید، اگر نمیتوان آن را نمایش داد.
برای تعیین اندازه تصویر از ابعاد عرض و ارتفاع HTML استفاده کنید.
با استفاده از خواص عرض و ارتفاع CSS برای تعریف اندازه تصویر (به طور متناوب).
استفاده از ویژگی float برای چیدن تصاویر در سمت راست یا چپ.
از المان <map> برای تعریف نقشه تصویر استفاده کنید.
از قسمت <area> برای تعریف مناطق قابل کلیک در نقشه تصویر استفاده کنید.
از عنصر usemap عنصر <img> برای اشاره به یک نقشه تصویر استفاده کنید.
برای نمایش تصاویر مختلف برای دستگاه های مختلف از عنصر <picture> استفاده کنید.
نکته : بارگیری تصاویر طول می کشد. تصاویر بزرگ می تواند صفحه شما را کند کند. در انتخاب تصاویر دقت کنید.
کلام آخر
تصاویر یکی از اصلی ترین بخش ها و محتوای صفحات وب را تشکیل می دهند، و تقریبا در تمام وب سایت های دنیا کم و بیش از تصاویر مختلف استفاده می شود، از این رو انتخاب ، درج و تنظیم تصاویر در وب سایت از اهمیت بالایی برخوردار بوده که در این مبحث در قالب آشنایی با تگ img در کد HTML به آن پرداختیم.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
آراد
چگونه از چند عکس استفاده کنم
پی وی لرن
سلام
از چند تا تگ img و یا picture می توانید استفاده کنید.
اسماعیل
من نمیتونم هکس بزازم