دوره آموزش ووکامرس

کار با تصاویر در HTML | آموزش تگ img


نویسنده:
چهارشنبه ۱۰ اردیبهشت ۱۳۹۹
تگ img در HTML

یکی از مهم‌ترین اجزاء صفحات وب تصاویر هستند. تصاویر می‌توانند طرح و ظاهر وبسایت شما را جذاب‌تر کنند. در زبان HTML می‌توان با استفاده از تگ img تصاویر مختلف را به صفحات اضافه کرد.

برای تست کردن مثال‌های این جلسه و تمرین با تگ <img> می‌توانید قبل از خواندن این مطلب یک تصویر را در کنار فایل html خود قرار دهید تا بتوانید براحتی از آن در صفحه وب خود استفاده کنید.

Syntax نمایش تصاویر در HTML

در HTML تصاویر با استفاده از تگ <img> تعریف می‌شوند.

تگ img یک تگ تهی است. یعنی تگ بسته ندارد. همچنین این تگ یک صفت به نام src دارد که وظیفه آن دریافت آدرس (Source) تصویر است.

برای مثال اگر شما یک تصویر با نام test.jpg را در کنار فایل html خود قرار دهید، برای نمایش این تصویر می‌توانید کد زیر را بنویسید:


صفت alt در تگ img

با استفاده از صفت alt می‌توانید یک متن که تصویر را توضیح دهد برای تصویر بنویسید. این متن در مواقعی که کاربر به هر دلیلی نتواند تصویر را مشاهده کند (کند بودن اینترنت، غلط بودن آدرس تصویر و…) برای کاربر نمایش داده می‌شود.

نکته: نوشتن صفت alt برای تمام تصاویر اجباری است. اگر این صفت را برای تصویری تنظیم نکنید، صفحه وب شما در اعتبارسنجی‌ها رتبه خوبی نمی‌گیرد.


ابعاد تصویر – تنظیم عرض و ارتفاع

برای تنظیم ابعاد (عرض و ارتفاع) تصویر می‌توانید از صفت‌ width (عرض) و صفت height (ارتفاع) استفاده کنید.

نکته: صفت‌های width و height تنها مقادیر عددی به خود می‌گیرند. همچنین واحد این اعداد پیکسل (pixel) است. در مثال فوق خروجی تصویر در ابعاد 500*600 پیکسل نمایش داده می‌شود.


آدرس دهی به تصاویر درون یک پوشه

برای نظم بیشتر، می‌توان در کنار فایل html خود یک پوشه به نام images ایجاد کرده و تمام عکس‌های مورد استفاده در پروژه‌‌مان را درون این پوشه قرار دهیم. برای آدرس دهی به عکس‌های درون این پوشه می‌توان به صورت زیر عمل کرد:

در واقع با کاراکتر / می‌توان درون یک پوشه رفت و به محتویات آن دسترسی داشت.

همانطور که در جلسه مربوط به آموزش تگ a هم گفته شد موضوع آدرس دهی را بصورت جداگانه در یکی از جلسات آینده توضیح خواهیم داد.

آدرس دهی به تصاویر درون سرور‌های دیگر

اگر می‌خواهید تصاویر درون وبسایت‌های دیگر را نمایش دهید. باید در صفت src آدرس تصویر را بصورت کامل وارد کنید. به مثال زیر دقت کنید:

در مثال بالا ما از آدرس تصویر لوگو شرکت گوگل استفاده کردیم.

دیدگاهتان را بنویسید

