کار با تصاویر در HTML | آموزش تگ img
یکی از مهم‌ترین اجزاء صفحات وب تصاویر هستند. تصاویر می‌توانند طرح و ظاهر وبسایت شما را جذاب‌تر کنند. در زبان HTML می‌توان با استفاده از تگ img تصاویر مختلف را به صفحات اضافه کرد.
برای تست کردن مثال‌های این جلسه و تمرین با تگ <img> می‌توانید قبل از خواندن این مطلب یک تصویر را در کنار فایل html خود قرار دهید تا بتوانید براحتی از آن در صفحه وب خود استفاده کنید.
Syntax نمایش تصاویر در HTML
در HTML تصاویر با استفاده از تگ <img> تعریف می‌شوند.
تگ img یک تگ تهی است. یعنی تگ بسته ندارد. همچنین این تگ یک صفت به نام src دارد که وظیفه آن دریافت آدرس (Source) تصویر است.
1 | <img src="url"> |
برای مثال اگر شما یک تصویر با نام test.jpg را در کنار فایل html خود قرار دهید، برای نمایش این تصویر می‌توانید کد زیر را بنویسید:
1 | <img src="test.jpg"> |
صفت alt در تگ img
با استفاده از صفت alt می‌توانید یک متن که تصویر را توضیح دهد برای تصویر بنویسید. این متن در مواقعی که کاربر به هر دلیلی نتواند تصویر را مشاهده کند (کند بودن اینترنت، غلط بودن آدرس تصویر و…) برای کاربر نمایش داده می‌شود.
1 | <img src="logo.png" alt="Adminesite Logo"> |
نکته: نوشتن صفت alt برای تمام تصاویر اجباری است. اگر این صفت را برای تصویری تنظیم نکنید، صفحه وب شما در اعتبارسنجی‌ها رتبه خوبی نمی‌گیرد.
ابعاد تصویر – تنظیم عرض و ارتفاع
برای تنظیم ابعاد (عرض و ارتفاع) تصویر می‌توانید از صفت width (عرض) و صفت height (ارتفاع) استفاده کنید.
1 | <img src="test.jpg" alt="test image" width="500" height="600"> |
نکته: صفت‌های width و height تنها مقادیر عددی به خود می‌گیرند. همچنین واحد این اعداد پیکسل (pixel) است. در مثال فوق خروجی تصویر در ابعاد 500*600 پیکسل نمایش داده می‌شود.
آدرس دهی به تصاویر درون یک پوشه
برای نظم بیشتر، می‌توان در کنار فایل html خود یک پوشه به نام images ایجاد کرده و تمام عکس‌های مورد استفاده در پروژه‌‌مان را درون این پوشه قرار دهیم. برای آدرس دهی به عکس‌های درون این پوشه می‌توان به صورت زیر عمل کرد:
1 | <img src="images/test.jpg" alt="test image"> |
در واقع با کاراکتر / می‌توان درون یک پوشه رفت و به محتویات آن دسترسی داشت.
همانطور که در جلسه مربوط به آموزش تگ a هم گفته شد موضوع آدرس دهی را بصورت جداگانه در یکی از جلسات آینده توضیح خواهیم داد.
آدرس دهی به تصاویر درون سرور‌های دیگر
اگر می‌خواهید تصاویر درون وبسایت‌های دیگر را نمایش دهید. باید در صفت src آدرس تصویر را بصورت کامل وارد کنید. به مثال زیر دقت کنید:
1 | <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google Logo"> |
در مثال بالا ما از آدرس تصویر لوگو شرکت گوگل استفاده کردیم.
سلام من از تگ img استفاده کردم و alt هم دادم ولی تصویرم نمایش داده نمیشه ولی alt هستش inspect گرفتم میزنه file not found درحالیکه فایلو توی فولدر دارم و توی vs هم باز میکنه چیکار کنم؟؟؟؟؟؟
سلام وقت بخیر
آدرسی تصویری که به صفت src دادید اشتباهه
سلام
تصویرم ادرسش درسته ()
ولی تصویر بارگذاری نمیشه چرا؟
سلام دوباره خانم جعفرپور
تازه فهمیدم مشکل از تصویرمه!! … تصویرم 2560*1440 هست یه عکسه دیگه رو انتخاب کردم با ابعاد کوچیکتر که اوکی شد
سلام خداقوت با این مطالب مفیدتون
فقط یه مشکل: من هرکاری میکنم این تصویر نمایش داده نمیشه!! type تصویر رو چک کردم ، آدرس کامل دادم ، آدرس کامل ندادم xd
نمیشه که نمیشه
لطفا راهنمایی کنید
و یه سوال دیگه: دادن عرض و طول تصویر الزامیه ؟؟ ینی برنامه نمیتونه تشخیص بده؟؟
سلام به شما
درون تگ تصویرتون یه ویژگی به نام alt بذارید اگر alt رو نشون داد ولی تصویر رو نه، مشکل از ادرس دهی هستش
اگر عرض و ارتفاع ندید تصویر نشون داده میشه اما بهتره گذاشته بشه
سلام وقت بخیر
من توی وبسایت می‌خوام تصویر لوگوی وبسایتم رو تغییر بدم متاسفانه هرکاری میکنم از دو تا صفت طول و عرض هم استفاده میکنم تصویر تغییری نمی‌کنه می‌خواستم ببینم مشکل کجاست؟ میتونه یه دلیلش این باشه که تو سایت‌های آپلود با اون سایز آپلود شده؟ ممنون میشم توضیحی بدین در این رابطه
اگر وبسایت شما کامل راه‌اندازی شده (فرانت و بک) و اگر وردپرسی هستش از طریق تنظیمات قالب یا بخش سفارشی سازی -هویت سایت قابل آپلود مجدد با سایز دلخواه هستش.
اگر فقط در حال تمرین بخش فرانت اند هستید باید مشکل را در همین کدهای cssجستجو کنید. احتمالا کدهای cssوالد تصویر هم باید بررسی کنید.
سلام خسته نباشید
من مراحل ادرس دهی رو همونطور که کفتید انجام دادم و مقاله ادرس دهی مطلق و نسبی هم خوندم ولی عکسم نمایش داده نمیشه مشکل چیه؟
تنها مشکلی که میتونه وجود داشته باشه اشتباه وارد کردن مسیر یا نام تصویر هستش وگرنه دلیل دیگه ای وجود نداره.
سلام.
منم این مشکلو داشتم ولی تونستم برطرفش کنم: بهتره که کامل آدرس دهی کنید کامل آدرس دهی کنید مثل زیر:
E:\\images\test.jpg
و یا ممکنه مشکل از این باشه که پسوند تصویر رو ننوشتید. برای دانستن پسوند ها باید داخل پوشه عکستون
ctrl+shift+6 رو بزنید و type فایل رو بخونید و طبق اون پسوند مورد نظرتون رو بنویسید مانند: test.jpg یا test.png یا test.jfif
سلام و ارض ادب
ضمن تشکر از مطالب مفیدتون یه سوال داشتم
من آدرس دهی درست تصویرم رو وارد کردم و از الاین استفاده کردم ولی تصویرم لود نمیشه و فقط به من الاین رو نشون میده مشکل از کجاشه؟
اصلی ترین علت عدم نمایش تصویر همون ادرس دهی اون هستش. کار با ابزار Inspector مرورگر رو یاد بگیرید (در گوگل سرچ کنید) سپس src تصویرتون رو بررسی کنید که ایا مرورگر تصویر رو پیدا کرده یا خیر
سلام ممنون از سایت عالیتون من کلا با شما تا اینجا یاد گرفتم وعالی هستین فقط یه سوال اونم اینکه تصاویر رو هم مث متن ها میتونیم اَلاین کنیم؟چجوری راست چین یا چپ چینش کنیم ؟
برای اینکار چند روش وجود داره. میتونید تصویر رو داخل یک تگ با display:block قرار بدید مثلا تگ div، سپس به این تگ text-align:center بدید یا left و rightبرای چپ و راست بردن تصویر
یا اینکه میتونید به خود تگ img ابتدا display:block بدید سپس به کمک margin-left:auto و margin-right:auto یا margin:auto تصویر رو به سمت راست، چپ یا وسط هدایت کنید.
جناب سلطانی عزیز قلم بسیار روانی دارید. زنده باشید.
سلام ممنون از مطالبتون با فن بیان عالی و روان آقای سلطانی و خانم جعفرپور عزیز
خواهش میکنم آموزش جاوا اسکریپت را هم بگزارید
ممنون
سلام دوست عزیز
ممنون از انرژی مثبتی که بهمون هدیه کردید
حتما آموزش جاوا اسکریپت هم بزودی قرار داده میشه
اطلاع دارم که صفت alt برای موتور جستجو خیلی اهمیت داره ولی هیچ متنی بر روی تصویر من به نمایش در نیامد ولی از صفت title استفاده کردم متن بر روی تصویر آمد؟؟
درسته ، alt فقط زمانی نمایش داده میشه که تصویر لود نشه . در حالت عادی نمایش داده نمیشه
اگر میخواید خاصیتش رو بفهمید از آدرس عکستون ی حرف رو حذف کنید تا آدرس ناقص بشه و بعد تاثیرش رو ببینید
سلام.خسته نباشید.من از alt استفاده کردم اما جوابی نداد ولی از صفت title در داخل تگ استفاده کردم جواب داد.پس alt اینجا به چه دردی می خوره؟ ممنون میشم پاسخ بدید.
خوبه توی نظرات تازه کار های برنامه نویسی میبنم(: خوش آمدید به این دنیای بزرگ و جذاب
سلام خسته نباشید،
از تگ img استفاده کردم ولی تصویر ظاهر نشد !
به نظرتون کجا اشتباه کردم :/
احتمالا در آدرس دهی تصویر دچار اشتباه شدید. به درس آدرس دهی نسبی مراجعه کنید.
دمتون گرم من همه چیز بلدم جز چیزی که اینجا نوشتید😘😘😘😘😘🌹💓
سلام علیکم
راهی نیست که مثلا وقتی نشانگر موس فرد روی تصویر می آید متن مورد نظر نمایش داده شود ؟
سلام علی جان
با استفاده از زبان CSS یا JavaScript میشه از این کارها انجام داد که به اصطلاح بهش می‌گیم behaviour ها.
سلام ممنون از زحمات شما
چگونه باید مکان دقیق تصویر در سایت قرار داد و چطوی زیر تصویر متن نوشت و هردو متن و تصویر را پیوند کرد
سلام حسن جان
درمورد سوال اول: خیلی ساده، در جای مناسبی که مدنظرمون هست از تگ img استفاده می‌کنیم.
درمورد سوال دوم: میتونید از تگ p برای نوشتن متن زیر تصویر استفاده کنید. همچنین برای لینک کردن تصویر و متن میتونید از تگ a استفاده کنید.
موفق باشید
سلام ؛ ممنون از مطالب مفیدتون
از آنجایی که این مطالب به صورت روزانه نوشته میشه آیا مجموعه ای کامل یا کتابی برای آموزش html و css و javaScript هست که پیشنهاد کنید ؟
چون توی قسمت محصولات همچین آموزشی نبود !
سلام امید جان
منبع کامل فارسی و البته رایگان، نمیدونم هست یا نه، میتونید جستجو کنید.
آموزش ویدیویی HTML و CSS در حال ساخت هست که در ماه آینده منتشر میشه.
موفق باشید.