Lompat ke konten Lompat ke sidebar Lompat ke footer

Widget Atas Posting

Beranda / DASAR HTML / HTML / LIST HTML

Lengkap : Cara Mudah Membuat Daftar List di HTML

Posting Komentar

Lengkap : Cara Mudah Membuat Daftar List di HTML

Lengkap : Cara Mudah Membuat Daftar List di HTML
Gambar oleh Mudassar Iqbal dari Pixabay 

Untuk membuat web pasti kita akan bertemu dengan daftar atau urutan, apakah itu daftar harga, daftar menu, dan lain-lain.


Nah! Pada kesempatan sekarang kita akan belajar membuat list di HTML yang mudah dan benar.

Definisi List di HTML

List di HTML merupakan teks pada sebuah dokumen yang dimana isi tersebut berupa daftar harga/menu, daftar anggota ataupun item yang lainnya.
Membuat List di HTML

Gambar dari Forbes.com

Terus bagaimana cara membuatnya?
Yuu! Kita lanjutkan!

Membuat List di HTML

Dalam pembuatan list di HTML ada beberapa cara yakni:
Membuat List di HTML
Tiga cara membuat list di HTML

1. Ordered List pada HTML

Unuk membuat list ini kita bisa gunakan tag<ol>. Yang dimana tag <ol> dibantu dengan tag <li>(list item).Nantinya tag <ol> akan diisi dengan item, dengan menggunakan tag <li> di dalamnya.

Coba kita contohkan:
Membuat List di HTML

Contoh :
Membuat List di HTML

Source code:
<!DOCTYPE html>
<html>
<head>
<title>HTML List</title>
</head>
<body>
<h3>To Do List</h3>
<ol>
<li>Bangun Pagi</li>
<li>Sarapan </li>
<li>Tidur Lagi</li>
</ol>
</body>
</html>
Gimana!

Mudah kan!
Nah contoh diatas menunjukan listnya dengan type angka 1-3. Jika kalian ingin mengubahnya dengan menggunakan type.

Yakni dengan menggunakan atribut type di tag <ol>nya. Contoh seperti ini:
Membuat List di HTML

Atribut type bisa dimasukan beberapa nilai berikut ini:
Membuat List di HTML
Tabel nilai atribut type untuk <ol> di HTML

Source code:
<!DOCTYPE html>
<html>
<head>
<title>HTML List</title>
</head>
<body>
<h3>To Do List dengan list A</h3>
<ol type="A">
<li>Bangun Pagi</li>
<li>Sarapan </li>
<li>Tidur Lagi</li>
</ol>
<h3>To Do List dengan list a</h3>
<ol type="a">
<li>Bangun Pagi</li>
<li>Sarapan </li>
<li>Tidur Lagi</li>
</ol>
<h3>To Do List dengan list I</h3>
<ol type="I">
<li>Bangun Pagi</li>
<li>Sarapan </li>
<li>Tidur Lagi</li>
</ol>
<h3>To Do List dengan list i</h3>
<ol type="i">
<li>Bangun Pagi</li>
<li>Sarapan </li>
<li>Tidur Lagi</li>
</ol>
</body>
</html>
Hasilnya:
Membuat List di HTML

2. Unordered List pada HTML

Untuk membuat list ini sama dengan ordered list pada HTML, cuman yang menjadi beda ini menggunakan tag <ul> bukan <ol>.
Membuat List di HTML

Contoh :Membuat List di HTML

Source code:
<!DOCTYPE html>
<html>
<head>
<title>HTML List</title>
</head>
<body>
<h3>Saat sarapan, saya akan makan</h3>
<ul>
<li>Mie goreng</li>
<li>Nasi goreng </li>
<li>Telur dadar</li>
</ul>
</body>
</html>
Nahh itu penggunaan list dengan tag <ul> ,bisa dikatakan tag <ul> digunakan untuk list dengan simbol. Jika kalian ingin merubah bentuknya bisa kok, dengan cara sama seperti ordered list pada HTML yakni dengan memberi nilai di bagian type.
Membuat List di HTML
Membuat List di HTML
Tabel nilai atribut type untuk <ul> di HTML

