Html Source Tag
Html Source Tag - Kembali lagi di blog Root Flash, Pada kesempatan kali ini admin akan membagikan artikel tentang Html Source Tag, dan admin telah menyiaplkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan pada Artikel HTML, yang kami tulis ini dapat dengan mudah anda pahami. baiklah, tidak usah berlama-lama selamat membaca.Judul : Html Source Tag
link : Html Source Tag
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/AVvXsEhOMP0uZ1gMMutB57SbPpd-AL0u3vCvc_zJgpKLrwdEzmdateX8aaD6F1WRpV6NgWyYzJnPGKr1nA5ZKjhjP4CKYSTM3KCImMVLCkK5Uk-dmzVw8FCW77KDWbn1eHQHWOPC7PkPO1NpFxy8/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/AVvXsEjtb5-hyeN8o8jtYXzi9VVtVaGOl21R7_um83boQy8OcBxmDOpgpqd_4Oir_aTebbq8lTF9tnGiFrXC-HU8Mg-cXcs4OLvbnsUK5fESG_8Zra5XwMucu-_33jAeuac8hxuV15MNOR3bQyqi/s1600/html-tutorial.png"/> </picture> <hr> <picture> <source media="(min-width: 350px)" srcset="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOMP0uZ1gMMutB57SbPpd-AL0u3vCvc_zJgpKLrwdEzmdateX8aaD6F1WRpV6NgWyYzJnPGKr1nA5ZKjhjP4CKYSTM3KCImMVLCkK5Uk-dmzVw8FCW77KDWbn1eHQHWOPC7PkPO1NpFxy8/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/AVvXsEjtb5-hyeN8o8jtYXzi9VVtVaGOl21R7_um83boQy8OcBxmDOpgpqd_4Oir_aTebbq8lTF9tnGiFrXC-HU8Mg-cXcs4OLvbnsUK5fESG_8Zra5XwMucu-_33jAeuac8hxuV15MNOR3bQyqi/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/AVvXsEhOMP0uZ1gMMutB57SbPpd-AL0u3vCvc_zJgpKLrwdEzmdateX8aaD6F1WRpV6NgWyYzJnPGKr1nA5ZKjhjP4CKYSTM3KCImMVLCkK5Uk-dmzVw8FCW77KDWbn1eHQHWOPC7PkPO1NpFxy8/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/AVvXsEjtb5-hyeN8o8jtYXzi9VVtVaGOl21R7_um83boQy8OcBxmDOpgpqd_4Oir_aTebbq8lTF9tnGiFrXC-HU8Mg-cXcs4OLvbnsUK5fESG_8Zra5XwMucu-_33jAeuac8hxuV15MNOR3bQyqi/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 */Demikianlah artikel kali ini tentang Html Source Tag
dengan adanya artikel Html Source Tag yang admin bagikan kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan atau artikel menarik selanjutnya dan terimaksih telah berkunjung.
Anda sekarang membaca artikel Html Source Tag dengan alamat link https://cararootflashandroid.blogspot.com/2012/01/html-source-tag.html
