Kamis, 24 Maret 2016

Pengenalan List Pada HTML

Hallo sobat sekalian..
Pada kesempatan kali ini saya akan memberikan sedikit pengenalan tentang list pada HTML.
Kita langsung saja :

List dalam HTML adalah sebuah tag untuk mengelompokkan item-item dari suatu daftar baik secara berurutan maupun tidak berurutan yang dilengkapi dengan nomor alfabetik, nomor numerik ataupun dengan bullet. List Tag pada HTML memiliki 3 varian yaitu:

1.     Ordered List (Daftar Bernomor)  

Ordered list adalah varian dari suatu daftar yang setiap itemnya diberikan nomor. Bentuk umumnya adalah :



<ol [atribut]>
    <li>...item daftar...</li>
    <li>...item daftar...</li>
    <li>...item daftar...</li>
</ol>



2.     Unordered List (Bullet)

Unordered list adalah varian dari suatu daftar yang setiap itemnya tidak diberikan nomor. Bentuk umumnya adalah :


<ul [atribut]>
    <li>...item daftar...</li>
    <li>...item daftar...</li>
    <li>...item daftar...</li>
</ul>


3.     Definition List

Definition List cocok digunakan untuk menjelaskan suatu terminologi secara rapih dan profesional. Pada umumnya, definition list terbagi atas dua bagian item. Bagian pertama adalah label dan bagian kedua adalah penjelasan.

Definition List terdiri diapit oleh tag <DL> ... </DL> dan <DT> tag menentukan definition term serta <DD> tag menentukan definition itu sendiri.
Bentuk umum dari definition list adalah :


<dl>
    <dt>label
<dd>keterangan</dd>
</dt>
<dt>label
<dd>keterangan</dd>
</dl>












Contoh List Pada HTML :


<H2><CENTER><FONT FACE="Comic Sans MS">PEMADAM KELAPARAN</FONT></CENTER></H2>

<OL START=1><FONT FACE="Segoe Script"><FONT SIZE=5><B>
<LI><FONT FACE="Segoe Script"><FONT SIZE=5><B>Daftar Makananan</B></FONT></FONT></LI>
</B></FONT></FONT></OL>

<LI><FONT FACE="Lucida Handwriting"><FONT SIZE=4><B>Aneka ayam</B></FONT></FONT></LI>

<BR>

<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Ayam Goreng</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Ayam Bakar</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Ayam Kalasan</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Ayam Penyet</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Ayam Kremes</LI></FONT>

<BR>

<LI><FONT FACE="Lucida Handwriting"><FONT SIZE=4><B>Ikan Patin</B></FONT></FONT></LI>

<BR>

<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Patin Bakar</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Sop Patin</LI></FONT>

<BR>


<LI><FONT FACE="Lucida Handwriting"><FONT SIZE=4><B>Aneka Sea Food</B></FONT></FONT></LI>

<BR>

<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Udang Goreng Tepung Crispy</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Udang Bakar</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Udang Sambal Pete</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Cumi Goreng Tepung Crispy</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Cumi Bakar</LI></FONT>

<BR>

<LI><FONT FACE="Lucida Handwriting"><FONT SIZE=4><B>Aneka Tumisan</B></FONT></FONT></LI>

<BR>

<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Tumis Kangkung</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Tumis Kangkung Sea Food</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Tumis bunga Pepaya</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Tumis Baby Buncis</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Tumis Toge</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Tumis Toge Jambal</LI></FONT>

<BR>

<LI><FONT FACE="Lucida Handwriting"><FONT SIZE=4><B>Sate</B></FONT></FONT></LI>

<BR>

<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Sate Ayam</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Sate Kambing</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Sate Buaya</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Sate Sapi</LI></FONT>

<BR>

<LI><FONT FACE="Lucida Handwriting"><FONT SIZE=4><B>Aneka Nasi</B></FONT></FONT></LI>

<BR>

<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Nasi Putih</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Nasi Timbel</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Nasi Uduk</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Nasi Goreng Kampung</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Nasi Beras Merah</LI></FONT>

