PENDAHULUAN

Pada sesi tutorial ini akan dibahas mengenai cara membuat daftar atau list di  HTML. Untuk membuat list di HTML terdapat 3 jenis tag yaitu:

1. <ol></ol>

Disebut juga dengan Ordered List artinya berurutan. Ordered List akan menampilkan angka atau huruf secara berurutan.

2. <ul></ul>

Disebut juga Unordered List artinya tidak berurutan. Unordered List akan menampilkan bullets yang berbetuk bulatan atau kotakan.

3. <dl></dl>

Disebut juga dengan Definition List untuk membuat daftar terminologi dan definisi.

Hal yang harus dipersiapkan adalah sebelum melakukan praktek:

  1. Menggunakan Sublime Text sebagai text editor.
  2. Web browser Chrome

Mulai

  1. Buka Sublime Text.
  2. Kemudian persiapkan file dengan nama BelajarList.html
  3. Pada lembar kerja sublie text buat lah struktur HTML dasar.
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>

<body>
<body/>
<html/>

Tag pertama yang akan dicoba adalah:

1. Ordered List; <ol></ol>.

Tag <ol></ol> akan memberitahukan HTML bahwasanya akan membuat list terurut. Misalnya akan membuat list kegiatan setelah bangun tidur.

<!DOCTYPE html>
<html>
<head>
    <title>HTML LIST</title>
</head>

<body>
   <h1>Kegiatan setelah bangun tidur:</h1>
       <ol>
           <li>Mandi</li>
           <li>Sarapan</li>
           <li>Berangkat Kerja</li>
       </ol>
<body/>
<html/>

Hasilnya (buka pada browser):

Kemudian apabila ingin mengubah urutannya tidak dengan angka, bisa menggunakan atribut Type. Jenisnya adalah:

  1. 1 = angka
  2. A = a kapital a = a kecil
  3. I = i kapital untuk romawi besar
  4. i = i kecil untuk romawi kecil
       <ol type="A">
           <li>Mandi</li>
           <li>Sarapan</li>
           <li>Berangkat Kerja</li>
       </ol>
       <ol type="a">
           <li>Mandi</li>
           <li>Sarapan</li>
           <li>Berangkat Kerja</li>
       </ol>
<ol type="I">
           <li>Mandi</li>
           <li>Sarapan</li>
           <li>Berangkat Kerja</li>
       </ol>
2. Unordered List; <ul></ul>.

Jika menggunakan Unordered List artinya urutan dari list item nya itu tidak berpengaruh. Misalnya list makanan favorit.

<!DOCTYPE html>
<html>
<head>
  <title>HTML LIST</title>
</head>
<body>
  <h3>Makanan favorit</h3>
  <ul>
    <li>Bakso</li>
    <li>Nasi Goreng</li>
    <li>Martabak</li>
    <li>Sate</li>

  </ul>
</body>
</html>

Hasilnya

List default yang dihasilkan adalah bullets. Jika ingin menggunakan tipe yang lain dapat mencoba:

disc = bulat berisi (seperti hasil default) square = kotak

circle = bulat kosong

<ul type="square">
    <li>Bakso</li>
    <li>Nasi Goreng</li>
    <li>Martabak</li>
    <li>Sate</li>
  </ul>
<ul type="square">
    <li>Bakso</li>
    <li>Nasi Goreng</li>
    <li>Martabak</li>
    <li>Sate</li>
  </ul>
3. Definition List; <dl></dl>

Definition List berbeda dengan list sebelumnya, digunakan untuk membuat terminologi dan deskripsi. Isi dari list berpasangan yaitu:

<dl>
<dt> term 1 </dt>
<dd> descr 1 </dd>

<dt> term 2 </dt>
<dd> descr 2 </dd>
</dl>

Jika mempunyai 3 term maka juga harus mempunyai 3 descr juga.

<!DOCTYPE html>
<html>
<head>
<title>HTML LIST</title>
</head>
<body>

<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheet.</dd>
</dl>
 
</body>
</html>

REFERENSI

[1]. https://youtu.be/gLHEoeuplZs diakses 25 April 2020

Original Create by: Ega Kuslia Sari & Dini Octari Rahmadia

Sumber Gambar