Belajar Html Bab 9 : Menciptakan Daftar Di Html

Sobat sanggup menciptakan daftar di HTML memakai tag <ol> yang merupakan abreviasi dari ordered list, <ul> yang merupkan abreviasi dari unordered list dan <dl> yang merupkan abreviasi dari definition list. Untuk klarifikasi dan penulisan tag tersebut silahkan baca artikel ini hingga simpulan :-).

Ordered List

Ordered list atau biasa disebut dengan daftar berurutan sanggup dibentuk dengan memakai tag <ol>. Untuk menciptakan item, teman sanggup memakai tag <li> yang merupakan abreviasi dari list item atau daftar item.

Berikut ini yakni pola 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 teman buka di browser, maka tampilannya akan ibarat gambar di bawah ini :

Penomoran daftar dilakukan secara otomatis dikala teman menambahkan item. Gunakanlah tag <ol> dikala menciptakan sebuah daftar yang memerlukan urutan yang benar, ibarat "Langkah-langkah menyalakan televisi" dan sebagainya.

Unordered List

Berbeda dengan ordered list yang menandai setiap item dengan memakai angka secara otomatis dan berurut, jikalau unorderd list menandai setiap item dengan simbol. Baik berupa bulat maupun persegi, teman juga sanggup mengganti simbol sesuai impian teman dengan memakai CSS. Untuk menciptakan unordered list teman akan memakai tag <ul>, kemudian untuk item teman akan memakai tag <li>.

Berikut ini yakni pola 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 teman jalankan di browser, maka tampilannya akan ibarat gambar di bawah ini :

Jika teman ingin menciptakan daftar yang tidak terlalu mementingkan urutan pada setiap item, maka teman sanggup memakai ordered list contohnya "Jenis-jenis kendaraan transportasi" dan sebagainya.

Definition List

Jika teman membutuhkan sebuah daftar yang berisi klarifikasi atau deskripsi mengenai item tersebut, maka teman sanggup memakai definition list.

Untuk menciptakan definition list teman akan memakai tag <dl>, untuk menciptakan item teman akan memakai tag <dt> yang merupakan abreviasi dari data term dan untuk menciptakan deskripsi dari item tersebut teman akan memakai tag <dd> yang merupakan abreviasi dari data description.

Berikut ini yakni pola penggunaan tag <dl> di HTML :

<!DOCTYPE html> <html> <head>  <title>Belajar Membuat Daftar di HTML</title> </head> <body>  <dl>  <dt>IPA</dt>  <dd>IPA yakni abreviasi dari Ilmu Pengetahuan Alam</dd>  <dt>IPS</dt>  <dd>IPS yakni abreviasi dari Ilmu Pengetahuan Sosial</dd>  <dt>MTK</dt>  <dd>MTK yakni abreviasi dari Matematika</dd>  </dl> </body> </html>

Jika teman jalankan di browser, maka tampilannya akan ibarat 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 yakni sebuah daftar yang mempunyai daftar lagi di dalam item tersebut.

Berikut ini yakni pola 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 yakni abreviasi dari Ilmu Pengetahuan Alam</dd>                 <dt>IPS</dt>                     <dd>IPS yakni abreviasi dari Ilmu Pengetahuan Sosial</dd>                 <dt>MTK</dt>                     <dd>MTK yakni abreviasi dari Matematika</dd>             </dl>         </li>     </ol> </body> </html>

Jika teman jalankan di browser, maka tampilannya akan ibarat gambar di bawah ini :

Biasanya daftar ibarat ini biasa di gunakan untuk menciptakan sajian web atau untuk keperluan lainnya ibarat pada pola di atas yaitu "Apa yang harus Saya lakukan hari ini" dan sebagainya.

Pada artikel selanjutnya teman akan mempelajari Cara Membuat Link di HTML.