Cara Membuat Website Makanan dengan HTML dan CSS

By Posted on

Cara Membuat Website Makanan dengan HTML dan CSS – Dalam era digital saat ini, memiliki sebuah website menjadi hal yang sangat penting, terutama jika Anda memiliki bisnis makanan. Membuat website makanan dengan HTML dan CSS dapat menjadi langkah pertama yang tepat untuk meningkatkan kehadiran online Anda. Dalam panduan ini, kami akan membimbing Anda melalui langkah-langkah detail untuk membuat website makanan yang menarik dan responsif.

Alat yang harus disiapkan

Berikut ini alat yang harus ada dan Anda siapkan untuk membuat website makanan dengan html dan css:

  • Perangkat laptop,
  • Web browser (disarankan menggunakan chrome),
  • Code text editor (Visual studio code),
  • Niat yang kuat.

Cara Membuat Website Makanan dengan HTML dan CSS

1. Buat Folder Project Website Makanan

Langkah pertama adalah membuat folder khusus untuk proyek website makanan Anda. Anda dapat menamainya sesuai keinginan Anda, misalnya “Project_Website_Makanan“.

2. Buat Folder “img”

Di dalam folder proyek Anda, buatlah folder baru bernama “img“. Folder ini akan digunakan untuk menyimpan semua gambar yang akan Anda gunakan di website makanan Anda nantinya. Sebagai contoh awal implementasi download gambar asset disini.

3. Buat Sebuah File “website_makanan.html”

Sekarang, mari buat file HTML untuk halaman website makanan kita. Gunakan teks editor favorit Anda dan buat file baru dengan nama “website_makanan.html“. Pastikan untuk menyimpannya di dalam folder proyek Anda.

Berikut ini source code html yang dapat di implementasikan:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website Makanan</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div class="container">
            <h1>Resep Sederhana</h1>
            <p>Temukan resep makanan lezat untuk segala kesempatan!</p>
        </div>
    </header>

    <nav>
        <div class="container">
            <ul>
                <li><a href="#">Resep</a></li>
                <li><a href="#">Kategori</a></li>
                <li><a href="#">Tentang Kami</a></li>
                <li><a href="#">Kontak</a></li>
            </ul>
        </div>
    </nav>

    <main>
        <div class="container">
            <section class="featured-recipe">
                <h2>Resep Pilihan</h2>
                <div class="recipe">
                    <img src="img/recipe1.jpg" alt="Resep 1">
                    <h3>Mie Goreng Spesial</h3>
                    <p>Deskripsi singkat mengenai resep mie goreng spesial.</p>
                    <a href="#">Lihat Resep</a>
                </div>
                <div class="recipe">
                    <img src="img/recipe2.jpg" alt="Resep 2">
                    <h3>Nasi Goreng Seafood</h3>
                    <p>Deskripsi singkat mengenai resep nasi goreng seafood.</p>
                    <a href="#">Lihat Resep</a>
                </div>
            </section>

            <section class="latest-recipes">
                <h2>Resep Terbaru</h2>
                <!-- Daftar resep terbaru disini -->
            </section>

            <section class="recipe-menu">
                <h2>Menu Resep</h2>
                <ul>
                    <li><a href="#">Mie Goreng</a></li>
                    <li><a href="#">Nasi Goreng</a></li>
                    <li><a href="#">Ayam Goreng</a></li>
                    <li><a href="#">Soto Ayam</a></li>
                    <li><a href="#">Bakso</a></li>
                </ul>
            </section>
        </div>
    </main>

    <footer>
        <div class="container">
            <p>Hak Cipta &copy; 2024 Website Makanan. All rights reserved.</p>
        </div>
    </footer>
</body>
</html>
 

 

Artikel Terkait:  Cara Membuat Tampilan Facebook dengan HTML dan CSS

4. Buat File “style.css”

Selanjutnya, kita perlu membuat file CSS untuk mengatur tata letak dan gaya halaman website makanan kita. Buatlah file baru dengan nama “style.css” dan pastikan untuk menyimpannya di dalam folder proyek Anda juga.

Berikut ini source code yang dapat di implementasikan:

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

/* Global Styles */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

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

header, nav, main, footer {
    padding: 20px 0;
}

/* Header Styles */
header {
    background-color: #f8f8f8;
    text-align: center;
}

header h1 {
    color: #333;
}

/* Navigation Styles */
nav ul {
    list-style: none;
    text-align: center;
}

nav ul li {
    display: inline;
    margin: 0 10px;
}

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

/* Main Content Styles */
.recipe {
    background-color: #f9f9f9;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 5px;
}

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

.recipe h3 {
    margin-top: 10px;
    color: #333;
}

.recipe p {
    color: #666;
}

.recipe a {
    display: inline-block;
    background-color: #333;
    color: #fff;
    padding: 5px 10px;
    text-decoration: none;
    border-radius: 3px;
    margin-top: 10px;
}

.recipe a:hover {
    background-color: #555;
}

/* Footer Styles */
footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    margin-top: 50px;
    padding: 20px 0;
}

/* Recipe Menu Styles */
.recipe-menu {
    margin-top: 50px;
}

.recipe-menu ul {
    list-style: none;
}

.recipe-menu ul li {
    margin-bottom: 10px;
}

.recipe-menu ul li a {
    color: #333;
    text-decoration: none;
}

.recipe-menu ul li a:hover {
    color: #555;
}
 

5. Mengubah Tampilan Website Makanan

Sekarang saatnya untuk mulai mengubah tampilan website makanan Anda dengan HTML dan CSS. Anda dapat memulai dengan menambahkan elemen-elemen seperti header, navigasi, konten utama, dan footer ke dalam file HTML Anda. Gunakan CSS untuk mengatur tata letak, warna, font, dan gaya lainnya agar sesuai dengan tema makanan yang Anda inginkan.

Artikel Terkait:  Cara Membuat Website Toko Alat Tulis dengan HTML dan CSS

Berikut ini source code yang dapat digunakan untuk perubahan sederhana:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website Makanan</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <!-- Header Anda di sini -->
    </header>

    <nav>
        <!-- Navigasi Anda di sini -->
    </nav>

    <main>
        <!-- Konten Utama Anda di sini -->
    </main>

    <footer>
        <!-- Footer Anda di sini -->
    </footer>
</body>
</html>
 

6. Save & View Tampilan

Setelah Anda selesai mengedit file HTML dan CSS, pastikan untuk menyimpan perubahan Anda. Buka file “website_makanan.html” menggunakan browser web Anda untuk melihat tampilan dari halaman website makanan yang telah Anda buat. Periksa apakah tata letak dan gaya sesuai dengan yang Anda inginkan. Jika perlu, lakukan penyesuaian lebih lanjut dalam kode HTML dan CSS Anda.

Penutup

Dengan mengikuti langkah-langkah di atas, Anda telah berhasil membuat sebuah website makanan sederhana menggunakan HTML dan CSS. Selamat mencoba dan semoga sukses!

Related posts: