مقدمه
سلام پی وی لرنی های عزیز!
به دوره آموزش تگ های HTML خوش آمدید!
HTML یا Hypertext Markup Language یک نوع زبان نشانه‌گذاری استاندارد برای ایجاد صفحات اینترنت و وب محسوب می شود.
می توان ادعا کرد که HTML دروازه ورود و پیشرفت برای یادگیری سایر زبان های برنامه نویسی هم چون CSS و جاوا اسکریپت است.
HTML ساختار و اسکلت صفحات وب را تشکیل می دهد و بدون آن نمی توان هیچ صفحه وبی را ساخت.
دوست دارید طراح وب شوید؟
خب باید HTML را بیاموزید!
نگران نشوید! یادگیری HTML کار دشواری نیست و با کمی تلاش خیلی زود در آن استاد می شوید.
در جلسه قبلی به کار با تگ param و ویژگی ها و کاربردهای آن پرداختیم؛ از این تگ برای تعریف پارامترهای تعبیه شده در عنصر <object> استفاده می شود.
این جلسه را به آموزش کار با تگ picture در HTML اختصاص داده ایم.
آموزش کار با تگ picture در HTML
به مثال زیر توجه نمایید.
در این مثال می توانید نحوه استفاده از تگ picture را مشاهده نمایید.
مثال :
| <picture> <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg"> <source media="(min-width: 465px)" srcset="img_white_flower.jpg"> <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;"> </picture> |
تعریف و کاربرد
گرچه می توان از تگ img برای نمایش تصاویر استفاده کرد اما تگ picture در مشخص کردن منابع تصویری انعطاف پذیری بیشتری به وب می دهد.
اگر می خواهید طراحی هنری و ریسپانسیوی داشته باشید در این صورت تگ picture می تواند به بهترین شکل به شما خدمت نماید.
با کمک این تگ می توان یک یا چند تصویر را در حالت های مختلف در یک صفحه وب به نمایش گذاشت و در عین حال ظرافت آن ها را از دید بینندگان حفظ کرد.
تگ <picture> دارای دو تگ متفاوت است: یک یا چند تگ <source> و یک تگ <img>.
عنصر <source> دارای ویژگی های زیر است:
srcset (ضروری) – URL یا آدرس تصویر را نشان می دهد.
media – هر گونه کوئری معتبر رسانه ای را که معمولاً در CSS تعریف می شود ، می پذیرد.
sizes – برای تصویر یک عرض مستقل، یک کوئری رسانه مستقل و یا لیست کاملاً محدود با کاما از رسانه های دارای توصیف عرض را تعریف می کند.
type – نوع MIME را مشخص می کند
مرورگر از مقادیر این خصیصه برای بارگذاری مناسب ترین تصویر استفاده می کند.
مرورگر از اولین عنصر <source> استفاده می کند و هرگونه تگ <source> زیر را نادیده می گیرد.
عنصر <img> نیز به عنوان آخرین تگ child بلوک اعلامیه <picture> مورد نیاز است.
عنصر <picture> مشابه عناصر <video> و <audio> کار می کند؛ یعنی شما منابع مختلفی را تنظیم می کنید و اولین منبعی که متناسب با ترجیحات است منبع مورد استفاده است.
پشتیبانی مرورگر ها
با کمک جدول زیر می توانید ببینید که آیا تگ picture در مرورگر شما پشتیبانی می شود یا خیر.
| عنصر |  |  |  |  |  |
| <param> | ۳۸٫۰ | ۳۸٫۰ | ۲۵٫۰ | ۹٫۱ | ۱۳٫۰ |
تفاوت بین HTML 4.01 و HTML5
تگ picture در HTML5 تگ جدیدی محسوب می شود.
خصیصه های سراسری Global Attributes
تگ <picture> از خصیصه های سراسری در HTML پشتیبانی می کند.
خصیصه رویداد Event Attributes
تگ <picture> از خصیصه رویداد در HTML پشتیبانی می کند.
کلام آخر
در این جلسه آموزش کار با تگ picture در HTML به شما علاقمندان این دوره ارائه شد؛ تگ picture تگی است که در مشخص کردن منابع تصویری انعطاف پذیری بیشتری به وب می دهد.
در ادامه این دوره، جلسه آینده با آموزش کار با تگ pre با شما خواهیم بود.
با پی وی لرن همراه باشید.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
احسان
سلام وقت بخیر
تفاوت تگ picture و figure در چی هست؟ برای نمایش تصویر بهتر است از کدام استفاده کنیم؟
پی وی لرن
با سلام
از تگ figure تگهای دیگر شامل تگ های نمودار و تصاویر را درون خود جای می دهد اما تگ picture مانند تگ img است با این تفاوت که انعطاف بیشتری نسبت به آن دارد.
این لینک ها را مشاهده نمایید.
آموزش کار با تگ picture در HTML