Belajar Dasar HTML Part 12 – Cara Membuat Daftar atau List Pada HTML (tag ul, ol, li)

Febri Hidayan Komentar

Belajar Dasar HTML Part 12 – Cara Membuat Daftar atau List Pada HTML (tag ul, ol, li)

Disini kita akan membuat List, dimana list digunakan untuk membuat daftar menu seperti sub menu pada suatu website. Untuk mempelajaari lebih lanjut silakan simak pembelajaran kita, sebagai berikut:

Pengertian Daftar atau List Pada HTML

List merupakan bagian teks yang kita gunakan untuk membuat daftar dukumen dan juga pengelompokan atau grup tertentu dalam suatu kategori. List pada HTML memiliki cara sendiri dalam mengurutkan item item pada suatu dokumen. Agar lebih paham daftar List memiliki beberapa Tag diantaranya yaitu:

  • List Tidak Berturut (Unordered List), atau yang disebut tag <ul> dimana ututannya diawali dengan peluru hitam.
  • List berturut (Ordered List), atau yang disebut tag <ol> dimana ututannya diawali dengan nomor ataupun dengan huruf.
  • List defenisi (Definition List), atau disebut dengan tag <dl> dimana fungsinya untuk menetapkan istilah dan definisinya.

Agar lebih paham untuk menggunakan tag-tag diatas bisa kita gunakan beberapa contoh penerapan yang sesuai. Sebelum masuk ke bagian pembelajaran kita ada baiknya untuk mengenal tag <li> (list item) dimana gunanya untuk penempatkan baris kalimat diantara tag pemubuka <li> dan tag penutup </li> .Untuk itu simak sebagai berikut:

Menggunakan Tag <ul> Pada HTML

Tag <ul> adalah tag tidak berurutan yang selalu diawali dengan lingkarang peluru setiap barisan kalimat yang ada. Untuk penulisannya diawali dengan tag pembuka <ul>, tag pembuka <li>, tag penutup </li>, dan tag penutup </ul>. Untuk itu lihat contoh kode HTML dibawah ini:

Kode Penggunaan Tag</p> <ul>
<!DOCTYPE html>
<html>
<head>
	<title>Sekolah Program</title>
</head>
<body>
<h2>Membuat Daftar List - Sekolah Program</h2>
<h4>Menggunakan Tag ul</h4>
<ul>
	<li>HTML</li>
	<li>CSS</li>
	<li>PHP</li>
	<li>JavaScript</li>
	<li>jQuery</li>
</ul>
</body>
</html>

Maka hasilnya saat di web browser

Menggunakan Tag <ol> Pada HTML

Tag <ol> adalah tag yang berurutan yang setiap itemnya diberikan nomor. Kita dapat menulis tag <ol> dengan tag pembuka <ol>, tag pembuka <li>, tag penutup </li>, dan tag penutup </ol>. Untuk itu lihat contoh kode yang telah ditetapkan:

Kode Penggunaan Tag</p> <ol>
<!DOCTYPE html>
<html>
<head>
	<title>Sekolah Program</title>
</head>
<body>
<h2>Membuat Daftar List - Sekolah Program</h2>
<h4>Menggunakan Tag ol</h4>
<ol>
	<li>HTML</li>
	<li>CSS</li>
	<li>PHP</li>
	<li>JavaScript</li>
	<li>jQuery</li>
</ol>
</body>
</html>

Maka hasilnya saat di web browser

Membuat List Bersarang Pada HTML

Dimana kita menggunakan list bersarang untuk membuat sub menu, pada suatu halaman web pasti memiliki list bersarang untuk membuat menu kategori yang sesuai keinginan masing masing. Untuk membuat list bersarang kita bisa menggunakan tag <ul> dan <ol> sebagai penggunaan list bersarang. Lihat contoh sederhana dalam penggunaannya sebagai berikut:

Kode Membuat List Bersarang
<!DOCTYPE html>
<html>
<head>
	<title>Sekolah Program</title>
</head>
<body>
<h2>Membuat Daftar List - Sekolah Program</h2>
<h4>Menggunakan List Bersarang Tag ol dan ul</h4>
<ul>
	<li>HTML</li>
	<ol>
		<li>Belajar Dasar HTML Untuk Pemula Hingga Mahir</li>
	</ol>
	<li>CSS</li>
	<ol>
		<li> Belajar Dasar CSS Untuk Desain Website</li>
	</ol>
	<li>PHP</li>
	<ol>
		<li>Belajar Dasar PHP Untuk Pemula</li>
	</ol>
</ul>
</body>
</html>

Maka hasinya saat di web browser

Itulah penggunaan tag <ul>, <ol>, dan list bersarang. Untuk mengenal lebih dalam tentang list lihat pembelajaran kita selanjutnya yaitu mengenal list definisi.

Pemberitahuan: Di pembelajaran kita kali ini memang tidak ada membahas tentang tag <dl>, dimana tag <dl> akan kita gunakan untuk pembelajaran selanjutnya yaitu list definisi untuk mengulas tag <dl>. Untuk itu klik selanjutnya untuk menuju Penggunaan List Definisi.

 

Category HTMLTags Dasar HTML


Write a Reply or Comment

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

This site uses Akismet to reduce spam. Learn how your comment data is processed.