Cara Membuat Website Makanan dengan HTML dan CSS

by

Cara Membuat Website Makanan dengan HTML dan CSS – Ingin tahu bagaimana cara membuat website makanan yang menarik dan profesional? Dalam dunia digital yang semakin berkembang, memiliki kehadiran online untuk bisnis kuliner menjadi sangat penting. Dengan menggunakan HTML dan CSS, Anda dapat dengan mudah membuat website makanan yang menarik dan memikat pengunjung potensial. Dalam panduan ini, caramembuatweb akan mengajarkan Anda langkah demi langkah bagaimana membangun website makanan yang menggoda selera dengan menggunakan teknologi sederhana namun kuat. Ikuti langkah-langkahnya dengan cermat dan mulailah membangun kehadiran online untuk bisnis kuliner Anda hari ini!

Alat yang harus Anda siapkan

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

  • Perangkat laptop,
  • Notepad++ (Text editor code),
  • Google chrome (Web browser),
  • 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 memberinya nama sesuai keinginan, misalnya “Website_Makanan_Project“.

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. Download gambar disini untuk di implementasikan dalam proyek website makana dengan html dan css.

3. Buat Sebuah File “website_makanan.html”

Selanjutnya, buatlah sebuah file HTML baru dan beri nama “website_makanan.html“. Anda dapat menggunakan editor teks sederhana seperti Notepad atau aplikasi pengembangan web seperti Visual Studio Code.

Berikut ini source code html yang harus Anda tambahkan untuk membuat website makanan 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>Website Makanan</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Restoran Enak</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#menu">Menu</a></li>
            <li><a href="#about">Tentang Kami</a></li>
            <li><a href="#contact">Kontak</a></li>
        </ul>
    </nav>
    <section id="menu">
        <h2>Menu Kami</h2>
        <div class="menu-item">
            <img src="img/nasigoreng.jpg" alt="Menu 1">
            <h3>Nasi Goreng</h3>
            <p>Harga: Rp 25.000</p>
            <p>Deskripsi: Nasi goreng spesial dengan bumbu rahasia.</p>
        </div>
        <div class="menu-item">
            <img src="img/mieayam.jpg" alt="Menu 2">
            <h3>Mie Ayam</h3>
            <p>Harga: Rp 20.000</p>
            <p>Deskripsi: Mie ayam dengan kuah kental dan irisan ayam.</p>
        </div>
        <!-- Tambahkan menu lainnya di sini -->
    </section>
    <section id="about">
        <h2>Tentang Kami</h2>
        <p>Kami adalah restoran yang menyajikan berbagai macam makanan lezat dan bergizi.</p>
    </section>
    <section id="contact">
        <h2>Hubungi Kami</h2>
        <p>Email: [email protected]</p>
        <p>Telepon: 123-456-789</p>
    </section>
    <footer>
        <p>Hak Cipta &copy; 2024 Restoran Enak</p>
    </footer>
</body>
</html>
 

4. Buat File “style.css”

Selanjutnya, buat file CSS untuk mengatur tampilan website website Anda. Beri nama file tersebut “style.css” dan simpan di dalam folder proyek Anda.

Artikel Terkait:   Cara Membuat Desain Web dengan HTML dan CSS

Berikut ini source code css yang harus Anda tambahkan untuk membuat website makanan dengan html dan css:

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f7f7f7;
}

header {
    background-color: #f8dcb0;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

h1 {
    margin: 0;
    font-size: 36px;
    color: #333;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

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

nav ul li a {
    text-decoration: none;
    color: #333;
    font-size: 18px;
    transition: all 0.3s ease;
}

nav ul li a:hover {
    color: #f8dcb0;
}

section {
    padding: 50px 20px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin: 20px 0;
    border-radius: 5px;
}

.menu-item {
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.menu-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.menu-item img {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 10px;
}

h2 {
    color: #333;
}

p {
    color: #666;
}

footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px 0;
    position: fixed;
    bottom: 0;
    width: 100%;
}
 

5. Mengubah Tampilan Website Makanan

Sekarang, saatnya untuk mengubah tampilan website makanan Anda dengan menambahkan konten dan mengatur tata letak menggunakan HTML dan CSS. Anda dapat menambahkan bagian seperti header, menu makanan, gambar makanan, dan lainnya sesuai keinginan.

6. Save & View Tampilan

Setelah menambahkan konten dan gaya ke website makanan Anda, pastikan untuk menyimpan semua perubahan yang telah Anda buat. Kemudian, buka file “website_makanan.html” di peramban web Anda untuk melihat tampilan website makanan Anda secara langsung.

Preview hasil

Berikut ini preview hasil website makanan dengan html dan css jika Anda berhasil membuatnya:

Artikel Terkait:   Cara Membuat Halaman Utama Website dengan HTML dan CSS

Penutup

Dengan mengikuti panduan ini, Anda sekarang memiliki landasan yang kuat untuk memulai perjalanan Anda dalam membuat website makanan yang menarik dan profesional. Ingatlah untuk terus mengembangkan keterampilan Anda dalam penggunaan HTML dan CSS, serta eksplorasi berbagai fitur dan desain yang dapat meningkatkan daya tarik situs web Anda. Jangan ragu untuk terus belajar dan bereksperimen, karena dunia web development selalu berubah dan berkembang. Semoga website makanan Anda sukses dan menjadi sarana yang efektif untuk mempromosikan bisnis kuliner Anda kepada dunia secara online!

Jika Anda memiliki pertanyaan lebih lanjut atau ingin mempelajari lebih lanjut tentang topik ini, jangan ragu untuk menghubungi kami. Terima kasih telah membaca, dan semoga sukses selalu dalam perjalanan Anda sebagai web developer!

Related posts: