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 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. .....

How To Install Nginx On Debian Server

Date : 13 Feb 2023, Category : Server, Create By : admin

To install Nginx on a Debian server, you need to follow these steps: Update the package list:  sudo apt-get update Install Nginx:  sudo apt-get install nginx Start the Nginx service:  sudo systemctl start nginx Check the status .....

Cara Restore Database Postgres Di Local

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

Selamat datang di website gudangilmuaplikasi.com, melanjutkan materi sebelumnya mengenai backup database kali ini kami akan membahas bagaimana cara restore file backup pg_dump yang di lakukan di server centos atau server lainya. Sebelum .....