Cara Membuat Website Toko Roti dengan HTML dan CSS

By Posted on

Cara Membuat Website Toko Roti dengan HTML dan CSS – Ingin membuka toko roti online yang menarik perhatian pelanggan? Membuat website toko roti sendiri tidak perlu sulit, bahkan bagi pemula sekalipun. Dengan sedikit pengetahuan tentang HTML dan CSS, Anda bisa mulai membangun kehadiran online untuk bisnis roti Anda. Pada Artikel ini haikalweb akan memberikan panduan langkah demi langkah untuk membuat website toko roti dengan desain menarik menggunakan HTML dan CSS. Mari kita mulai!

Alat yang Harus di Siapkan

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

  • Perangkat laptop,
  • Web browser (disarankan menggunakan Chrome),
  • Text editor code (Sublime text),
  • Niat yang kuat.

Cara Membuat Website Toko Roti dengan HTML dan CSS

1. Buat Folder Project Website Toko Roti

Langkah pertama adalah membuat folder khusus untuk proyek toko roti Anda di komputer. Ini adalah tempat di mana semua file terkait dengan website akan disimpan, termasuk file HTML, CSS, dan gambar.

2. Buat Folder Img

Di dalam folder proyek Anda, buatlah folder bernama “img“. Folder ini akan digunakan untuk menyimpan semua gambar yang akan Anda gunakan di website toko roti Anda, seperti gambar produk dan logo toko. Download gambar disini untuk dapat diterapkan pada project website toko roti dengan html dan css.

3. Buat Sebuah File website_toko_roti.html

Buatlah file HTML dengan nama “website_toko_roti.html“. Ini akan menjadi file utama untuk halaman web toko roti Anda. Di sini Anda akan menambahkan struktur dan konten dari website Anda.

Berikut ini file yang dapat Anda tambahkan untuk dapat membuat website toko roti 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 Roti Online</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <img src="img/logo1.jpg" alt="Toko Roti Logo">
        <h1>Selamat Datang di Toko Roti Lezat</h1>
        <p>Temukan berbagai pilihan roti lezat kami!</p>
    </header>

    <div class="container">
        <div class="product">
            <img src="img/roti1.jpg" alt="Roti Manis">
            <h2>Roti Manis</h2>
            <p class="price">Rp 10.000,-</p>
        </div>

        <div class="product">
            <img src="img/roti2.jpg" alt="Roti Cokelat">
            <h2>Roti Cokelat</h2>
            <p class="price">Rp 12.000,-</p>
        </div>

        <div class="product">
            <img src="img/roti3.jpg" alt="Roti Keju">
            <h2>Roti Keju</h2>
            <p class="price">Rp 15.000,-</p>
        </div>
    </div>
</body>
</html>
 

4. Buat File style.css

Artikel Terkait:  Cara Membuat Form Biodata dengan HTML dan CSS

Selanjutnya, buatlah file CSS dengan nama “style.css“. File ini akan digunakan untuk mendesain tampilan website Anda agar terlihat menarik dan profesional.

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

/* style.css */
/* Gaya untuk halaman website toko roti */

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

header {
    background-color: #ffdb58;
    text-align: center;
    padding: 20px;
}

header img {
    width: 100px; /* Sesuaikan dengan ukuran logo Anda */
    height: auto;
    margin-bottom: 10px;
}

.container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 20px;
}

.product {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 10px;
    padding: 20px;
    text-align: center;
    width: 300px;
    transition: transform 0.3s ease;
}

.product:hover {
    transform: translateY(-5px);
}

.product img {
    max-width: 100%;
    border-radius: 5px;
}

.product h2 {
    color: #333;
}

.product .price {
    color: #009688;
    font-weight: bold;
    font-size: 1.2em;
}
 

5. Mengubah Produk Toko Roti

Setelah struktur dasar website selesai, saatnya untuk menambahkan produk toko roti Anda ke dalam halaman web. Anda dapat menambahkan gambar produk, deskripsi, harga, dan lainnya. Ini akan membantu menarik minat pengunjung untuk menjelajahi dan membeli produk Anda.

Berikut ini contoh perubahan yang dapat Anda coba:

<div class="product">
    <img src="img/roti.jpg" alt="Roti">
    <h2>Roti Manis</h2>
    <p>Roti manis dengan tekstur lembut dan rasa yang menggugah selera.</p>
    <p class="price">Rp 10.000,-</p>
</div>
 

Pastikan Anda telah menambahkan gambar produk ke dalam folder “img” dan merujuknya dengan benar dalam tag <img>.

6. Simpan & View Tampilan

Setelah selesai menambahkan konten dan desain, pastikan untuk menyimpan semua perubahan yang telah Anda buat. Kemudian, buka file “website_toko_roti.html” menggunakan browser web Anda untuk melihat tampilan dari website toko roti sederhana yang telah Anda buat.

Artikel Terkait:  Cara Membuat Web Berita dengan HTML dan CSS

Penutup

Dengan mengikuti panduan ini, Anda sekarang telah berhasil membuat website toko roti sederhana menggunakan HTML dan CSS. Teruslah bereksperimen dengan desain dan konten untuk membuat website Anda semakin menarik bagi pelanggan. Jangan ragu untuk menambahkan fitur tambahan, seperti formulir kontak atau halaman tentang kami, untuk meningkatkan pengalaman pengguna. Selamat mencoba dan semoga sukses dengan toko roti online Anda!

Related posts: