List pada HTML (OL dan UL)

Dipublikasikan oleh Muhammad Zen pada

List Pada HTML

Halo teman-teman semua. Lanjut lagi belajar html. Kali ini kita akan membahas list pada html. Yang dikenal dengan istilah ordered list dan unordered list. Apakah kamu mengikuti materi dari awal? jika tidak kunjungi halaman berikut.

Supaya kamu mudah untuk memahami. Maka saya akan mencari persamaan nya dengan Ms. word. Jadi seperti ini cara mengingatnya. Ordered list adalah numbering (di word). Sedangkan Unordered list adalah bullet.

Sedangkan mengenai fungsi list kamu pasti sudah tau. Fungsi list untuk menampilkan informasi dalam bentuk daftar. contohnya seperti daftar menu yang sering kita lihat ketika akan memesan makanan.

Ordered List (List Pada HTML)

Ordered list adalah list atau daftar yang tampil berurut. Tag yang diunakan adalah <ol> dan</ol>. Kemudian tag ini memiliki anak lagi yaitu <li> dan</li>. Karena ada dua jenis tag yang digunakan, maka dapat dikatakan tag <ol> memliki anak. Yaitu tag <li>. Langsung saja kita lihat kodenya.

<ol>
 <li>HTML</li>
 <li>CSS</li>
 <li>JavaScript</li>
 <li>PHP</li>
 <li>MySQL</li>
</ol>

Nah, sekarang kamu tinggal berikan judul di atasnya seperti berikut ini.

<h3>Daftar Materi Pemrograman Web</h3>
<ol>
 <li>HTML</li>
 <li>CSS</li>
 <li>JavaScript</li>
 <li>PHP</li>
 <li>MySQL</li>
</ol>

Sebelumnya kita sudah menyinggung atribut. Jika kamu lupa silahkan baca disini. Selanjutnya kita akan berkenalan dengan sebuah atribut yang ada pada tag <ol>. Yakni atribut type. format nama_atribut=”value”.

TipeDeskripsi
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
Tabel atribut type pada tag <ol>

Ordered List dengan Atribut type=”A”

Sekarang kamu dapat mengubah angka 1 menjadi huruf A.

<h3>Daftar Materi Pemrograman Web</h3>
<ol type="A">
 <li>HTML</li>
 <li>CSS</li>
 <li>JavaScript</li>
 <li>PHP</li>
 <li>MySQL</li>
</ol>

Untuk type lain kamu coba sendiri ya.


Unordered List (List Pada HTML)

Unordered list adalah list tidak berurut. listnya berbentuk simbol. Jika di ingat di microsoft word, maka list jenis ini sama dengan bullet. Tag untuk unordered list hampir mirip dengan ordered list yaitu <ul>. Jadi bedanya <ol> (ordered list) <ul> (unordered list).

<h3>Daftar Materi Pemrograman Web</h3>
<ul>
 <li>HTML</li>
 <li>CSS</li>
 <li>JavaScript</li>
 <li>PHP</li>
 <li>MySQL</li>
</ul>

Selanjutnya kalau kamu mau mengubah simbol dari list. Maka kamu harus menggunakan atribut yang sama dengan sebelumnya. Atribut tersebut yaitu type.

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
Tabel atribut style untuk unordered list

Langsung saya kita coba untuk type=”disc”.

<h3>Daftar Materi Pemrograman Web</h3>
<ul type="circle">
 <li>HTML</li>
 <li>CSS</li>
 <li>JavaScript</li>
 <li>PHP</li>
 <li>MySQL</li>
</ul>

Latihan

Sebagai latihan coba kamu kerjakan tugas berikut.

list pada html
list pada html

Jangan lupa kamu harus membuat tag standar html ya.

<html>
  <head>
    <title> Latihan List</title>
  </head>
  <body>
    <!-- Kode Kamu disini-->
  </body>
</html>

Sekian untuk materi kali ini. Jika kamu ingin kursus secara langsung, kami membuka kelas baru. Silahkan hubungi kontak kami di menu.


0 Komentar

Tinggalkan Balasan

Avatar placeholder

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *