Di website kalian pasti sering melihat daftar menu pada suatu website baik itu menu home, profil, about dan lain sebagainya taukah kalian daftar menu tersebut dibuat menggunakan tag <ul> <li>. Nah disini kita akan belajar bagaimana cara membuat daftar List pada HTML dulu sbelum kita belajar bagaiman membuat daftar menu itu tersebut :
Kita harus memahami daftar list tersebut terdiri dari 2 jenis yaitu :
1. Ordered List yang artinya Terurut
2. Unordered List yang tak terurut
Ordered List
Buka Text editor kalian dan ketikan scrip code dibawah ini :
<html>
<head>
<title>Cara Membuat List Daftar di HTML</title>
</head>
<body>
<h3>5 Makanan Enak di Indonesia</h3>
<ol>
<li>Bakso</li>
<li>Sate</li>
<li>Coto Makassar</li>
<li>Papeda</li>
<li>Nasi Padang</li>
</ol>
<h3>5 Makanan Enak di Indonesia</h3>
<ol type='a'>
<li>Bakso</li>
<li>Sate</li>
<li>Coto Makassar</li>
<li>Papeda</li>
<li>Nasi Padang</li>
</ol>
<h3>5 Makanan Enak di Indonesia</h3>
<ol type='A'>
<li>Bakso</li>
<li>Sate</li>
<li>Coto Makassar</li>
<li>Papeda</li>
<li>Nasi Padang</li>
</ol>
<h3>5 Makanan Enak di Indonesia</h3>
<ol type='i'>
<li>Bakso</li>
<li>Sate</li>
<li>Coto Makassar</li>
<li>Papeda</li>
<li>Nasi Padang</li>
</ol>
<h3>5 Makanan Enak di Indonesia</h3>
<ol type='I'>
<li>Bakso</li>
<li>Sate</li>
<li>Coto Makassar</li>
<li>Papeda</li>
<li>Nasi Padang</li>
</ol>
</body>
</html>
<head>
<title>Cara Membuat List Daftar di HTML</title>
</head>
<body>
<h3>5 Makanan Enak di Indonesia</h3>
<ol>
<li>Bakso</li>
<li>Sate</li>
<li>Coto Makassar</li>
<li>Papeda</li>
<li>Nasi Padang</li>
</ol>
<h3>5 Makanan Enak di Indonesia</h3>
<ol type='a'>
<li>Bakso</li>
<li>Sate</li>
<li>Coto Makassar</li>
<li>Papeda</li>
<li>Nasi Padang</li>
</ol>
<h3>5 Makanan Enak di Indonesia</h3>
<ol type='A'>
<li>Bakso</li>
<li>Sate</li>
<li>Coto Makassar</li>
<li>Papeda</li>
<li>Nasi Padang</li>
</ol>
<h3>5 Makanan Enak di Indonesia</h3>
<ol type='i'>
<li>Bakso</li>
<li>Sate</li>
<li>Coto Makassar</li>
<li>Papeda</li>
<li>Nasi Padang</li>
</ol>
<h3>5 Makanan Enak di Indonesia</h3>
<ol type='I'>
<li>Bakso</li>
<li>Sate</li>
<li>Coto Makassar</li>
<li>Papeda</li>
<li>Nasi Padang</li>
</ol>
</body>
</html>
Setelah kalian mengetik script tersebut save project teman" dan jalankan lewat web browser, hasilnya akan seperti berikut :
Okey setelah teman" telah berhasil melakukannya kita bagaimana si membuat daftar list yang tidak berurutan atau yang kita kenal menggunakan simbol?
Unordered List
Buka Text editor kalian dan ketikan scrip code dibawah ini :
<html>
<head>
<title>Cara Membuat List Daftar di HTML</title>
</head>
<body>
<h3>Type = square</h3>
<ul type="square">
<li>C</li>
<li>C++</li>
<li>Java</li>
<li>Python</li>
<li>PHP</li>
<li>Ruby</li>
<li>Perl</li>
</ul>
<h3>Type = disc</h3>
<ul type="disc">
<li>C</li>
<li>C++</li>
<li>Java</li>
<li>Python</li>
<li>PHP</li>
<li>Ruby</li>
<li>Perl</li>
</ul>
<h3>Type = none</h3>
<ul type="none">
<li>C</li>
<li>C++</li>
<li>Java</li>
<li>Python</li>
<li>PHP</li>
<li>Ruby</li>
<li>Perl</li>
</ul>
<h3>Type = circle</h3>
<ul type="circle">
<li>C</li>
<li>C++</li>
<li>Java</li>
<li>Python</li>
<li>PHP</li>
<li>Ruby</li>
<li>Perl</li>
</ul>
</body>
</html>
<head>
<title>Cara Membuat List Daftar di HTML</title>
</head>
<body>
<h3>Type = square</h3>
<ul type="square">
<li>C</li>
<li>C++</li>
<li>Java</li>
<li>Python</li>
<li>PHP</li>
<li>Ruby</li>
<li>Perl</li>
</ul>
<h3>Type = disc</h3>
<ul type="disc">
<li>C</li>
<li>C++</li>
<li>Java</li>
<li>Python</li>
<li>PHP</li>
<li>Ruby</li>
<li>Perl</li>
</ul>
<h3>Type = none</h3>
<ul type="none">
<li>C</li>
<li>C++</li>
<li>Java</li>
<li>Python</li>
<li>PHP</li>
<li>Ruby</li>
<li>Perl</li>
</ul>
<h3>Type = circle</h3>
<ul type="circle">
<li>C</li>
<li>C++</li>
<li>Java</li>
<li>Python</li>
<li>PHP</li>
<li>Ruby</li>
<li>Perl</li>
</ul>
</body>
</html>
Setelah kalian mengetik script tersebut save project teman-teman dan jalankan lewat web browser, hasilnya akan seperti berikut :
Nah trus gimana si caranya membuat anak dari list itu tersebut? Gini caranya :
Buka Text editor kalian dan ketikan scrip code dibawah ini :
<html>
<head>
<title>Anak List</title>
</head>
<body>
<h3>Daftar Menu Warung Makan</h3>
<ol>
<li>Nasi
<ul>
<li>Nasi Kuning</li>
<li>Nasi Campur</li>
<li>Nasi Padang</li>
</ul>
</li>
<li>Minuman
<ul>
<li>Es Teh</li>
<li>Es Jeruk</li>
<li>Teh Hangat</li>
</ul>
</li>
</ol>
</body>
</html>
<head>
<title>Anak List</title>
</head>
<body>
<h3>Daftar Menu Warung Makan</h3>
<ol>
<li>Nasi
<ul>
<li>Nasi Kuning</li>
<li>Nasi Campur</li>
<li>Nasi Padang</li>
</ul>
</li>
<li>Minuman
<ul>
<li>Es Teh</li>
<li>Es Jeruk</li>
<li>Teh Hangat</li>
</ul>
</li>
</ol>
</body>
</html>
Setelah kalian mengetik script tersebut save project teman-teman dan jalankan lewat web browser, hasilnya akan seperti berikut :
Gimana teman teman gampangkan setelah kalian berhasil daftar list menggunakan html, waktunya kalian kreasikan Daftar List teman teman, Mungkin cukup sekian artikel ini kurang dan lebih mohon dimaafkan Terimakasih.
Posting Komentar