Minggu, 14 Agustus 2016

Membuat Aneka Macam List Dalam HTML



Sering kali di sebuah website, diperlukan pembuatan daftar atau list. Daftar ini ada berbagai macam variasinya di pemrograman HTML. Yaitu ordered list, unordered list dan definition list.
Untuk membuat daftar berurutan, Anda perlu 2 kode:

  • Semua list dibuka dengan tag <ol> dan ditutup dengan tag </ol>. Tag OL ini adalah singkatan dari ordered list.
  • Tiap item dari list yang ada dibuka dengan tag <li> dan ditutup dengan tag </li>. LI ini adalah singkatan dari list item

Setelah list bernomor sebelumnya, Anda dapat juga bisa membuat jenis yang kedua, yaitu list bullet. Yaitu berjenis unorderd list. Nama bullet ini disebabkan browser menampilkan ikon bulat-bulat di sebelah kiri tiap list item yang dimasukkan. Kodenya hampir mirip dengan ordered list, di mana:

  • Semua list dibuka dengan tag <ul> dan ditutup dengan tag </ul>. Tag UL ini adalah singkatan dari unordered list
  • Tiap item dari list dibuka dengan tag <li> dan ditutup dengan tag </li>.

Berikut ini kode yang mengandung tipe ordered list dan unordered list:

<html>
<head> 
<title>Unordered dan Orderd List</title> 
</head> 
<body> 
<h1>Daftar Komponen PC</h1> 
<ul> 
<li>Case</li> 
<li>Mother Board </li> 
<li>CPU (Central Processing Unit) </li> 
<li>RAM (Random Access Memory)</li> 
<li>Hard Disk Drive</li> 
<li>Video Display Adapter</li> 
<li>Monitor </li> 
<li>Input Device</li> 
<li>Printer</li> 
</ul> 
<h1> Cara merakit PC</h1> 
<ol> 
<li>Pasang Prosesor ke Motherboard</li> 
<li>Pasang Memory ke Motherboard</li> 
<li>Pasang Motherboard ke Casing</li> 
<li>Pasang Powersupply dan Kabelnya</li> 
<li>Pasang kabel controller depan</li> 
<li>Pasang hard drive dan drive optik</li> 
<li>Oke, selesai</li> 
</ol> 
</body> 
</html>  

Jika dilihat di browser, tampilan list ini terlihat seperti berikut



Tipe list ketiga adalah definition list. Tipe ini fungsinya memformat teks dalam bentuk seperti kamus, sehingga Anda dapat menuliskan kata dan mendefinisikan artinya. Jadi tipe ini memiliki 2 bagian, yaitu istilah dan arti istilah tersebut. Namun tag-nya ada tiga, yaitu:

  • Kata yang akan dijelaskan menggunakan tag <dt> yang merupakan singkatan dari definition term.
  • Kata penjelasannya menggunakan tag <dd> yang artinya definition description.
  • Semua tag ini diawali oleh tag <dl> yang merupakan singkatan dari definition list.  


Contoh kode HTML yang menampilkan definition list ini adalah:  

<head> 
<title>Definition List</title> 
</head> 
<body> 
<h1> Definisi Komponen PC</h1> 
<dl> 
<dt>Case </dt>  
              <dd>Tempat untuk menyimpan semua komponen komputer</dd> 
<dt>Mother Board</dt>    
              <dd>Tempat untuk menancapkan semua komponen dan perkabelan</dd> 
<dt>CPU (Central Processing Unit)</dt>  
              <dd> Otaknya komputer</dd> 
<dt>RAM (Random Access Memory) </dt>  
              <dd>Tempat penyimpanan data sementara</dd> 
<dt>Hard Disk Drive</dt>  
              <dd>Tempat penyimpanan data permanen</dd> 
<dt>Video Display Adapter </dt>  
              <dd>Tempat me-render gambar</dd> 
<dt>Monitor</dt>  
              <dd>Tempat menampilkan gambar</dd> 
<dt>Input Device</dt>  
              <dd>Tempat memasukkan masukan ke komputer</dd> 
</dl> 
</body> 
</html>

Jika dilihat di browser, terlihat webpage seperti ini.



List-list di atas dapat juga dikombinasikan. Caranya sama seperti ketika meng-combo-kan style pada teks. Jadi, Anda hanya perlu memainkan peletakan tag di dalam tag list lainnya.

<dl> 
<dt>Komponen-komponen komputer yang penting:</dt> 
<dd> 
List-nya adalah seperti berikut: 
<ul> 
<li>Monitor</li> 
<li>Sistem operasi</li> 
<li>CPU</li> 
</ul> 
</dd> 
</dl>  

Jika dilihat di browser, tampilan unordered list akan ada di dalam bagian definition description. Karena tag <ul> ada di dalam tag <dd>.

11 komentar:

  1. berguna banget nih, kebetulan blog ane membahas spek hp

    BalasHapus
  2. wahh baru tau ane gan
    nanti coba deh

    BalasHapus
  3. Langsung praktek jozz

    BalasHapus
  4. sangat bagus tutornya buat pembelajaran

    BalasHapus
  5. mantepnih, langsung coba. makasih infonya gan

    BalasHapus
  6. thanks gan, lagi butuh info banget nih

    BalasHapus
  7. thanks tutorialnya, kalo biar kayak paragraf itu gimana gan, judul pojok, terus, penjelasannya agak ketengah tapi di line berikutnya tetep kepojok.
    thanks

    BalasHapus