HTML Dasar Part 9 : Cara Membuat Daftar / List di HTML

HTML Dasar Part 9: Cara Membuat Daftar/List di HTML <ol><ul><li>

Pada tutorial sebelumnya, kita telah membahas mengenai cara membuat judul atau heading di HTML. Setelah agan / aganwati memahami bagaimana cara membuatnya, langkah selanjutnya yang akan kita pelajari pada tutorial kali ini adalah cara membuat daftar atau list di HTML.

----------------------------------------------------------------------------------------------------

Cara Membuat Daftar / List di HTML

mahaamesha.com Dalam penyusunan suatu website, kita tentunya juga membutuhkan daftar atau list sebagai cara untuk menyampaikan suatu urutan tata cara dalam melakukan sesuatu ataupun menyampaikan point-point penting.

HTML menyediakan 3 (tiga) buah tag yang dapat kita gunakan untuk menyusun daftar dalam HTML, yaitu tag <ol>, <ul>, dan <li>. Ketiga tag tersebut akan kita bahas sekaligus pada tutorial kali ini karena ketiganya tidak dapat dipisahkan. Tag <ol> dan <ul> membutuhkan tag <li> agar dapat menampilkan daftar atau list mengenai materi yang akan ditonjolkan dalam penyusunan kode HTML.

Tag list <li> merupakan tag yang digunakan untuk membuat daftar atau list itu sendiri. Pada dasarnya, tag list terdiri dari 2 jenis tag, yaitu tag ordered list dan unordered list.

Ordered list <ol> merupakan jenis tag yang digunakan untuk menampilkan daftar atau list yang berurutan. HTML secara default akan mengartikan tag ordered list <ol> ini dengan menampilkan list yang bernomor urut.

Unordered list <ul> merupakan jenis tag yang digunakan untuk menampilkan daftar atau list yang tidak berurutan. Apabila tag <ol> menampilkan list yang bernomor urut atau berurutan, maka tag <ul> adalah kebalikannya. Tag <ul> akan menampilkan list berbentuk bullets point dan tidak menunjukkan penomoran.

Selanjutnya, mahaamesha.com akan memberikan contoh kode HTML mengenai penggunaan tag list, ordered list, unordered list, dan penggunaan kombinasi dari ketiganya. Silahkan agan / aganwati kembali membuka Notepad ++, lalu ketiklah contoh kode HTML berikut ini agar lebih mudah memahami tutorial kali ini.

<!DOCTYPE html>

<html>

<head>

<title>Ma Haamesha|List</title>

</head>

<body>

<h1>Contoh Ordered List</h1>

<p>Daftar Tutorial HTML by MaHaamesha :</p>

<ol>

<li>Web Browser</li>

<li>Apk Editor HTML</li>

<li>Struktur Dasar HTML</li>

<li>Paragraf</li>

<li>Judul</li>

</ol>

</body>

</html>

Setelah itu, save dengan format .html, launch di web browser.

Kode di atas merupakan contoh dari kode HTML yang menerapkan tag <ol> atau ordered list.

<!DOCTYPE html>

<html>

<head>

<title>Ma Haamesha|List</title>

</head>

<body>

<h1>Contoh Unordered List</h1>

<p>Hal-hal penting dalam belajar HTML by MaHaamesha :</p>

<ul>

<li>Kemauan Belajar</li>

<li>Banyak Sumber Referensi</li>

<li>Sabar</li>

<li>Rajin</li>

<li>Konsistensi</li>

</ul>

</body>

</html>

Launch kode tersebut di web browser pilihan agan / aganwati.

Kalau contoh kode HTML di atas ini adalah contoh dari penggunaan tag <ul> atau unordered list.

Gimana? Kurang lebih agan / aganwati sudah paham pastinya. Atau masih bingung? Oke, kalau masih bingung, setelah ini mahaamesha.com akan memberikan satu lagi contoh kode HTML yang berisikan ketiga tag di atas.

Contoh tag kombinasi :

<!DOCTYPE html>

<html>

<head>

<title>Ma Haamesha|List</title>

</head>

<body>

<h1>Pemantapan Tag List</h1>

<p>Penggunaan Tag ol; ul; li by MaHaamesha :</p>

<ol><li>Tag ul dalam Tag ol</li>

<ul>

<li>Web Browser</li>

<li>Apk Editor HTML</li>

<li>Struktur Dasar HTML</li>

<li>Paragraf</li>

<li>Heading</li>

</ul>

</ol>

<ul><li>Tag ol dalam Tag ul</li>

<ol>

<li>Kemauan Belajar</li>

<li>Banyak Sumber Referensi</li>

<li>Sabar</li>

<li>Rajin</li>

<li>Konsistensi</li>

</ol>

</ul>

</body>

</html>

Dari struktur kode HTML di atas, akan menghasilkan tampilan seperti gambar di bawah ini.

Silahkan agan / aganwati pahami struktur HTML di atas. Kombinasi tag di atas ini dalam dunia HTML biasa disebut dengan nested list atau list bersarang. Istilah mudahnya ialah list yang berada dalam list.

Penggunaan tag list tidak hanya digunakan untuk membuat daftar atau list saja dalam HTML. Tag list juga digunakan sebagai menu navigasi, seperti home, contact us, dll dalam CSS.

Ternyata untuk membuat sedikit tulisan di website, kita perlu membuat banyak baris kode HTML yang mengandung berbagai tag. Wajar saja bila terdapat ratusan bahkan ribuan baris HTML dalam suatu website yang sudah benar-benar jadi. Namun, semua itu adalah hal mudah asal kita mau berusaha untuk bisa.

Mungkin ketika terdapat contoh kode HTML, terkadang agan / aganwati hanya copy paste saja ke Notepad ++. Saran saja, agar mendapatkan pemahaman yang lebih baik, alangkah baiknya ketikkan ulang contoh kode HTML yang telah disediakan. Hal tersebut akan meningkatkan pemahaman dan ingatan otak untuk menyusun struktur HTML tanpa melihat contekan. mahaamesha.com

“FYI : Dalam HTML, selain tag <ol>; <ul>; dan <li>, masih terdapat jenis tag lain seputar list atau daftar, yaitu tag <dl>; <dt>; dan <dd>. Pembahasan tag-tag tersebut akan dibahas dalam tutorial HTML pada lain kesempatan.”

----------------------------------------------------------------------------------------------------

Begitu tutorial kali ini, dalam tutorial selanjutnya, kita akan membahas tag yang tak kalah penting dalam HTML, yaitu tag untuk membuat link di HTML.

Created by mahaamesha :}

Search This Blog

Ma Haamesha