کار با تصاویر در 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 آدرس تصویر را بصورت کامل وارد کنید. به مثال زیر دقت کنید:

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

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

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

  1. TAHA گفت:

    سلام دوباره خانم جعفرپور
    تازه فهمیدم مشکل از تصویرمه!! … تصویرم 2560*1440 هست یه عکسه دیگه رو انتخاب کردم با ابعاد کوچیکتر که اوکی شد

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

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