Cara Membuat Web E-Commerce dengan HTML

Cara Membuat Web E-Commerce dengan HTML – Halo Sobat Tekno, ketika berbicara tentang pembuatan website, bahasa pemrograman HTML adalah langkah awal yang sangat mudah untuk digunakan pemula. HTML, atau Hyper Text Markup Language, merupakan dasar dari semua yang kita lihat di web.

Nah, dalam artikel kali ini TeknoTask akan membimbingmu dalam membangun sebuah website toko online atau e-commerce menggunakan HTML, untuk itu simak terus ulasan dibawah ini.

Aspek Penting Membuat Web E-Commerce

Mendirikan website toko online tidak hanya sebatas menciptakan halaman web yang indah, melainkan kamu juga perlu mempertimbangkan aspek-aspek penting seperti sistem pembayaran, pengiriman, manajemen persediaan, dan banyak lagi. Jika kamu belum familiar dengan pemrograman web, kami sarankan untuk mempertimbangkan menggunakan platform e-commerce yang sudah ada sebagai alternatif yang lebih mudah.

Meskipun HTML menjadi dasar, jangan khawatir jika kamu belum memiliki pengalaman dalam pemrograman web. Ada banyak platform e-commerce yang dapat mempermudahmu dalam mengelola toko online, bahkan tanpa perlu terlalu banyak menyentuh kode.

Cara Membuat Web E-Commerce dengan HTML dan CSS

1. Buat Struktur Folder

Sobat Tekno, langkah pertama yang perlu dilakukan adalah menciptakan struktur folder yang terorganisir dengan baik. Ini akan membantu dalam mengelola semua elemen yang akan digunakan dalam proyek website e-commerce. Berikut contoh struktur folder yang dapat kamu gunakan:

Proyek E-Commerce

Produk
– produk1.webp
– produk2.webp
– produk3.webp
Logo
– logo_teknotask.png
style.css
index.html

Untuk gambar produknya bisa kamu unduh disini, dan untuk logonya bisa unduh disini.

2. Buat File HTML (index.html)

Buka Sublime Text dan buat file baru dengan nama index.html. Isi file tersebut dengan kode HTML kode dibawah ini.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web E-Commerce</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>

<header>
    <div class="logo">
        <img src="logo/logo teknotask.png" alt="Logo E-Commerce">
    </div>
    <nav>
        <ul>
            <li><a href="#">Beranda</a></li>
            <li><a href="#">Produk</a></li>
            <li><a href="#">Keranjang</a></li>
            <li><a href="#">Kontak</a></li>
        </ul>
    </nav>
</header>

<section class="hero">
    <h1>Selamat Datang di Teknotask E-Commerce</h1>
    <p>Temukan solusi terbaik untuk kebutuhan Anda.</p>
    <a href="#" class="cta-button">Mulai Belanja</a>
</section>

<section class="about-us">
    <h2>Tentang Kami</h2>
    <p>Kami adalah toko online yang menyediakan berbagai macam produk berkualitas dengan harga terbaik.</p>
</section>

<section class="products">
    <article>
        <img src="Produk/produk1.webp" alt="Product 1">
        <h2>Produk 1</h2>
        <p>Deskripsi produk 1.</p>
        <p>Rp 99.999</p>
        <button>Beli</button>
    </article>
        <article>
        <img src="Produk/produk2.webp" alt="Product 1">
        <h2>Produk 2</h2>
        <p>Deskripsi produk 2.</p>
        <p>Rp 99.999</p>
        <button>Beli</button>
    </article>
        <article>
        <img src="Produk/produk3.webp" alt="Product 1">
        <h2>Produk 3</h2>
        <p>Deskripsi produk 3.</p>
        <p>Rp 99.999</p>
        <button>Beli</button>
    </article>
            <article>
        <img src="Produk/produk1.webp" alt="Product 1">
        <h2>Produk 4</h2>
        <p>Deskripsi produk 4.</p>
        <p>Rp 99.999</p>
        <button>Beli</button>
    </article>
            <article>
        <img src="Produk/produk2.webp" alt="Product 1">
        <h2>Produk 5</h2>
        <p>Deskripsi produk 5.</p>
        <p>Rp 99.999</p>
        <button>Beli</button>
    </article>
</section>

<section class="testimonials">
    <h2>Testimoni Pelanggan</h2>
    <div class="testimonial">
        <p>"Sangat puas dengan pelayanan dan produk yang disediakan oleh Teknotask E-Commerce. Terima kasih!"</p>
        <p>Woow Produknya Bagus</p>
    </div>
    <!-- Tambahkan testimonial lainnya di sini -->
</section>

<section class="contact">
    <h2>Hubungi Kami</h2>
    <p>Jika Anda memiliki pertanyaan atau saran, jangan ragu untuk menghubungi kami.</p>
    <p>Email: [email protected]</p>
    <p>Telepon: (123) 456-7890</p>
</section>

<footer>
    <p>Hak Cipta © 2024 Teknotask E-Commerce. All rights reserved.</p>
</footer>

</body>
</html>

3. Buat File CSS (style.css)

Buat file baru dengan nama style.css dalam folder proyek. Isi file tersebut dengan kode CSS dibawah ini.

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

header {
    background-color: orange;
    color: #fff;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img {
    width: 100px;
    height: 10px;
    object-fit: cover;
    margin-right: 10px;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}

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

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

.hero {
    text-align: center;
    padding: 100px 0;
    background-color: #f0f0f0;
}

.hero h1 {
    font-size: 2.5em;
    margin-bottom: 20px;
}

.hero p {
    font-size: 1.2em;
    color: #666;
}

.cta-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 20px;
}

.cta-button:hover {
    background-color: #45a049;
}

.about-us {
    text-align: center;
    padding: 50px 0;
}

.about-us h2 {
    margin-bottom: 20px;
}

.products {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin: 20px;
}

article {
    width: 200px;
    border: 1px solid #ddd;
    padding: 10px;
    margin: 10px;
    text-align: center;
    transition: transform 0.3s;
}

article:hover {
    transform: scale(1.05);
}

article img {
    max-width: 100%;
    height: auto;
}

button {
    background-color: #4CAF50;
    color: white;
    padding: 8px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #45a049;
}

.testimonials {
    text-align: center;
    padding: 50px 0;
}

.testimonial {
    margin-bottom: 40px;
}

.contact {
    text-align: center;
    padding: 50px 0;
    background-color: #fff;
}

.contact h2 {
    margin-bottom: 20px;
}

footer {
    text-align: center;
    padding: 20px;
    background-color: #333;
    color: #fff;
}
</style>

4. Jalankan Kode

Buka file index.html menggunakan Sublime Text. Klik kanan di dalam file dan pilih “Open in Browser” untuk melihat hasilnya menggunakan browser default.

5. Tampilkan Website

Selamat! Anda telah berhasil membuat web E-Commerce sendiri, selanjutnya sesuaikan tata letak, warna, dan elemen-elemen lainnya agar sesuai dengan identitas brand atau preferensi pribadi kamu.

Akhir Kata

Demikianlah langkah-langkah sederhana membuat website e-commerce dengan HTML dan CSS di Sublime Text. Meskipun menggunakan HTML sebagai dasar, tidak perlu khawatir jika belum mahir dalam pemrograman. Cobalah berbagai platform e-commerce yang tersedia, dan temukan yang paling sesuai dengan kebutuhan dan kenyamananmu. Selamat mencoba, Sobat Tekno!