cara membuat list pada html

-

 CARA MEMBUAT LIST PADA HTML






jadi,kali ini saya akan memberi tahu cara membuat list pada html

sebelum kita mempelajari cara membuat list,ada baiknya kita mengenali terlebih dahulu jenis jenis list.

  • ordered list
  • unordered list
  • descriptional list
fungsi list pada html adalah menampilkan data secara berurutan dari atas kebawah

untuk membuat list,kita bisa diawali dengan menggunakan tag <ul> lalu menggunakan tag <li>.

berikut beberapa tag dalam html list:

  • <ul> mendefinisikan list tidak berurutan
  • <ol> mendefunisikan list berurutan
  • <li>  mendefinisikan list item
  • <dl> mendefinisikan penggambaran list
  • <dt> mendefinisikan istilah dalam list
  • <dd>menggambarkan istilah dalam list
berikut contoh menggunakan <ul><li>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>


jadinya akan seperti ini

  • Coffee
  • Tea
  • Milk
lalu kita akan mencoba menggunakan tag <ol><li>


 <ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

maka jadinya akan seperti ini

  1. Kopi
  2. teh
  3. susu
sekarang kita akan menggunakan tag <dl><dt>

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

maka akan jadi seperti ini


Kopi
- minuman panas hitam
susu
- minuman dingin putih

nah,jika kalian ingin membuat tanda list yang menarik,kalian bisa menggunakan ini(digunakan dalam tag <ul>)

<ul>mendefinisikan daftar yang tidak berurutan (berpoin)


<ul style="list-style-type:disc;">   untuk tanda lingkaran penuh
<ul style="list-style-type:circle;"> untuk tanda lingkaran
<ul style="list-style-type:square;"> untuk tanda kotak
<ul style="list-style-type:none;">   tidak ada tanda

kalian gunakan ini pada tag <ul> seperti yang di atas

ini jika kalian menggunakan tag <ol>


<ol>mendefinisikan daftar yang dipesan

<ol type="1"> nomor
<ol type="A"> huruf besar
<ol type="a"> huruf kecil
<ol type="I"> angka romawi huruf besar
<ol type="i"> angka romawi huruf kecil

kalian gunakan ini pada tag <ol> seperti yang diatas


Penghitungan Daftar Kontrol

Secara default, daftar yang diurutkan akan mulai menghitung dari 1. Jika Anda ingin mulai menghitung dari nomor yang ditentukan, Anda dapat menggunakan startatribut:

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

ini hasilnya
  1. Kopi
  2. teh
  3. susu

Daftar HTML Bersarang

Daftar dapat bersarang (daftar di dalam daftar)


<ol>
  <li>Coffee</li>
  <li>Tea
    <ol>
      <li>Black tea</li>
      <li>Green tea</li>
    </ol>
  </li>
  <li>Milk</li>
</ol>

hasilnya

  1. Kopi
  2. teh
    1. Teh hitam
    2. Teh hijau
  3. susu

Daftar Deskripsi HTML

Daftar deskripsi adalah daftar istilah, dengan deskripsi setiap istilah.

Tag <dl>mendefinisikan daftar deskripsi, tag mendefinisikan istilah (nama), dan tag menjelaskan setiap istilah: <dt> <dd>


Contoh

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

hasilnya

Kopi
- minuman panas hitam
susu
- minuman dingin putih

oke mungkin segitu saja dulu yang bisa saya berikan tentang tutorial membuat list

maaf bila tutorial yang saya berikan kurang jelas,terinakasih semuanyaaaa

Komentar

Posting Komentar