Html Source Tag
HTML source, Referensi berguru HTML <source>, Tutorial html source, Penjelasan html <source>
Tutorial HTML <source>
Element HTML
source dipakai sebagai bab dari element <picture>, <audio>, dan <video>. Element ini mengidentifikasi satu URL atau lebih sumber file media, baik itu gambar, audio ataupun video.
> Dalam penulisannya element
<source> wajib diletakan atau ditulis didalam element <picture>, <audio>, dan <video>, sebelum element <track> untuk audio dan audio.Tag Kelalaian (Tag omission) : wajib mempunyai tag pembuka dan tidak mempunyai tag penutup. Contoh ; <source src="url.mp3"> atau <source src="url.mp3"/>
Contoh HTML <source>
<audio controls> <source src="guitar.mp3" type="audio/mpeg"/> <source src="guitar.ogg" type="audio/ogg"/> </audio><!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> <base href='https://sites.google.com/site/triksonicsites/media/' target='_blank'/> </head> <body> <audio controls> <source src="guitar.mp3" type="audio/mpeg"/> <source src="guitar.ogg" type="audio/ogg"/> </audio> <p> Pastikan koneksi anda stabil.<br> Silahkan tunggu audio sedang dimuat. </p> </body> </html>
Attribute HTML <source>
sizesAttribute ini memilih ukuran tata letak file media pada kondisi tertentu. Attribute ini dipakai kalau element
<source> berada didalam rentang element <picture>...</picture>Contoh :
<picture> <source media="(min-width: 350px)" sizes="10vw" srcset="background-html.png 100w"/> <img src="html-tutorial.png"/> </picture><!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> <style>img {max-width :100%}</style> </head> <body> <picture> <source media="(min-width: 350px)" sizes="10vw" srcset="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN0M1VSJuwACkf9eJc_zFY1Stihw24u7_gH4vYNhyphenhyphenWZGPHR36omdozVJrk764aTyv3JrtEaht1HAeAQRbJHdd0966zAVEf6h5lzMq5O5sROMQ7HDd8ArV1ljOkWxHDXGU-qKTn89gGX5n3/s640/background-html.png 100w"/> <img alt=" ini mengidentifikasi satu URL atau lebih sumber file media HTML source Tag" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGjBV9YqVjIlyaKn7ajfWD9iCJ1JHsoC8mikUmpTGMEOirgKy1O5g4Aor7iREnX56qPtVNVayh4V3JNNsISh9DbOJVICidXhZAqNz5o387OKzLzXZPnIAaXNysCqVyl03_5zktmqhQdJKH/s1600/html-tutorial.png"/> </picture> <hr> <picture> <source media="(min-width: 350px)" srcset="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN0M1VSJuwACkf9eJc_zFY1Stihw24u7_gH4vYNhyphenhyphenWZGPHR36omdozVJrk764aTyv3JrtEaht1HAeAQRbJHdd0966zAVEf6h5lzMq5O5sROMQ7HDd8ArV1ljOkWxHDXGU-qKTn89gGX5n3/s640/background-html.png"/> <img alt=" ini mengidentifikasi satu URL atau lebih sumber file media HTML source Tag" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGjBV9YqVjIlyaKn7ajfWD9iCJ1JHsoC8mikUmpTGMEOirgKy1O5g4Aor7iREnX56qPtVNVayh4V3JNNsISh9DbOJVICidXhZAqNz5o387OKzLzXZPnIAaXNysCqVyl03_5zktmqhQdJKH/s1600/html-tutorial.png"/> </picture> Perlebar dan perkecil area preview untuk melihat fungsinya.<br> Dan perhatikan perbedaan kedua pola diatas </body> </html>srcAttribute ini memilih alamat sumber media untuk element
<audio> dan <video>, tapi attribute ini akan diabaikan kalau element <source> berada didalam element <picture>.Contoh :
<audio controls> <source src="guitar.mp3" type="audio/mpeg"/> <source src="guitar.ogg" type="audio/ogg"/> </audio> <video controls> <source src="SampleVideo.mp4" type="video/mp4"/> <source src="SampleVideo.ogg" type="video/ogg"/> </video><!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> <base href='https://sites.google.com/site/triksonicsites/media/' target='_blank'/> </head> <body> <audio controls> <source src="guitar.mp3" type="audio/mpeg"/> <source src="guitar.ogg" type="audio/ogg"/> </audio> <video controls> <source src="SampleVideo.mp4" type="video/mp4"/> <source src="SampleVideo.ogg" type="video/ogg"/> </video> <p> Pastikan koneksi anda stabil.<br> Silahkan tunggu data media sedang dimuat. </p> </body> </html>
srcsetAttribute ini memilih URL media berupa image atau gambar. Attribute ini dipakai kalau element
<source> berada didalam rentang element <picture>...</picture>Contoh :
<picture> <source media="(min-width: 350px)" srcset="/background-html.png"/> <img alt="demo" src="/html-tutorial.png"/> </picture><!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> <style> img { max-width :100% } </style> </head> <body> <picture> <source media="(min-width: 350px)" srcset="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN0M1VSJuwACkf9eJc_zFY1Stihw24u7_gH4vYNhyphenhyphenWZGPHR36omdozVJrk764aTyv3JrtEaht1HAeAQRbJHdd0966zAVEf6h5lzMq5O5sROMQ7HDd8ArV1ljOkWxHDXGU-qKTn89gGX5n3/s640/background-html.png"/> <img alt=" ini mengidentifikasi satu URL atau lebih sumber file media HTML source Tag" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGjBV9YqVjIlyaKn7ajfWD9iCJ1JHsoC8mikUmpTGMEOirgKy1O5g4Aor7iREnX56qPtVNVayh4V3JNNsISh9DbOJVICidXhZAqNz5o387OKzLzXZPnIAaXNysCqVyl03_5zktmqhQdJKH/s1600/html-tutorial.png"/> </picture> <p> Gambar akan berbeda kalau pada lebar 350px kebawah </p> </body> </html>typeAttribute ini memilih tipe MIME dari sumber file media. Lihat contoh
mediaAttribute ini dipakai untuk membatasi ruang lingkup style sheets penggunaan file media. Attribute penggunaannya hanya kalau element
<source> berada didalam rentang element <picture>....</picture>, Lihat contoh.Global Attributes:
Element <source> meliputi Global Attributes HTML.
Event Attributes:
Element <source> meliputi Event Attributes HTML.
Browser Support HTML <source>:
Desktop
| Chrome | 3 |
|---|---|
| Safari | 3.1 |
| Firefox | 3.5 |
| Opera | 10.5 |
| IE | 9 |
| Edge | Yes |
Mobile
| Android webview | Ya |
|---|---|
| Chrome Android | Ya |
| Edge mobile | Ya |
| Firefox Android | 4 |
| IE mobile | ? |
| Opera Android | Ya |
| iOS Safari | Ya |
Table Info
- Nilai pada table memilih versi minimal browser
- ? tidak diketahui
Default CSS :
Browser yang support dengan element
<source>, mempunyai nilai default :/* tidak ada */