25% تخفیف برای دوره‌های آموزشی ویژه عید سعید فطر

کد تخفیف: ramazan

برای فرصتی محدود تمدید شد!

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

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

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

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

  1. امید گفت:

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

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

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

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