آموزش تگ source در HTML

1 شهریور 1401
ارسال شده توسط
آموزش html css
آموزش تگ source در HTML+وردپرس پوش

آموزش تگ source در HTML

دوست من سلام امیدوارم حالتون عالی و پر از انرژی باشید. توی این بخش از آموزش html css قراره که با آموزش تگ source در HTML به صورت کامل آشنا بشید.

تگ Source در HTML

تگ source تگی است که با استفاده از آن میتوانید یک سورس یا منبع یا بطور کلی مسیر یک فایل رو برای تگ های Audio و Video و Picture مشخص کنید.

بررسی تگ <source> در HTML 4.01 و HTML5

تگ <source> یک تگ جدید در HTML5 است. و در HTML4.01 و نسخه های قدیمی تر وجود نداشته است.

این تگ <source> دارای سه خصوصیت ویژه جدید به نام های media , src و type در HTML5 می باشد.

راستی اگر دنبال آموزش html css پروژه محور هستید می توانید از دوره ی آموزش وردپرس پوش استفاده کنید. جهت مشاهده ی 28 ساعت ویدیو آموزشی با پشتیبانی مادام العمر روی این لینک کلیک کنید.

مثال از تگ source در HTML

در ادامه آموزش html و css میتوانید یک مثال از این تگ را مشاهده نمایید.

مثال شماره ۱ : استفاده در تگ audio

<body>
 <audio controls>
  <source src="files/demo.mp3" type="audio/mpeg">
 </audio>
</body>

مثال شماره ۲ : استفاده در تگ video

<body>
 <video controls>
  <source src="files/demo.mp4" type="video/mp4">
 </video>
</body>

مثالی برای شماره ۳ : استفاده در تگ picture

<body>
 <picture>
  <source media="(min-width: 650px)" srcset="files/pic-1.jpg">
  <source media="(min-width: 465px)" srcset="files/pic-2.jpg">
  <img src="files/pic-3.jpg">
 </picture> 
</body>

پشتیبانی مرورگرها

در جدولی که در پایین مشاهده می کنید به این نتیجه می رسید که آیا مرورگرهای اینترنتی از تگ source در HTML پشتیبانی میکنند یا خیر.

 

جدول پشتیبانی مرورگرها+وردپرس پوش

 

جدول صفات تگ source در HTML

در جدول زیر میتوانید صفات به همراه مقادیری را که میتوان در این تگ بکار برد را مشاهده نمایید.

 

جدول صفات تگ source+وردپرس پوش

 

پشتیبانی از صفات و رویدادهای عمومی

  • تگ source از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.

خصیصه های سراسری Global Attributes

تگ <small> از خصیصه های سراسری در HTML پشتیبانی می کند.

خصیصه رویداد Event Attributes

تگ <small> از خصیصه رویداد در HTML پشتیبانی می کند.

تنظیمات پیش فرض CSS

ندارد.

شما میتوانید با دوره ی آموزشی html css در این موارد بسیار مهارت پیدا کنید.

 

برای امتیاز به این نوشته کلیک کنید!
[کل: 0 میانگین: 0]

در صورتی که مشکلی دارید و قادر به حل آن نیستید می توانید با ما در تماس باشید

فرم درخواست پشتیبانی (فرم زیر پست ها)

برچسب ها:

دیدگاهتان را بنویسید