Dalam sebuah website List paling sering dipakai untuk menciptakan sajian dan tag list juga sanggup dipakai untuk nested list atau list bersarang. Dalam HTML, tag list terdiri dari tiga jenis, ordered list (berurutan), unordered list (tidak berurutan) dan Description List. Ordered list akan ditampilkan dengan angka atau huruf, sedangkan unordered list dengan bulatan atau kotak. Ordered list memakai tag <ol>, dan unordered list memakai tag <ul>, sedangkan untuk list sendiri memakai tag <li>. Untuk menciptakan Description List, seluruh list harus berada di dalam pasangan tag <dl> dan </dl>.Untuk setiap deskripsi atau judul istilah, memakai tag <dt>. Sedangkan untuk klarifikasi istilah tersebut, kita memakai tag <dd>. Untuk memudahkan teman-teman aku sudah menciptakan contoh-contoh untuk setiap list di atas.
Berikut yaitu teladan arahan HTML untuk menciptakan ordered list memakai tag <ol> :
<!DOCTYPE html>
<html>
<head>
<title>Point Website</title>
</head>
<body>
<h1>Daftar Buku</h1>
<ol>
<li>Buku Biologi</li>
<li>Buku Matematika</li>
<li>Buku Bahasa Inggris</li>
<li>Buku Sejarah</li>
<li>Buku Bahasa Arab</li>
</ol>
</body>
</html>
Jika dijalankan pada web browser maka alhasil akan ibarat berikut ini :
Untuk menciptakan unordered list, tinggal ganti tag <ol> menjadi <ul>. Berikut yaitu teladan arahan HTML untuk menciptakan unordered list memakai tag <ul> :
<!DOCTYPE html>
<html>
<head>
<title>Point Website</title>
</head>
<body>
<h1>Daftar Buku</h1>
<ul>
<li>Buku Biologi</li>
<li>Buku Matematika</li>
<li>Buku Bahasa Inggris</li>
<li>Buku Sejarah</li>
<li>Buku Bahasa Arab</li>
</ul>
</body>
</html>
Jika dijalankan pada web browser maka alhasil akan ibarat berikut ini :
Penggunaan tag list pada HTML tidak hanya untuk menciptakan daftar saja. Dengan CSS, tag list sanggup dipakai untuk menciptakan sajian navigasi di dalam halaman web, ibarat sajian Home, Contact us, About, dll. Tag list juga sanggup dipakai untuk nested list, atau list bersarang, yang artinya sebuah list yang berada di dalam list lainnya.
Selanjutnya kita akan menciptakan Description List. Berikut yaitu teladan arahan HTML untuk menciptakan Description.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>Daftar list dalam HTML</h1>
<dl>
<dt>Ordered List</dt>
<dd>Ordered list akan ditampilkan dengan angka.</dd>
<dt>Unordered List</dt>
<dd>Unordered list akan ditampilkan dengan bulatan atau kotak</dd>
<dt>Description List </dt>
<dd>Gambar ini hasil dari Description List.</dd>
</dl>
</body>
</html>
Silahkan teman-teman jalankan pada web browser, maka alhasil akan ibarat berikut :
Dari hasil gambar diatas sanggup kita lihat bahwa isi dari klarifikasi pada tag <dd> akan ditampilkan dengan sedikit menjorok (indent) dari bab istilahnya.
Sekian tutorial aku perihal Cara Membuat List Dalam HTML, biar sanggup membantu teman-teman dalam mempelajari HTML. Untuk tutorial yang lain akan aku bahas pada tutorial selanjutnya.
No comments:
Post a Comment