Html Picture Tag
HTML picture, Referensi mencar ilmu HTML <picture>, Tutorial html picture, Penjelasan html <picture>
Tutorial HTML <picture>
Element HTML picture mendefinisikan sebagai element gambar pada HTML dan sebagai wadah dari element
<img> dan element <source>1234<picture> <source media="(min-width: 350px)" srcset="/background-html.png"/> <img alt="demo" src="/html-tutorial.png"/> </picture> Dalam penerapannya pada HTML, kalau element
<picture> didalamnya terdapat element <source>, maka element <source> tersebut wajib memiliki attribute srcset sebagai sumber media yang akan dimuat
Penggunaan element
<source> didalam element html <picture> memungkinkan penulis mendeklarasikan atau memberi petunjuk kepada user dan browser wacana sumber gambar yang akan dipakai baik itu menurut kepadatan piksel layar, ukuran viewport, format gambar, dan faktor lainnya, (penggunaan attribute media pada element <source> diperlukan).Tips : Tambahkan element HTML
<img>, didalam element <picture>, sebagai back-Up kalau browser yang dipakai oleh user tidak mendukung element <picture> dan <source>Contoh HTML <picture>
<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="Element HTML picture mendefinisikan sebagai element gambar pada HTML dan sebagai wadah dar HTML picture Tag" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGjBV9YqVjIlyaKn7ajfWD9iCJ1JHsoC8mikUmpTGMEOirgKy1O5g4Aor7iREnX56qPtVNVayh4V3JNNsISh9DbOJVICidXhZAqNz5o387OKzLzXZPnIAaXNysCqVyl03_5zktmqhQdJKH/s1600/html-tutorial.png"/> </picture> <p> Perlebar dan perkecil area preview untuk melihat fungsinya. </p> </body> </html>Contoh HTML <picture>
<img alt="demo" src="/s72/background-html.png"/> <picture> <source media="(min-width: 100px)" srcset="/s1600/background-html.png"/> <img alt="demo" src="/s72/background-html.png"/> </picture><!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> <style> img { width :100% } </style> </head> <body> <img alt="Element HTML picture mendefinisikan sebagai element gambar pada HTML dan sebagai wadah dar HTML picture Tag" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN0M1VSJuwACkf9eJc_zFY1Stihw24u7_gH4vYNhyphenhyphenWZGPHR36omdozVJrk764aTyv3JrtEaht1HAeAQRbJHdd0966zAVEf6h5lzMq5O5sROMQ7HDd8ArV1ljOkWxHDXGU-qKTn89gGX5n3/s72/background-html.png"/> <hr> <picture> <source media="(min-width: 100px)" srcset="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN0M1VSJuwACkf9eJc_zFY1Stihw24u7_gH4vYNhyphenhyphenWZGPHR36omdozVJrk764aTyv3JrtEaht1HAeAQRbJHdd0966zAVEf6h5lzMq5O5sROMQ7HDd8ArV1ljOkWxHDXGU-qKTn89gGX5n3/s1600/background-html.png"/> <img alt="Element HTML picture mendefinisikan sebagai element gambar pada HTML dan sebagai wadah dar HTML picture Tag" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN0M1VSJuwACkf9eJc_zFY1Stihw24u7_gH4vYNhyphenhyphenWZGPHR36omdozVJrk764aTyv3JrtEaht1HAeAQRbJHdd0966zAVEf6h5lzMq5O5sROMQ7HDd8ArV1ljOkWxHDXGU-qKTn89gGX5n3/s72/background-html.png"/> </picture> <p>Perlebar dan perkecil area preview</p> <p>gambar 1 blur dimedia screen ukuran besar</p> <p>Sedangkan pada gambar 2 gambar terlihat stabil</p> </body> </html>Global Attributes:
Element <picture> meliputi Global Attributes HTML.
Event Attributes:
Element <picture> meliputi Event Attributes HTML.
Desktop
| Element | Chrome | Safari | Firefox | Opera | IE | Edge |
<picture> | 38 | 9.1 | 38 | 25 | - | 13 |
Mobile
| Element | Android webview | Chrome Android | Edge mobile | Firefox Android | IE mobile | Opera Android | iOS Safari |
<picture> | 38 | 38 | Ya | 38 | Ya | 25 | 9.3 |
Default CSS :
Browser yang support dengan element
<picture>, memiliki nilai default :/* tidak ada */