Membuat list pada HTML
Di Posting Oleh : wandi
Kategori : 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 .
Mau liat atau download source code aplikasi premium bisa disini.
Di Posting Oleh : wandi
Kategori : 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 .
Mau liat atau download source code aplikasi premium bisa disini.
0 Komentar