Cara Membuat Gambar Berderet ke Samping di HTML
Dalam pengembangan web, seringkali kita perlu menampilkan gambar-gambar secara berjajar di sebelah satu sama lain. Ini bisa sangat bermanfaat untuk membuat galeri gambar, daftar produk, atau tampilan visual lainnya. Dalam kesempatan ini akan menjelaskan langkah-langkah praktis bagaimana cara membuat tata letak gambar berjajar horizontal pada halaman HTML.
Langkah 1: Mempersiapkan Struktur Dasar HTML
Langkah pertama melibatkan penyiapan struktur dasar HTML untuk halaman web. Ini melibatkan penggunaan elemen dasar seperti <html>, <head>, <body>, dan lainnya. Di dalam elemen <body>, kita akan menambahkan elemen-elemen yang akan menampilkan gambar-gambar.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tata Letak Gambar Berjajar Horizontal</title>
</head>
<body>
<!-- Area penampilan gambar -->
</body>
</html>Langkah 2: Menambahkan Gambar-gambar
Selanjutnya, kita perlu menambahkan elemen <img> untuk setiap gambar yang akan ditampilkan. Pastikan untuk memberikan atribut src dengan URL gambar yang benar.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tata Letak Gambar Berjajar Horizontal</title>
</head>
<body>
<img src="gambar1.jpg" alt="Gambar 1">
<img src="gambar2.jpg" alt="Gambar 2">
<img src="gambar3.jpg" alt="Gambar 3">
</body>
</html>Langkah 3: Menggunakan CSS untuk Tata Letak
Agar gambar-gambar tersebut berjajar horizontal, kita perlu menggunakan CSS untuk mengatur tata letaknya. Kita akan menggunakan properti display: inline-block; pada elemen-elemen gambar.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
img {
display: inline-block;
margin: 10px; /* Untuk memberikan jarak antar gambar */
}
</style>
<title>Tata Letak Gambar Berjajar Horizontal</title>
</head>
<body>
<img src="gambar1.jpg" alt="Gambar 1">
<img src="gambar2.jpg" alt="Gambar 2">
<img src="gambar3.jpg" alt="Gambar 3">
</body>
</html>Dalam contoh di atas, CSS yang disisipkan dalam elemen <head> menggunakan properti display: inline-block; untuk mengatur gambar-gambar agar berjajar horizontal. Properti margin digunakan untuk memberikan ruang di antara gambar-gambar.
Kesimpulan
Dengan mengikuti panduan di atas, Anda dapat dengan mudah membuat tata letak gambar berjajar horizontal pada halaman web HTML. Dengan memanfaatkan elemen <img> untuk gambar dan CSS untuk mengendalikan tata letaknya, Anda dapat menghasilkan tampilan visual yang menarik dan sesuai dengan keperluan proyek Anda. Jangan ragu untuk menyesuaikan properti CSS sesuai dengan preferensi desain Anda.
