کار با عکس توسط تگ img در html
عکس یا تصویر اهمیت زیادی در فایل‌های html دارند که روش کار با تگ img آن و صفت‌هایی که دارد را باید بدانید که در این مقاله به توضیح لازم می‌پردازیم.
اهمیت عکس یا تصویر
جدا از بحث طراحی سایت، اگر بخواهیم اهمیت عکس‌ها و تصاویر را ذکر کنیم، باید بگوییم که گاهی ممکن است یک تصویر یا عکس، تمام منظور چندین صفحه‌ای نوشته شده ما را به سادگی به مخاطب انتقال دهد. تصویر در واقع، ذهنیت دقیق و درستی از توصیفات ما را در اختیار مخاطب قرار می‌دهد که به تسلط و فهم و درک بیشتر او کمک می‌کند. شاید شما هم جزو آن دسته افرادی باشید که یک کتاب با عکس‌های جالب توجه را به یک کتاب بسیار پر محتوایی که از تصویر خاصی استفاده نکرده است، ترجیح دهید. در واقع می‌توان گفت اگر آن کتاب پر محتوا از چند تصویر زیبا در داخل کتاب استفاده می‌کرد، می‌توانست مخاطب را ترغیب به مطالعه محتوای مفیدش کند؛ حال آنکه با عدم استفاده از این تکنیک نتوانسته است علیرغم داشتن محتوایی بسیار خوب به جذب مخاطب بپردازد. تصاویر در واقع یک دید کلی هم می‌توانند از یک کتاب یا مقاله چندین صفحه‌ای به افراد بدهند و به این ترتیب شخص مطالعه کننده را برای پاسخگویی به حس کنجکاوی خود در خصوص آنها مجبور به مطالعه نمایند. برای درک آنچه گفتیم، فرض کنید که بخواهیم اندازه کره زمین و خورشید را مقایسه کنیم و به مخاطب بفهمانیم که اندازه زمین در برابر خورشید بسیار کوچک است؛ برای رسیدن به این منظور اگر هرچقدر با اعداد و ارقام این مساله را بیان کنیم حتی شاید باعث گمراهی او نیز بشویم اما اگر یک تصویر مانند شکل زیر را به او نشان دهیم، آیا برای همیشه اندازه بسیار کوچک زمین در مقایسه با خورشید در ذهن او حک نمی‌شود؟
اگر به بحث تخصصی خودمان یعنی طراحی وبسایت هم بپردازیم، باید بگوییم که داشتن چند عکس خوب در یک مقاله، علاوه بر اینکه به درک شخص مخاطب از محتوای متنی ما بسیار کمک می‌کند، قدرت ارتباط دیداری خیلی خوبی هم برای جلوگیری از خستگی او و بروز یکنواختی در مطالعه ایجاد می‌کند. اهمیت عکس به حدی است که موتورهای جستجو از جمله گوگل یک بخش جستجوی مجزا برای سرچ تصاویر نیز در نظر گرفته‌اند و مسلما در برخی از زمینه‌های تخصصی، مخاطبین فقط با استفاده از تصویر ممکن است به جستجوی نتیجه دلخواه خودشان بپردازند (برای مثال شاید بخش مهمی از جستجوهای اماکن دیدنی و گردشگری شهر یا استان‌های خاص به این بخش اختصاص یابند). در هر حال باید گفت با اینکه عکس یک چیز مشخصی است، اما استفاده از آن در هر جایی طبق قاعده و قوانین خاصی انجام می‌شود که این مساله به خصوص در صفحات html وبسایت‌ها قاعده‌مندتر است که باید آنها را بدانید و در پروژه‌های خود به شکل استاندارد و مطلوب به کار گیرید.
استفاده از تگ img در html
مطابق آموزش‌های پیشین برای یادگیری استفاده از تگ img در یک وبسایت یا صفحه html ابتدا یک فولدر جدید مثلا به نام 006 ایجاد کنید. توسط visual studio code آن را باز کنید و در آن یک فایل Index.html بسازید. تگ‌های اولیه را مطابق توضیحات پیشین بسازید. ما در قسمت body لازم است تگ img را که در این مقاله به توضیحات لازم در خصوص آن خواهیم پرداخت، قرار دهیم. برای شروع به یک تصویر را از یک سایت خاص انتخاب کنید. ما تصویر گوگل از صفحه جستجوی گوگل را به این منظور انتخاب کردیم. یک تگ div را در آن ایجاد کنید و تصویر را مطابق فرمت زیر در آن قرار دهید. در اینجا شاید لازم است در خصوص تگ div بیشتر صحبت کنیم. div در واقع یک بلوک ایجاد می‌کند که هر چیزی در آن می‌توانیم قرار دهیم. در حالت پیشفرض خطوط مرزی ندارد تا بتوان محدوده آن را با چشم دید اما در واقع div در حالت عادی، بخش یا فضایی مستطیلی از یک صفحه html را در بر می‌گیرد که کل عرض آن را می‌پوشاند؛ در حالی که اندازه ارتفاع آن بستگی به المان‌ها یا محتویات داخل آن بستگی دارد.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<img src="https://www.google.com/images/
branding/googlelogo/2x/
googlelogo_color_272x92dp.png"/>
</div>
</body>
</html>
همانطور که در کدهای بالا دیدید، ما از یک تگ img که این تگ نیز تک بخشی است استفاده کردیم. آدرس تصویر مورد نظر را در attribute یا صفت src قرار دادیم و کار تمام شد.
حال ممکن است برای شما پیش بیاید که اگر بخواهید یک تصویر در همان فولدر پروژه یا یک فولدر دیگر از فولدر پروژه را نشان دهید چه باید بکنید؟
برای بررسی این مورد، ابتدا یک فولدر به نام images در همان فولدر 006 ایجاد کنید. یک تصویر به نام exmaple.jpg را در آن قرار دهید و سپس کد زیر را بنویسید:
<body>
<div>
<img src="https://www.google.com/images
/branding/googlelogo/2x/
googlelogo_color_272x92dp.png"/>
<img src="images/example.jpg"/>
</div>
</body>
به همین سادگی تصویر دوم هم ایجاد شد. اما اگر عرض تصاویر کوچک باشد، به این روش دو تصویر کنار یکدیگر قرار می‌گیرند. موضوع چیست؟ باید در نظر داشته باشید که تگ تصاویر به صورت inline و نه block است؛ همانند بسیاری از تگ‌ها مانند <a>، <sub> و … همانطور که در توضیحات بالا گفتیم، div یک بلوک است که برای حل مشکل بالا می‌توانید هر یک را در دو div جداگانه قرار دهید. به شکل زیر (به جای نقطه چین، آدرس تصاویر مورد نظرتان را بنویسید). یکی دیگر از راه‌ها استفاده از break است.
<body>
<div>
<img src="..."/>
</div>
<div>
<img src="..."/>
</div>
</body>
صفت‌های تگ img در html
توضیحات ابتدایی لازم در خصوص تگ img در html داده شد؛ اما نکات لازم در خصوص کار با این تگ به همین جا ختم نمی‌شود و باید با برخی از خاصیت‌ها یا صفت‌های آن آشنایی داشته باشید و به خوبی از آنها استفاده کنید که در ادامه به آنها خواهیم پرداخت. برخی از مهم‌ترین آنها عبارتند از:
alt: این تگ در واقع به عنوان جایگزین متنی برای تصویر به کار می‌رود. فرض کنید که تصویری را شما از سایتی آدرس‌دهی کرده‌اید و پس از مدتی، آن سایت آدرس مذکور را حذف می‌کند. اگر از این صفت استفاده کرده باشید، به جای آن تصویر، همین نوشته داخل alt به کاربر نشان داده می‌شود.
height: این خاصیت، ارتفاع تصویر را بر حسب پیکسل تنظیم می‌کند.
width: از این خاصیت، برای تنظیم عرض تصویر را بر حسب پیکسل استفاده می‌شود.
loading: این صفت دو مقدار می‌گیرد که عبارتند از lazy و eager. در واقع اگر از eager استفاده شود، در این حالت، تصویر بلافاصله رویت می‌شود اما اگر از lazy استفاده گردد، تصویر موردنظر با تاخیر و پس از برقراری برخی شرایط در صفحه html رویت می‌شود. در حالت lazy، توصیه می‌شود که طول و عرض تصویر مشخص شود تا پس از رویت تصویر، پرش ناگهانی و جابجایی محتوا ایجاد نشود.
src: برای آدرس دهی به تصویر استفاده می‌شود.
usemap: از این خاصیت برای نقشه‌گذاری یک تصویر که هر بخش قابل کلیک توسط کاربر باشد، استفاده می‌شود.
title: این خاصیت وقتی استفاده شود، با بردن نشانگر ماوس روی تصویر، متن داخل آن به صورت tooltip به نمایش در می‌آید.
longdesc: این خاصیت، توضیحاتی را برای جزئیات بیشتر از یک تصویر در در بر می‌گیرد که ممکن است شامل id یک المان html دیگر، آدرس داخلی وابسایت شما یا آدرس خارجی سایت دیگر باشد.
برای مثال استفاده از برخی از صفات بالا را در قالب مثال زیر ببینید:
<body>
<div>
<img src="images/example.jpg"
alt="exmple picture" title="newsunweb teaching img tag" width="250" height="100" loading="lazy" longdesc="#ImageDescription"/>
</div>
<p id="ImageDescription">
This is an image example which is used in Nwesunweb.com to teach you the requirements of using <img> tag in html.
<p>
</body>
در مثال بالا همانطور که دیدیم از یک آیدی اختصاص یافته به یک پاراگراف که برای مثال ما نام آن را ImageDescription قرار دادیم استفاده کردیم و در خود تصویر با صفت longdec به آن ارجاع دادیم. توجه کنید که هنگام ارجاع دادن به آیدی اختصاص داده شده به المانی خاص از html باید علامت # را قرار دهید.
در خصوص usemap و استفاده از تصویر در یک لینک به عنوان مثلا یک بنر تبلیغاتی، در مقالات آینده نیوسان‌وب توضیحات لازم را خواهیم داد.
جمع‌بندی
اگر بخواهیم یک جمع‌بندی از این مقاله آموزشی کنیم باید بگوییم که پس ارائه نکات در خصوص الزام به استفاده از تصویر در محتواهای متنی، در خصوص تگ img و روش استفاده از آن در فایل html و صفحات وب توضیحات لازم را دادیم و برخی از صفات یا خاصیت‌های مهم آن را توضیح دادیم. امیدواریم همچنان با نیوسان وب همراه باشید تا در آینده در خصوص سایر صفات این تگ و همچنین تگ‌های دیگر html توضیحات لازم را بدهیم.
لینک این مقاله را در شبکه‌های اجتماعی به اشتراک بگذارید.