A. PENDAHULUAN
- Pengertian
- Latar Belakang
- Maksud & Tujuan
- dapat mengerti dimana dan menentukan tempat yang akan diberi list
- Alat & Bahan
- Web Browser
- 1 Unit PC/Laptop
B. PEMBAHASAN
List adalah fungsi dari HTML yang digunakan untuk menampilkan data secara berurutan ke bawah. Penulisan List pada HTML dapat menggunakan tag <li>. List pada HTML dapat dibedakan menjadi dua yaitu :
- ordered list yang berfungsi untuk menampilkan daftar list dalam bentuk huruf maupun angka. dalam penulisan List ini, kita dapat menggunakan tag <ol>.
- unordered list yang berfungsi untuk menampilkan daftar List dalam bentuk bulatan atau kotak diawalnya. dalam penulisan tag ini, kita dapat menggunakan tag <ul>.
sebagai CONTOH PERTAMA, kita akan menggunakan tag <ol> atau biasa disebut dengan ordered list.
ketikkan script dibawah ini :
<html>
<head>
<title></title>
<head>
<body>
<ol>
<li>Aku</li>
<li>Sayang</li>
<li>Kamu</li>
</ol>
</body>
</html>
Jika Sudah, silakan save, dan buka kembali melalui web browser anda. maka akan muncul tampilan seperti ini :
tidak hanya berhenti disitu, tag <ol> juga dapat digunakan untuk menampilkan list dalam bentuk :
- angka = type yang digunakan adalah "1"
- huruf kecil maupun huruf besar = type yang digunakan adalah "a" (kecil) maupun "A" (besar)
- angka romawi bertuliskan kecil maupun besar = type yang digunakan adalah "i" (kecil) maupun "I" (besar).
Contoh :
ketikkan script berikut :
<html>
<head>
<title></title>
<head>
<body>
<ol type="1">
<li>MENAMPILKAN</li>
<li>BERDASARKAN</li>
<li>ANGKA</li>
</ol>
<ol type="a">
<li>MENAMPILKAN</li>
<li>BERDASARKAN</li>
<li>HURUF</li>
<li>kecil</li>
</ol>
<ol type="A">
<li>MENAMPILKAN</li>
<li>BERDASARKAN</li>
<li>HURUF</li>
<li>BESAR</li>
</ol>
<ol type="i">
<li>MENAMPILKAN</li>
<li>BERDASARKAN</li>
<li>ANGKA ROMAWI</li>
<li>kecil</li>
</ol>
<ol type="I">
<li>MENAMPILKAN</li>
<li>BERDASARKAN</li>
<li>ANGKA ROMAWI</li>
<li>BESAR</li>
</ol
</body>
</html>
kemudian save, dan silakan buka di web browser anda masing", dan akan muncul tampilan seperti ini :
sebagai CONTOH KEDUA kita akan menggunakan tag <ul> atau biasa disebut dengan sebutan unordered list.
ketikkan script berikut :
<html>
<head>
<title></title>
</head>
<body>
<ul>
<li>Aku</li>
<li>Sayang</li>
<li>Kamu</li>
</ul>
</body>
</html>
di depan List yang kita tulis akan otomatis muncul seperti bulatan-bulatan. karena hal tersebut mengikuti default juga. namun seperti yang saya katakan tadi, anda tidak harus tertunduk mengikuti default, karena anda yang coding, dan anda bebas mengopreknya pula :).
tidak hanya berhenti disitu pula, tag <ul> juga dapat digunakan untuk menampilkan list dalam bentuk :
- bulat = dengan menggunakan type "disc"
- kotak = dengan menggunakan type "square"
Sebagai contoh, ketikkan script berikut :
<html>
<head>
<title></title>
</head>
<body>
<ul type="disc">
<li>MENGGUNAKAN</li>
<li>TAMPILAN</li>
<li>BULAT</li>
</ul>
<ul type="disc">
<li>MENGGUNAKAN</li>
<li>TAMPILAN</li>
<li>KOTAK</li>
</ul>
</body>
</html>
kemudian, silakan save, dan silakan buka di web browser anda, maka akan muncul tampilan seperti berikut ini:
jika ada yang error, silakan cek kembali pada penulisan script anda.
C. HASIL YANG DIDAPATKAN
- dapat menggunakan list-list pada HTML
D. TEMUAN PERMASALAHAN
- dalam menggunakan tag <ol> atau <ul>, jika tidak disetting, apa yang kita ketikkan akan mengikuti defaultnya.
E. REFERENSI & DAFTAR PUSTAKA
MalasNgoding
sekian sharing saya kali ini tentang cara membuat List Pada HTML. SEMOGA BERMANFAAT
Wassalammualaikum Wr.Wb.