Cara menggunakan menyisipkan gambar di css

Tutorial Belajar CSS: Membuat Gallery Gambar dengan HTML dan CSS

Table of Contents Show

Cara Menambahkan Bingkai Gambar dengan CSS
Membuat Gallery Gambar dengan HTML dan CSS
Bagaimana cara menyisipkan gambar dalam HTML?
Apa HTML yang benar untuk menyisipkan gambar latar?
Apa itu background
Kenapa gambar tidak bisa muncul di HTML?

18 Nov 15 | | Tutorial CSS | |

Bermodalkan pemahaman tentang CSS Box Model, dalam tutorial belajar CSS Duniaikom kali ini kita akan praktek membuat gallery gambar sederhana. Setiap gambar ini nantinya menggunakan bingkai yang dibuat dari CSS Box Model: border, padding dan margin.

Cara Menambahkan Bingkai Gambar dengan CSS

Untuk membuat bingkai gambar, kita tinggal menambahkan property border ke dalam tag <img>, seperti contoh berikut:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
   img {
     width: 300px;
     height: 200px;
     border: 4px solid #575D63;
   }
</style>
</head>
<body>
  <img src="autumn_lake.jpg">
</body>
</html>

Property border: 4px solid #575D63 akan menambahkan efek bingkai abu-abu gelap di sisi luar gambar. Agar bingkai ini lebih terlihat, saya akan menambahkan sedikit padding:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
   img {
     width: 300px;
     height: 200px;
     border: 4px solid #575D63;
     padding: 10px;
   }
</style>
</head>
<body>
  <img src="autumn_lake.jpg">
</body>
</html>

Sekarang, terdapat sedikit spasi antara gambar dengan border. Ini berasal dari penambahan property padding: 10px, yang artinya akan membuat jarak 10 pixel antara gambar dengan border.

Baik, 1 gambar selesai, mari kita mulai merancang gallery gambar dengan menambahkan 3 gambar lain.

Membuat Gallery Gambar dengan HTML dan CSS

Dengan penambahan 3 buah tag <img> lainnya, berikut kode HTML dan CSS yang saya gunakan:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
   img {
     width: 300px;
     height: 200px;
     border: 4px solid #575D63;
     padding: 10px;
   }
</style>
</head>
<body>
  <img src="autumn_lake.jpg"><img src="beach.jpg">
  <img src="berry.jpg"><img src="sakura.jpg">
</body>
</html>

Inilah salah satu keunggulan menggunakan CSS, dimana setiap penambahan element HTML baru, akan langsung dikenai kode CSS (selama selector CSS tersebut cocok dengan element HTML).

Pada kode di atas, selector CSS img akan membuat setiap tag <img> juga memiliki width, height, border dan padding yang sama dengan gambar pertama kita.

Tapi, bisa anda perhatikan setiap gambar saling menempel satu sama lain. Bagaimana cara menambah ruang atau spasi diantara gambar-gambar ini? Yup, saatnya kita menggunakan property margin:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
   img {
     width: 300px;
     height: 200px;
     border: 4px solid #575D63;
     padding: 10px;
     margin: 20px;
   }
</style>
</head>
<body>
  <img src="autumn_lake.jpg"><img src="beach.jpg">
  <img src="berry.jpg"><img src="sakura.jpg">
</body>
</html>

Hasilnya, untuk setiap gambar, akan terdapat margin sebesar 20 pixel.

Sebagai efek terakhir, bagaimana cara agar gambar-gambar ini tampil persis di tengah-tengah web browser?

Untuk ini kita akan menggunakan trik margin: auto. Nilai auto pada horizontal margin (sisi kiri dan kanan) akan membuat sebuah element HTML berada ditengah-tengah parent element-nya. Dalam kasus kita, ini akan menempatkan gallery tepat di tengah-tengah web browser.

Berikut hasil akhir gallery gambar:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
   body {
     width: 736px;
     margin: 10px auto;
     border: 2px solid black;
   }
   img {
     border: 4px solid #575D63;
     margin: 20px;
     padding: 10px;
     width: 300px;
     height: 200px;
   }
</style>
</head>
<body>
<img src="autumn_lake.jpg"><img src="beach.jpg">
<img src="berry.jpg"><img src="sakura.jpg">
</body>
</html>

Kali ini saya menambahkan sebuah selector baru: body. Untuk selector ini saya mengatur lebarnya sebesar 736 pixel, margin: 10px auto, dan efek bingkai melalui border: 2px solid black.

Dari mana datangnya angka 736 pixel? Angka ini berasal penjumlahan 2 lebar gambar. Untuk membuat sebuah kotak yang ‘pas’ membungkus gallery gambar, kita harus menghitung setiap sisi dari CSS Box Model.

Cara perhitungan ini sudah kita bahas pada tutorial sebelumnya: Cara Menghitung Lebar dan Tinggi CSS Box Model.

Lebar dan Tinggi dari sebuah element berasal dari penjumlahan width/height + padding + border + margin. Total lebar dari 1 gambar adalah: 300px width + 2*10px padding + 2*4px border + 2*20px margin = 368 pixel.

Karena saya ingin ada 2 gambar berdampingan, maka 368*2 = 736 pixel!

Tutorial kali ini menutup sesi pembahasan singkat tentang CSS Box Model di Duniailkom. Semoga anda bisa memahami ilustrasi dan contoh penggunaan CSS Box Model yang saya bahas di sini. CSS Box Model sangat penting untuk dipahami, tetapi sering juga membuat bingung.

Sebagai contoh, di dalam CSS juga dikenal konsep margin collapsing, yakni ‘menyatunya’ 2 buah margin vertikal ketika saling berhimpitan. Serta trik penggunaan CSS Reset dalam membuat design layout. Karena materi seperti perlu pembahasan yang cukup panjang dan detail, saya akan membahasnya di eBook CSS Uncover Duniailkom.

eBook CSS Uncover Duniailkom

Jika anda ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih lengkap, mulai dari dasar hingga fitur terbaru CSS3 seperti animasi dan web responsive. Penjelasan lebih lanjut bisa ke: eBook CSS Uncover Duniailkom.

Bagaimana cara menyisipkan gambar dalam HTML?

Menambahkan Gambar di HTML Gambar dapat kita tambakan di HTML dengan menggunakan tag <img> . Tag ini memiliki atribut wajib, yakni src . Jika kita tidak mengisi atribut src , maka gambar tidak akan ditampilkan. Alamat URL gambar pada atribut src dapat berupa URL maupun alamat path.

Apa HTML yang benar untuk menyisipkan gambar latar?

Tikkan <div style="background-image: url('[image url]');"> di baris berikutnya. Inilah label HTML untuk menambahkan gambar latar belakang pada halaman web. Ganti "[image url]" dengan lokasi URL asli dari gambar yang diinginkan.

Apa itu background

background-image adalah teknik pada css untuk menampilkan gambar menjadi latar belakang alias background, baik itu pattern maupun gambar ukuran penuh.

Kenapa gambar tidak bisa muncul di HTML?

Salah satu penyebab gambar tidak muncul di web adalah kesalahan nama folder gambar di kode HTML. Kesalahan tersebut membuat server tidak akan bisa menemukan gambar yang diminta untuk ditampilkan. Jika nama folder sudah dikoreksi, akses kembali halaman website yang gambarnya tidak muncul.