Belajar HTML Untuk Pemula Level 4


Halo Sobat Lautan, semoga sehat selalu ya. 
Kali ini, kita akan membahas kembali bahasa pemrograman website dasar, yakni HTML. Pada artikel sebelumnya, kita telah membahas tuntas tag untuk teks element. Nah, artikel ini akan fokus untuk membahas list element, so perhatikan dengan seksama ya. 

Tag list digunakan untuk memberikan list atau daftar menu, bertandakan tag <ol> atau <ul>. Tag <ol> dan tag <ul> bersifat sebagai container daripada tag <li>. 

Tag <OL> (Ordered List)

Berikut ini adalah contoh skripnya

<p>Daftar Buku Pemrograman</p>
<ol>
<li> Pemrograman Go </li>
<li> Pemrograman Java </li>
<li> Pemrograman Pascal </li>
</ol>

Kita dapat mengganti tipe daripada ordered list menjadi tipe yang berbeda dengan sebuah atribut type. Berikut ini adalah contohnya 

<p>Daftar Buku Pemrograman</p>
<ol type="A">
<li> Pemrograman Go </li>
<li> Pemrograman Java </li>
<li> Pemrograman Pascal </li>
</ol>

Kita juga dapat memberikan style didalam ordered list, dengan menempatkan atribut style. Contoh seperti dibawah ini :

<p>Daftar Buku Pemrograman</p>
<ol style:"list-style-type:decimal-leading-zero">
<li> Pemrograman Go </li>
<li> Pemrograman Java </li>
<li> Pemrograman Pascal </li>

</ol>

Bagaimana ? mudah bukan. Di sini timbul pertanyaan, bagaimana caranya untuk membuat list yang berganda ?

Berikut ini adalah skripnya

<p>Daftar Buku Pemrograman</p>
<ol type="A">
<li> Pemrograman Go </li>
<ol>
<li> Pemrograman Go Level 1 </li>
<li> Pemrograman Go Level 2 </li>
<li> Pemrograman Go Level 3 </li>
</ol>
<li> Pemrograman Java </li>
<li> Pemrograman Pascal </li>
</ol>

Tag <UL> (Unordered List)

Bila tag <ol> memberikan list yang berurutan, berbeda dengan tag <ul>, karena ia akan memberikan list yang tidak ditandai dengan tanda, semacam angka atau huruf. Hanya tanda simbolis saja

Berikut adalah contoh skripnya 

<p>Daftar Buku Pemrograman</p>
<ul type="square">
<li> Pemrograman Go </li>
<ul>
<li> Pemrograman Go Level 1 </li>
<li> Pemrograman Go Level 2 </li>
<li> Pemrograman Go Level 3 </li>
</ul>
<li> Pemrograman Java </li>
<ul style="list-style-type:circle">
<li> Pemrograman Java Level 1 </li>
<li> Pemrograman Java Level 2 </li>
<li> Pemrograman Java Level 3 </li>
</ul>
<li> Pemrograman Pascal </li>

</ul>

Semoga bermanfaat :D.

Post a Comment

0 Comments