HTML List

rani
Sekarang kita bahas mengenai list dalam HTML. Jika dalam Ms. Word kita menyebutnya Bullets dan Numbering, pada HTML kita menyebut unordered list untuk bullets dan ordered list untuk numbering.

Unordered List
List ini diawali dengan tag <ul>, dan masing-masing item list diawali dengan tag <li>. Unordered list ini akan ditandai dengan lingkaran hitam kecil di sebelah kiri (bullet) secara default.
<ul>
  <li>Gunting</li>
  <li>Kertas</li>
  <li>Batu</li>
</ul>
Tanda list dapat diubah dengan atribut type. Terdapat 4 pilihan:
  • disc --> item list akan ditandai lingkaran berisi warna hitam.
  • circle --> item list akan ditandai dengan lingkaran kosong.
  • square --> item list akan ditandai dengan persegi.
  • none --> item list tidak akan ditandai.
Disc:
<ul type="disc">
  <li>Gunting</li>
  <li>Kertas</li>
  <li>Batu</li>
</ul>

Circle:
<ul type="circle">
  <li>Gunting</li>
  <li>Kertas</li>
  <li>Batu</li>
</ul>

Square:
<ul type="square">
  <li>Gunting</li>
  <li>Kertas</li>
  <li>Batu</li>
</ul>

None:
<ul type="none">
  <li>Gunting</li>
  <li>Kertas</li>
  <li>Batu</li>
</ul> 

Ordered List
Kita menggunakan ordered list jika butuh penomoran pada list yang akan kita buat.
<ol>
  <li>Pagi</li>
  <li>Siang</li>
  <li>Sore</li>
  <li>Malam</li>
</ol>
  • <ol type="1"> - Nilai default dengan urutan angka.
  • <ol type="I"> - Angka romawi dengan huruf kapital.
  • <ol type="i"> - Angka romawi dengan huruf kecil.
  • <ol type="a"> - Huruf kecil.
  • <ol type="A"> - Huruf besar.
<ol type="1">
  <li>Pagi</li>
  <li>Siang</li>
  <li>Sore</li>
  <li>Malam</li>
</ol>
<ol type="I">
  <li>Pagi</li>
  <li>Siang</li>
  <li>Sore</li>
  <li>Malam</li>
</ol>
<ol type="i">
  <li>Pagi</li>
  <li>Siang</li>
  <li>Sore</li>
 <li>Malam</li>
</ol>
<ol type="a">
  <li>Pagi</li>
  <li>Siang</li>
  <li>Sore</li>
  <li>Malam</li>
</ol>
<ol type="A">
  <li>Pagi</li>
  <li>Siang</li>
  <li>Sore</li>
  <li>Malam</li>
</ol>
Description List
List ini biasanya dipakai untuk pendefinisian istilah, seperti dalam kamus.
Tag <dl> menyatakan bahwa ini merupakan description list. Tag <dt> untuk menyatakan nama istilah, dan tag <dd> merupakan definisi istilah tersebut.
<dl>
<dt>Ovipar</dt>
<dd>Hewan yang berkembangbiak dengan cara bertelur. Contohnya Itik, Ayam, 
    Penyu dan Ikan.</dd>
<dt>Vivipar</dt>
<dd>Hewan yang berkembangbiak dengan cara beranak. Contohnya Kuda, Gajah, 
    Kucing, Kelinci, dll.</dd>
<dt>Ovovivipar</dt>
<dd>Hewan yang berkembangbiak dengan cara beranak dan bertelur. 
    Contoh: Ular.</dd>
</dl>
List dalam List
Kita dapat menambahkan list di dalam list. List juga dapat memuat elemen HTML lainnya seperti image, link, dll. Berikut contoh penulisan code list dalam list:
<ul>
  <li>Hitam Putih</li>
  <li>Warna Warni
    <ul>
      <li>Ungu</li>
      <li>Pink</li>
    </ul>
  </li>
  <li>Transparan</li>
</ul>

List untuk Menu
Elemen list juga biasanya digunakan untuk membentuk menu dalam sebuah halaman web, dengan menambahkan style-style tertentu. Untuk membuatnya tampil secara horizontal adalah menambahkan properti style display:inline;
Berikut adalah sebuah contoh penulisan list untuk menu dengan style.
<!DOCTYPE html>
<html>

<head>
  <style>
    ul#menu {
        padding: 0;
    }

    ul#menu li {
        display: inline;
    }

    ul#menu li a {
        background-color: blue;
        color: white;
        padding: 10px 20px;
        text-decoration: none;
        border-radius: 4px 4px 0 0;
    }

    ul#menu li a:hover {
        background-color: grey;
    }
  </style>
</head>

<body>

<h2>Horizontal Menu</h2>

<ul id="menu">
 <li><a href="#">Home</a></li>
 <li><a href="#">About Us</a></li>
 <li><a href="#">News</a></li>
 <li><a href="#">Contact</a></li>
</ul> 

</body>
</html>


Click here if you like this article.


Tags
Reactions

Post a Comment

0 Comments

Post a Comment