Penjelasan dan Cara Membuat List HTML


Teman-teman kali ini aku ingin sharing mengenai hal yang penting dalam suatu elemen HTML yaitu list HTML. List HTML ini sangat berguna dalam suatu pengelompokkan suatu kategori dan juga mengurutkan daftar.

Berbagai platform website tentu saja memfasilitasi fitur list ini, misalkan pada blogger. Dalam blogspot ada 2 macam fitur list yaitu numbered list dan bullet list. List HTML dasar terbagi menjadi ordered list dan unordered list.

Apa perbedaan Ordered List dan Unordered list ?


Ordered list adalah fungsi HTML yang fungsinya mengurutkan daftar dengan menggunakan angka, abjad dan angka romawi sehingga lebih detail urutannya. Berbeda dengan Unordered list, Unordered list  adalah fungsi HTML yang berguna untuk mengurutkan daftar dengan menggunakan simbol atau special character pada html. Bagaimana teman-teman, cukup jelas kan bedanya ?

Teman-teman yang hobi blogging mungkin sering menggunakan list HTML untuk mengurutkan sebuah daftar, namun hasilnya berantakan sehingga kelihatan semrawut. Untuk mengatasinya teman-teman harus merapikannya dengan fungsi HTML. 

Struktur HTML unordered list diawali dengan tag <ul> dan ditutup dengan closing tag </ul>. Kemudian diikuti oleh susunan list-list daftarnya dengan menggunakan  tag <li> dan </li>.

Yuk,, langsung saja kita praktekkan ya bagaimana penggunaan fungsi list HTML ini. 


1. Unordered List HTML


Kita mulai dengan kode HTML unordered list. Coba teman-teman ketikkan kode html berikut.




<ul>
<li>item pertama</li>
<li>item kedua</li>
<li>item ketiga</li>
<li>item keeempat</li>
<li>item kelima</li>
</ul>



Coba copy atau ketikkan kode HTML di atas ke blog kamu, maka hasil yang akan ditampilkan di web adalah sebagai berikut







2. Ordered List HTML


Untuk penggunaan Ordered list HTML penerapannya seperti ini. Teman-teman coba langsung ya







<ol>
<li>kambing</li>
<li>kuda</li>
<li>macan</li>
<li>kebo</li>
</ol>

Maka hasil yang akan ditampilkan di website / blog akan seperti ini :

  1. kambing
  2. kuda
  3. macan
  4. kebo

Mempelajari basic HTML ini akan sangat berguna bagi kita. Kita bisa saja menggunakan fitur ini langsung di blog kita, namun apabila hasil yang tampil berantakan maka gunakanlah metode list HTML ini.



3. Unordered List HTML Dengan Link


Bagaimana apabila kita mau membuat list HTML dengan menyisipkan link di dalamya ?


<ul>
<li><a href="#">teks pertama</a></li>
<li><a href="#">teks kedua</a></li>
<li><a href="#">teks ketiga</a></li>
<li><a href="#">teks keempat</a></li>
<li><a href="#">teks kelima</a></li>
</ul>

Untuk mengaktifkan link pada format list HTML ini maka kamu ganti kode # (simbol tanda pagar) diganti dengan link atau url yang diinginkan. Format url atau linknya berupa : http://www. atau https://www .

Untuk kamu yang ingin membuat widget atau gadget di blogspot, simak tutorial penggunannya di artikel ini : cara menambahkan widget di sidebar blogger.

Langsung dicoba saja ya. Apabila ada pertanyaan mengenai tutorial membuat list pada blogspot ini, silahkan disampaikan ya. Demikianlah tutorial singkat ini mengenai bagaimana caranya membuat list pada blogger atau blogspot dengan HTML dasar. Semoga bermanfaat


Mau terus dapat informasi terbaru dari aku ? Subscribe Blog Ini yahh.. :

0 Response to "Penjelasan dan Cara Membuat List HTML"

Post a Comment