Skip to main content

Membuat List HTML

List HTML

KeyzeX - List merupakan bentuk yang umum yang biasa kita gunakan untuk menguraikan daftar, misalnya jenis-jenis list dalam HTML :

  1. List Dengan Nomor
  • List Tanpa Nomor
      List Definisi


List dengan nomor adalah model daftar yang setiap itemnya diberi nomor. Pada contoh kalimat di atas merupakan contoh list dengan nomor, walau hanya 1 daftar. Selain list bernomor dan tanpa nomor, ada sebuah list lagi yang bisa digunakan untuk membuat list yang memberi uraian terhadap suatu item dalam daftar, disebut sebagai list definisi. Untuk membuat list tanpa nomor atau biasa di sebut dengan bulleted list adalah sebagai berikut :

BULLETED LIST


  • Mulai dengan tag pembuka list <ul>
  • Masukan setiap item list dengan menggunakan tag <li> lalu tuliskan teks atau daftar yang ingin agan berikan pada setiap list, tag penutup list </li>, namun ini tidak usah di tuliskan tetapi agar lebih baik sebaiknya di tuliskan saja.
  • Ulangi langkah kedua menuliskan item list berikutnya.
  • Jika agan sudah selesai, maka tutuplah dengan menggunakan tag penutup list </ul>.

Bulleted list sering disebut juga sebagai Unordered List, mempunyai bullet default berupa noktah. Jenis bullet bisa di ubah, berikut adalah daftar bullet yang bisa digunakan untuk mengubah bullet default pada bulleted list atau Unordered list :


  • Disk, berbentuk noktah tetapi tidak diasir tengahnya.
  • Box, bentuk kotak.
Untuk mengubah jenis bullet dapat didefinisikan pada atribut type pada tag <ul>, berikut adalah contoh untuk mengubah jenis bullet menjadi kotak <ul type="box> Isikan teksnya </ul>



ORDERED LIST

Untuk list dengan nomor, disebut juga ordered list. Tag pembuka list <ul> diubah menjadi <ol>, demikian juga tag penutup list </ul> diganti dengan tag penutup list </ol>.
Unuk membuat Ordered List adalah sebagai berikut :

Selain atribut type, ada juga atribut start, digunakan untuk mendefinisikan nomor awal yang akan digunakan pada ordered list. Jika ingin list dimulai dari nomor 8, makan berikut adalah contoh penggunakannya <ol start=8> Isikan teksnya </ol>




CONTOH LIST



<html>
<body>
<h1> Ordered List:</h1>
<ol>
    <li> Skateboard </li>
    <li> Gaming Gear </li>
    <li> PC Spek Dewo </li>
</ol>
<h1> Unordered List:</h1>
<ul>
    <li> Skateboard </li>
    <li> Gaming Gear </li>
    <li> PC Spek Dewo </li>
</ul>
</body>
</html>


CONTOH NESTED LIST 

<html>
<body>
<h1> Nested List:</h1>
<ul>
   <li>Skateboard </li>
   <li>Gaming Gear</li>
      <ul>
          <li>Hengset Dewo </li>
          <li> Mouse Dewo </li>
          <li> Keyboard Dewo </li>
      </ul>
   <li> PC Spek Dewo </li>
</ul>
</body>
</html>




SEMOGA BERMANFAAT
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar