HTML DASAR – Membuat Daftar List item pada HTML

  • Post
    codeorayo
    Keymaster
    none
    Bagaimana caranya Membuat Daftar List item pada HTML ?. Dalam membuat halaman website, anda juga dapat membuat sebuah daftar item baik berurut maupun tidak berurut.

    Pada item terurut akan didefinisikan dengan penomoran, sedangkan pada item tidak terurut akan didefinisikan dengan sebuah symbol, selain itu anda juga dapat menampilkannya tanpa urutan/symbol atau gambar lain yang anda masukan sendiri ke dalam halaman. HTML menyediakan 3 jenis pengurutan yakni :

    Ordered ListSesuai namanya Ordered List berarti membuat Daftar Terurut. Tiap item memiliki tingkatannya masing – masing sesuai urutannya.

    Contoh Ordered List seperti kode sumber di bawah ini :

    Code:




    Ordered List

        

    1. Pertama
    2.   

    3. Kedua
    4.   

    5. Ketiga
    6.   

    7. Keempat


    Dan di bawah ini adalah hasil dari kode sumber di atas :

    [img width=457,height=398]http://lautankode.com/wp-content/uploads/2018/01/List-Ordered-List-Example.png[/img]

    Unordered ListUnordered List digunakan untuk menampilkan Daftar Item Tak Terurut, yang berarti tidak ada tingkatan pada item – item ini.

    Code:




    Unordered List

        

    • Cabe
    •   

    • Kentang
    •   

    • Tomat
    •   

    • Bayam


    Dan di bawah ini adalah hasil dari kode sumber di atas :

    [img width=456,height=399]http://lautankode.com/wp-content/uploads/2018/01/List-Unordered-List.png[/img]

    Description ListSesuai dengan namanya daftar dekripsi, dimana anda membuat istilah dengan deskripsinya. Untuk lebih jelas perhatikan Kode Sumber dan Output di bawah ini :

    Code:




    Description List

      

    Paragraf

      

    Merupakan rangkaian kalimat yang menjadi satu, sehingga membahas sebuah topik.


    Dan di bawah ini adalah hasil dari kode sumber di atas :

    [img width=454,height=237]http://lautankode.com/wp-content/uploads/2018/01/List-Description-List-1024×535.png[/img]

    Ordered List[img width=1024,height=359]http://lautankode.com/wp-content/uploads/2018/01/List-Ordered-List-1024×359.jpg[/img]

    Digunakan untuk membuat daftar item terurut. Dimulai dengan menggunakan tag

      (Ordered List) dan untuk daftar itemnya menggunkan tag

    1. singkatan dari “List Item”. Gunakan atribut type untuk melihat variasi tipe – tipe list yang disediakan dan jika ingin melihat variasi list yang lebih banyak, gunakan CSS.

      Code:




      Ordered List

          

      1. Sumatra
      2.   

      3. Kalimantan
      4.   

      5. Jawa
      6.   

      7. Sulawesi


      Dan di bawah ini adalah hasilnya :

      [img width=509,height=456]http://lautankode.com/wp-content/uploads/2018/01/List-Ordered-List-Output.png[/img]

      Pada Ordered List terdapat atribut – atribut yang umum digunakan yakni :

      [img width=524,height=221]http://lautankode.com/wp-content/uploads/2018/01/List-Ordered-List-Table-1024×431.png[/img]

      Ordered List dimulai dari urutan 3…

      Code:




      Ordered List 2

          

      1. Padang
      2.   

      3. Samarinda
      4.   

      5. Surabaya
      6.   

      7. Banjarmasin
      8.   

      9. Manado


      Dan di bawah ini adalah hasilnya :

      [img width=464,height=354]http://lautankode.com/wp-content/uploads/2018/01/List-Ordered-List-Start.png[/img]

      Unordered List[img width=403,height=312]http://lautankode.com/wp-content/uploads/2018/01/List-Unordered-List-Example.jpg[/img]

      Digunakan untuk membuat daftar item tidak terurut, item – item ini akan ditandai dengan sebuah simbol. Gunakan tag 

         (Unordered List) untuk memulainya, lalu untuk daftar itemnya gunakan tag 

      • .

        Gunakan atribut type untuk variasi dari jenis – jenis simbol list yang disediakan seperti disc, square, dan circle. Dan untuk type variasi symbol – symbol yang lain dapat kalian peroleh jika menggunakan CSS.

        Code:




        Unordered List

        • Pattimura
        • Gajah Mada
        • Adipati Unus
        • Imam Bonjol


        Dan di bawah ini adalah hasilnya :

        [img width=466,height=355]http://lautankode.com/wp-content/uploads/2018/01/List-Unordered-List-Output-1.png[/img]

        Menampilkan Item tanpa Tanda Urut/ SimbolCaranya mudah saja, hanya memberikan nilai property none  pada property type.

        Code:




        Item tanpa tanda

            

        • Amerika
        •   

        • Brazil
        •   

        • Jerman
        •   

        • Qatar

          

        Dan di bawah ini adalah outputnya :

        [img width=440,height=368]http://lautankode.com/wp-content/uploads/2018/01/List-Menampilkan-List-tanpa-simbol.png[/img]

        List Bersarang (Nested List)List Bersarang, maksudnya adalah membuat daftar item di dalam daftar item lain.

        Kode Sumber…

        Code:




        List Bersarang

        1. Indonesia
            

              

          • Jakarta
                

                  

            • Jakarta Pusat
            •     

            • Jakarta Selatan
            •     

              

          •   

          • Surabaya
          •   

        2. Inggris
            

              

          • London
          •   

          • Manchester
          •   

        3. Amerika
            

              

          • New York
          •   

          • Los Angeles
          •   


        Dan di bawah ini adalah hasilnya :

        [img width=434,height=468]http://lautankode.com/wp-content/uploads/2018/01/List-Nested-List.png[/img]

        Definition ListDigunakan untuk membuat daftar istilah beserta definisinya masing – masing.

        Ada 3 tag dasar yang digunakan, dl > dt > dd.

        dl mendefinisikan Definition List. Yakni mulai membuat definisinya.

        dt mendefinisikan Definition Term. Yakni membuat nama dari deskripsi yang akan dibuat.

        dd mendefinisikan Definition Data. Yakni memberi penjelasan/isi dari deskripsi tersebut.

        Kode Sumber…

        Code:




        Definition List

        Paragraf
        Merupakan serangkaian kalimat yang dirangkum menjadi satu. Sehingga menjadi sebuah pokok pembahasan yang membahas sebuah topik.
        Buku
        Merupakan jendela dunia yang dapat memanusiakan manusia, dengan isi yang terkandung didalamnya.


        Output :

        [img width=467,height=290]http://lautankode.com/wp-content/uploads/2018/01/List-Definition-List.png[/img]

      • dasar

      • html

    2. website


      https://www.lautankode.com/membuat-daftar-list-item-pada-html/

    Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com
  • You must be logged in to reply to this topic.