358 Views

Belajar Pemrograman HTML & CSS (Part 6) – Daftar/List

html css jquery javascript

hai.. semua sobat belajar hebat bertemu lagi dengan saya. kali kita pelajari dalam tutorial belajar HTML dasar adalah cara membuat daftar/list di HTML. Untuk menampilkan sebuah text sebagai daftar/list, HTML menyediakan Tag <ol>, <ul> dan <li>.

 

 

Ordered list menggunakan tag <ol>, dan unordered list menggunakan tag <ul>, sedangkan untuk list sendiri menggunakan tag <li>. Penjelasan ini akan lebih mudah jika menggunakan contoh.

Berikut adalah contoh kode HTML untuk membuat ordered list menggunakan tag<ol>:

<!DOCTYPE html>
<html>
<head>
  <title>penggunaan tag list </title>
</head>
<body>
  <h1>daftar belanjaan</h1>
  <ol>
  <li>minyak goreng</li>
    <li>sabun mandi</li>
    <li>deterjen</li>
    <li>shampoo</li>
    <li>buku</li>
  </ol>
</body>
</html>
number_list

 

 

 

 

 

Untuk membuat unordered list, tinggal ganti tag <ol> menjadi <ul>.

Berikut adalah contoh kode HTML untuk membuat unordered list menggunakan tag<ul>:

<!DOCTYPE html>
<html>
<head>
  <title>penggunaan tag list </title>
</head>
<body>
  <h1>daftar belanjaan</h1>
  <ul>
  <li>minyak goreng</li>
    <li>sabun mandi</li>
    <li>deterjen</li>
    <li>shampoo</li>
    <li>buku</li>
  </ul>
</body>
</html>
bullent_list
Penggunaan tag list pada HTML tidak hanya untuk membuat daftar saja. Dengan CSS, tag list dapat digunakan untuk membuat menu navigasi di dalam halaman web, seperti menu home, contact us, dll. Tag list juga dapat digunakan untuk nested list, atau list bersarang, yang artinya sebuah list yang berada di dalam list lainnya.
Berikut adalah contoh kode HTML untuk membuat nested list, atau list bersarang :
<!DOCTYPE html>
<html>
<head>
  <title>penggunaan tag list </title>
</head>
<body>
  <h1>daftar belanjaan</h1>
  <ol>
  <li>mie</li>
             <ul>
                    <li>indomie</li>
                    <li>sarimie</li>
            </ul>
    <li>sabun mandi</li>
            <ul>
                    <li>dove</li>
                    <li>lifebuoy</li>
            </ul>
    <li>deterjen</li>
    <li>shampoo</li>
    <li>buku</li>
            <ul>
                    <li>mtk</li>
                    <li>ipa</li>

            </ul>

  </ol>
</body>
</html>
bersarang

 

                                                oke sekian dari saya semoga bermanfaat bagi anda semua.
SALAM HEBAT
Share
You can leave a response, or trackback from your own site.

Leave a Reply