List dalam Html

Hai semuanya, pada kali ini saya akan memberikan tutorial tentang Html. Kita akan membahas List dalam Html. Sebelum masuk ke pembahasan, apa yang kamu ketahui tentang List ? Apakah bisa membuat List dengan Html ?

List merupakan sebuah daftar urutan yang dibuat agar mempermudah pembaca ketika membaca sebuah informasi. Karena jika menyampaikan sebuah informasi menggunakan list, pembaca lebih mudah untuk membacanya. Misalnya list menu makanan pada sebuah restoran, list nama pekerjaan dan list absen sekolah.

Untuk membuat sebuah list, kita membutuhkan sebuah text editor untuk menuliskan kodingan nya. Dalam html, list memiliki beberapa jenis. Berikut ini adalah jenis - jenis list dalam html :

1. Ordered List
Ordered List merupakan sebuah list yang urutan nya menggunakan angka dan huruf. Untuk membuat list jenis Ordered List, kita bisa menggunakan tag <ol> dengan tag penutup nya </ol>. Kemudian di dalam tag <ol>, kita berikan tag <li> beserta tag penutup nya </li>. Fungsi dari tag <li> adalah untuk membuat list nya. Berikut ini adalah contoh codingan nya

<!DOCTYPE html>
<html>
  <head>
    <title> Contoh Ordered List dalam Html </title>
  </head>
  <body>
  	<p>Daftar Nama Siswa</p>
  	<ol>
         <li>Andri</li>
         <li>Ahmad</li>
         <li>Bayu</li>
         <li>Chandra</li>
         <li>Dennis</li>
         <li>Erlangga</li>
      </ol>
  </body>
</html>

Hasilnya seperti dibawah ini

Demo

Pada umumnya, Ordered List diurutkan berdasarkan angka mulai dari 1,2,3 hingga seterusnya. Lalu apakah kita bisa mengubah nya ? Jawaban nya adalah bisa. Kita bisa mengubahnya menjadi huruf a,b,c dan seterusnya. Kita hanya perlu menambahkan attribute "type" pada codingan <ol>. Berikut ini adalah contoh codingan nya

<!DOCTYPE html>
<html>
  <head>
    <title> Contoh Ordered List dalam Html </title>
  </head>
  <body>
    <p>Daftar Nama Siswa</p>
    <ol type="a">
         <li>Azka</li>
         <li>Beni</li>
         <li>Chandra</li>
         <li>Deny</li>
         <li>Erik</li>
    </ol>
  </body>
</html>

Hasilnya seperti dibawah ini

Demo

Kita juga membuat list nya menggunakan huruf kapital. Berikut ini adalah contoh codingan nya

<!DOCTYPE html>
<html>
  <head>
    <title> Contoh Ordered List dalam Html </title>
  </head>
  <body>
  	<p>Daftar Nama Murid</p>
  	<ol type="A">
         <li>Abdul</li>
         <li>Bayu</li>
         <li>Cakra</li>
         <li>Dennis</li>
         <li>Erlangga</li>
        </ol>
  </body>
</html>

Hasilnya seperti dibawah ini

Demo

Kamu juga bisa mengganti list nya menggunakan angka romawi. Contohnya seperti i,ii,iii dan I,II,III. Berikut ini adalah contoh codingan nya

<!DOCTYPE html>
<html>
  <head>
    <title> Contoh Ordered List dalam Html </title>
  </head>
  <body>
  	<p>Daftar Nama Murid</p>
  	<ol type="i">
         <li>Abdul</li>
         <li>Bayu</li>
         <li>Cakra</li>
         <li>Dennis</li>
         <li>Erlangga</li>
      </ol>
      <p>Daftar Nama Jurusan</p>
  	<ol type="I">
         <li>Teknik Komputer Jaringan</li>
         <li>Akuntansi</li>
         <li>Teknik Kendaraan Ringan</li>
         <li>Rekayasa Perangkat Lunak</li>
         <li>Tata Boga</li>
         <li>Perhotelan</li>
      </ol>
  </body>
</html>

Hasilnya seperti dibawah ini

Demo

2. Unordered List
Unordered List merupakan sebuah liat yang urutan nya berupa simbol simbol. Kita bisa membuat ordered list dengan tag <ul> beserta penutupnya </ul>. Di dalam tag <ul>, kita berikan tag <li> untuk membuat list nya. Berikut ini adalah contoh codingan nya

<!DOCTYPE html>
<html>
  <head>
    <title> Contoh Ordered List dalam Html </title>
  </head>
  <body>
  	<p>Daftar Nama Negara</p>
  	<ul>
         <li>Indonesia</li>
         <li>Malaysia</li>
         <li>Singapura</li>
         <li>Hongkong</li>
         <li>Vietnam</li>
         <li>India</li>
      </ul>
  </body>
</html>

Hasilnya seperti dibawah ini

Demo

Secara default, unordered list menggunakan simbol lingkaran atau bisa kita sebut disc. Namun kita juga bisa mengubah simbol simbol tersebut. Cara merubahnya adalah dengan menambahkan attribute "type" pada tag <ul>. Contoh disini saya akan mengubah simbolnya agar berbentuk persegi. Jadi kita hanya menambahkan type="square". Berikut ini adalah contoh codingan nya

<!DOCTYPE html>
<html>
  <head>
    <title> Contoh Unordered List dalam Html </title>
  </head>
  <body>
  	<p>Daftar Nama Negara</p>
  	<ul type="square">
         <li>Indonesia</li>
         <li>Malaysia</li>
         <li>Singapura</li>
         <li>Hongkong</li>
         <li>Vietnam</li>
         <li>India</li>
      </ul>
  </body>
</html>

Hasilnya seperti dibawah ini

Demo

Selain bentuk persegi, kita juga bisa mengubahnya dengan bentuk lainnya. Contohnya kita bisa mengubahnya menjadi lingkaran atau tidak menggunakan simbol apapun. Secara default kita menggunakan simbol lingkaran atau disc. Namun kita juga bisa mengubahnya menjadi lingkaran lainnya atau circle. Berikut ini contoh codingan nya

<!DOCTYPE html>
<html>
  <head>
    <title> Contoh Unordered List dalam Html </title>
  </head>
  <body>
  	<p>Daftar Nama Negara</p>
  	<ul type="disc">
         <li>Indonesia</li>
         <li>Malaysia</li>
         <li>Singapura</li>
         <li>Hongkong</li>
         <li>Vietnam</li>
         <li>India</li>
      </ul>
      <p>Daftar Nama Hewan</p>
  	<ul type="none">
         <li>Angsa</li>
         <li>Bebek</li>
         <li>Kucing</li>
         <li>Kuda</li>
         <li>Keledai</li>
         <li>Sapi</li>
      </ul>
      <p>Daftar Nama Buah</p>
  	<ul type="circle">
         <li>Pisang</li>
         <li>Mangga</li>
         <li>Manggis</li>
         <li>Apel</li>
         <li>Anggur</li>
         <li>Pepaya</li>
      </ul>
  </body>
</html>

Hasilnya seperti dibawah ini

Demo

Meskipun Disc dan Circle memiliki fungsi yang sama, namun tetap saja memiliki perbedaan. Diatas kita bisa melihat perbedaan antara disc dan circle. Jika Disc untuk simbol lingkaran biasa, sedangkan circle untuk lingkaran yang tengahnya transparan.

3. Description List
Description List merupakan sebuah list yang digunakan untuk memberikan deskripsi atau penjelasan singkat pada sebuah list. Untuk membuat Description List, kita bisa menggunakan tiga tag. Berikut ini adalah tag tag yang bisa kita gunakan.

Tag <dl> berfungsi sebagai pembuka description list.
Tag <dt> digunakan untuk menuliskan kata yang akan diberikan deskripsi nya.
Tag <dd> berfungsi untuk memberikan deskripsi dari kata yang ditulis dalam tag <dt>

Berikut ini adalah contoh codingan nya

<!DOCTYPE html>
<html>
  <head>
    <title> Contoh Description List dalam Html </title>
  </head>
  <body>
  	<p>Daftar List :</p>
  	<dl>
         <dt>Android Studio</dt>
         <dd>Software yang digunakan untuk membuat aplikasi android</dd>
         <dt>Flutter</dt>
         <dd>Software yang digunakan untuk membuat aplikasi berbasis android dan IOS</dd>
         <dt>Bootstrap</dt>
         <dd>Software yang membantu para pengembang website agar lebih mudah mengembangkan website</dd>
      </dl>
  </body>
</html>

Hasilnya seperti dibawah ini

Demo

Easy Customization

Plus UI template advantages

Grab All New 2.6!

Common questions

Search Suggest

Nusapixel Digital

Progress Bar

List dalam Html

Posting Komentar

Cara Membuat Form di Html

Plus UI Original