Belajar Image Element dan Picture Element di HTML

Bagi kamu yang ingin mendalami HTML, elemen img dan picture adalah topik yang wajib dikuasai. Mari kita bahas mengenai kedua elemen ini.

IMAGE ELEMENT

Elemen image atau <img> adalah elemen HTML yang paling dasar untuk menyisipkan gambar ke dalam halaman web. Elemen ini memiliki atribut penting, seperti:
  • src : Menentukan alamat (URL) dari file gambar yang akan ditampilkan.
  • alt : Teks alternatif yang akan ditampilkan jika gambar tidak dapat dimuat atau jika pengguna menggunakan pembaca layar. Teks alt sangat penting untuk aksesibilitas.
  • width :  Menentukan lebar gambar dalam skala piksel.
  • height : Menentukan tinggi gambar dalam skala piksel.
  • title :  Teks tooltip yang akan muncul saat pengguna mengarahkan mouse ke gambar.

Contoh Penggunaan

Hasilnya


PICTURE ELEMENT

Elemen picture atau <picture> diperkenalkan dalam HTML5 untuk memberikan fleksibilitas dalam menyajikan gambar yang berbeda-beda berdasarkan kemampuan perangkat pengguna. Dengan elemen ini, kita dapat mengoptimalkan tampilan gambar untuk berbagai ukuran layar, resolusi, dan perangkat.

Contoh Penggunaan


Penjelasan :
  • <picture> : Elemen induk yang menampung berbagai versi gambar.
  • <source> : Elemen annak yang mendefinisikan sumber gambar dan media query.
  • media : Atribut pada <source> yang menentukan kondisi tampilan gambar.
  • srcset : Atribut pada <source> yang menunjukkan ke sumber gambar.
  • <img> : Elemen gambar standar sebagai fallback jika kondisi media lainnya tidak terpenuhi.

Hasilnya


Hasil di atas merupakan tampilan gambar jika halaman browser dibuka selebar 400 pixel.



Hasil di atas merupakan tampilan gambar jika halaman browser dibuka selebar 800 pixel.

Kurang lebih seperti itulah penjelasan singkat mengenai dua elemen HTML yaitu Image Element dan Picture Element. Semoga penjelasan ini membantu teman-teman yang ingin belajar HTML.

Komentar

Posting Komentar

Postingan populer dari blog ini

Belajar CSS Dasar

Gambar
APA ITU CSS? Cascading Style Sheets (CSS) adalah bahasa yang digunakan untuk mengatur tampilan dan gaya dari sebuah halaman web. Jika kita membandingkan pembuatan sebuah website dengan membangun rumah, maka HTML adalah kerangka dan struktur dasar rumah tersebut. Sedangkan CSS adalah cat, perabotan, dan dekorasi yang membuat rumah tersebut menjadi lebih tertata rapih dan indah. Fungsi CSS Berikut beberapa fungsi CSS: CSS memungkinkan kita untuk memisahkan konten (HTML) dari tampilan (CSS). Hal ini dapat membuat kode lebih teroganisir, mudah dipelihara, dan dapat digunakan kembali. CSS dapat membuat tampilan lebih konsisten dengan menerapkan gaya yang sama ke seluruh elemen pada halaman web. CSS dapat membuat halaman website lebih responsiif dimana dapat menyesuaikan tampilannya secara otomatis berdasarkan ukuran layar perangkat. CSS yang ditulis dengan baik dan benar dapat meningkatkan kecepatan dalam loading halaman website. Struktur CSS  Selektor: Menentukan elemen HTML mana yang ...
Baca selengkapnya

Konfigurasi 3 MikroTik di Virtual Box

Gambar
Konfigurasi 3 MikroTik di Virtual Box Berikut contoh langkah sederhana membuat konfigurasi 3 MikroTik di Virtual Box: 1. Buat 3 MikroTik di Virtual Box 2. Pilih MIKROTIK_R1 lalu setting Adapter 1 menjadi Bridged Adapter 3. Setting Adapter 2 di MIKROTIK_R1 menjadi Internal Network  dan beri nama Lan1 4. Setting Adapter 3 di MIKROTIK_R1 menjadi Internal Network dan beri nama Lan2 5. Pilih MIKROTIK_R2 lalu setting Adapter 1 menjadi Internal Network dan beri nama Lan1 6. Pilih MIKROTIK_R3 lalu setting Adapter 1 menjadi Internal Network dan beri nama Lan2 7. Jalankan  MIKROTIK_R1  kemudian masuk ke system identity dan setting nama menjadi router_1 8. Masuk ke interface lalu setting ether1 menjadi eth1_ISP 9. Setting ether2 menjadi eth2_R2 10. Setting ether3  menjadi eth3_R3 11. Masuk ke ip address dan tambahkan ip address ke eth1_ISP 12. Ping gateway 13. Masuk ke ip route lalu tambahkan dst-address 14. Ping 8.8.8.8 15. Ping detik.com      Belum tersa...
Baca selengkapnya

Mengenal dan Berlatih Membuat Form Input di HTML

Gambar
FORM DALAM HTML Form dalam HTML adalah elemen yang sangat penting untuk membuat halaman web menjadi interaktif. Dengan form, pengguna dapat memasukkan data seperti nama, email, pesam, dan lain sebagainya. Data yang dimasukkan kemudian dapat dikirimkan ke server untuk diproses lebih lanjut. Struktur Dasar Form Sebuah form dalam HTML diawali dengan tag <form> dan diakhiri dengan tag </form> . Di antara kedua tag ini, kita dapat menempatkan berbagai jenis elemen input seperti teks, password, checkbox, radio button, dan lain-lain. Tag form memiliki dua atribut utama, yaitu: action : Atribut action menentukan kemana data form akan dikirim setelah tombol submit ditekan. method : Atribut method menentukan metode pengiriman data. Dan ada dua metode utama, antara lain: get : Data akan ditambahkan ke URL setelah tanda tanya (?) dan akan terlihat di address bar browser. Tidak disarankan untuk mengirim data sensitif menggunakan metode ini karena data dapat dilihat oleh siapa saja. ...
Baca selengkapnya