Belajar HTML Bagian 9 : Membuat Daftar di HTML
November 23, 2017
Add Comment
Sobat bisa membuat daftar di HTML menggunakan tag
Berikut ini adalah contoh penggunaan tag
Jika sobat buka di browser, maka tampilannya akan seperti gambar di bawah ini :
Penomoran daftar dilakukan secara otomatis ketika sobat menambahkan item. Gunakanlah tag
Berikut ini adalah contoh penggunaan tag
Jika sobat jalankan di browser, maka tampilannya akan seperti gambar di bawah ini :
Jika sobat ingin membuat daftar yang tidak terlalu mementingkan urutan pada setiap item, maka sobat bisa menggunakan ordered list misalnya "Jenis-jenis kendaraan transportasi" dan sebagainya.
Untuk membuat definition list sobat akan menggunakan tag
Berikut ini adalah contoh penggunaan tag
Jika sobat jalankan di browser, maka tampilannya akan seperti gambar di bawah ini :
Terlihat dari gambar di atas deskripsi item yang terdapat di tag
Berikut ini adalah contoh penggunaan nested list di HTML :
Jika sobat jalankan di browser, maka tampilannya akan seperti gambar di bawah ini :
Biasanya daftar seperti ini biasa di gunakan untuk membuat menu web atau untuk keperluan lainnya seperti pada contoh di atas yaitu "Apa yang harus Saya lakukan hari ini" dan sebagainya.
Pada artikel selanjutnya sobat akan mempelajari Cara Membuat Link di HTML.
<ol> yang merupakan singkatan dari ordered list, <ul> yang merupkan singkatan dari unordered list dan <dl> yang merupkan singkatan dari definition list. Untuk penjelasan dan penulisan tag tersebut silahkan baca artikel ini sampai selesai :-).Ordered List
Ordered list atau biasa disebut dengan daftar berurutan dapat dibuat dengan menggunakan tag<ol>. Untuk membuat item, sobat dapat menggunakan tag <li> yang merupakan singkatan dari list item atau daftar item.Berikut ini adalah contoh penggunaan tag
<ol> di HTML :<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat Daftar di HTML</title>
</head>
<body>
<h2>Langkah-langkah menyalakan televisi :</h2>
<ol>
<li>Colokan kabel televisi ke stopkontak</li>
<li>Arahkan remote ke televisi</li>
<li>Lalu tekan tombol power yang ada di remote</li>
</ol>
</body>
</html>Jika sobat buka di browser, maka tampilannya akan seperti gambar di bawah ini :
Penomoran daftar dilakukan secara otomatis ketika sobat menambahkan item. Gunakanlah tag
<ol> ketika membuat sebuah daftar yang memerlukan urutan yang benar, seperti "Langkah-langkah menyalakan televisi" dan sebagainya.Unordered List
Berbeda dengan ordered list yang menandai setiap item dengan menggunakan angka secara otomatis dan berurut, kalau unorderd list menandai setiap item dengan simbol. Baik berupa lingkaran maupun persegi, sobat juga bisa mengganti simbol sesuai keinginan sobat dengan menggunakan CSS. Untuk membuat unordered list sobat akan menggunakan tag<ul>, lalu untuk item sobat akan menggunakan tag <li>.Berikut ini adalah contoh penggunaan tag
<ul> di HTML :<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat Daftar di HTML</title>
</head>
<body>
<h2>Jenis-jenis kendaraan transportasi :</h2>
<ul>
<li>Angkot</li>
<li>Kapal laut</li>
<li>Pesawat</li>
</ul>
</body>
</html>Jika sobat jalankan di browser, maka tampilannya akan seperti gambar di bawah ini :
Jika sobat ingin membuat daftar yang tidak terlalu mementingkan urutan pada setiap item, maka sobat bisa menggunakan ordered list misalnya "Jenis-jenis kendaraan transportasi" dan sebagainya.
Definition List
Jika sobat membutuhkan sebuah daftar yang berisi penjelasan atau deskripsi mengenai item tersebut, maka sobat bisa menggunakan definition list.Untuk membuat definition list sobat akan menggunakan tag
<dl>, untuk membuat item sobat akan menggunakan tag <dt> yang merupakan singkatan dari data term dan untuk membuat deskripsi dari item tersebut sobat akan menggunakan tag <dd> yang merupakan singkatan dari data description.Berikut ini adalah contoh penggunaan tag
<dl> di HTML :<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat Daftar di HTML</title>
</head>
<body>
<dl>
<dt>IPA</dt>
<dd>IPA adalah singkatan dari Ilmu Pengetahuan Alam</dd>
<dt>IPS</dt>
<dd>IPS adalah singkatan dari Ilmu Pengetahuan Sosial</dd>
<dt>MTK</dt>
<dd>MTK adalah singkatan dari Matematika</dd>
</dl>
</body>
</html>Jika sobat jalankan di browser, maka tampilannya akan seperti gambar di bawah ini :
Terlihat dari gambar di atas deskripsi item yang terdapat di tag
<dd> akan sedikit menjauh dari item yang di deskripsikan.Nested List
Nested list atau item bersarang adalah sebuah daftar yang memiliki daftar lagi di dalam item tersebut.Berikut ini adalah contoh penggunaan nested list di HTML :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat Daftar di HTML</title>
</head>
<body>
<h2>Apa yang harus Saya lakukan hari ini :</h2>
<ol>
<li>Pergi ke pasar :
<ul>
<li>Beli cabe</li>
<li>Beli bawang</li>
<li>Beli tomat</li>
</ul>
</li>
<li>Belajar :
<dl>
<dt>IPA</dt>
<dd>IPA adalah singkatan dari Ilmu Pengetahuan Alam</dd>
<dt>IPS</dt>
<dd>IPS adalah singkatan dari Ilmu Pengetahuan Sosial</dd>
<dt>MTK</dt>
<dd>MTK adalah singkatan dari Matematika</dd>
</dl>
</li>
</ol>
</body>
</html>Jika sobat jalankan di browser, maka tampilannya akan seperti gambar di bawah ini :
Biasanya daftar seperti ini biasa di gunakan untuk membuat menu web atau untuk keperluan lainnya seperti pada contoh di atas yaitu "Apa yang harus Saya lakukan hari ini" dan sebagainya.
Pada artikel selanjutnya sobat akan mempelajari Cara Membuat Link di HTML.
0 Response to "Belajar HTML Bagian 9 : Membuat Daftar di HTML"
Post a Comment