Cara membuat list atau daftar di HTML

-
List atau daftar adalah salah satu cara untuk menampilkan informasi dalam bentuk daftar. List biasa digunakan untuk membuat menu. Ada 3 jenis list yang dapat digunakan yaitu:
  1. Ordered List
  2. Unordered List
  3. Description List
1. Cara Membuat Ordered List
Ordered list adalah list berbentuk urutan, dimana listnya ditandai huruf atau angka. Jika di ingat di microsoft word list jenis ini sama dengan numbering. Tag ordered list adalah <ol>.

<h3>Daftar Makanan</h3>
<ol>
<li>Nasi Goreng</li>
<li>Bakso</li>
<li>Mie Ayam</li>
<li>Soto Medan</li>
</ol>

Maka hasil ordered list di atas seperti ini.

Daftar Makanan

  1. Nasi Goreng
  2. Bakso
  3. Mie Ayam
  4. Soto Medan
Properti type dan value yang ada di tag <ol>:


Tipe Deskripsi
type="1" Tipe angka adalah tipe default dari ordered list
type="A" Tipe A akan menghasilkan list huruf Kapital
type="a" Tipe a akan menghasilkan list huruf kecil
type="I" Tipe I  a akan menghasilkan list huruf romawi besar
type="i" Tipe I  a akan menghasilkan list huruf romawi kecil

1.1. Contoh dengan type="A"

<h3>Daftar Makanan</h3>
<ol type="A">
<li>Nasi Goreng</li>
<li>Bakso</li>
<li>Mie Ayam</li>
<li>Soto Medan</li>
</ol>

Daftar Makanan

  1. Nasi Goreng
  2. Bakso
  3. Mie Ayam
  4. Soto Medan

1.2. Contoh tag <ol> dengan properti type="a"

<h3>Daftar Makanan</h3>
<ol type="a">
<li>Nasi Goreng</li>
<li>Bakso</li>
<li>Mie Ayam</li>
<li>Soto Medan</li>
</ol>

Daftar Makanan

  1. Nasi Goreng
  2. Bakso
  3. Mie Ayam
  4. Soto Medan
1.3. Contoh tag <ol> dengan properti  type="I"

<h3>Daftar Makanan</h3>
<ol type="I">
<li>Nasi Goreng</li>
<li>Bakso</li>
<li>Mie Ayam</li>
<li>Soto Medan</li>
</ol>

Daftar Makanan

  1. Nasi Goreng
  2. Bakso
  3. Mie Ayam
  4. Soto Medan
1.4. Contoh tag <ol> dengan properti type="i"

<h3>Daftar Makanan</h3>
<ol type="i">
<li>Nasi Goreng</li>
<li>Bakso</li>
<li>Mie Ayam</li>
<li>Soto Medan</li>
</ol>

Daftar Makanan

  1. Nasi Goreng
  2. Bakso
  3. Mie Ayam
  4. Soto Medan
2. Cara Membuat Unordered List
Unordered list adalah list tidak berurut, dimana listnya ditandai simbol atau gambar. Jika di ingat di microsoft word list jenis ini sama dengan bullet. Tag unordered list adalah <ul>.

<h3>Daftar Makanan</h3>
<ul type="i">
<li>Nasi Goreng</li>
<li>Bakso</li>
<li>Mie Ayam</li>
<li>Soto Medan</li>
</ul>

Daftar Makanan

  • Nasi Goreng
  • Bakso
  • Mie Ayam
  • Soto Medan

Properti type dan value yang ada di tag <ul>:


TipeDeskripsi
type="disc"Tipe disc adalah tipe default
type="circle"Tipe circle simbol berbentuk lingkaran
type="square"Tipe square simbol berbentuk persegi
type="none"Tipe none simbol tidak ditampilkan

2.1. Contoh tag <ul> dengan properti type="circle"

<h3>Daftar Makanan</h3>
<ul type="circle">
<li>Nasi Goreng</li>
<li>Bakso</li>
<li>Mie Ayam</li>
<li>Soto Medan</li>
</ul>

Daftar Makanan

  • Nasi Goreng
  • Bakso
  • Mie Ayam
  • Soto Medan
2.2. Contoh tag <ul> dengan properti type="square"

<h3>Daftar Makanan</h3>
<ul type="square">
<li>Nasi Goreng</li>
<li>Bakso</li>
<li>Mie Ayam</li>
<li>Soto Medan</li>
</ul>

Daftar Makanan

  • Nasi Goreng
  • Bakso
  • Mie Ayam
  • Soto Medan
2.3. Contoh tag <ul> dengan properti style="list-style-image: url(url);"

<h3>Daftar Makanan</h3>
<ul style="list-style-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU6eEJDxi7J6moeJ_IReOZFeHCnzwSN6gsZk_xXgiL-p_RzeEla-p9ABgvgQJEMCBfxWMnuHIPmc9ik_YzcBnyTRWupP0efjue7VizWgVEetoysnadm2SjMW5h5DytPLpOVwsI_JEJTA/h120/icon.png);">
<li>Nasi Goreng</li>
<li>Bakso</li>
<li>Mie Ayam</li>
<li>Soto Medan</li>
</ul>

Daftar Makanan

  • Nasi Goreng
  • Bakso
  • Mie Ayam
  • Soto Medan

2.4. Contoh tag <ul> dengan properti type="none"

<h3>Daftar Makanan</h3>
<ul type="none">
<li>Nasi Goreng</li>
<li>Bakso</li>
<li>Mie Ayam</li>
<li>Soto Medan</li>
</ul>

Daftar Makanan

  • Nasi Goreng
  • Bakso
  • Mie Ayam
  • Soto Medan
Untuk membuat list secara horizontal dapat menambahkan properti float left dengan css.


<h3>Daftar Makanan</h3>
<ul type="none">
<li style="float: left;">Nasi Goreng</li>
<li style="float: left;">Bakso</li>
<li style="float: left;">Mie Ayam</li>
<li style="float: left;">Soto Medan</li>
</ul>

Daftar Makanan

  • Nasi Goreng
  • Bakso
  • Mie Ayam
  • Soto Medan


Dengan penambahan css lainnya cara di atas biasa digunakan untuk membuat menu tombol di web.

3. Cara Membuat Description List
description list adalah list untuk menampilkan daftar deskripsi. Tag yang digunakan adalah <dl> untuk mendefinisikan deskription list, tag <dt> untuk  nama deskripsi dan tag <dd> untuk deskripsinya.


<h3>Daftar Makanan</h3>
<dl>
<dt>Nasi Goreng</dt>
<dd> Nasi Goreng dengan teri, petai, dan lalapan</dd>
<dt>Bakso</dt>
<dd> Bakso daging ayam dengan beberapa pilihan mie</dd>
</dl>

Daftar Makanan

Nasi Goreng
Nasi Goreng dengan teri, petai, dan lalapan
Bakso
Bakso daging ayam dengan beberapa pilihan mie
Location: Medan, Medan City, North Sumatra, Indonesia

Popular posts from this blog

Cara membuat Link ke Halaman lain dan Link ke bagian Halaman

-
Image
Link adalah bagian dari HTML yang fungsinya untuk menghubungkan satu halaman dengan halaman lain. Link juga bisa diartikan sebagai cara berpindah dari satu halaman ke halaman lain. 1. Link ke Halaman Lain Tag yang digunakan untuk membuat link adalah tag anchor atau tag <a> , yang berpasangan dengan </a> . Link biasanya menggunakan objek untuk di klik yang di letakkan diatara tag buka dan tag tutup. Teks Tombol (Button) Gambar Ketiga objek di atas sering dijadikan link, dan tidak ada kategori yang paling sering digunakan. Mimilih teks, tombol, atau gambar sebagai link sangat opsional atau tidak ada keharusan. Format link <a href="url" name="nama_link"> Objek Link </a> 1.1. Contoh Link Dengan Objek Teks <!--nama file link.html--> Untuk ke halaman selanjutnya <a href="link2.html">Klik disini</a> Teks klik disini jika di klik halaman akan berpindah ke link2.html. Pada conto
Read more

Cara Menggunakan Template Admin LTE Sebagai Template Web Dinamis

-
Image
Kali ini saya akan membuat tutorial bagaimana menggunakan template gratis sebagai template web dinamis. Pertama anda download terlebih dulu templatenya disini . Pada tutorial ini saya menggunakan template admin LTE 2. Pada template ini saya memecah bagian index.php dan menyatukan kembali dengan include, tujuannya agar template terbagi-bagi dan mudah dipahami. Selain itu, pembagian ini lah yang membuat web menjadi dinamis. Perlu diingat cara saya ini bukanlah cara satu-satu nya Cara Menggunakan template Admin LTE Sebagai Template Web Dinamis . Cara ini saya sharing karena menurut saya adalah cara yang cukup efisien dan mampu menangani semua halaman yang akan kita buat. Bagian terpenting nya adalah mampu menghasilkan program sesuai yang kita harapkan dengan cara yang lebih mudah dibuat. Pertama kita buat folder di htdocs template kemudian ekstrak file zip nya di folder tersebut. Selanjutnya buka folder template dan rename file index.html menjadi index.php  . Buka file
Read more

Cara Membuat Kalkulator Dengan Java Script

-
Image
Kali ini saya akan membagikan tutorial cara membuat kalkulator sederhana dengan java script. Kita ketahui java script adalah bahasa pemrograman klien. Artinya kode program dapat dilihat dari web browser. Kelebihan bahasa java script ini halaman tidak perlu reload. <!--nama file calc.php--> <!DOCTYPE html> <html> <head> <title>Calculator</title> <style type="text/css"> .tombol{ background-color: deepskyblue; } .tabel{ background-color: gold; margin: 10px; padding: 10px; } </style> </head> <body> <form name="calculator"> <table style="background-color: " class="tabel"> <caption>Calculator</caption> <tr> <td>Angka 1</td><td>:</td><td><input type="number" name="angka1"></td> </tr> <tr> <td>Angka 2</td&
Read more