Daftar atau List Pada HTML memiliki fungsi daftar atau list ini biasanya mengarah pada pengurutan sebuah teks yang masing-masing teks di dalamnya memiliki point-point tersendiri, sehingga di dibutuhkan pengurutan pada setiap kata, sama halnya seperti daftar isi pada sebuah buku. Sebenarnya tidak ada yang berbeda dengan daftar atau list pada Ms. Word, pada Ms. Word pembuatan daftar atau list memiliki dua tipe, yaitu ordered list dan unordered list, perbedaanya adalah pada ordered list yaitu pengurutan dengan menggunakan angka dan ditulis dengan kode <ol>, sedangkan unordered list dengan menggunakan simbol dan ditulis dengan kode <ul>.
Pengertian Daftar atau List Pada HTML
List merupakan bagian teks yang kita gunakan untuk membuat daftar dukumen dan juga pengelompokan atau grup tertentu dalam suatu kategori. List pada HTML memiliki cara sendiri dalam mengurutkan item item pada suatu dokumen. Agar lebih paham daftar List memiliki beberapa Tag diantaranya yaitu:
- List Tidak Berturut (Unordered List), atau yang disebut tag <ul> dimana ututannya diawali dengan peluru hitam.
- List berturut (Ordered List), atau yang disebut tag <ol> dimana ututannya diawali dengan nomor ataupun dengan huruf.
- List defenisi (Definition List), atau disebut dengan tag <dl> dimana fungsinya untuk menetapkan istilah dan definisinya.
Sebelum masuk ke bagian pembelajaran kita ada baiknya untuk mengenal tag <li> (list item) dimana gunanya untuk penempatkan baris kalimat diantara tag pemubuka <li> dan tag penutup </li> .
Cara Membuat Daftar List di HTML
Tag list pada html termasuk salah satu tag yang ditulis secara berpasangan yaitu tag pembuka dan tag penutup di gunakan untuk membuat daftar list di html, yaitu tag <ol></ol> atau <ul></ul>, tag tersebut digunakan untuk mendefinisikan tipe pengurutan sedangkan untuk pengurutan teksnya menggunakan tag <li></li> yang di pasang didalam tag pembuka <ol> atau </ul> tergantung daftar tipe apa yang ingin dibuat. Tag seperti ini bisa di sebut nested tag, atau tag bersarang, dimana tag <ol> atau <ul> menjadi kepalanya, sedangkan <li></li> menjadi badannya, tag <ol> atau </ul> ditulis hanya sekali dalam setiap pengurutan daftar, sedangkan tag <li> ditulis berdasarkan jumlah teks yang di ingin di urutkan.
Menggunakan Tag <ul> Pada HTML
Tag <ul> adalah tag tidak berurutan yang selalu diawali dengan lingkarang peluru setiap barisan kalimat yang ada. Untuk penulisannya diawali dengan tag pembuka <ul>, tag pembuka <li>, tag penutup </li>, dan tag penutup </ul>. Untuk itu lihat contoh kode HTML dibawah ini:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Tag List - RuangIlmu</title>
</head>
<body>
<h1>daftar artikel</h1>
<ul>
<li>PHP</li>
<li>Javascript</li>
<li>HTML</li>
<li>CSS</li>
</ul>
</body>
</html>
Lihat hasilnya akan terlihat seperti ini :
Menggunakan Tag <ol> Pada HTML
Tag <ol> adalah tag yang berurutan yang setiap itemnya diberikan nomor. Kita dapat menulis tag <ol> dengan tag pembuka <ol>, tag pembuka <li>, tag penutup </li>, dan tag penutup </ol>. Untuk itu lihat contoh kode yang telah ditetapkan:
<!DOCTYPE html>
<html>
<head>
<title>RuangIlmu</title>
</head>
<body>
<h2>Membuat Daftar List - RuangIlmu</h2>
<h4>Menggunakan Tag ol</h4>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
<li>JavaScript</li>
<li>jQuery</li>
</ol>
</body>
</html>
Lihat hasilnya pada web browser :
Penggunaan tag list pada HTML tidak hanya untuk membuat daftar saja. Dengan CSS, tag list dapat digunakan untuk membuat menu navigasi di dalam halaman web, seperti menu home, contact us, dll. Tag list juga dapat digunakan untuk nested list, atau list bersarang, yang artinya sebuah list yang berada di dalam list lainnya.
Dalam tutorial belajar HTML dasar selanjutnya, kita akan membahas salah satu tag terpenting dari HTML, yakni tag <a> untuk membuat link di HTML !!
0 komentar:
Bijaklah saat Anda memberikan komentar atau kritik !!