Unordered lists dan ordered lists sebenarnya fungsinya sama saja akan tetapi peruntukan pemakaiannya yang berbeda. Unordered lists digunakan untuk menyajikan daftar/list yang tidak berurutan yang diawali dengan tanda dot atau lingkaran kecil pada awal daftar/list. Sedangkan ordered lists digunakan untuk menyajikan daftar/list yang berurutan dan diawali dengan angka atau huruf di depannya.
Untuk mendefinisikan unordered lists digunakan tag <ul> sedangkan untuk mendefinisikan ordered lists digunakan tag <ol>. Di antara kedua tag tadi terdapat tag <li> untuk mendefinisikan masing-masing item dari list tersebut.
Sekarang kita akan mempraktekkannya. Buka "webpertama.html" menggunakan text editor lalu ubah kode HTML tersebut menjadi seperti berikut:
<!DOCTYPE html>
<html>
<head>
<title>Web Pertamaku</title>
</head>
<body>
<h1>Halaman web pertamaku</h1>
<h2>Latihanku</h2>
<p>Menarik bukan...</p>
<h3>Kenapa ?</h3>
<ul>
<li>Karena aku ingin bisa.</li>
<li>Untuk aku pamerkan</li>
<li>Karena aku menyukainya</li>
</ul>
</body>
</html>
<html>
<head>
<title>Web Pertamaku</title>
</head>
<body>
<h1>Halaman web pertamaku</h1>
<h2>Latihanku</h2>
<p>Menarik bukan...</p>
<h3>Kenapa ?</h3>
<ul>
<li>Karena aku ingin bisa.</li>
<li>Untuk aku pamerkan</li>
<li>Karena aku menyukainya</li>
</ul>
</body>
</html>
Apabila kita buka file "webpertama.html" menggunakan browser maka disana akan terlihat daftar/list dengan tanda bulatan di depan masing-masing item list. Dan apabila tag <ul> dan </ul> kita ubah menjadi <ol> dan </ol> maka kita akan melihat angka di depan setiap item list.
Tidak hanya itu, kita juga bisa memasukkan list di dalam list. Mari kita coba, tambahkan beberapa kode berikut ke dalam "webpertama.html":
<!DOCTYPE html>
<html>
<head>
<title>Web Pertamaku</title>
</head>
<body>
<h1>Halaman web pertamaku</h1>
<h2>Latihanku</h2>
<p>Menarik bukan...</p>
<h3>Kenapa ?</h3>
<ul>
<li>Karena aku ingin bisa.</li>
<li>Untuk aku pamerkan</li>
<ol>
<li>Kepada orangtuaku</li>
<li>Kepada teman-temanku</li>
<li>Kepada sahabatku</li>
</ol>
<li>Karena aku menyukainya</li>
</ul>
</body>
</html>
<html>
<head>
<title>Web Pertamaku</title>
</head>
<body>
<h1>Halaman web pertamaku</h1>
<h2>Latihanku</h2>
<p>Menarik bukan...</p>
<h3>Kenapa ?</h3>
<ul>
<li>Karena aku ingin bisa.</li>
<li>Untuk aku pamerkan</li>
<ol>
<li>Kepada orangtuaku</li>
<li>Kepada teman-temanku</li>
<li>Kepada sahabatku</li>
</ol>
<li>Karena aku menyukainya</li>
</ul>
</body>
</html>
Simpan dan coba buka menggunakan browser. Apa yang terjadi? yup, list di dalam list. Kalian bisa menambahkan list di dalam list yang di dalam list dan seterusnya... ^^
***
Daftar Tutorial HTML:
Tidak ada komentar:
Posting Komentar