<BR>

<OL START=2><FONT FACE="Segoe Script"><FONT SIZE=5><B>
<LI><FONT FACE="Segoe Script"><FONT SIZE=5><B>Daftar Minuman</B></FONT></FONT></LI>
</B></FONT></FONT></OL>

<BR>

<LI><FONT FACE="Lucida Handwriting"><FONT SIZE=4><B>Beer</B></FONT></FONT></LI>

<BR>

<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Guinnes Kecil</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Guinnes Besar</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Bintang Pitcher</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Carlsberg Tower</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>San Miguel</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Mix Max</LI></FONT>

<BR>

<LI><FONT FACE="Lucida Handwriting"><FONT SIZE=4><B>Soft Drink</B></FONT></FONT></LI>

<BR>

<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Aqua</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Kratingdaeng</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Pocari Sweat</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Liang Teh</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Pulpy Orange</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Mizone</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Markizza</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Frestea</LI></FONT>

<BR>

<LI><FONT FACE="Lucida Handwriting"><FONT SIZE=4><B>Juice</B></FONT></FONT></LI>

<BR>

<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Jambu</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Mangga</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Melon</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Orange</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Semangka</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Apel</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Sirsak</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Anggur</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Alpukat</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Durian</LI></FONT>

<BR>

<LI><FONT FACE="Lucida Handwriting"><FONT SIZE=4><B>Cold Drink</B></FONT></FONT></LI>

<BR>

<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Lemon Tea</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Fresh Orange</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Lemon Squash</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Chocolate</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Chocohino</LI></FONT>

<BR>

<H2><CENTER><FONT FACE="Comic Sans MS">Selamat Menikmati</FONT></CENTER></H2>


Berikut Hasil Output nya :

PEMADAM KELAPARAN

  1. Daftar Makananan



  • Aneka ayam



  • Ayam Goreng
  • Ayam Bakar
    •
  • Ayam Kalasan
    •
  • Ayam Penyet
    •
  • Ayam Kremes




  • Ikan Patin



  • Patin Bakar
  • Sop Patin




  • Aneka Sea Food



  • Udang Goreng Tepung Crispy
  • Udang Bakar
    •
  • Udang Sambal Pete
    •
  • Cumi Goreng Tepung Crispy
    •
  • Cumi Bakar




  • Aneka Tumisan



  • Tumis Kangkung
  • Tumis Kangkung Sea Food
    •
  • Tumis bunga Pepaya
    •
  • Tumis Baby Buncis
    •
  • Tumis Toge
    •
  • Tumis Toge Jambal




  • Sate



  • Sate Ayam
  • Sate Kambing
    •
  • Sate Buaya
    •
  • Sate Sapi




  • Aneka Nasi



  • Nasi Putih
  • Nasi Timbel
    •
  • Nasi Uduk
    •
  • Nasi Goreng Kampung
    •
  • Nasi Beras Merah

    1. Daftar Minuman




  • Beer



  • Guinnes Kecil
  • Guinnes Besar
    •
  • Bintang Pitcher
    •
  • Carlsberg Tower
    •
  • San Miguel
    •
  • Mix Max




  • Soft Drink



  • Aqua
  • Kratingdaeng
    •
  • Pocari Sweat
    •
  • Liang Teh
    •
  • Pulpy Orange
    •
  • Mizone
    •
  • Markizza
    •
  • Frestea




  • Juice



  • Jambu
  • Mangga
    •
  • Melon
    •
  • Orange
    •
  • Semangka
    •
  • Apel
    •
  • Sirsak
    •
  • Anggur
    •
  • Alpukat
    •
  • Durian




  • Cold Drink



  • Lemon Tea
  • Fresh Orange
    •
  • Lemon Squash
    •
  • Chocolate
    •
  • Chocohino

    • Selamat Menikmati



    Sekian blog saya kali ini semoga bermanfaat buat sobat-sobat sekalian.
    Diposting oleh di

    Tidak ada komentar:

    Posting Komentar

    Langganan: Posting Komentar (Atom)