Belajar Element Tag Html Ul

Tanggal : 21 Aug 2018, Category : HTML, Create By : admin

Selamat datang di website gudang ilmu aplikasi, kali ini kami akan membahasa mengenai tag html ul, <ul> adalah kepanjangan dari Unordered List atau dalam bahasa Indonesia dapat di artikan dengan Daftar Tidak Terurut, fungsi <ul> sendiri adalah membuat sebuah daftar item dari beberapa item yang dapat di susun dengan dengan di tantai dengan simbol.

Penggunaan Tag HTML Ul

Dalam menggunakan tag <ul> ini anda harus juga menggunakan tag html <li> karena tag tersebut adalah anak dari tag <ul>.

Apa Itu Tag Li

Tag <li> adalah kepanjangan dari List Item, tag ini berada di dalam blok tag <ul> berfungsi sebagai daftar urut item dari tag <ul>. Berikut Contoh Penggunaanya.

<ul>
 <li>Yusuf</li>
 <li>Agus</li>
 <li>Andre</li>
</ul>

Secara default penggunaan tag <ul> akan menggunakan simbol bulat hitam, seperti gambar berikut ini.

Ada tiga jenis type dalam tag <ul> yaitu :

  1. circle
  2. disc
  3. square

Contoh penggunaan type

<ul type="square">
 <li>Yusuf</li>
 <li>Agus</li>
 <li>Andre</li>
</ul>

Output :

 

Anda juga bisa memberi sebuah style agar bisa menggunakan simbol dengan gambar. Berikut contohnya.

<style>
 li {
   margin: 0;
   padding: 36px 0 36px 84px;
   list-style: none;
   background-image: url("icon-li.png");
   background-repeat: no-repeat;
   background-position: left center;
   background-size: 40px;
 }
 </style>
<body>
 <ul>
   <li>Yusuf</li>
   <li>Agus</li>
   <li>Andre</li>
 </ul>
</body>

Pada script diatas menggunakan style background gambar, dengan beberapa tambahan settingan seperti ukuran (size) agar gambar tidak terlalu besar, ouput sebagai berikut

Pengunaan Tag HTML Ul Bertingkat

<ul>
 <li>Kelompok Pertama
   <ul>
     <li>Yusuf</li>
     <li>Joko</li>
   </ul>
 </li>
 <li>Kelompok Kedua
   <ul>
     <li>Johan
       <ul>
         <li>Johan Alex</li>
         <li>Johan Yuf</li>
       </ul>
     </li>
     <li>Inar</li>
   </ul>
 </li>
 <li>Kelompok Ketiga
   <ul>
     <li>Chika</li>
     <li>Bagus
        <ul>
           <li>Agung
             <ul>
                <li>Yusno</li>
                <li>Koko</li>
             </ul>
           </li>
           <li>Mario</li>
           <li>Lili</li>
        </ul>
     </li>
     <li>Brayne</li>
   </ul>
 </li>
</ul>

Output :

Cukup sekian materi mengenai tag <ul>, <li> semoga bisa menambah ilmu pembaca sekalian terimkasih telah mengunjungu website gudang ilmu aplikasi.

Keyword:
  • belajar element tag html ul
  • element tag ul
  • tag li
  • tag ul
  • tag html ul
  • tag html li
  • membuat list bertingkat
  • list item html

Artikel Lain

Cara Deposit Di Binary Option

Date : 05 Aug 2018, Category : Trading, Create By : admin

Selamat datang di website gudangilmuaplikasi.com, kali ini kami akan membahas tentang bagaimana cara deposit di binary option, sebelum deposit apakah anda sudah berlatih dulu dengan menggunakan akun demo, kalau belum berlatih .....

Cara Membuat Store Prosedure Di Phpmyadmin Web Hosting

Date : 21 Jul 2018, Category : Database, Create By : admin

Selamat datang di website gudangilmuaplikasi.com, kali ini kami akan membahas Cara Membuat Store Prosedure Di PHPMyAdmin Web Hosting, langsung saja masuk ke phpmyadmin sever kalian masing - masing untuk contoh saya menggunakan localhost. .....

Membuat Encode Dan Decoded Php

Date : 01 Jan 2019, Category : Tutorial, Create By : admin

Selamat datang di website gudang ilmu aplikasi, kali ini kami akan membahas mengenai encode dan decode menggunakan bahasa pemprogaman php yang pertama kita akan membahas mengenai encode. Encode Encode adalah sebuah algoritma .....