Membuat List/Daftar di HTML (order list, unorder list,descriptiona list)

andihakimnst0

Dalam HTML list terdiri dari 3 jenis yaitu li (order list), ul (unorder list), dan dl (descriptiona list), list berfungsi untuk menampilkan informasi dalam bentu daftar/list, dibuat sesuai dengan kebutuhan. Dan disini akan di implementasikan pada html dan ditampilkan pada web browser, dan berikut caranya.

1. Membuat Order List di HTML

1. Buatlah tag hmtl dan tag judul pada teks editor

<!DOCTYPE html>
<html>
<head>
<title>HTML List</title>
</head>
<body>
/body>
</html>

2. Buatlah kode OL di dalam tag body

<h3>To Do List</h3>
<ol type=”A”>
<li>Bangun Pagi</li>
<li>Sarapan</li>
<li>Tidur Lagi</li>
</ol>

*ubahlah type sesuai yang diinginkan, A berarti list dimulai dari abjad A.

3. Maka seluruh coding akan seperti ini

<!DOCTYPE html>
<html>
<head>
<title>HTML List</title>
</head>
<body>

<h3>To Do List</h3>
<ol type=”A”>
<li>Bangun Pagi</li>
<li>Sarapan</li>
<li>Tidur Lagi</li>
</ol>

</body>
</html>

Output

Membuat Unorder List

1. Buat kode ul di dalam tag html

<h3>Saat sarapan, saya akan makan</h3>
<ul type=”circle”>
<li>Nasi Goreng</li>
<li>Mie Goreng</li>
<li>Telur Dadar</li>
</ul>

*type circle berarti list diawali dengan tanda bulat, bisa juga diubah dengan square(kotak), dan lain-lain

2. Maka seluruh code akan sepert ini

<!DOCTYPE html>
<html>
<head>
<title>HTML List</title>
</head>
<body>

<h3>Saat sarapan, saya akan makan</h3>
<ul type=”circle”>
<li>Nasi Goreng</li>
<li>Mie Goreng</li>
<li>Telur Dadar</li>
</ul>
</body>
</html>

Output

Membuat Descriptiona List

1. Buatlah kode dl di dalam tag html

<h3>Perograman WEb 1</h3>
<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheet</dd>
</dl>

2. Maka seluruh code akan seperti ini

<!DOCTYPE html>
<html>
<head>
<title>HTML List</title>
</head>
<body>

<h3>Perograman WEb 1</h3>
<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheet</dd>
</dl>
</body>
</html>

Output

Itulah implementasi list pada HTML yang bia coba pelajari, terima kasih sudah mampir pada artikel ini, dan apabila ada yang ingin ditanyakan dapat menuliskannya di kolom komentar.

Tinggalkan Balasan