با عرض سلام خدمت کاربران سایت پی وی لرن . در این پست قصد داریم به آموزش نحوه تعریف و استفاده از تگ img در کد HTML ، بپردازیم. مهمترین بخش محتوای هر سایت، که در زیبایی و جذابیت سایت بسیار موثر است. تصاویر و عکس های هر سایت می باشد. سایتی که فاقد هر گونه عکس باشد خسته کننده است و کاربران را فراری می دهد. تصاویر می توانند طراحی و ظاهر یک صفحه وب را بهبود بخشد. که در اسناد html برای قرار دادن تصاویر در صفحه وب ، تگ img ارائه شده است. در پست های قبل، ما نحوه استفاده از تگ Table و تگ Div را در html توضیح دادیم. و در ادامه این پست، به بررسی تگ img ، می پردازیم.
در HTML، تصاویر با تگ <img> تعریف می شوند ، تگ <img> خالي است، شامل فقط صفات است و تگ بسته ندارد. ویژگی src نشانی اینترنتی (آدرس وب) تصویر را مشخص می کند:
1 | <img src="url"> |
ویژگی alt یک متن جایگزین برای یک تصویر را فراهم می کند، اگر کاربر به دلایلی نتواند آن تصویر را مشاهده کند. متن جایگزین نمایش داده می شود. مقداری که برای ویژگی alt تعریف می شود، باید تصویر را توصیف کند:
زمانیکه به هر دلیلی مرورگر قادر به نمایش تصویر نباشد، ویژگی alt نمایش داده خواهد شد :
شما می توانید از ویژگی Style برای مشخص کردن عرض (Width) و ارتفاع (Height) یک تصویر استفاده کنید:
مثال:
1 | <img src="img_girl.jpg" alt="Girl in a jacket" style=" width:500px; height:600px"> |
همچنین می توانید بطور مستقیم از width و height استفاده کنید (خصوصیات width و ارتفاع همیشه عرض و height تصویر را در پیکسل تعریف می کند):
1 | <"img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600> |
نکته : همیشه عرض و ارتفاع یک تصویر را مشخص کنید. چرا که اگر عرض و ارتفاع مشخص نشده باشند، زمانیکه که تصویر در صحفه وب، بارگیری می شود، صفحه وب ممکن است سوسو زده شود.
هم Style و هم width و height در HTML 0.5 پشتیبانی می شود. اما ما به شما توصیه می کنیم که از style برای تعریف طول و عرض تصویر استفاده کنید. چرا که از تغییرات ناخواسته در اندازه تصاویر جلوگیری می کند.
مثالی برای چگونگی استفاده از Style و ویژگی width و height در html :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!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 وارد کنید:
مثال:
1 | <img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px"> |
برخی از وب سایت ها تصاویر خود را در سرورهای image ذخیره می کنند.
در واقع، شما می توانید به تصاویر از هر آدرس وب در جهان دسترسی داشته باشید:
1 | <img src="http://codelab.pvlearn.com/images/pvlearn.png" alt="pvlearn.com"> |
برای استفاده از یک تصویر به عنوان یک لینک، تگ <img> را در داخل برچسب <a> قرار دهید.
مثال:
1 2 3 | <a href="default.asp"> <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0"> </a> |
HTML اجازه ی تصاویر gif را می دهد :
1 | <img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;"> |
برای تنظیم تصویر به عنوان لینک کافیست تگ <img> را داخل یک تگ <a> قرار دهید:
1 2 3 | <a href="default.asp"> <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;"> </a> |
با استفاده از خصوصیت float می توانید تصاویر مورد نظر را راست چین و یا چپ چین کنید:
1 2 3 4 5 | <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 تعریف کنید که با کلیک روی بخش های مختلف تصویر به لینک های جداگانه ارجاع داده شوید:
1 2 3 4 5 6 7 | <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 مشخص کنید.
1 2 3 4 5 | <body style="background-image:url('clouds.jpg')"> <h2>Background Image</h2> </body> |
برای اضافه کردن یک تصویر پس زمینه بر روی یک پاراگراف، ویژگی پس زمینه را در عنصر P مشخص کنید :
1 2 3 4 5 6 7 | <body> <p style="background-image:url('clouds.jpg')"> ... </p> </body> |
عنصر <picture> در html5 از انعطاف پذیری بیشتری نسبت به<imge> برخوردار است.
عنصر <picture> حاوی تعدادی از عناصر <source> است که هر کدام به منابع تصویری اشاره دارند. به این ترتیب مرورگر می تواند تصویری را انتخاب کند که به بهترین شکل متناسب با نمای فعلی و / یا دستگاه باشد.
هر عنصر <source> داراي صفاتي است که توصيف مي کند هنگامي که تصوير آنها مناسب تر است.
مرورگر از اولین عنصر <source> با مقادیر تطبیق تطابق استفاده می کند و هر عنصر <source> زیر را نادیده می گیرد.
1 2 3 4 5 | <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 را می خواند، متن را تبدیل می کند و به کاربر اجازه می دهد تا به محتوای آن گوش دهد. خوانندگان صفحه نمایش برای افرادی که دچار اختلال دید و یا معلولیت هستند مفید است.
از المان <img> برای تعریف تصویر استفاده کنید.
از ویژگی src برای تعریف URL تصویر استفاده کنید.
برای تعیین یک متن متناوب برای یک تصویر از ویژگی HTML alt استفاده کنید، اگر نمیتوان آن را نمایش داد.
برای تعیین اندازه تصویر از ابعاد عرض و ارتفاع HTML استفاده کنید.
با استفاده از خواص عرض و ارتفاع CSS برای تعریف اندازه تصویر (به طور متناوب).
استفاده از ویژگی float برای چیدن تصاویر در سمت راست یا چپ.
از المان <map> برای تعریف نقشه تصویر استفاده کنید.
از قسمت <area> برای تعریف مناطق قابل کلیک در نقشه تصویر استفاده کنید.
از عنصر usemap عنصر <img> برای اشاره به یک نقشه تصویر استفاده کنید.
برای نمایش تصاویر مختلف برای دستگاه های مختلف از عنصر <picture> استفاده کنید.
نکته : بارگیری تصاویر طول می کشد. تصاویر بزرگ می تواند صفحه شما را کند کند. در انتخاب تصاویر دقت کنید.
تصاویر یکی از اصلی ترین بخش ها و محتوای صفحات وب را تشکیل می دهند، و تقریبا در تمام وب سایت های دنیا کم و بیش از تصاویر مختلف استفاده می شود، از این رو انتخاب ، درج و تنظیم تصاویر در وب سایت از اهمیت بالایی برخوردار بوده که در این مبحث در قالب آشنایی با تگ img در کد HTML به آن پرداختیم.
آراد
چگونه از چند عکس استفاده کنم
پی وی لرن
سلام
از چند تا تگ img و یا picture می توانید استفاده کنید.
اسماعیل
من نمیتونم هکس بزازم