• Jum. Sep 30th, 2022

    Sih4nk

    Dari Kita Untuk Kita

    #9 Belajar HTML List

    Belajar html

    Belajar HTML LIST  atau yang kita kenal dengan daftar berurutan merupakan fungsi dalam HTML yang digunakan untuk menampilkan data secara berurutan ke bawah. Dalam HTML penilisan list menggunakan tag <li>. dalam membuat list pada HTML ini terdapat dua jenis tampilan list yang bisa di gunakan yaitu ordered list dan unordered list.

    1. ordered list berfungsi untuk menampilkan daftar list dalam bentuk huruf atau angka. tag yang digunakan dalam ordered list ini yaitu <ol>
    2. unordered list berfungsi untuk menampilkan daftar list dalam bentuk bulatan atau kotak di awalnya. tag yang diguanakan untuk membuat unordered list yaitu  <ul>

    untuk lebih mudahnya, perhatikan contoh penulisan list dalam HTML

    Hasil

    Belajar HTML list

    List diatas diurutkan berdasarkan angka dari 123, sampai 5.

    Lalu bagaimana kalau kita ingin menggunakan huruf seperti abc atau angka romawi seperti IIIIII?

    Untuk membuat yang seperti itu, kita bisa menggunakan atribut type pada tag ol dan berikut ini nilai yang bisa diberikan:

    • a untuk alfabet abc, dan seterusnya;
    • A untuk alfabet ABC, dan seterusnya;
    • i untuk angka romwari iiiiii, dan seterusnya;
    • I untuk angka romwari IIIIII, dan seterusnya.

    Contoh:

    Hasilnya

    Belajar HTML list

    2.Unordered List di HTML

    Unordered list adalah list yang tak terurut yang menggunakan simbol-simbol pada item-nya. Unordered list dibuat dengan tag <ul> dan untuk item-nya dibuat juga dengan tag <li>.

    Belajar HTML list

    Contohnya :

    Hasilnya :

    Belajar HTML list

    Secara default simbol yang digunakan oleh unordered list adalah lingkaran kecil (disc). Kita juga bisa menggantinya dengan atribut type.

    Berikut ini nilai yang bisa diberikan untuk atribut type:

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

    Contoh:

    Hasilnya :

    Belajar HTML list

    3. Description List di HTML

    Description List adalah list yang berisi deksripsi atau penjelasan dari sesuatu.

    Ada tiga tag yang digunakan untuk membuat description list:

    • <dl> (description list) tag untuk memulai description list;
    • <dt> (description term) tag untuk membuat kata yang akan dideskripsikan;
    • <dd> (description description) tag untuk membuat penjelasan dari kata.

    Format penulisannya seperti ini:

    Belajar HTML list

    Contohnya :

    Hasilnya :

    Belajar HTML list

    List di dalam List (Nested List)

    List juga dapat dibuat di dalam list, misalkan kita ingin menggabungkan ordered list dengan unordered list.

    Caranya, list yang di dalam ditulis di dalam tag <li>.

    Contoh:

    Hasilnya :

    Belajar HTML list

    Dari banyak contoh  di atas kita dapat melihat perbedaan masing-masing jenis list HTML.

    Materi HTML Dasar Lainnya :

    #1 Belajar HTML : Pengertian HTML
    #2 Belajar HTML : Text Editor
    #3 Belajar HTML Mengenal Tag, Element, Atribut HTML
    #4 Belajar HTML Heading
    #5 Belajar HTML Format Text
    #6 Belajar HTML Paragraf
    #7 Belajar HTML Tabel
    #8 Belajar HTML Hyperlink
    #9 Belajar HTML List
    #10 Belajar HTML Form
    #11 Belajar HTML Atribut Form
    #12 Belajar HTML Symbol
    #13 Belajar HTML Gambar
    #14 Belajar HTML Tag Iframe
    8 thoughts on “#9 Belajar HTML List”

    Tinggalkan Balasan

    Alamat email Anda tidak akan dipublikasikan.