Materi Pemrograman Web Dasar HTML Ordered List dan Unordered List

materi pemrograman web dasar html orderedlist dan unorderedlist
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

kode dasar html 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

Leave a Reply

Your email address will not be published. Required fields are marked *