Cara Memberikan Style pada Unorder-list HTML dan CSS
Hallo teman-teman, Bertemu kembali dengan saya dan masih diwebsite ini. Seperti lazim ya teman-teman, semoga masih diberikan medis dan kebahagiaan agar dapat kembali semangat pada mencari informasi atau ingin mengupgrade skill didunia situs.
Di kesempatan kali ini saya akan membahas mengenai Cara Memberikan Style di Unorder-list HTML dan CSS. Mungkin di pembahasan kali ini telah banyak sekali dibahas, namun saya akan me-review kembali mengenai Style di Unorder-list. Pada sebuah situs, list atau sebuah daftar adalah sebuah sebuah hal yang pasti ada didalamnya atau tak dapat kita dihindari. Diantara list yang terdapat di HTML yakni Unordered List (ul) singkatan dari Unordered List, digunakan bagi memberikan daftar dari hal-hal yang tak mempunyai urutan tertentu, atau yang urutannya tak urgen. Didalam Unordered-list ini terdapat beberapa tipe dan style nya. Disini saya akan memberikan beberapa contoh style tipe di unordered-list.
Oke teman-teman, pertama-tama silahkan jalankan/run text-editor yang teman-teman gunakan. Apabila telah silahkan ketik/copy script HTML dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Cara Memberikan Style di Unorder-list HTML dan CSS</title>
</head>
<body>
<ul class=circle>
<li>circle</li>
<li>circle</li>
<li>circle</li>
</ul>
<ul class=square>
<li>square</li>
<li>square</li>
<li>square</li>
</ul>
<ul class=disc>
<li>disc</li>
<li>disc</li>
<li>disc</li>
</ul>
</body>
</html>
Apabila telah dengan HTMLnya, langkah berikutnya silahkan teman-teman ketik/copy styling CSSnya seperti di dibawah ini :
<style type=text/css>
ul.circle{
list-style: circle;
}
ul.square{
list-style: square;
}
ul.disc{
list-style: disc;
}
</style>
Karenanya hasil penggabungan antara HTML dan CSS nya menjadi seperti dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Cara Memberikan Style di Unorder-list HTML dan CSS</title>
<style type=text/css>
ul.circle{
list-style: circle;
}
ul.square{
list-style: square;
}
ul.disc{
list-style: disc;
}
</style>
</head>
<body>
<ul class=circle>
<li>circle</li>
<li>circle</li>
<li>circle</li>
</ul>
<ul class=square>
<li>square</li>
<li>square</li>
<li>square</li>
</ul>
<ul class=disc>
<li>disc</li>
<li>disc</li>
<li>disc</li>
</ul>
</body>
</html>
Apabila telah silahkan teman-teman simpan dan jalankan/run dibrowser yang teman-teman gunakan. Apabila benar karenanya hasilnya akan terlihat seperti di gambar dibawah ini :
Jadi seperti seperti itulah style tipe yang terdapat di Unordered-list secara umumnya. Apabila teman-teman ingin list tsb menjadi sebuah gambar pun dapat. Bagi pembahasan kali ini mengenai Cara Memberikan Style di Unorder-list HTML dan CSS. dan Nanti di pembahasan berikutnya saya akan membahas mengenai cara memberikan style gambar di unorder-list html dan css dan pun model type list.
Oke kalau demikian itu lumayan sekianlah pembahasan kali ini mengenai Cara Memberikan Style di Unorder-list HTML dan CSS. semoga dapat bermanfaat bikin teman-teman dan hingga bertemu dipembahasan berikutnya.
Terimakasih
Sumber https://kursuswebsite.org
