Materi Pemrograman Web Dasar HTML Ordered List dan Unordered List–Materi berikut merupakan materi lanjutan dari materi pemrograman web dasar HTML, yaitu dasar-dasar HTML. Ordered List merupakan list item yang digunakan untuk mengelompokan data secara berurutan dalam bentuk numbering atau penomoran. Sedangkan unordered list merupakan list item yang digunakan untuk mengelompokan data secara berurutan dalam bentuk bulleted, atau dalam bentuk squere, disk, dancircle.
Panduan belajar pemrograman web dasar sebelumnya Dasar-dasar HTML Pemformatan Text
Ordered List / OL
Devinisi ordered list; tag dalam HTML yang digunakan untuk menampilkan kelompok dta dalam bentuk numbering / penomoran.
Kode dasar:
<ol>
<li>Data 1</li>
<li>Data 2</li>
<li>Data 3</li>
</ol>
Tampilan struktur penulisan tag OL
Diatas merupakan struktur kode dasar tag OL setelah mendapat tambahan atribut dan value.
| Tag | Attribute | Value | Description |
<OL> |
Type | LI Aa |
Uper Roman, Lower Roman, Uppercase, Lowwercase |
<OL> |
Start | n | Begin Number |
Contoh penggunaan tag OL;
<html>
<head>
<title>Tag Ordered list</title>
<body>
<!--Contoh ordered list A-D-->
<ol>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ol>
</body>
</head>
</html>
Unordered List/UL
Tag UL digunakan untuk menampilkan kelompok data dalam bentuk bulleted, baik berbentuk circle, square maupun disk.
Kode dasar;
<ul>
<li>Data 1</li>
<li>Data 2</li>
<li>Data 3</li>
</ul>
Contoh penggunaan UL;
<html>
<head>
<title>Tag Unordered list</title>
<body>
<!--Contoh ordered list A-D-->
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</body>
</head>
</html>
Contoh penggunaan tag UL dengan type Circle;
<html>
<head>
<title>Tag Unordered list</title>
<body>
<!--Contoh Unordered list -->
Bahan-bahan untuk membuat Kopi:
<ul type="circle">
<li>Kopi</li>
<li>Gula</li>
<li>Air Panas</li>
<li>Krim</li>
</ul>
</body>
</head>
</html>
Hasilnya seperti dibawah ini;
Bahan-bahan untuk membuat Kopi:
- Kopi
- Gula
- Air Panas
- Krim
Contoh penggunaan tag UL dengan type Squere
<html>
<head>
<title>Tag Unordered list</title>
<body>
<!--Contoh Unordered list -->
Bahan-bahan untuk membuat Kopi:
<ul type="square">
<li>Kopi</li>
<li>Gula</li>
<li>Air Panas</li>
<li>Krim</li>
</ul>
</body>
</head>
</html>
Hasilnya seperti dibawah ini;
Bahan-bahan untuk membuat Kopi:
- Kopi
- Gula
- Air Panas
- Krim
Contoh penggunaan tag UL dengan type Disc
<html>
<head>
<title>Tag Unordered list</title>
<body>
<!--Contoh Unordered list -->
Bahan-bahan untuk membuat Kopi:
<ul type="disc">
<li>Kopi</li>
<li>Gula</li>
<li>Air Panas</li>
<li>Krim</li>
</ul>
</body>
</head>
</html>
Hasilnya seperti dibawah ini;
Bahan-bahan untuk membuat Kopi:
- Kopi
- Gula
- Air Panas
- Krim
Baca juga; Dasar-Dasar HTML Lengkap Untuk Belajar Pemrograman Web Dasar
Demikian panduan belajar pemrograman web dasar HTML sub materi Orderdlist dan Unorderedlist kali ini, semoga bermanfaat untuk semuanya, terutama untuk para pengajar yang sedang mencara referensi bahan mengajar materi dasar-dasar HTML.
Dapatkan juga panduan belajar pemrograman web dasar lengkap HTML dan CSS berupa Modul
Panduan ditulis oleh:
Mulyadi Tenjo
Guru TIK, dan Guru Mapel Produktif Multimedia di SMK di Kab. Bogor
Dapatkan Modul Komputer Pilihan Dibawah ini:
- Modul Kursus Komputer Paket Office (Word & Excel) Rp. 270.000;
- Modul TIK/Mulok Komputer Kelas 1,2,3,4,5,6 SD Rp.225.000;
- Modul Paket Office Lengkap Word, Excel, PPoint, (Bonus Buku Digital MS Access) Rp. 375.000;
BONUS:
Tiap paket modul yang anda beli sudah dilengkapi dengan BONUS-BONUS modul komputer menarik lainnya. Dan BONUS administrasi mengajar, administrasi kursus, template sertifikat, dan contoh proposal pendirian lembaga kursus komputer.
CARA PESAN MODUL:
Pesan / Order modul yang anda pesan melalui SMS/WA ke nomor: 0813 1951 3609
Contoh: "Order Modul TIK SD, Bapak Abdul, Jakarta"
ORDER NOW VIA CHAT WHATSAPP (CS 1)
ORDER NOW VIA CHAT WHATSAPP (CS 2)