Beranda
CSS
HTML

Menampilkan Gambar di HTML dan CSS

Kode Violet
Menampilkan Gambar di HTML dan CSS

Halo semuanya! Di era digital seperti sekarang, tampilan visual menjadi bagian penting dari setiap halaman web.

Di artikel sebelumnya saya sudah pernah menjelaskan tentang Dasar Menampilkan Gambar di HTML. Nah, pada kesempatan ini kodeviolet.com akan membahas tentang Menampilkan Gambar di HTML dan CSS, supaya website kalian jadi lebih menarik dan informatif.

Menampilkan Gambar Menggunakan HTML

HTML menyediakan elemen <img> yang sangat mudah digunakan. Tag ini membutuhkan setidaknya atribut src (sumber gambar) dan alt (teks alternatif jika gambar tidak bisa dimuat).

<img src="https://analiswinter.com/wp-content/uploads/2025/06/Salah-satu-manfaat-utama-dari-pengolahan-ikan-melalui-teknik-fermentasi-adalah.png" alt="Fermentasi ikan" width="300" height="200">

Penjelasan Atribut:

Atribut Keterangan
src Alamat file gambar (bisa lokal atau URL)
alt Teks pengganti jika gambar gagal dimuat
width Lebar gambar dalam piksel
height Tinggi gambar dalam piksel

Menampilkan Gambar dengan CSS

CSS memungkinkan kalian menampilkan gambar sebagai background atau dengan pengaturan tambahan pada elemen gambar.

1. Menggunakan Background

.gambar-background {
  width: 400px;
  height: 250px;
  background-image: url('https://analiswinter.com/wp-content/uploads/2025/06/Salah-satu-manfaat-utama-dari-pengolahan-ikan-melalui-teknik-fermentasi-adalah.png');
  background-size: cover;
  background-position: center;
}

Kemudian HTML-nya:

<div class="gambar-background"></div>

2. Mengatur Gaya <img> dengan CSS

Kalian juga bisa mengatur tampilan <img> menggunakan CSS:

img {
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  max-width: 100%;
  height: auto;
}

Ini membuat gambar jadi responsif, memiliki sudut membulat, dan bayangan lembut.

Contoh HTML Lengkap

Berikut ini contoh lengkap struktur HTML yang menampilkan gambar menggunakan kedua metode di atas:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Menampilkan Gambar</title>
  <style>
    .gambar-background {
      width: 400px;
      height: 250px;
      background-image: url('https://analiswinter.com/wp-content/uploads/2025/06/Salah-satu-manfaat-utama-dari-pengolahan-ikan-melalui-teknik-fermentasi-adalah.png');
      background-size: cover;
      background-position: center;
      margin-bottom: 20px;
    }
    img {
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
      max-width: 100%;
      height: auto;
    }
  </style>
</head>
<body>
  <h1>Contoh Menampilkan Gambar</h1>

  <h2>1. Gambar sebagai Background</h2>
  <div class="gambar-background"></div>

  <h2>2. Gambar dengan Tag IMG</h2>
  <img src="https://analiswinter.com/wp-content/uploads/2025/06/Salah-satu-manfaat-utama-dari-pengolahan-ikan-melalui-teknik-fermentasi-adalah.png" alt="Fermentasi ikan">
</body>
</html>
DEMO

Tips Tambahan

  • Gunakan format gambar yang sesuai: JPEG untuk foto, PNG untuk gambar transparan, dan WebP untuk ukuran kecil dengan kualitas tinggi.
  • Selalu sediakan teks alternatif (alt) demi aksesibilitas dan SEO.
  • Hindari penggunaan gambar yang terlalu besar untuk mempercepat loading website.

Kesimpulan

Itulah tadi artikel dari kodeviolet.com tentang cara Menampilkan Gambar di HTML dan CSS. Semoga kalian makin jago dalam membangun tampilan website yang keren dan efisien. Sampai jumpa di artikel berikutnya!

Posting Komentar