Cara Membuat Website Toko Online dengan HTML dan CSS

by

Cara Membuat Website Toko Online dengan HTML dan CSS – Di era digital yang semakin maju, memiliki toko online telah menjadi keharusan bagi banyak bisnis. Kemampuan untuk menjual produk secara online tidak hanya memperluas jangkauan pasar Anda, tetapi juga memberikan kemudahan bagi pelanggan untuk berbelanja kapan saja dan di mana saja. Namun, bagi pemula, menciptakan website toko online mungkin terasa menakutkan. Tetapi jangan khawatir! Dalam panduan ini, kami akan membimbing Anda melalui langkah-langkah sederhana untuk membuat toko online menggunakan HTML dan CSS, bahasa pemrograman yang mudah dipahami dan ideal untuk pemula.

Alat yang Harus Anda Siapkan

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

  • Perangkat laptop,
  • Sublime text (Text editor code),
  • Google chrome (Web browser),
  • Niat yang kuat.

Cara Membuat Website Toko Online dengan HTML dan CSS

1. Buat Folder Project Toko Online

Pertama-tama, mari kita mulai dengan membuat struktur dasar untuk proyek toko online Anda. Dengan memiliki folder proyek yang terorganisir dengan baik, Anda akan dapat dengan mudah mengelola semua file yang terkait dengan pembuatan website Anda.

2. Buat Folder Img

Untuk menampilkan gambar produk di toko online Anda, Anda perlu membuat folder khusus untuk menyimpan semua gambar tersebut. Dengan membuat folder ‘img‘ di dalam folder proyek Anda, Anda akan dapat mengakses gambar-gambar ini dengan mudah saat Anda membangun website Anda. Download gambar disini untuk menerapkannya dalam project toko online.

3. Buat File toko_online.html

File HTML adalah tulang punggung dari setiap website. Di sini, kita akan membuat file toko_online.html, tempat Anda akan menulis kode HTML untuk menentukan struktur dan konten dari toko online Anda.

Berikut file html yang harus Anda tambahkan untuk membuat website toko online dengan html dan css:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toko Online</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div class="container">
            <img src="img/logo.jpg" alt="Toko Online" class="logo">
            <nav>
                <ul>
                    <li><a href="https://riztekno.com/">Beranda</a></li>
                    <li><a href="https://riztekno.com/">Produk</a></li>
                    <li><a href="https://riztekno.com/">Tentang</a></li>
                    <li><a href="https://riztekno.com/">Kontak</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <section class="landing">
        <div class="container">
            <div class="landing-content">
                <img src="img/landing_page.jpg" alt="Landing Image" class="landing-img">
                <div class="landing-text">
                    <h1>Selamat Datang di Toko Online Kami</h1>
                    <p>Temukan produk berkualitas dengan harga terbaik!</p>
                    <a href="https://riztekno.com/" class="btn">Jelajahi Produk</a>
                </div>
            </div>
        </div>
    </section>
    
    

    <section class="products">
        <div class="container">
            <div class="product">
                <img src="img/product1.jpg" alt="Product 1" class="product-img">
                <h2>Produk 1</h2>
                <p class="price">$100</p>
                <button class="btn">Beli</button>
            </div>
            <div class="product">
                <img src="img/product2.jpg" alt="Product 2" class="product-img">
                <h2>Produk 2</h2>
                <p class="price">$120</p>
                <button class="btn">Beli</button>
            </div>
            <div class="product">
                <img src="img/product3.jpg" alt="Product 2" class="product-img">
                <h2>Produk 3</h2>
                <p class="price">$120</p>
                <button class="btn">Beli</button>
            </div>
            <div class="product">
                <img src="img/product4.jpg" alt="Product 2" class="product-img">
                <h2>Produk 4</h2>
                <p class="price">$120</p>
                <button class="btn">Beli</button>
            </div>
            <!-- Tambahkan lebih banyak produk di sini -->
        </div>
    </section>

    <footer>
        <div class="container">
            <p>&copy; 2024 Toko Online. All rights reserved.</p>
        </div>
    </footer>
</body>
</html>
 

Langkah 4: Buat File style.css

Agar website Anda terlihat menarik dan konsisten, Anda perlu menggunakan CSS untuk mengatur tata letak dan gaya. File style.css akan memungkinkan Anda untuk menambahkan warna, font, dan efek visual lainnya ke website Anda.

Artikel Terkait:   Cara Membuat Dashboard dengan HTML dan CSS

Berikut ini file css yang harus Anda tambahkan untuk dapat membuat website toko online dengan html dan css:

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}

.container {
    width: 80%;
    margin: 0 auto;
}

header {
    background-color: #333;
    color: #fff;
    padding: 20px 0;
}

.logo {
    width: 100px;
    height: auto;
}

nav ul {
    list-style: none;
}

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

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

.landing {
    text-align: center;
    padding: 100px 0;
}

.landing h1 {
    font-size: 36px;
    margin-bottom: 20px;
}

.landing p {
    font-size: 18px;
    margin-bottom: 40px;
}

.btn {
    display: inline-block;
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.btn:hover {
    background-color: #555;
}

.products {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 50px;
}

.product {
    background-color: #fff;
    padding: 20px;
    margin: 20px;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.product-img {
    width: 200px;
    height: auto;
    margin-bottom: 20px;
}

.price {
    font-size: 20px;
    color: #333;
}

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

.landing-content {
    display: flex;
    align-items: center;
}

.landing-img {
    width: 50%; /* Atur lebar gambar */
    max-height: 400px; /* Atur tinggi maksimum gambar */
    object-fit: cover; /* Menyesuaikan gambar agar selalu terlihat proporsional */
    margin-right: 20px; /* Spasi antara gambar dan teks */
    border-radius: 10px; /* Membuat sudut gambar menjadi melengkung */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Efek bayangan untuk gambar */
}

.landing-text {
    flex: 1; /* Mengisi sisa ruang yang tersedia */
}
 

Langkah 5: Mengubah Produk Toko Online

Sekarang saatnya untuk menambahkan produk ke dalam toko online Anda! Dengan menggunakan elemen HTML seperti <div>, <img>, dan <p>, Anda akan dapat membuat tampilan yang menarik untuk setiap produk yang Anda jual. Jangan lupa untuk memberi setiap produk id atau class yang sesuai agar Anda dapat dengan mudah menerapkan gaya CSS.

Artikel Terkait:   Cara Membuat Website Pariwisata dengan HTML dan CSS

Langkah 6: Simpan & Lihat Tampilan

Setelah Anda selesai mengedit file HTML dan CSS Anda, jangan lupa untuk menyimpan perubahan tersebut. Kemudian, buka file toko_online.html menggunakan browser web Anda untuk melihat tampilan website Anda secara langsung. Pastikan untuk menguji responsivitas website Anda di berbagai perangkat untuk memastikan pengalaman pengguna yang optimal.

Preview hasil

Berikut ini hasil yang akan tampil nantinya jika Anda berhasil membuat website toko online dengan html dan css:

Penutup

Terima kasih telah mengikuti panduan ini untuk membuat toko online sederhana menggunakan HTML dan CSS. Meskipun ini hanya langkah awal, Anda telah memperoleh dasar yang kuat untuk membangun dan mengembangkan toko online Anda ke depannya. Jangan ragu untuk terus eksplorasi dan belajar lebih lanjut tentang pengembangan web. Dengan kreativitas dan dedikasi Anda, siapa tahu sejauh mana toko online Anda bisa berkembang. Semoga artikel ini bermanfaat bagi Anda dalam memulai perjalanan Anda dalam dunia e-commerce. Sukses selalu!

Related posts: