Ada 2 jenis list/daftar pada HTML, yaitu ordered list dan unordered list. Ordered list adalah list yang menggunakan urutan karakter seperti angka atau huruf, sedangkan unordered list adalah list yang menggunakan simbol yang sama untuk setiap poin listnya.

Letak perbedaannya hanya pada tag pembuka dan penutupnya saja, dimana ordered list menggunakan tag <ol> dan unordered list menggunakan tag <ul>.


<ol>


  <li>daftar satu</li>

<li>daftar dua</li>

</ol>


  <li>daftar tiga</li>

Kode di atas adalah contoh ordered list, menggunakan tag <ol>. Setiap poin daftar ditulis di dalam elemen <li>. Kode di atas akan ditampilkan seperti ini:

daftar satu
daftar dua
daftar tiga


<ul>


  <li>daftar satu</li>

<li>daftar dua</li>

</ul>


  <li>daftar tiga</li>

Kode di atas adalah contoh unordered list, menggunakan tag <ul>. Sama seperti ordered list, poin daftar ditulis di dalam elemen <li>. Kode di atas akan ditampilkan seperti ini:

daftar satu
daftar dua
daftar tiga

PRAKTEK

Pada editor terdapat HTML berisi resep membuat pancake. Jalankan kode dan lihat tampilan outputnya.
Modifikasi poin-poin Bahan dengan menggunakan unordered list. Jalankan kode untuk melihat hasilnya.
Modifikasi juga poin-poin Langkah dengan menggunakan ordered list. Jalankan kode untuk melihat hasilnya.

<!DOCTYPE html>

<html>

<head>

<title>Belajar HTML</title>

<style>

</style>

</head>

<body>

<h1> Resep Pancake</h1>

<h2>Bahan</h2>

250gr tepung terigu <br>

1 butir telur <br>

1 1/2 gelas susu <br>

Susu bubuk putih <br>

1 sdm baking powder <br>

<h2>Langkah</h2>

Masukkan semua bahan ke dalam satu wajan dan aduk sampai rata. Diamkan selama 10 menit <br>

Panaskan wajan anti lengket dengan api sedang (tanpa minyak) <br>

Tuangkan 1-2 sendok makan adonan membentuk bulatan di tengah wajan <br>

Balik pancake sebentar dan angkat <br>

Pancake dapat dilesi coklat atau madu <br>

</body>

</html>

Hasilnya:

Resep Pancake

Bahan

250gr tepung terigu

1 butir telur

1 1/2 gelas susu

Susu bubuk putih

1 sdm baking powder

Langkah

Masukkan semua bahan ke dalam satu wajan dan aduk sampai rata. Diamkan selama 10 menit

Panaskan wajan anti lengket dengan api sedang (tanpa minyak)

Tuangkan 1-2 sendok makan adonan membentuk bulatan di tengah wajan

Balik pancake sebentar dan angkat

Pancake dapat dilesi coklat atau madu

Tutorial Belajar List di HTML

PRAKTEK

Resep Pancake

Bahan

Langkah

0 Response to "Tutorial Belajar List di HTML"

Posting Komentar