Cara Membuat Gambar ke Samping di HTML – Dalam dunia web design, kemampuan untuk menyusun gambar secara berderet ke samping tidak hanya meningkatkan estetika halaman web Anda, tetapi juga memberikan pengalaman visual yang menarik bagi pengunjung. Dengan langkah-langkah yang mudah dipahami ini, Anda telah mempelajari bagaimana mengimplementasikan teknik ini menggunakan HTML, bahkan jika Anda seorang pemula sekalipun.
Alat yang Harus Disiapkan
- Perangkat laptop,
- Notepad++ (Editor kode teks),
- Google Chrome (peramban web),
- Niat yang kuat.
Cara Membuat Gambar ke Samping di HTML
1. Buat Folder Gambar Proyek Berderet
Langkah pertama adalah membuat folder project untuk menyimpan semua file yang akan digunakan dalam pembuatan gambar berderet.
2. Buat Folder “img”
Di dalam folder project, buatlah sebuah folder baru dengan nama ” img “. Folder ini akan digunakan untuk menyimpan semua gambar yang akan ditampilkan di halaman web. Download gambar disini untun di implementasikan dalam proyek gambar berderet ke samping.
3. Buat File “gambar_berderet.html”
Buatlah sebuah file HTML baru dengan nama ” gambar_berderet.html ” di dalam folder project. File ini akan menjadi halaman web tempat kita akan menampilkan gambar-gambar.
Berikut ini source code html yang harus anda tambahkan untuk membuat gambar berderet di html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gallery</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Gallery</h1>
</header>
<div class="gallery">
<img src="img/gambar1.jpg" alt="Image 1">
<img src="img/gambar2.jpg" alt="Image 2">
<img src="img/gambar3.jpg" alt="Image 3">
<!-- Add more images here -->
</div>
<footer>
<p>© 2024 Gallery. All rights reserved.</p>
</footer>
</body>
</html>
4. Buat File “style.css”
Selanjutnya, buatlah file CSS dengan nama ” style.css ” di dalam folder project. File ini akan digunakan untuk mengatur tampilan dari gambar-gambar yang akan ditampilkan.
Berikut ini source code css yang harus anda tambahkan untuk membuat gambar berderet di html:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f2f2f2;
}
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px 0;
}
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 20px;
}
.gallery img {
width: 300px;
height: auto;
margin: 10px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease-in-out;
}
.gallery img:hover {
transform: scale(1.1);
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px 0;
position: fixed;
bottom: 0;
width: 100%;
}5. Mengubah Tampilan Gambar Berderet
Sekarang, kita akan menambahkan gambar-gambar ke dalam halaman web dan melihat bagaimana tampilannya berderet ke samping.
div class="gallery">
<img src="img/gambar1.jpg" alt="Image 1">
<img src="img/gambar2.jpg" alt="Image 2">
<img src="img/gambar3.jpg" alt="Image 3">
<!-- Add more images here -->
</div>Pastikan untuk menyimpan gambar-gambar yang ingin Anda tampilkan di dalam folder “img” yang telah dibuat sebelumnya.
6. Simpan & Lihat Tampilan
Setelah semua langkah di atas dilakukan, simpan file-file Anda dan buka file “gambar_berderet.html” menggunakan browser web. Anda sekarang seharusnya dapat melihat gambar-gambar berderet ke samping sesuai dengan yang diinginkan.
Pratinjau hasil
Berikut ini preview hasil gambar berderet di html jika Anda berhasil membuatnya:
Penutup
Dengan terampil dalam menata gambar secara berderet, Anda dapat menghadirkan halaman web yang menarik dan memikat bagi pengunjung, serta meningkatkan daya tarik konten Anda di mata mesin pencari. Teruslah melakukan eksplorasi dan kembangkan kreativitas Anda dalam mendesain halaman web yang menginspirasi. Semoga panduan ini bermanfaat dan memberikan kontribusi positif bagi pengembangan halaman web Anda. Terima kasih telah membaca!
