Cara Membuat Website Toko Sepatu Menggunakan HTML dan CSS

by

Cara Membuat Website Toko Sepatu Menggunakan HTML dan CSS – Tertarik untuk memulai bisnis online dengan menjual sepatu? Jika iya, kamu berada di tempat yang tepat! Dalam panduan ini, kami akan membimbingmu melalui langkah-langkah detail untuk membuat website toko sepatu menggunakan HTML dan CSS.

Jangan khawatir jika kamu pemula, karena panduan ini dirancang khusus untukmu yang baru memasuki dunia pengembangan web. Dalam tahap ini TeknoTask telah merangkum panduan cara membuat web toko sepatu dengan mudah hanya menggunakan text editor Sublime Text.

Apa Itu Web Toko Sepatu?

Sebuah website toko sepatu adalah situs web yang diciptakan dan dioperasikan oleh bisnis penjualan sepatu. Fungsinya adalah memberikan informasi produk, mempromosikan berbagai sepatu, dan memfasilitasi transaksi jual beli secara online. Tujuan utamanya adalah memberikan pengalaman belanja yang mudah, informatif, dan aman bagi para pelanggan yang sedang mencari sepatu yang diinginkan.

Beberapa fitur umum yang sering ditemui dalam website toko sepatu meliputi:

  • Katalog Produk: Menampilkan berbagai jenis sepatu dengan deskripsi, gambar, dan informasi harga.
  • Kategori dan Filter: Mengelompokkan produk ke dalam kategori tertentu dan menyediakan filter untuk memudahkan pelanggan menemukan sepatu yang diinginkan.
  • Ukuran dan Warna: Memberikan opsi ukuran dan warna untuk setiap model sepatu, beserta informasi ketersediaan stok.
  • Deskripsi Produk: Menyajikan informasi rinci tentang bahan, desain, dan fitur khusus dari setiap sepatu.
  • Keranjang Belanja: Fasilitas untuk menambahkan sepatu ke keranjang belanja dan melanjutkan proses pembelian.

Website toko sepatu mempermudah konsumen untuk mencari dan membeli sepatu tanpa harus keluar rumah. Selain itu, memberikan keuntungan bagi pemilik bisnis sepatu dengan meningkatkan jangkauan pasar dan mempermudah manajemen inventaris serta transaksi.

Artikel Terkait:   Cara Membuat HTML Menjadi Website

Cara Membuat Website Toko Sepatu Sederhana Menggunakan HTML dan CSS

1. Persiapkan Struktur Folder

Sobat Tekno, langkah pertama adalah membuka manajer file dan membuat folder baru untuk proyek website toko sepatu. Misalnya, beri nama folder “WebsiteTokoSepatu”. Dalam folder tersebut, buat subfolder “Gambar” untuk menyimpan gambar sepatu, contoh struktur foldernya sebagai berikut:

WebsiteTokoSepatu

  • Gambar
    – sepatu1.jpg
    – sepatu2.jpg
    – sepatu3.jpg
  • index.html
  • style.css

Untuk beberapa gambar produk sepatunya bisa kamu unduh disini.

2. Buat File HTML Utama (index.html)

Buka Sublime Text dan buat file baru dengan nama “index.html” dalam folder proyek, selanjutnya isi file ini dengan struktur HTML dibawah ini.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Toko Sepatu</title>
</head>
<body>
    <header>
        <h1>Toko Sepatu TeknoTask</h1>
        <p>Temukan Sepatu Terbaik Untuk Anda</p>
    </header>

    <section class="produk">
        <div class="produk-item">
            <img src="sepatu/sepatu1.jpg" alt="Sepatu 1">
            <h2>Sepatu Casual</h2>
            <p class="harga">Rp 500,000</p>
            <button>Beli Sekarang</button>
        </div>

        <div class="produk-item">
            <img src="sepatu/sepatu2.jpg" alt="Sepatu 2">
            <h2>Sepatu Olahraga</h2>
            <p class="harga">Rp 700,000</p>
            <button>Beli Sekarang</button>
        </div>

                <div class="produk-item">
            <img src="sepatu/sepatu3.jpg" alt="Sepatu 3">
            <h2>Sepatu Olahraga</h2>
            <p class="harga">Rp 700,000</p>
            <button>Beli Sekarang</button>
        </div>

                <div class="produk-item">
            <img src="sepatu/sepatu4.jpg" alt="Sepatu 4">
            <h2>Sepatu Olahraga</h2>
            <p class="harga">Rp 700,000</p>
            <button>Beli Sekarang</button>
        </div>

                <div class="produk-item">
            <img src="sepatu/sepatu5.jpeg" alt="Sepatu 5">
            <h2>Sepatu Olahraga</h2>
            <p class="harga">Rp 700,000</p>
            <button>Beli Sekarang</button>
        </div>

                 <div class="produk-item">
            <img src="sepatu/sepatu6.jpg" alt="Sepatu 6">
            <h2>Sepatu Olahraga</h2>
            <p class="harga">Rp 700,000</p>
            <button>Beli Sekarang</button>
        </div>

        <!-- Tambahkan produk lainnya sesuai kebutuhan -->
    </section>

    <footer>
        <p>© 2024 Toko Sepatu TeknoTask. All rights reserved.</p>
    </footer>
</body>
</html>

3. Buat File CSS (style.css)

Selanjutnya, buat file baru dengan nama “style.css” dalam folder proyek, selanjutnya isi file ini dengan kode CSS untuk mendesain tampilan website dibawah ini.

<style type="text/css">
    body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #3498db;
    color: #fff;
    text-align: center;
    padding: 1em 0;
}

.produk {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    max-width: 800px;
    margin: 20px auto;
}

.produk-item {
    text-align: center;
    margin: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
}

.produk-item img {
    width: 100%;
    max-width: 200px;
    height: auto;
    border-radius: 8px;
    margin-bottom: 10px;
}

.harga {
    font-weight: bold;
    color: #e74c3c;
}

button {
    background-color: #2ecc71;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
}

footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 1em 0;
}

</style>

4. Tambahkan Konten Produk Sepatu (index.html)

Jika ingin menambahkan konten produk sepatu, bisa kembali ke file “index.html” menggunakan Sublime Text. Lalu tambahkan konten produk sepatu sesuai dengan kreativitasmu, untuk kode produk sepatu ada dibawah ini.

        <div class="produk-item">
            <img src="sepatu/sepatu6.jpg" alt="Sepatu 6">
            <h2>Sepatu Olahraga</h2>
            <p class="harga">Rp 700,000</p>
            <button>Beli Sekarang</button>
        </div>

        <!-- Tambahkan produk lainnya sesuai kebutuhan -->

5. Jalankan Kode

Jika dirasa sudah, simpan semua perubahan kode tersebut, lalu buka file “index.html” menggunakan browser default untuk melihat hasilnya.

Artikel Terkait:   Cara Membuat Header Website Dengan HTML dan CSS

6. Tampilkan Website

Selamat! Kamu telah berhasil membuat website toko sepatu sederhana dengan HTML dan CSS menggunakan Sublime Text, selanjutnya kamu bisa menyesuaikan konten dan desain sesuai dengan kebutuhan proyekmu.

Akhir Kata

Itulah panduan langkah-langkah cara membuat web toko sepatu dengan mudah hanya menggunakan HTML dan CSS, jika dirasa ada konten yang kurang bisa kamu tambahkan sesuai dengan kebutuhanmu. Terima kasih sudah mengunjungi artikel dari TeknoTask, semoga bertemu kembali.