Belajar Membuat Daftar List Dengan HTML

Rabu, 04 Januari 2023

Belajar membuat daftar list dengan tag <list> adalah tag HTML yang digunakan untuk membuat daftar di dalam halaman web. Terdapat dua jenis daftar yang dapat dibuat dengan menggunakan tag <list>: daftar terurut (ordered list) dan daftar tak terurut (unordered list).

Sumber foto: www.pexels.com (Photo by Lukas)

Perbedaan daftar list, untuk daftar terurut menggunakan tag <ol> (ordered list), sedangkan daftar tak terurut menggunakan tag <ul> (unordered list). Tiap item dalam daftar ditandai dengan tag <li> (list item). Berikut ini adalah contoh penggunaan masing-masing tag:

Contoh daftar terurut:
<ol>
<li>Item pertama</li>
<li>Item kedua</li>
<li>Item ketiga</li>
</ol>

Contoh daftar tak terurut:
<ul>
<li>Item pertama</li>
<li>Item kedua</li>
<li>Item ketiga</li>
</ul>

Daftar terurut akan menampilkan item-itemnya dengan nomor, sedangkan daftar tak terurut akan menampilkan item-itemnya dengan simbol. Salin semua kode di bawah ini dan save dengan nama listing.html (untuk menuliskan kode HTML ini dapat menggunakan notepad):

<html> <head> <title>Contoh Halaman Web Dengan HTML</title> </head> <body> <div class="article" style="background-color:yellow; width:400px; height:400px;"> <h1>Contoh Daftar List</h1> <p>Ini adalah daftar terurut dari artikel.</p> <ol> <li>Item pertama</li> <li>Item kedua</li> <li>Item ketiga</li> </ol> <p>Ini adalah daftar tidak terurut dari artikel.</p> <ul> <li>Item pertama</li> <li>Item kedua</li> <li>Item ketiga</li> </ul> </div> </body> </html>

Penggunaan tag list terurut <ol> & tidak terurut <ul> sering digunakan sebagai list/daftar untuk seperti pada tulisan berupa poin-poin. Ketika halaman web ini dijalankan di browser web (untuk menjalankannya klik file listing.html yang telah dibuat di atas), akan terlihat hasilnya seperti:

Anda Mungkin Menyukai Postingan Terkait:

Belajar Membuat Daftar List Dengan HTML

Tidak ada komentar:

Posting Komentar