Contoh:
<!DOCTYPE html>
<html>
<head>
<title>HTML List</title>
</head>
<body>
<h3>Saat sarapan, saya akan makan</h3>
<ul type="circle">
<li>Mie goreng</li>
<li>Nasi goreng </li>
<li>Telur dadar</li>
</ul>
<h3>Saat minum, saya akan meminum</h3>
<ul type="none">
<li>Jus</li>
<li>Sop Buah</li>
<li>Air Putih</li>
</ul>
<h3>Saat jalan-jalan, saya akan pergi</h3>
<ul type="disc">
<li>Bandung</li>
<li>Jakarta </li>
<li>Bogor</li>
</ul>
<h3>Saat pergi, saya akan naik</h3>
<ul type="square">
<li>Mobil</li>
<li>Motor </li>
<li>Bis</li>
</ul>
</body>
</html>
Hasilnya:
Membuat List di HTML

3. Description List pada HTML

Untuk membuat list dengan Description List (dl) ada beberapa tag yang bisa digunakan yakni:
  • Description List <dl>
    • Digunakan untuk membuat deskripsi/penjelasan
  • Description term <dt>
    • Digunakan untuk kata/kalimat
  • Description Description <dd>
    • Digunakan untuk penjelasan dari kata/kalimat
Biar lebih ngerti coba lihat gambar di bawah ini:
Membuat List di HTML

Coba kita contohkan:
Membuat List di HTML
Source code:
<h3>Pemograman Web1</h3>
<dl>
<dt>HTML</dt>
<dd>Hypertext Markup lauguage</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheet</dd>
</dl>
Bagaimana sampai sini fahamkan!
Kalau belum faham coba lihat contoh berikut ini:
Membuat List di HTML
Source code:
<!DOCTYPE html>
<html>
<head>
<title>HTML List</title>
</head>
<body>
<h3>Menggunakan tag (ol) dengan format A</h3>
<ol type="A">
<li>Bangun Pagi</li>
<li>Sarapan </li>
<li>Tidur Lagi</li>
</ol>
<h3>Menggunakan tag (ul) dengan format circle</h3>
<ul type="circle">
<li>Mie goreng</li>
<li>Nasi goreng </li>
<li>Telur dadar</li>
</ul>
<h3>Menggunakan tag (dl,dt,dd)</h3>
<dl>
<dt>HTML</dt>
<dd>Hypertext Markup lauguage</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheet</dd>
</dl>
</body>
</html>
Nahh bagaimana faham yaa! 
Kalau sudah kita lanjutkan
Sobat! didalam membuat list di HTML ternyata ada fakta menarik yakni bahwa list bisa dibuat di dalam list juga, atau istilahnya adalah Nested list.

Supaya lebih ngerti coba kita contohkan:
Membuat List di HTML
Source code:
<!DOCTYPE html>
<html>
<head>
<title>HTML List</title>
</head>
<body>
<h3>Belajar Membuat List di HTML</h3>
<ol type="A">
<li>Aktifitas saya sehari-hari
<ul type="cirle">
<li>Bangun Pagi</li>
<li>Sarapan </li>
<li>Tidur Lagi</li>
</ul>
</li>
<li> Menu makanan saya sehari-hari
<ul type="disc">
<li>Mie goreng</li>
<li>Nasi goreng </li>
<li>Telur dadar</li>
</ul>
</li>
<li> Daftar belajar yang saya suka
<ul type="square">
<li>HTML</li>
<li>CSS </li>
<li>PHP</li>
<li>Javascript</li>
</ul>
</li>
</ol>
</body>
</html>
Kesimpulan

Pada tutorial sekarang yakni membuat list di HTML, kita sudah mempelajari:
  1. Definisi List di HTML
  2. Membuat List di HTML
  • Ordered List pada HTML
  • Unordered List pada HTML
  • Description List pada HTML
Intinya sobat harus ingat-ingat tag untuk membuat list tersebut, Jangan sampai tertukar di bagian tagnya, Khususnya antara tag <ol> dan <ul> kalau sobat kurang konsentrasinya mungkin saja tertukar antara tag <ol> dan <ul>.

Next!

Selanjutnya kita akan mempelajari Cara mudah membuat tabel pada HTML.

Posting Komentar untuk "Lengkap : Cara Mudah Membuat Daftar List di HTML"