Mode Malam
| Mode Tampilan
Penulis : admin

Home / Programming / Tutorial Lengkap Belajar Html # Membuat List Di Html
Tutorial Lengkap Belajar Html # Membuat List Di Html

Tutorial Lengkap Belajar Html # Membuat List Di Html


Pada tutorial sebelumnya kita telah belajar membuat sebuah tabel di html.
Pada artikel kali ini kita akan belajar bagai manacara membuat sebuah list di html
List dapat digunakan untuk membuat sebuah daftar item tertentu yang ditampilkan dalam bentuk baris berurutan.

Tutorial Lengkap Belajar Html # Membuat List Di Html

Yuk langsung saja ke tutorialnya,

Tag yang digunakan untuk membuat list

Berikut adalah tag-tag yang bisa digunakan untuk membuat list di html,

Tag Keterangan
<dl> Digunakan untuk membuat deskripsi list
<dt> Digunakan untuk membuat judul item dari deskripsi list
<dd> Digunakan untuk membuat detail item dari deskripsi list
<ol> Digunakan untuk membuat order list atau list dalam bentuk urutan
<ul> Digunakan untuk membuat unorder list atau list dalam bentuk bukan urutan
<li> Digunakan untuk membuat item dari tag <ol> atau <ul>

Cara membuat list di html

Ada tiga jenis list yang bisa kita buat untuk membuat list di html, yaitu,

Order List

Orderlist adalah list yang dibuat menggunakan tag <ol>. 

List ini digunakan untuk mengurutkan item-item list dan memberikan penomoran dalam bentuk angka maupun huruf pada setiap item list. Penggunaanya biasanya untuk menandai sebuah proses, langkah-langkah, ranking dan lain sebagainya.

advertisement

Contohnya,

Deretcode


Output :

Untuk mengganti penomoronyan dengan huruf atau angka romari kita bisa menambahkan atribut type pada elemen ol nya.

Contohnya,

Deretcode


Output :

Unorder List

Unorder list adalah list yang dibuat menggunakan tag <ul> .

List ini digunakan untuk membuat daftar item yang tak berurutan. 

Contohnya,

Deretcode


Output :

Kita juga bisa mengganti simbol pointnya dengan menambahkan attribute type pada elemen ul.

  • square untuk simbol persegi;
  • disc (default) untuk simbol lingkaran disc;
  • none tidak memakai simbol;
  • circle untuk simbol lingkaran;

Contohnya,

Deretcode


Output :

Atau jika kalian ingin mengganti simbolnya dengan gambar juga bisa.
Caranya adalah dengan menggunakan attribute style dengan mengatur properti list-style-image.

Contohnya,

Deretcode


Output :

Description List

List deskripsi adalah list yang dibuat menggunakan tag <dl>, <dt> dan <dd>.

  • <dl> digunakan untuk membuat list
  • <dt> digunakan untuk membuat judul dari item
  • <dd> digunakan untuk membuat detail item

advertisement

Contohnya,

Deretcode


Output :



Sampai disini tutorial cara membuat list di html.
Jika kalian merasa artikel ini bermanfaat silahkan tekan tombol share.
Dan jika ada pertanyaan atau ada hal yang ingin disampaikan silahkan tulis di kolom komentar.

 

Tags: #html #list #ul #ol #
Bagikan :

Komentar:

Silahkan berkomentar dengan baik dan bijak!

Name * :
Email :
Website :
Comment :


This website uses cookies to ensure you get the best experience on our website

learn more