سرفصل دوره

کاربرد عناصر چند رسانه ای، آموزش تگ Picture در html

75,600 تومان
  • .دسترسی مادام العمر به ویدئوهای دوره
  • .دسترسی رایگان به آپدیت های دوره
  • .تدریس روان و ساده با کیفیت بالا
  • .سرفصل های بسیار جامع و غنی
2798فارغ التحصیل
avatar

مهدی عباسی

مهندس ارشد کارشناسی کامپیوتر
5

مهدی عباسی هستم، مسلط به حداقل ۲۰ زبان مطرح برنامه نویسی به صورت پیشرفته، مدیر عامل شرکت آریا نرم افزار و بنیانگذار آکادمی درسمن، مسلط به تدریس دروس تخصصی کاردانی و کارشناسی کامپیوتر، پایگاه داده ها، برنامه نویسی پیشرفته، مبانی برنامه نویسی، مباحث ویژه طراحی وب و ....

نظرات دانشجویان

mi

1403/11/20

تدریس عالی

امیرعلی

1401/9/13

سلام. دوره رو خریدم، سوالاتم رو کجا باید بپرسم؟

avatar
پشتیبانی1401/9/14
پشتیبان درسمن

سلام امیرعلی جان، ممنون که با درسمن همراه شدی، امیدواریم تجربه های قشنگی براتون رقم بخوره.

سوالاتتون میتوانید در انجمن برنامه نویسی درسمن مطرح نمایید.

 

میلاد

1399/1/22

سلام دوره اموزش html وcss بسیار کاربردی هستش هم برای طراحی سایت و هم برای درآمد شما خیلی خوب آموزشش دادید ساده و کامل ممنون چون عالی بود

avatar
پشتیبانی1399/1/23
پشتیبان درسمن
سلام و درود خدمت شما، ممنون نظر لطف شماس، موفق باشید

کاربرد عناصر چند رسانه ای، آموزش تگ Picture در html

کار با تصاویر در html:

در این بخش، به معرفی تگ <picture> و همچنین نکاتی برای سرچ تصویر،معرفی سایت هایی برای دانلود تصویروآیکون می پردازیم.


<picture> : برای درج تصویراستفاده می شود،همچنین با استفاده ازاین تگ می توانیم نمایش تصویر در دستگاه های مختلف (موبایل،تبلت و...) را کنترل کنیم.در این تگ، ازتگ های <img> و<source>  استفاده می شود.


<source> : آدرس تصویر را مشخص می کند.این تگ دارای صفات زیر می باشد:

  • srcset : آدرس تصویر را در این قسمت وارد می کنیم.
  • media : که شامل  minimum و maximum سایز دستگاه را مشخص می کند.
  • type : نوع mime تصویر، فیلم و صدا را مشخص می کند.mime شناسایی نوع فایل توسط مرورگرها می باشد.


شکل دستوری <picture> : 
 

<picture>
         <source srcset=”pic.webp” media=”(min-width:1000px)” type=”image/jpeg”/>           <source srcset=”pic.webp” media=”(min-width:700px)” type=”image/png”/>
         <img src:”pic.webp” alt=”car”/>
</picture>

 

ممنون که تا اینجا با ما همرا بودید،برای یادگیری و درک بهتر مطالب، می توانید ویدئو آموزشی این بخش را خریداری کنید.smiley