درج تصویر در HTML – المان <img>

در HTML از المان <img> برای درج یا جاسازی تصویر در صفحات وب استفاده می‌شود. المان های <img> از جمله المان های خالی در اچ‌تی‌ام‌ال هستند. به این معنی که این المان ها فاقد محتوای داخلی و تگ پایان هستند. به عبارت بهتر المان های <img> تنها در قالب یک تگ شروع ظاهر می‌شوند. در مثال زیر ساختار ساده و متداول یک المان <img> را مشاهده می‌کنید.

<img src="nasirol-molk.jpg"
     alt="مسجد نصیرالملک در شیراز با نمایی از هشتی‌ها و شیشه‌های رنگی، مفروش با فرش‌های قرمز رنگ">

نتیجه کد فوق به شرط وجود فایل تصویر در محل مناسب می‌تواند چیزی مشابه با تصویر زیر باشد.

نمایی از نتیجه یک تصویر یا المان img در یک صفحه وب
نمایی از نتیجه یک المان <img> در یک صفحه وب

در مثال فوق از دو ویژگی با نام های src و alt استفاده شده است. در ادامه با این دو ویژگی و ویژگی‌های رایج دیگری آشنا می‌شوید که در المان های <img> برای تعیین خصوصیت های المان به کار می‌رود. این ویژگی ها مشابه با سایر ویژگی های HTML در تگ شروع المان درج می‌شوند.

ویژگی src – تعیین مسیر یا محل تصویر در HTML

ویژگی src (مخفف Source به معنی منبع)، مهم‌ترین ویژگی برای المان های <img> محسوب می‌شود. در واقع مقدار ویژگی src مسیر تصویری را مشخص می‌کند که می‌خواهید توسط المان نمایش داده شود. این مقدار می‌تواند مشابه با سایر مسیرها در HTML به صورت یک نشانی مطلق (Absolute) یا نسبی (Relative) درج شود.

به عنوان نمونه در مثال فوق از یک نشانی نسبی برای این ویژگی استفاده شده است. در این مثال مقدار ویژگی src به تصویری با نام nasirol-molk.jpg اشاره می‌کند. فراموش نکنید در این مثال فایل nasirol-molk.jpg می‌بایست در همان دایرکتوری قرار گرفته باشد که صفحه HTML قرار دارد.

در مثال زیر نمونه‌ای از یک نشانی مطلق (یا URL کامل) را برای مقدار ویژگی src مشاهده می‌کنید.

<img src="https://www.example.com/images/nasirol-molk.jpg"
     alt="مسجد نصیرالملک در شیراز با نمایی از هشتی‌ها و شیشه‌های رنگی، مفروش با فرش‌های قرمز رنگ">

ویژگی alt – درج متن جایگزین تصویر

ویژگی alt دومین ویژگی مهم برای المان های <img> است. مقدار این ویژگی، متن جایگزین تصویر (Alternative text) را مشخص می‌کند. این متن در واقع توصیفی از تصویر را برای مواقعی که امکان نمایش تصویر وجود ندارد ارائه می‌کند. به عنوان نمونه در مثال‌های فوق عبارت “مسجد نصیرالملک در شیراز با نمایی از هشتی‌ها و شیشه‌های رنگی، مفروش با فرش‌های قرمز رنگ” تلاش می‌کند تا حدودی تصویر را توصیف کند.

مقدار ویژگی alt معمولا زمانی جایگزین تصویر می‌شود که به دلایلی مانند قطع ارتباط اینترنت، حذف فایل تصویر و … امکان دسترسی به فایل تصویر و نمایش آن وجود ندارد. برخی کاربران نیز برای صرفه‌جویی در مصرف اینترنت، نمایش تصاویر در صفحات وب را غیرفعال می‌کنند. در این حالت هم معمولا نمایش متن جایگزین مفید واقع می‌شود. به علاوه موتورهای جستجو برای درک بهتر تصویر و همچنین صفحه خوان (Screen reader) ها برای انتقال مفهوم تصویر به افرادی مانند نابینایان از همین متن استفاده می‌کنند.

نمایش متن جایگزین تصویر در المان img روی یک صفحه وب
نمایش متن جایگزین تصویر در یک مرورگر

ویژگی های width و height – تعیین پهنا و ارتفاع تصویر در HTML

ویژگی های width و height برای تعیین پهنا و ارتفاع تصویر در تگ <img> به کار می‌روند. مقدار این ویژگی‌ها پهنا و ارتفاع تصویر را مشابه با نمونه زیر براساس پیکسل مشخص می‌کنند. از این ابعاد برای نمایش تصویر در صفحه استفاده می‌شود.

<img src="nasirol-molk.jpg"
     alt="مسجد نصیرالملک در شیراز با نمایی از هشتی‌ها و شیشه‌های رنگی، مفروش با فرش‌های قرمز رنگ"
     width="600" height="400">

اگر مقدار این ویژگی‌ها را براساس ابعاد واقعی تصویر وارد کنید استفاده از این ویژگی ها تأثیر ظاهری خاصی در اغلب موارد نخواهد داشت. با این وجود در این حالت هم درج ابعاد به نمایش سریع‌تر و سازماندهی محتوای صفحه به صورت کلی (زمانی که تصویر هنوز لود نشده) کمک می‌کند.

البته پیشنهاد می‌شود به جای ویژگی‌های width و height از ویژگی‌های هم‌نام آن‌ها در CSS برای تعیین ابعاد تصویر استفاده کنید. فراموش نکنید در این حالت مشابه با نمونه زیر ذکر واحد برای ابعاد تصویر ضروری است.

<img src="nasirol-molk.jpg"
     alt="مسجد نصیرالملک در شیراز با نمایی از هشتی‌ها و شیشه‌های رنگی، مفروش با فرش‌های قرمز رنگ"
     style="width:600px;height:400px;">

ویژگی title – عنوان تصویر در اچ‌تی‌ام‌ال

شما می‌توانید از ویژگی title مشابه با نمونه زیر به منظور درج عنوان برای تصویر استفاده کنید.

<img src="nasirol-molk.jpg"
     alt="مسجد نصیرالملک در شیراز با نمایی از هشتی‌ها و شیشه‌های رنگی، مفروش با فرش‌های قرمز رنگ"
     width="600" height="400"
     title="مسجد نصیرالملک - شیراز">

این عنوان (مشابه با آنچه برای لینک ها هم مشاهده کردید) هنگام قرارگیری نشانگر ماوس روی تصویر در قالب تولتیپ نمایان می‌شود.

نمایش متن عنوان یا مقدار ویژگی title هنگام قرارگیری نشانگر ماوس روی تصویر
نمایش متن ویژگی title هنگام قرارگیری نشانگر ماوس روی تصویر

بازگشت به فهرست مجموعه آموزشی HTML

امیرحسین شهسواری

عاشق دنیای رایانه و فناوری به خصوص برنامه نویسی هستم؛ یادگرفتن و البته یاد دادن چیزای جالبی که یاد گرفتم باعث خوشحالیم میشه و از اولویت‌های اصلی زندگیم به حساب میاد. از مدیریت و نوشتن در تک دیک هم واقعا لذت می‌برم :)

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

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