Cara Membuat Website Toko Bangunan dengan HTML dan CSS

By Posted on

Cara Membuat Website Toko Bangunan dengan HTML  dan CSS – Di era digital ini, memiliki kehadiran online menjadi semakin penting bagi bisnis apa pun, termasuk toko bangunan. Dengan memiliki website, toko bangunan dapat memperluas jangkauan pasar mereka, menarik pelanggan baru, dan memberikan pengalaman berbelanja yang lebih baik kepada pelanggan yang sudah ada.

Namun, bagi pemilik toko yang belum memiliki pengalaman dalam pembuatan website, ide ini mungkin terdengar menakutkan. Tapi jangan khawatir! Dalam panduan ini, haikalweb akan membimbing Anda langkah demi langkah untuk membuat website toko bangunan yang menarik menggunakan HTML dan CSS. Tidak diperlukan pengalaman sebelumnya dalam pengkodean. Anda akan belajar bagaimana membuat halaman web yang menampilkan produk Anda secara menarik dan profesional.

Dengan menggunakan teknologi sederhana seperti HTML dan CSS, Anda dapat menciptakan situs web yang fungsional dan menarik tanpa harus bergantung pada platform atau jasa pembuatan situs web yang mahal. Jadi, mari kita mulai dan jelajahi dunia pembuatan website untuk toko bangunan!

Alat yang Harus Anda Siapkan

Berikut ini beberapa alat yang harus Anda siapkan untuk dapat membuat website toko bangunan dengan html dan css:

  • Perangkat Laptop,
  • Web browser (Disarankan menggunakan Chrome),
  • Text Editor Code (Sublime Text),
  • Niat yang kuat.

Cara Membuat Website Toko Bangunan dengan HTMl dan CSS

1. Buat Folder Project Website Toko Bangunan

Pertama, buatlah sebuah folder di dalam komputer Anda untuk menyimpan semua file terkait proyek website toko bangunan ini. Beri nama folder sesuai dengan keinginan Anda, misalnya “Website_Toko_Bangunan“.

2. Buat Folder Img

Di dalam folder proyek Anda, buatlah folder baru dengan nama “img“. Folder ini akan digunakan untuk menyimpan semua gambar yang akan Anda gunakan di website Anda, seperti gambar produk bangunan. Download gambar disini untuk dapat menerapkannya dalam project toko bangunan.

Artikel Terkait:  Cara Membuat Web Berita dengan HTML dan CSS

3. Buat Sebuah File website_toko_bangunan.html

Sekarang, mari kita mulai membuat file HTML untuk halaman website toko bangunan Anda. Ikuti langkah-langkah ini:

  • Buka editor teks atau IDE (Integrated Development Environment) seperti Notepad, Visual Studio Code, atau Sublime Text.
  • Buat file baru dan simpan dengan nama “website_toko_bangunan.html” di dalam folder proyek Anda.
  • Mulailah dengan struktur dasar HTML berikut ini:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toko Bangunan</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <header>
        <h1>Toko Bangunan ABC</h1>
        <nav>
            <ul>
                <li><a href="#">Beranda</a></li>
                <li><a href="#">Produk</a></li>
                <li><a href="#">Tentang Kami</a></li>
                <li><a href="#">Kontak</a></li>
            </ul>
        </nav>
    </header>

    <section class="produk">
        <div class="item">
            <img src="img/produkbangunan1.jpg" alt="Deskripsi Produk 1">
            <h2>Nama Produk 1</h2>
            <p>Harga: $100</p>
            <p>Deskripsi singkat tentang produk 1.</p>
        </div>

        <div class="item">
            <img src="img/produkbangunan2.jpg" alt="Deskripsi Produk 2">
            <h2>Nama Produk 2</h2>
            <p>Harga: $150</p>
            <p>Deskripsi singkat tentang produk 2.</p>
        </div>

        <!-- Tambahkan lebih banyak item produk jika diperlukan -->
    </section>

    <footer>
        <p>Hak Cipta © 2024 Toko Bangunan ABC. All rights reserved.</p>
    </footer>

</body>
</html>
 

4. Buat File style.css

Selanjutnya, mari buat file CSS untuk mengatur tampilan website Anda. Berikut langkah-langkahnya:

  • Di dalam folder proyek, buatlah file baru dengan nama “style.css“.
  • File ini akan digunakan untuk menambahkan gaya dan tata letak ke halaman website Anda.
/* Reset CSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Styling Header */
header {
    background-color: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
}

header h1 {
    margin-bottom: 10px;
}

nav ul {
    list-style-type: none;
}

nav ul li {
    display: inline;
    margin-right: 20px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
}

/* Styling Section Produk */
.produk {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 20px;
}

.item {
    width: 300px;
    margin-bottom: 20px;
    background-color: #f4f4f4;
    padding: 10px;
    text-align: center;
    border-radius: 5px;
}

.item img {
    width: 100%;
    border-radius: 5px;
    margin-bottom: 10px;
}

/* Styling Footer */
footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px;
    position: fixed;
    bottom: 0;
    width: 100%;
}
 

5. Mengubah Produk Toko Bangunan

Sekarang, saatnya untuk menambahkan konten ke website Anda, termasuk daftar produk toko bangunan. Berikut adalah langkah-langkahnya:

  • Dalam file “website_toko_bangunan.html“, tambahkan elemen HTML untuk menampilkan produk:
<div class="produk">
    <img src="img/produk1.jpg" alt="Deskripsi Produk">
    <h2>Nama Produk</h2>
    <p>Harga: $100</p>
    <p>Deskripsi singkat tentang produk.</p>
</div>
<div class="produk">
    <img src="img/produk1.jpg" alt="Deskripsi Produk">
    <h2>Nama Produk</h2>
    <p>Harga: $100</p>
    <p>Deskripsi singkat tentang produk.</p>
</div>
 
  • Ganti “img/produkbangunan1.jpg” dengan path gambar sesuai dengan nama dan lokasi gambar produk Anda di folder “img“.
  • Anda dapat menyalin dan menempelkan blok ini untuk setiap produk yang ingin Anda tampilkan.
Artikel Terkait:  Cara Membuat Website Toko Hijab dengan HTML dan CSS

6. Save & View Tampilan

Simpan semua perubahan yang Anda buat dalam file HTML dan CSS. Buka file “website_toko_bangunan.html” di browser web Anda untuk melihat tampilan website Anda. Pastikan untuk melakukan uji coba untuk memastikan bahwa semua elemen dan tautan berfungsi dengan baik.

Penutup

Dengan mengikuti langkah-langkah di atas, Anda sekarang telah membuat website toko bangunan sederhana menggunakan HTML dan CSS. Teruslah eksplorasi dan tambahkan fitur serta desain tambahan sesuai kebutuhan Anda!

Related posts: