REKAYASA PERANGKAT LUNAK (RPL)

SMK TELEKOMUNIKASI TUNAS HARAPAN

MODUL PEMROGRAMAN WEB HTML
No. Modul : Materi : Membuat List di TEACHER : FAIZI W, S.Kom
HTML
#8 Dasar Pengenalan HTML Waktu : 1 x 45 ‘

1. Tujuan
a. Siswa dapat mengetahui tentang penulisan untuk List di di HTML
b. Siswa dapat mempraktekkan dalam penggunaan List di HTML

2. Prosedur Percobaan
a. Buat folder di Drive D:, dengan nama folder nama anda_absen. Misal :
Faizi_08
b. Buat subfolder praktek 1 di dalam folder yang sudah dibuat sebelumnya.
c. Bukalah aplikasi web editor (seperti: Notepad, Notepad ++) dan dan tuliskan
beberapa elemen struktur dokumen HTML yang ada dalam kajian teori singkat
yang dianjurkan untuk diuji coba pada contoh di bawah.
d. Simpan elemen-elemen struktur dokumen HTML tersebut dalam format : *.html
e. Jalankan masing-masing contoh elemen-elemen struktur dokumen HTML
tersebut dengan bantuan : Internet Explorer atau Internet Mozilla Firefox atau
Opera atau Chrome atau browser lain yang tersedia di dalam komputer saudara.

3. Kajian Materi
a. Elemen List di HTML
Merupakan fungsi dalam HTML yang diguanakan untuk menampilkan data
secara berurutan di bawah.

Dalam HTML penulisan list menggunakan tag <li>. Terdapat 3 jenis

macam list yaitu
1. Ordered list : list yang terurut
2. Unordered List : list yang tidak terurut
3. Descriptiona List : Adalah list yang berisi definisi.
1. Ordered list <ol>
Dibuat dengan tag <ol>. Lalu didalamnya di isi dengan item-item yang
dimasukkan kedalam list. Item dibuat dengan tag <li>.

Tag untuk membuat Tag pembuka item

order list

<ol>
<li> Item 1</li>
<li> Item 2</li> Tag Penutup item
<li> Item 3</li>
Hasilnya:
</ol>
Teks item

Tag untuk membuat

order list

Contohnya:
Hasilnya:

List diatas diurutkan berdasarkan angka dari 1, 2, 3, sampai 5.

Untuk membuat huruf seperti a, b, c atau angka romawi seperti I, II, III?

Untuk membuat yang seperti itu, kita bisa menggunakan atribut type pada
tag ol dan berikut ini nilai yang bisa diberikan:

 a untuk alfabet a, b, c, dan seterusnya;

 A untuk alfabet A, B, C, dan seterusnya;
 i untuk angka romwari i, ii, iii, dan seterusnya;
 I untuk angka romwari I, II, III, dan seterusnya.
Contoh :
Hasilnya :

2. Unordedet List HTML

Unordered list adalah list yang tak terurut yang menggunakan simbol-simbol
pada item-nya. Unordered list dibuat dengan tag <ul> dan untuk item-nya
dibuat juga dengan tag <li>.

Tag untuk membuat Tag Tag pembuka item

order list

<ul>
<li> Item 1</li> Tag Penutup item
<li> Item 2</li>
<li> Item 3</li>
</ull>
Tag Penutup Text item
unorder list
Contohnya:

Hasilnya:
Secara default simbol yang digunakan oleh unordered list adalah lingkaran
kecil (disc). Kita juga bisa menggantinya dengan atribut type.

Berikut ini nilai yang bisa diberikan untuk atribut type:

 square untuk simbol persegi;

 disc (default) untuk simbol lingkaran disc;
 none tidak memakai simbol;
 circle untuk simbol lingkaran;

Contohnya:
Hasilnya:

3. Description List di HTML

Description List adalah list yang berisi deksripsi atau penjelasan dari sesuatu.
Ada 3 tag yang digunakan untuk membuat description list:

 <dl> (description list) tag untuk memulai description list;

 <dt> (description term) tag untuk membuat kata yang akan
dideskripsikan;
 <dd> (description description) tag untuk membuat penjelasan dari kata.
 Tag untuk membuat Tag untuk kata Tag penutup untuk kata
description list

<dl>
<dt> Kata 1</dt>
<dd> Penjelasan kata 1</dd>
<dt> Kata 2</dt>
<dd> Penjelasan kata 2</dd>
</dl>

Tag penutup Tag untuk Tag pentup untuk

description list penjelasan penjelasan

Contohnya:
 Hasilnya :

4. List di dalam List ( Nested List)

List juga dapat dibuat di dalam list, misalkan kita ingin menggabungkan
ordered list dengan unordered list.

Caranya, list yang di dalam ditulis di dalam tag <li>.

Contohnya:
Hasilnya: