HTML: Membuat Daftar Menu Warung [Case]

Tuesday, 28 September 2021

HTML: Membuat Daftar Menu Warung [Case]

Halo, apa kabarnya pagi ini? —ceritanya saya lagi rajin pagi-pagi. Semoga sehat sentosa ya!

Setelah melewati beberapa postingan, mulai dari Membuat Heading dan Paragraf hingga Membuat Daftar/List, saatnya kita coba membuat sesuatu (Contoh Kasus/Case) dari apa yang sudah dipelajari.

Untuk itu, kita akan coba buat sebuah website sederhana menggunakan HTML tentang “Daftar Menu Warung”. Contoh Menu Warung menggunakan HTML

🐈 : “Aku suka Es Teh Manis..”

Silahkan buat file baru dengan nama 📄menu-warung.html, kemudian buat struktur dasar HTML-nya.

<!DOCTYPE html>
<html>
<head>
	<title>Daftar Menu Warung</title>
</head>
<body>

</body>
</html>

Membuat Judul dan Deskripsi

Kita akan pakai tag <h1> sebagai judulnya

<h1>Daftar Menu Warung</h1>

Setelah itu, kita pakai tag <p> untuk membuat deskripsinya “Selamat datang di warung kesayangan anda. Pesan sekarang!” seperti ini:

<p>Selamat datang di warung kesayangan anda. Pesan sekarang!</p>

Silahkan simpan dan jalankan!

Apakah sudah muncul sesuai seperti pada gambar sebelumnya? Jika belum, coba perhatikan lagi kodenya.

Membuat Menu Makanan

Pada menu makanan, jika kita perhatikan, jenis list yang dipakai adalah “Unordered List (List tak terurut)” dengan tipe/gaya “Circle”.

Mari kita coba!!

Sebelum masuk ke list, kita buat dulu Sub-Judulnya yaitu “Menu Makanan”. —biar orang tau ini daftar menu untuk makanan..

Kita pake tag <h2> biar ga terlalu besar atau sama dengan ukuran judul utamanya.

<h2>Menu Makanan</h2>

Setelah itu, tinggal buat daftarnya seperti ini:

<ul type="circle">
	<li>Nasi Goreng [15000]</li>
	<li>Nasi Padang [17000]</li>
	<li>Pecel Lele [12000]</li>
	<li>Bakso Bersama [15000]</li>
	<li>Ayam Bakar [23000]</li>
</ul>

Coba simpan dulu, abis itu jalankan.

🦁 : “Berhasil ndak? Semoga bisa ya..”

Membuat Menu Minuman

Nah, untuk list berikut yaitu Menu Minuman. Kita buat juga list tak terurut seperti Daftar Makanan. Bedanya, di list ini kita akan pake tipe/gaya “Square”.

Buat lagi sub-judul “Menu Minuman” menggunakan tag <h2> seperti ini:

<h2>Menu Minuman</h2>

Setelah itu, tinggal buat list seperti ini:

<ul type="square">
	<li>Es Teh Manis [5000]</li>
	<li>Jus Alpukat [12000]</li>
	<li>Sopi Mayang [12.500]</li>
	<li>Lemon Tea [12000]</li>
	<li>Air Putih [Gratis]</li>
</ul>

Silahkan simpan lagi dan refresh halamannya!

🦁 : “Bisa kan sampe sini?”

Kalo ada yang ga tampil atau mungkin berbeda, dicoba perhatikan lagi kodenya.

Rangkuman Kode

<!DOCTYPE html>
<html>
<head>
	<title>Daftar Menu Warung</title>
</head>
<body>

<h1>Daftar Menu Warung</h1>
<p>Selamat datang di warung kesayangan anda. Pesan sekarang!</p>

<h2>Menu Makanan</h2>
<ul type="circle">
	<li>Nasi Goreng [15000]</li>
	<li>Nasi Padang [17000]</li>
	<li>Pecel Lele [12000]</li>
	<li>Bakso Bersama [15000]</li>
	<li>Ayam Bakar [23000]</li>
</ul>

<h2>Menu Minuman</h2>
<ul type="square">
	<li>Es Teh Manis [5000]</li>
	<li>Jus Alpukat [12000]</li>
	<li>Sopi Mayang [12.500]</li>
	<li>Lemon Tea [12000]</li>
	<li>Air Putih [Gratis]</li>
</ul>

</body>
</html>

Silahkan tambahkan atau modifikasi sesuai selera. Coba ubah daftarnya menjadi menu lain atau juga menggunakan tag Heading dan gaya List berbeda.

Ada pertanyaan atau apapun itu, silahkan tulis di komentar.

#html
#case-html