in

Membuat list pada HTML


Selamat datang kawan kali ini kita akan coba untuk membuat list pada HTML . List ini sangat berguna sekali di sebuah sistus web terutama dalam pembuatan menu , di menu ada kategori yang apa aja . Itu menggunakan list .

Di HTML telah tersedia dua cara / dua gaya yang pertama kita boleh mengguankan nomor atau tidak menggunakan nomor . Mungkin agak sedikit membingungkan kedengarannya, tetapi sebenarnya sederhana . Kedua cara itu adalah yang pertama adalah dengan tag <ol></ol> atau onderet list dan juga dengan tag <ul></ul> atau underet list .

Contoh penulisan

<ul>
  <li>HTML</li>
</ul>

Jadi tag <ul> atau tag <ol> itu merupakan parent elemen atau induk elemen dari tag <li> ,dan tag <li> itu merupakan anaknya . Oke kita coba sekarang gunakan .

Sekarang contoh <ol>

<!doctype HTML>
<html>
<head>
<title>list HTML</title>
</head>
<body>
<ol>
<li>HTML</li>
<li>css</li>
<li>Javascript</li>
<li>PHP</li>
</ol>
</body>
</html>

Maka akan tampil otomatis dengan nomor


Jadi itu maksudnya dengan onderet list otomatis akan menggunakan nomor , kita bisa juga dengan huruf romawi , dengan menggunakan atribut yang namanya type . Contohnya

<!doctype HTML>
<html>
<head>
<title>list HTML</title>
</head>
<body>
<ol type=”i”>
<li>HTML</li>
<li>css</li>
<li>Javascript</li>
<li>PHP</li>
</ol>
</body>
</html>

atau

<!doctype HTML>
<html>
<head>
<title>list HTML</title>
</head>
<body>
<ol type=”I”>
<li>HTML</li>
<li>css</li>
<li>Javascript</li>
<li>PHP</li>
</ol>
</body>
</html>

tidak hanya atribut type saja kita juga bisa dengan dimulainya dari nomor berapa . Kita gunakan atribut start .contoh

<!doctype HTML>
<html>
<head>
<title>list HTML</title>
</head>
<body>
<ol start=”96″>
<li>HTML</li>
<li>css</li>
<li>Javascript</li>
<li>PHP</li>
</ol>
</body>
</html>

atau

<!doctype HTML>
<html>
<head>
<title>list HTML</title>
</head>
<body>
<ol type=”I”start=”4″>
<li>HTML</li>
<li>css</li>
<li>Javascript</li>
<li>PHP</li>
</ol>
</body>
</html>

Sekarang lanjut kita coba yang <ul> atau underet list.

<!doctype HTML>
<html>
<head>
<title>list HTML</title>
</head>
<body>
<ul>
<li>HTML</li>
<li>css</li>
<li>Javascript</li>
<li>PHP</li>
</ul>
</body>
</html>

maka akan tampil

jadi itu maksudnya underetlist , tidak memiliki deretan , sama seperti tag <ol> typenya bisa di ubah , tetapi karena itu underet list berarti tidak memiliki tag start . contoh

<!doctype HTML>
<html>
<head>
<title>list HTML</title>
</head>
<body>
<ul type=”circle”>
<li>HTML</li>
<li>css</li>
<li>Javascript</li>
<li>PHP</li>
</ul>
</body>
</html>

Sekarang coba kawan kawan bisa sudah paham coba buat seperti gambar di bawan ini . Berati ada ol di dalam ul


<!doctype HTML>
<html>
<head>
<title>list HTML</title>
</head>
<body>
<ol>
<li>Pemprograman Web
<ul type=”circle”>
<li>HTML</li>
<li>css</li>
<li>Javascript</li>
<li>PHP</li>
</ul>
</li>
<li>Pemprograman dasar
<ul type=”square”>
<li>C</li>
<li>pascal</li>
</ul>
</li>
<li>Pemprograman dekstop
<ul type=”circle”>
<li>Visual Basic</li>
</ul>
</li>
<li>Pemprograman berorientasi objek
<ul type=”square”>
<li>Java</li>
</ul>
</li>
</ol>
</body>
</html>

Oke mungkin itu dia bahas bahas mengenai list pada HTML . Semoga bermanfaat dan juga menambah wawasan . Terimakasih telah berkenan membaca artikel ini  . Sampai jumpa artikel yang lainnya yang lebih bermanfaat dan juga lebih menarik lagi .

Written by admin