Cara Membuat List Pada Html

Pada artikel kali ini saya akan menjelaskan mengenai cara membuat list pada html, biasanya list dapat kita gunakan untuk menampilkan suatu informasi, misalnya: untuk menampilkan menu makanan, list nama siswa dan lain sebagainya.

Dalam Html, list dapat dibedakan menjadi 2 jenis yaitu: ordered list dan unordered list.

Untuk menulis ordered list kita dapat menggunakan tag <ol>, ordered list memiliki fungsi untuk membuat list secara berurutan, sedangkan unordered list dapat kita pakai untuk membuat list yang tidak berurutan, untuk menulis unordered list kita dapat menggunakan tag <ul>.

Daftar Isi

Cara Membuat List Pada Html

Silahkan simak penjelasan dibawah ini untuk penjelasan lebih lanjut mengenai ordered list dan unordered list.

Ordered List

Seperti yang sudah saya jelaskan sebelumnya ordered list ( <ol> ) adalah tag yang bisa kita gunakan untuk membuat daftar atau list secara berurutan

Contoh

Berikut adalah contoh penulisan tag ordered list:

<!DOCTYPE html> 
<html> 
<head> 
      <title>List Nama Siswa</title> 
</head> 
<body> 
<ol type="A"> 
      <li>Rimuru</li> 
      <li>Kuhaku</li> 
      <li>Shiro</li> 
      <li>Shora</li> 
      <li>Kiragami</li> 
</ol> 
</body> 
</html>

Hasil saat dijalankan atau dibuka melalui browser:

contoh oredered list

Penjelasan

Untuk menulis ordered list, kita dapat menggunakan tag <ol> dan diakhiri dengan tag </ol>, kemudian pada contoh diatas terdapat tag <li>…</li> diantara tag <ol dan </ol>, tag <li> berfungsi untuk menulis daftar item.

Selain itu didalam tag <ol> juga terdapat atribut type=”A”, atribut tersebut dapat Anda ganti dengan atribut yang ada dibawah ini:

Atribut Fungsi
type=”A” Untuk membuat list berurutan dengan huruf besar
type=”a” Untuk membuat list berurutan dengan huruf kecil
type=”I” Untuk membuat list berurutan dengan huruf romawi besar
type=”i”> Untuk membuat list berurutan dengan huruf romawi kecil
type=”1″> Untuk membuat list berurutan menggunakan angka

Unordered List

Anda dapat menggunakan tag <ul> dan diakhiri dengan tag </ul> untuk membuat list yang tidak berurutan (unordered list), terdapat tiga type unordered list yang bisa Anda pakai yaitu: disc, circle, dan square.

Jika Anda tidak memilih type list didalam tag <ul> maka secara default browser akan menampilkan list dengan type disc (bulat berwarna hitam).

Atribut Fungsi
type=”disc” Membuat list dengan bentuk bulat hitam
type=”circle” Membuat list dengan bentuk bulat putih
type=”square” Membuat list dengan bentuk kotak

Contoh

Berikut adalah contoh penulisan unoredered list dengan type disc, circle, dan square.

<!DOCTYPE html> 
<html> 
<head> 
      <title>List Nama Siswa</title> 
</head> 
<body> 
<ul type="disc"> 
      <li>Rimuru</li> 
      <li>Kuhaku</li> 
</ul> 
<ul type="circle"> 
      <li>Shiro</li> 
      <li>Shora</li> 
</ul> 
<ul type="square"> 
      <li>Kiragami</li> 
      <li>Ains</li> 
</ul> 
</body> 
</html>

Hasil saat dijalankan atau dibuka melalui browser:

unordered listJadi itulah 2 jenis list beserta type list dan cara membuat list pada html, Anda dapat melanjutkan ke artikel berikutnya yaitu: Cara Membuat Hyperlink di Html untuk mengetahui lebih lanjut mengenai Html.

Share your love
Arataside
Arataside

Hi semua, saya adalah admin di arataside.com

Articles: 29

Leave a Reply

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