Block and Inline ,Image ,Picture Element di HTML

pada tanggal

1. Block dan Inline di HTML

Dalam HTML, elemen dapat dibagi menjadi dua kategori utama: block-level elements dan inline elements. Keduanya berperan penting dalam struktur dan tampilan halaman web. Mari kita bahas perbedaannya secara detail.

a. Block Elements

Elemen block adalah elemen yang menempati seluruh lebar halaman atau ruang yang tersedia, dan selalu dimulai dari baris baru. Elemen ini akan menambahkan "break line" (baris baru) setelah elemen tersebut, membuat elemen berikutnya muncul di bawahnya.

Contoh Block Elements:

  • <div>
  • <p>
  • <h1> sampai <h6>
  • <header>, <footer>, <section>, <article>, dll.

Ciri-ciri Block Elements:

  • Mengisi seluruh lebar dari elemen induknya.
  • Dimulai di baris baru, elemen berikutnya muncul di bawahnya.
  • Dapat berisi elemen lain (baik block atau inline).

Contoh Pengunaan :



b. Inline Elements

Berbeda dengan elemen block, elemen inline hanya mengambil ruang yang dibutuhkan oleh kontennya dan tidak memulai baris baru. Elemen inline tetap berada dalam baris yang sama dengan elemen lainnya.

Contoh Inline Elements:

  • <span>
  • <a>
  • <img>
  • <strong>, <em>, <b>, <i>

Ciri-ciri Inline Elements:

  • Hanya mengambil ruang selebar kontennya.
  • Tidak memulai baris baru, elemen berikutnya berada di baris yang sama.
  • Biasanya digunakan untuk bagian kecil dari teks atau gambar.


Perbedaan Utama:

  • Block-level elemen memulai baris baru dan memenuhi lebar halaman, sementara inline elemen berada di baris yang sama tanpa memengaruhi elemen lain

2. Image di HTML

Gambar adalah elemen yang sangat penting dalam halaman web, baik untuk mempercantik tampilan atau menyampaikan informasi visual. Di HTML, elemen <img> digunakan untuk menampilkan gambar.

a. Sintaks Dasar <img>:



Atribut Penting:

  • src: Menentukan lokasi gambar. Ini bisa berupa URL absolut (alamat penuh) atau URL relatif (alamat lokal).
  • alt: Alternatif teks yang ditampilkan jika gambar tidak bisa dimuat. Ini penting untuk aksesibilitas dan SEO.
  • width dan height: Menentukan ukuran gambar. Sebaiknya gunakan ukuran yang proporsional untuk menjaga kualitas gambar.

Contoh Penggunaan:



b. Optimalisasi Gambar:

  1. Ukuran File: Gunakan gambar dengan ukuran file yang optimal agar tidak membebani waktu muat halaman.
  2. Format Gambar: Gunakan format gambar yang sesuai. Format umum adalah:
    • JPEG: Baik untuk gambar dengan banyak warna dan detail.
    • PNG: Baik untuk gambar dengan latar belakang transparan.
    • SVG: Baik untuk grafik vektor yang skalabel tanpa kehilangan kualitas.
  3. Responsive Images: Pastikan gambar bersifat responsive agar tampil baik di semua ukuran layar.

3. Picture Element di HTML

Elemen <picture> memberikan kontrol lebih saat menyajikan gambar di halaman web, terutama untuk membuat gambar responsif dan adaptif di berbagai perangkat dan ukuran layar. Elemen ini memungkinkan pengembang menentukan gambar yang berbeda untuk kondisi tampilan yang berbeda (misalnya ukuran layar, resolusi).

a. Sintaks Dasar <picture>:

Komponen-komponen:

  • <source>: Digunakan untuk menentukan gambar alternatif berdasarkan kondisi tertentu.
    • srcset: Menentukan URL gambar yang akan digunakan.
    • media: Menentukan kondisi (seperti ukuran layar) di mana gambar tersebut akan digunakan.
  • <img>: Digunakan sebagai fallback jika kondisi yang ditentukan dalam <source> tidak terpenuhi.

Contoh Penggunaan:



Pada contoh di atas, jika lebar layar pengguna kurang dari 600px, browser akan menampilkan small.jpg. Jika lebih dari 600px, browser akan menampilkan large.jpg.



Satu gambar yang berukuran kecil (small.jpg) untuk perangkat seperti ponsel.



Satu gambar yang berukuran besar (large.jpg) untuk perangkat dengan layar lebih besar, seperti komputer atau tablet.

b. Keunggulan Picture Element:

  1. Gambar Responsif: Mengizinkan kita menampilkan gambar yang sesuai berdasarkan ukuran perangkat, resolusi layar, atau kondisi lainnya.
  2. Optimalisasi Performa: Mengurangi beban transfer data dengan menampilkan gambar yang lebih kecil pada perangkat yang tidak membutuhkan resolusi tinggi.
  3. Dukungan untuk Berbagai Format Gambar: Anda bisa menyertakan gambar dengan format berbeda, seperti WebP atau JPEG, dan membiarkan browser memilih format terbaik yang didukung.

 Link Github:https://github.com/hxllxl-star/MATERI-5

 


Komentar

Posting Komentar