قالب وردپرس پوسته وردپرس قالب فروشگاهی وردپس
خانه / آموزش html / آموزش ساختاری تصاویر 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,تگ img در HTML

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

<!DOCTYPE html>
<html>
<body>

<h2>Spectacular Mountain</h2>
<img src="picture.jpg" alt="view picture" style="width:200px;height:228px;">

</body>
</html>

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

 

سايت بزرگ کليک سايت،بهترين مرجع در ضمينه آموزش طراحي سايت و آموزش html و آموزش css ميباشد.تمامي فيلم هاي آموزشي اين سايت توسط استادان کاردان و بسيار با تجربه تهيه شده که تضميني بر کيفيت بالاي تمامي آن ها است.قيمت محصولات نيز کاملا رقابتي بوده و با مقايسه آن با ساير سايت ها ميتوان به خوبي متوجه اين موضوع شد.

درباره ی admin

مطلب پیشنهادی

عناصر های مختلف html

در زبان HTML و صفحات وب چند نوع تگ داریم.از حیث انواع display ها می …

پاسخ دهید

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

قالب وردپرس پوسته وردپرس قالب فروشگاهی وردپس