1. Home
  2. read
  3. Tutorial HTML Part 10 : Membuat Daftar List pada HTML

Tutorial HTML Part 10 : Membuat Daftar List pada HTML



Tutorial HTML Part 10 : Membuat Daftar List pada HTML


Daftar List Pada HTML

List adalah salah satu elemen HTML yang digunakan untuk menampilkan informasi dalam bentuk List atau Daftar. Dan biasanya di buat untuk membuat menu-menu.

List di HTML umumnya terdapat 2 macam jenis list yang sering di gunakan pada umumnya yaitu :

  1. Ordered List yaitu List yang terurut,
  2. Unordered List yaitu List yang tidak terurut.

Pembahasan :

1. Cara Membuat Ordered List pada HTML

Ordered List merupakan daftar list yang terurut. Ditandai dengan angka atau huruf yang ada didepan teks.

Contoh :

  1. HTML
  2. CSS
  3. PHP
  4. MYSQL

Penggunaan Ordered List pada HTML ditandai dengan penggunaan Tag <ol> dan sub tagnya adalah <li> atau (list item)

Contoh :

<!DOCTYPE html>
<html>
<head>
    <title>Membuat List Ordered</title>
</head>
<body>
    <h5>5 Macam CMS Terpopuler buatan Indonesia menurut Codekop.com :</h5>
    <ol>
      <li>CMS Sekolahku</li>
      <li>CMS Popoji</li>
      <li>Fiyo CMS</li>
      <li>HTMLy</li>
      <li>Lokomedia</li>
    </ol>
</body>
</html>

Hasilnya :

5 Macam CMS Terpopuler buatan Indonesia menurut Codekop.com :
  1. CMS Sekolahku
  2. CMS Popoji
  3. Fiyo CMS
  4. HTMLy
  5. Lokomedia

 

List diatas merupakan urutan 1-5, bagaimana kita ubah urutan dari 1-5 menjadi huruf alphabet a,b,c atau romawi I,II,III. Dengan menggunakan atribut type pada tag <ol>. Contoh :

<!DOCTYPE html>
<html>
<head>
    <title>Ordered List dengan Atribut Type</title>
</head>

<body>
   <h5>List dengan type alfabet</h5>
       <ol type='A'>
          <li>HTML</li>
          <li>CSS</li>
          <li>PHP</li>
          <li>MySQL</li>
          <li>jQuery</li>
       </ol>
   <h5>List dengan type alfabet kapital (huruf besar)</h5>
       <ol type='a'>
          <li>HTML</li>
          <li>CSS</li>
          <li>PHP</li>
          <li>MySQL</li>
          <li>jQuery</li>
       </ol>
   <h5>List dengan type romawi</h5>
       <ol type='I'>
          <li>HTML</li>
          <li>CSS</li>
          <li>PHP</li>
          <li>MySQL</li>
          <li>jQuery</li>
       </ol>
   <h5>List dengan type romawi kapital</h5>
       <ol type='i'>
          <li>HTML</li>
          <li>CSS</li>
          <li>PHP</li>
          <li>MySQL</li>
          <li>jQuery</li>
       </ol>
</body>
</html>

Hasil :

List dengan type alfabet
  1. HTML
  2. CSS
  3. PHP
  4. MySQL
  5. jQuery
List dengan type alfabet kapital (huruf besar)
  1. HTML
  2. CSS
  3. PHP
  4. MySQL
  5. jQuery
List dengan type romawi
  1. HTML
  2. CSS
  3. PHP
  4. MySQL
  5. jQuery
List dengan type romawi kapital
  1. HTML
  2. CSS
  3. PHP
  4. MySQL
  5. jQuery

2. Cara Membuat Unordered List pada HTML

Unordered List adalah list yang tidak terurut, biasanya menggunakan simbol-simbol.

Penggunaan Unordered List pada HTML ditandai dengan penggunaan Tag <ul> dan sub tagnya adalah <li> atau (list item)

Contoh:

<!DOCTYPE html>
<html>
<head>
  <title>Unordered List</title>
</head>
<body>
  <h5>Daftar Tutorial Website Codekop.com :</h5>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>PHP</li>
    <li>MySQL</li>
    <li>jQuery</li>
  </ul>
</body>
</html>

Hasil :

Daftar Tutorial Website Codekop.com :
  • HTML
  • CSS
  • PHP
  • MySQL
  • jQuery

Untuk default symbol lingkaran kecil yang terdapat pada tag <ul>, kita dapat mengubahnya symbolnya dengan menggunakan atribut type :

<!DOCTYPE html>
<html>
<head>
  <title>Unordered List</title>
</head>
<body>
  <h5>Type = square</h5>
  <ul type="square">
    <li>HTML</li>
    <li>CSS</li>
    <li>PHP</li>
    <li>MySQL</li>
    <li>jQuery</li>
  </ul>
  <h5>Type = disc</h5>
  <ul type="disc">
    <li>HTML</li>
    <li>CSS</li>
    <li>PHP</li>
    <li>MySQL</li>
    <li>jQuery</li>
  </ul>
  <h5>Type = none</h5>
  <ul type="none">
    <li>HTML</li>
    <li>CSS</li>
    <li>PHP</li>
    <li>MySQL</li>
    <li>jQuery</li>
  </ul>
  <h5>Type = circle</h5>
  <ul type="circle">
    <li>HTML</li>
    <li>CSS</li>
    <li>PHP</li>
    <li>MySQL</li>
    <li>jQuery</li>
  </ul>
</body>
</html>

Hasil :

Type = square
  • HTML
  • CSS
  • PHP
  • MySQL
  • jQuery
Type = disc
  • HTML
  • CSS
  • PHP
  • MySQL
  • jQuery
Type = none
  • HTML
  • CSS
  • PHP
  • MySQL
  • jQuery
Type = circle
  • HTML
  • CSS
  • PHP
  • MySQL
  • jQuery

dan anda dapat mengubah menjadi gambar pada symbol list tersebut :

<!DOCTYPE html>
<html>
<head>
  <title>Unordered List</title>
</head>
<body>
  <h5> List Style dengan Gambar : </h5>
  <ul style="list-style-image: url('https://www.codekop.com/cd-view/assets/media/source/fauzan1892/leaf_icon.jpg');">
    <li>HTML</li>
    <li>CSS</li>
    <li>PHP</li>
    <li>MySQL</li>
    <li>jQuery</li>
  </ul>
</body>
</html>

Hasil :

List Style dengan Gambar :
  • HTML
  • CSS
  • PHP
  • MySQL
  • jQuery

 

Oke itu saja belajar list pada html. Terima kasih sudah berkunjung. Tutorial Selanjutnya adalah :

Tutorial HTML Part 11 : Cara Membuat Hyperlink pada HTML



Fauzan Falah

Penulis https://codekop.com/ , http://maswin.id/ | Github : https://github.com/fauzan1892/ | portfolio : https://fauzan.codekop.com/

Profil Penulis Semua Postingan


Komentar