25 پاسخ به “کار با تصاویر در HTML | آموزش تگ img”

  1. امید گفت:

    سلام ؛ ممنون از مطالب مفیدتون
    از آنجایی که این مطالب به صورت روزانه نوشته میشه آیا مجموعه ای کامل یا کتابی برای آموزش html و css و javaScript هست که پیشنهاد کنید ؟
    چون توی قسمت محصولات همچین آموزشی نبود !

    • سلام امید جان
      منبع کامل فارسی و البته رایگان، نمیدونم هست یا نه، می‌تونید جستجو کنید.
      آموزش ویدیویی HTML و CSS در حال ساخت هست که در ماه آینده منتشر میشه.
      موفق باشید.

  2. حسن حبیبی پور گفت:

    سلام ممنون از زحمات شما
    چگونه باید مکان دقیق تصویر در سایت قرار داد و چطوی زیر تصویر متن نوشت و هردو متن و تصویر را پیوند کرد

    • سلام حسن جان
      درمورد سوال اول: خیلی ساده، در جای مناسبی که مدنظرمون هست از تگ img استفاده می‌کنیم.
      درمورد سوال دوم: می‌تونید از تگ p برای نوشتن متن زیر تصویر استفاده کنید. همچنین برای لینک کردن تصویر و متن می‌تونید از تگ a استفاده کنید.
      موفق باشید

  3. ali گفت:

    سلام علیکم
    راهی نیست که مثلا وقتی نشانگر موس فرد روی تصویر می آید متن مورد نظر نمایش داده شود ؟

  4. parham_m_f_i گفت:

    دمتون گرم من همه چیز بلدم جز چیزی که اینجا نوشتید😘😘😘😘😘🌹💓

  5. me گفت:

    سلام خسته نباشید،
    از تگ img استفاده کردم ولی تصویر ظاهر نشد !
    به نظرتون کجا اشتباه کردم :/

  6. مهدی گفت:

    خوبه توی نظرات تازه کار های برنامه نویسی میبنم(: خوش آمدید به این دنیای بزرگ و جذاب

  7. Ali گفت:

    سلام.خسته نباشید.من از alt استفاده کردم اما جوابی نداد ولی از صفت title در داخل تگ استفاده کردم جواب داد.پس alt اینجا به چه دردی می خوره؟ ممنون میشم پاسخ بدید.

  8. Ali گفت:

    اطلاع دارم که صفت alt برای موتور جستجو خیلی اهمیت داره ولی هیچ متنی بر روی تصویر من به نمایش در نیامد ولی از صفت title استفاده کردم متن بر روی تصویر آمد؟؟

  9. نیلوفر گفت:

    سلام ممنون از مطالبتون با فن بیان عالی و روان آقای سلطانی و خانم جعفرپور عزیز
    خواهش میکنم آموزش جاوا اسکریپت را هم بگزارید
    ممنون

  10. علی پور گفت:

    جناب سلطانی عزیز قلم بسیار روانی دارید. زنده باشید.

  11. reza گفت:

    سلام ممنون از سایت عالیتون من کلا با شما تا اینجا یاد گرفتم وعالی هستین فقط یه سوال اونم اینکه تصاویر رو هم مث متن ها میتونیم اَلاین کنیم؟چجوری راست چین یا چپ چینش کنیم ؟

    • برای اینکار چند روش وجود داره. میتونید تصویر رو داخل یک تگ با display:block قرار بدید مثلا تگ div، سپس به این تگ text-align:center بدید یا left و rightبرای چپ و راست بردن تصویر

      یا اینکه می‌تونید به خود تگ img ابتدا display:block بدید سپس به کمک margin-left:auto و margin-right:auto یا margin:auto تصویر رو به سمت راست، چپ یا وسط هدایت کنید.

  12. مصطفی دسمی گفت:

    سلام و ارض ادب
    ضمن تشکر از مطالب مفیدتون یه سوال داشتم
    من آدرس دهی درست تصویرم رو وارد کردم و از الاین استفاده کردم ولی تصویرم لود نمیشه و فقط به من الاین رو نشون میده مشکل از کجاشه؟

    • اصلی ترین علت عدم نمایش تصویر همون ادرس دهی اون هستش. کار با ابزار Inspector مرورگر رو یاد بگیرید (در گوگل سرچ کنید) سپس src تصویرتون رو بررسی کنید که ایا مرورگر تصویر رو پیدا کرده یا خیر

  13. Bardia. گفت:

    سلام خسته نباشید
    من مراحل ادرس دهی رو همونطور که کفتید انجام دادم و مقاله ادرس دهی مطلق و نسبی هم خوندم ولی عکسم نمایش داده نمیشه مشکل چیه؟

    • تنها مشکلی که میتونه وجود داشته باشه اشتباه وارد کردن مسیر یا نام تصویر هستش وگرنه دلیل دیگه ای وجود نداره.

    • ERR_No_Name_(343) گفت:

      سلام.
      منم این مشکلو داشتم ولی تونستم برطرفش کنم: بهتره که کامل آدرس دهی کنید کامل آدرس دهی کنید مثل زیر:
      E:\\images\test.jpg
      و یا ممکنه مشکل از این باشه که پسوند تصویر رو ننوشتید. برای دانستن پسوند ها باید داخل پوشه عکستون
      ctrl+shift+6 رو بزنید و type فایل رو بخونید و طبق اون پسوند مورد نظرتون رو بنویسید مانند: test.jpg یا test.png یا test.jfif

  14. میلاد گفت:

    سلام وقت بخیر
    من توی وبسایت می‌خوام تصویر لوگوی وبسایتم رو تغییر بدم متاسفانه هرکاری می‌کنم از دو تا صفت طول و عرض هم استفاده می‌کنم تصویر تغییری نمی‌کنه می‌خواستم ببینم مشکل کجاست؟ می‌تونه یه دلیلش این باشه که تو سایت‌های آپلود با اون سایز آپلود شده؟ ممنون می‌شم توضیحی بدین در این رابطه

    • اگر وب‌سایت شما کامل راه‌اندازی شده (فرانت و بک) و اگر وردپرسی هستش از طریق تنظیمات قالب یا بخش سفارشی سازی -هویت سایت قابل آپلود مجدد با سایز دلخواه هستش.
      اگر فقط در حال تمرین بخش فرانت اند هستید باید مشکل را در همین کدهای css‌جستجو کنید. احتمالا کدهای css‌والد تصویر هم باید بررسی کنید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *