auhtor

Andre Rio 01 Jun 2021

#6 Belajar Membuat List Pada HTML








Belajar Membuat List Pada HTML - Pada materi sebelumnya kita sudah belajar cara membuat tabel pada HTML. Sekarang kita akan coba untuk membuat sebuah List di HTML dan caranya juga cukup sederhana.



Apa Itu List Pada HTML ?


img


List atau yang sering di kenal dengan daftar berurutan merupakan fungsi dalam HTML yang digunakan untuk menampilkan data secara berurutan ke bawah. Dalam HTML penilisan list menggunakan tag <li> dan </li>. List sangat berguna bila kita ingin membuat sebuah List contoh yang menampilkan sebuah data seperti kegiatan dsb.

Dengan mengunakan List juga mempermudah jika kita ingin membuat sebuah website banyak element-element pada website yang mengunakan List tidak hanya untuk menampilkan daftar saja namun juga bisa untuk membuat sebuah Navbar pada website rata-rata mengunakan Tag List ini. Contoh untuk menampilkan sebuah menu Home,About,Contact dan sebagainya.

Terdapat 3 macam List yang ada di HTML yaitu Ordered List, Unordered List dan Defition List. Cara membuat list di html tentunya berbeda-beda sesuai jenisnya. Ketiga macam list HTML tersebut juga memiliki tampilan dan fungsi yang berbeda.



Cara Mengunakan List


Yang pertama seperti biasa siapkan kode HTML terlebih dahulu jika belum ada silahkan copypaste kode HTML di bawah ini ke code editor kamu.

Sisahkan ruang di Tag <body> untuk mamsukan Tag List.



<!DOCTYPE html>
<html>
 <head>
  <title>Belajar List Pada Html</title>
 </head> 
 <body>

 </body>
</html>


Ordered List


Ordered list atau list angka/nomor dibuat dengan menggunakan tag <ol>. Penulisan item-item list tersebut menggunakan Tag <li> yang ditelakkan diantara tag pembuka <ol> dan tag penutup </ol>.

Codenya:


<!DOCTYPE html>
<html>
<head>
 <title>Belajar List Pada Html</title>
</head> 
<body>
<h4>kegiatan Ku</h4>
<ol>
 <li>Belajar Bahasa Inggris</li>
 <li>Belajar Ngoding</li>
 <li>Main Game</li>
 <li>Menonton Anime</li>
 </ol>
</body>
</html>


Hasilnya:

Kegiatan Ku

  1. Belajar Bahasa Inggris
  2. Belajar Ngoding
  3. Main Game
  4. Menonton Anime


Tag <ol> di buat dengan memperhatikan dari item yang ada di dalamnya, kalau itemnya tertukar berarti makna dari List ini berubah.

Contohnya:

<!DOCTYPE html>
<html>
 <head>
  <title>Belajar List Pada Html</title>
 </head> 
 <body>
 <h4>kegiatan Ku</h4>
 <ol>
  <li>Belajar Bahasa Inggris 1</li>
  <li>Belajar Ngoding 2</li>
  <li>Main Game 3</li>
  <li>Menonton Anime 4</li>
  </ol>
 </body>
</html>


Jika tidak ingin mengunakan angka pada List kita bisa mengunakan type="" contoh <ol type="nama type nya"> </ol>


Atribut dan Fungsi

type=”1″ - Pengurutan dengan angka

type=”a″ - Pengurutan dengan huruf kecil (a,b,c,…)

type=”A” - Pengurutan dengan huruf besar (A,B,C,…)

type=”i” - Pengurutan dengan angka romawi kecil (i,ii,iii,…)

type=”I” - Pengurutan dengan angka romawi besar (I,II,III,…)


Sebagai contoh kita akan mengunakan Atribut huruf besar <ol type="A">

Codenya:

<!DOCTYPE html>
<html>
 <head>
  <title>Belajar List Pada Html</title>
 </head> 
 <body>
 <h4>kegiatan Ku</h4>
 <ol type="A">
  <li>Belajar Bahasa Inggris</li>
  <li>Belajar Ngoding</li>
  <li>Main Game</li>
  <li>Menonton Anime</li>
  </ol>
 </body>
</html>


Hasilnya:

img



Unordered List


Unordered List adalah jenis List yang tidak berurutan yang ditampilkan dengan menggunakan simbol. Unordered List digunakan untuk menampilkan daftar List yang tidak memerlukan angka pengurutan misalnya daftar Kegiatan, daftar belajar dan sebagainya.

Unordered List atau List simbol dibuat dengan menggunakan Tag <ul>. Sama dengan List sebelumnya, item-item List ini ditulis dengan menggunakan tag <li> yang terletak di dalam elemen <ul>.

Pada saat mengunakan <ul> atau list tidak berurut itu urutan dari item nya tidak berpengaruh.

Codenya:

<!DOCTYPE html>
<html>
 <head>
  <title>Belajar List Pada Html</title>
 </head> 
 <body>
 <h4>kegiatan Ku</h4>
 <ul>
  <li>Belajar Bahasa Inggris</li>
  <li>Belajar Ngoding</li>
  <li>Main Game</li>
  <li>Menonton Anime</li>
 </ul>
 </body>
</html>


Hasilnya:

Kegiatan ku
  • Belajar Bahasa Inggris
  • Belajar Ngoding
  • Main Game
  • Menonton Anime


HTML mempunyai 3 buah type yaitu disc ,square,circle. Masing-masing type memiliki fungsinya tersendiri misalnya kita mengunakan type <ul type="square"> maka List nya akan menjadi kotak.

Codenya:

<!DOCTYPE html>
<html>
 <head>
  <title>Belajar List Pada Html</title>
 </head> 
 <body>
 <h4>kegiatan Ku</h4>
 <ul type="square">
  <li>Belajar Bahasa Inggris</li>
  <li>Belajar Ngoding</li>
  <li>Main Game</li>
  <li>Menonton Anime</li>
 </ul>
 </body>
</html>


Hasilnya:

img



Definition List


Definition List di gunakan untuk membuat terminologi dan deskripisi. Berbeda dengan 2 List lainya Definition List isinya berpasangan.

Perlu di ingat juga List ini jarang sekali di gunakan tapi bukan berarti tidak bisa di gunakan.

Di awali dengan Tag <dl> yang artinya Definition List lalu di dalam nya terdapat 2 buah List <dt> yang artinya Definition Terminologi dan <dd> yang artinya Definition Description. Jadi jika kita mempunya 3 buah Term maka kita membutuhkan 3 buah Description.

Codenya:

<!DOCTYPE html>
<html>
 <head>
  <title>Belajar List Pada Html</title>
 </head> 
 <body>
 <h4>Manfaat Belajar</h4>
 <dl>
 <dt>Belajar Bahasa Inggris</dt>
 <dd>Agar bisa bahas inggris</dd>
 <dt>Belajar Ngoding</dt>
 <dd>Agar bisa membuat website</dd>
 </dl>
 </body>
</html>


Hasilnya:

img


Jika ingin membuat Definition Terms nya menjadi cetak tebal tinggal tambahkan Tag HTML contoh <strong>.

Codenya:

<!DOCTYPE html>
<html>
 <head>
  <title>Belajar List Pada Html</title>
 </head> 
 <body>
 <h4>Manfaat Belajar</h4>
 <dl>
 <dt><strong>Belajar Bahasa Inggris</strong></dt>
 <dd>Agar bisa bahas inggris</dd>
 <dt><strong>Belajar Ngoding</strong></dt>
 <dd>Agar bisa membuat website</dd>
 </dl>
 </body>
</html>


Hasilnya:

img



Itu saja ketiga List pada HTML cukup mudah kan untuk di praktekan dan selamat belajar…






🚀 Komentar




Banner