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

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

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

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

در مثال فوق از دو خصوصیت با نام های 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="مسجد نصیرالملک در شیراز با نمایی از هشتی‌ها و شیشه‌های رنگی، مفروش با فرش‌های قرمز رنگ">

بیشتر بخوانید: آشنایی با مسیر فایل ها در HTML و جزئیات مسیرهای مطلق و نسبی

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

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

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

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

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

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

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

البته پیشنهاد می‌شود به جای خصوصیت‌های width و height از ویژگی‌های 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="مسجد نصیرالملک - شیراز">

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

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