Cara Membuat Website Makanan Dengan HTML dan CSS

Cara Membuat Website Makanan Dengan HTML dan CSS – Membuat website sendiri memang bisa menjadi tantangan yang menyenangkan, apalagi diberikan fitur tertentu pada web tersebut. Dengan pengetahuan yang tepat tentang HTML dan CSS, kamu bisa menciptakan website makanan sendiri yang tidak hanya menarik secara visual, tetapi juga berfungsi dengan baik.

Oleh karena itulah TeknoTask tertarik unruk membahas bersama cara membuat website makanan dengan HTML dan CSS dalam artikel ini, untuk itu simak terus ulasan dibawah ini

Pengertian Website Makanan

Website makanan adalah situs web yang dirancang secara khusus untuk memberikan informasi seputar makanan, restoran, resep, dan topik terkait kuliner lainnya. Tujuan utama dari jenis website ini adalah memberikan pengguna akses cepat dan mudah terhadap informasi makanan, termasuk menu restoran, panduan resep, ulasan kuliner, atau artikel menarik seputar dunia kuliner.

Selain sebagai sumber inspirasi bagi pecinta kuliner, website makanan juga membantu pengguna menemukan tempat makan baru, mencoba resep-resep menarik, atau sekadar mendapatkan informasi terkini tentang tren kuliner.

Cara Membuat Website Makanan Dengan HTML dan CSS

1. Persiapkan Struktur Folder

Sobat Tekno, langkah awal adalah menyiapkan struktur folder untuk proyek website makanan. Berikut adalah contoh struktur folder yang dapat kamu buat:

Proyek Makanan

Gambar
– makanan1.jpg
– makanan2.jpg
– makanan3.jpg
– makanan4.jpg
style.css
index.html

Untuk gambar makanan, kami telah menyiap beberapa yang bisa kamu 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 dibawah ini, kode berikut nantinya yang akan membentuk dasar dari website makanan kamu.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menu Makanan</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<header>
    <h1>Menu Makanan Enak</h1>
</header>

<section class="menu">
    <article>
        <img src="Gambar/makanan1.jpeg" alt="Makanan 1">
        <h2>Makanan 1</h2>
        <p>Deskripsi makanan 1.</p>
        <p>Rp 25.000</p>
<button class="pesan-button">Pesan Sekarang</button>
    </article>

    <article>
        <img src="Gambar/makanan2.jpg" alt="Makanan 2">
        <h2>Makanan 2</h2>
        <p>Deskripsi makanan 2.</p>
        <p>Rp 30.000</p>
<button class="pesan-button">Pesan Sekarang</button>
    </article>

    <article>
        <img src="Gambar/makanan3.jpg" alt="Makanan 3">
        <h2>Makanan 3</h2>
        <p>Deskripsi makanan 3.</p>
        <p>Rp 35.000</p>
<button class="pesan-button">Pesan Sekarang</button>
    </article>

        <article>
        <img src="Gambar/makanan4.jpg" alt="Makanan 4">
        <h2>Makanan 4</h2>
        <p>Deskripsi makanan 4.</p>
        <p>Rp 32.000</p>
<button class="pesan-button">Pesan Sekarang</button>
    </article>

</section>

<footer>
    <p>© 2024 Nama Restoran. Hak Cipta Dilindungi.</p>
</footer>

</body>
</html>

3. Buat File CSS (style.css)

Buat file baru dengan nama style.css dalam folder proyek. File ini akan berisi kode CSS dibawah ini, kode berikut yang digunakan untuk mendesain tampilan website makanan kamu.

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

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

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

article {
    width: 300px;
    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: 200px; 
    object-fit: cover; 
}

.pesan-button {
    background-color: #2ecc71;
    color: #fff;
    padding: 8px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.pesan-button:hover {
    background-color: #27ae60;
}

footer {
    background-color: #2c3e50;
    color: #fff;
    text-align: center;
    padding: 10px 0;
}


</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! Kamu telah berhasil membuat website makanan sederhana dengan HTML dan CSS menggunakan Sublime Text. Selanjutnya, sesuaikan konten dan desain sesuai dengan selera dan kebutuhan pribadi Sobat Tekno.

Akhir Kata

Sobat Tekno, melalui proses kreatif ini, kini kamu bisa mengeksplorasi kreativitasmu melalui website makanan yang unik dan fungsional. Terima kasih sudah mengunjungi artikel kali ini dan teruslah semangat untuk mengambangkan website tersebut dan sesuaikan dengan kreativitasmu. Selamat mencoba, Sobat Tekno!