تصاویر در HTML ، ایجاد تصویر در HTML

می دانید که در اکثر سندهای HTML ،یک یا چندین تصویر یافت می شود.بسیاری از صفحات HTML شامل تصاویر متعددی هساتند.اما سوال اینست که واقعا چگونه می توانیم در یکسند HTML ، تصویر اضافه کنیم؟

استفاده از تگ img در صفحات HTML و نمایش تصویر

یکی از تگ های پرکاربرد در آموزش HTML،همین تگ img است که به وسیله آن می توان در اسناد HTML تصاویر را به نمایش گذاشت.از آنجا که یک تصویر می تواند صفحه HTML را از سادگی و خام بودن خارج کند،به همین دلیل تگ img در HTML استفاده های زیادی دارد.در هر صفحه HTML می توان به وفور این تگ را یافت. ابعاد مناسب برای تصاویر HTML: اما بهترین ابعاد برای درج تصویر در HTML چیست؟ می دانید که صفحات نمایشگرهای مختلف،سایزها و رزلوشن های مختلفی دارند.بنابراین چگونه بین این رزولوشن ها در HTML تعادل برقرار کنیم؟اگر تصویر را برای مانیتورهای با ابعاد بزرگ انتخاب کنیم،در این صورت در مانیتورهای کوچکتر،تصویر با حجم بالا باید بیهوده لود شود و ممکن است به درستی تصویر را نمایش ندهد.اما اگر تصویر را برای مانیتورها و نمایشگرهای کوچکت رتنظیم کنیم،در ابعاد بالاتر ، تصویر HTML ممکن است بی کیفیت نمایش داده شود.راه حل چیست؟تگ img در HTML دارای ویژگی (خصوصیتی) تحت عنوان width هستند که می توان به صورت درصدی ، عرض آنها را مشخص کرد.به این معنا که عرض تصویر ،متناسب با ابعاد و سایز صفحه تنظیم می شود.این ویژگی یکی از ویژگی های خوب html است که می توان صفحه را متناسب با نمایشگر مورد نظر تغییر داد.حجم تصویر در HTML : سعی کنید  همواره حجم تصاویر را در HTML تا حد ممکن کاهش دهید.به این دلیل که سرعت لود سایت افزایش چشکمگیری پیدا می کند.حجم صفحات HTML به صورت مستقیمی به تصاویر وابسته است.یعنی اینکه هرچه تعداد تصاویر بالاتر باشد ، حجم صفحه  HTML  نیز بالاتر می رود.سعی کنید از تگ img در حد نیاز استفاده کنید و بیهوده حجم صفحات HTML را افزایش ندهید.در فیلم آموزش HTML  هم بارها تاکید شده که استفاده صحیح از این تگ به چه صورت است.

مثالی از تحوه ایجاد تصویر در صفحات HTML:

Spectacular Mountain

هماهن گونه که در مثال بالا می بینید،یک تصویر در صفحه HTML درج شده وبا استفاده از تگ h2 یک سرتیتر برای آن مشخص شده.جهت آشنایی با تگ های سرنویس مقاله مربوطه را مطالعه نمایید.در مثال بالا در خصوصیت src ، مسیر و آدرس تصویر را در دایرکتوری سایت تعیین می نماییم و با استفاده از خصوصیت alt ، یک متن جایگزین برای تگ فوق ، تعیین می نماییم. این ویژگی در HTML ، هر زمانی که تصویر ظاهر نشود ، به جای تصویر نمایانگر می گردد.