DeretCode|

Tips, Trik dan Tutorial
Seputar IT, Coding, Internet Marketing, Keahlian, Pendidikan, Hobi Dan Lainnya
Night :

Tutorial Lengkap Belajar Html # Membuat List Di Html

advertisement
Membuat list di html

Pada tutorial sebelumnya kita telah belajar membuat sebuah tabel di html.
Pada artikel kali ini kita akan belajar bagai mana cara membuat sebuah list di html
List dapat digunakan untuk membuat sebuah daftar item.
Membuat sebuah List

Yuk langsung saja ke tutorialnya

Tag yang digunakan untuk membuat list

Tag Keterangan Sering digunakan
<dd> Digunakan untuk membuat penjelasan dari item list <dt>
<dl> Digunakan untuk membuat deskripsi list
<dt> Digunakan untuk membuat definisi untuk item dari <dl>
<li> Digunakan untuk membuat item dari list
<ol> Digunakan untuk membuat list countable
<ul> Digunakan untuk membuat list uncountable

Kita tidak akan menggunakan semuanya. 
Hanya tag-tag yang dengan tanda ✔ diatas yang akan sering kita gunakan untuk membuat list

Cara membuat list di html

Ada tiga tipe yang bisa kita buat untuk membuat list, yaitu

Order list (Countable list)

Orderlist adalah list yang dibuat menggunakan tag <ol>
List ini digunakan untuk mengurutkan item-item list dan memberikan penomoran dalam bentuk angka maupun huruf pada setiap item list.
Contoh,
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Deretcode.com</title>
    </head>
    <body>
	  <p>Daftar Artikel</p>
	  <ol>
	    <li>Tutorial Html</li>
	    <li>Tutorial Css</li>
	    <li>Tutorial Javascript</li>
	  </ol>
    </body>
</html>

Hasilnya,

Contoh list countable
Untuk mengganti penomoronyan dengan huruf atau angka romari kita bisa menambahkan atribut type pada elemen ol nya.
Contohnya,

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Deretcode.com</title>
    </head>
    <body>
	<br/>
	  <p>Penomoran dengan Angka</p>
	  <ol>
	    <li>Tutorial Html</li>
	    <li>Tutorial Css</li>
	    <li>Tutorial Javascript</li>
	  </ol>
	  <p>Penomoran dengan Huruf</p>
	  <ol type="A">
	    <li>Tutorial Html</li>
	    <li>Tutorial Css</li>
	    <li>Tutorial Javascript</li>
	  </ol>
	  <p>Penomoran dengan Angka Romawi</p>
	  <ol type="I">
	    <li>Tutorial Html</li>
	    <li>Tutorial Css</li>
	    <li>Tutorial Javascript</li>
	  </ol>
    </body>
</html>

Hasilnya,

Type penomoran list item

Point List (Uncountable list)

Point list adalah list yang dibuat menggunakan tag <ul> .
List ini digunakan untuk membuat daftar item dalam bentuk point.
Contohnya,
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Deretcode.com</title>
    </head>
    <body>
	<br/>
	  <p>Daftar Artikel</p>
	  <ul>
	    <li>Tutorial Html</li>
	    <li>Tutorial Css</li>
	    <li>Tutorial Javascript</li>
	  </ul>
    </body>
</html>
Hasilnya,
Contoh point list
Kalin juga bisa mengganti simbol pointnya dengan menambahkan atribut type pada elemen ul.
  • square untuk simbol persegi;
  • disc (default) untuk simbol lingkaran disc;
  • none tidak memakai simbol;
  • circle untuk simbol lingkaran;
Contohnya,
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Deretcode.com</title>
    </head>
    <body>
	<br/>
	  <p>Daftar Artikel</p>
	  <ul type="circle">
	    <li>Tutorial Html</li>
	    <li>Tutorial Css</li>
	    <li>Tutorial Javascript</li>
	  </ul>
    </body>
</html>

Hasilnya,

list simbol lingkaran
Atau jika kalian ingin mengganti simbolnya dengan gambar juga bisa,
caranya adalah dengan menggunakan attribut style dengan properti list-style-image.
Contohnya,
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Deretcode.com</title>
    </head>
    <body>
	<br/>
	  <p>Daftar Artikel</p>
	  <ul style="list-style-image: url(url_gambarmu.png)">
	    <li>Tutorial Html</li>
	    <li>Tutorial Css</li>
	    <li>Tutorial Javascript</li>
	  </ul>
    </body>
</html>

Description List

List deskripsi adalah list yang dibuat menggunakan tag <dl>, <dt> dan <dd>.
<dl> digunakan untuk membuat list
<dt> digunakan untuk membuat item list
<dt> digunakan untu menjelaskan item list <dt>
Contohnya,
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Deretcode.com</title>
    </head>
    <body>
	<br/>
	  <p>Daftar Artikel</p>
	  <dl>
	    <dt>Tutorial Html</dt>
		    <dd>Html adalah struktur halaman web</dd>
	    <dt>Tutorial Css</dt>
		    <dd>Css adalah desain halaman web</dd>
	    <dt>Tutorial Javascript</dt>
		    <dd>Javascript adalah nyawa halaman web</dd>
	  </dl>
    </body>
</html>
Hasilnya,
Contoh list deskripsi
Sampai disini tutorial cara membuat list di html. Jika kalian merasa artikel ini bermanfaat silahkan tekan tombol share. Dan jika ada pertanyaan atau ada hal yang ingin disampaikan silahkan tulis di kolom komentar.

advertisement



0 Komentar untuk " Tutorial Lengkap Belajar Html # Membuat List Di Html"

Silahkan berkomentar dengan baik dan bijak!