Dasar Atribut Tagging picture Pada Bahasa Pemrograman HTML

Dasar Atribut Tagging <picture> Pada Bahasa Pemrograman HTML

Jokam-Informatika.com - Picture adalah sebuah kata yang diambil dari bahasa inggris dan memiliki arti sebagai "Gambar", disini picture sendiri memiliki kemampuan untuk menyediakan sebuah gambar ketika pengunjung ingin melihat konten gambar tersebut. Selain menampilkan, picture berfungsi untuk menentukan gambar mana yang akan ditampilkan sesuai dengan ukuran layar dari perangkat pengunjung. Sehingga gambar dan layar perangkat akan menjadi cocok atau pas tidak kelebihan(terlalu besar) dan terlalu kecil.

Seperti apakah fungsi dari Tagging Picture pada HTML ?

Simak ulasan berikut ini untuk mengetahuinya,

Picture - Adalah salah satu tag pada pemrograman HTML yang memiliki kemampuan untuk menyesuaikan keadaan layar pengunjung dengan konten yang ada, penyesuaian ini meliputi ukuran daripada konten. Sedangkan perangkat pengjung tentunya akan berbeda satu dengan pengunjung yang lainnya, maka apabila konten gambar memiliki ukuran gambar 2000 piksel tersebut pastinya terlalu besar untuk diakses pengjung yang melalui perangkat layar kecil seperti smartphone. Begitu juga sebaliknya apabila konten gambar kecil maka sangat tidak etis apabila disuguhkan pada perangkat pengujung yang mengakses gambar melalui laptop atau komputer mereka, pastinya merasa konten sangat kecil dan susah untuk di lihat maksud dari konten.

Apabila sobat ingin menerapkannya pada website kalian maka sobat dapat mempelajari cara pengkodean di bawah ini :

Syntax :

<picture> Konten Gambar </picture>

Penerapan Syntax :

<picture>
 
 <!-- Gambar untuk layar 1200 pixel keatas -->
 <source media="(min-width: 1200px)" srcset="https://1.bp.blogspot.com/-uBgFxChE-cM/W48AGl5jwwI/AAAAAAAAEuE/q81m1UcAiOkxdhjJBaKeiT3rbI3ebSp8QCLcBGAs/s640/Picture.jpg">
 
 <!-- Gambar untuk layar 500 pixel keatas -->
 <source media="(min-width: 500px)" srcset="https://1.bp.blogspot.com/-uBgFxChE-cM/W48AGl5jwwI/AAAAAAAAEuE/q81m1UcAiOkxdhjJBaKeiT3rbI3ebSp8QCLcBGAs/s640/Picture.jpg">
 
 <!-- Gambar untuk layar 500 pixel kebawah -->
 <img alt="Picture" style="width:auto;" src="https://2.bp.blogspot.com/-UsuqRL6l94A/W48ArnmdFlI/AAAAAAAAEuQ/i9hMh9WTbYopHHI6GlKEbCWIpQv_7Wj-wCLcBGAs/s200/Logo.jpg">

</picture>

Ingin mencobanya ?
Klik disini : JALANKAN CODE



Mungkin itu yang dapat saya sampaikan didalam artikel saya yang berjudulkan Dasar Atribut Tagging <picture> Pada Bahasa Pemrograman HTML.
Semoga apa yang sudah saya sampaikan dapat bermanfaat bagi anda maupun orang lain yang ingin mengetahui tentang Tagging <picture> pada HTML.
Sekian dan terimakasih.