Cara Membuat List dengan HTML – Pada artikel kali ini kita akan membahas bagaimana cara membuat list/daftar. Ada berbagai cara yang dapat kta gunakan, namun kali ini kita akan menggunakan HTML. Pada HTML tersedia tag <ol>, <ul> dan <li>.
Untuk tag list pada html merupakan salah satu jenis tag yang harus ditutup. Sebagai contoh <ul> contoh list </ul>.
Membuat List dengan HTML
Untuk membuat layout sederhana, kita dapat menggunakan tag <table>. Tabel disusun dari kolom dan baris. Kita dapat memanfaatkan kolom dan baris tersebut menjadi sebuah layout.
Baca Juga: Cara Membuat Table Menggunakan HTML dan CSS
<table width=”100%”>
<tr>
<td colspan=”2″ style=”background:orange”>
<h1>Header</h1>
</td>
</tr>
<tr valign=”top”>
<td width=”50″ style=”background:magenta”>
<strong>Sidebar</strong>
</td>
<td width=”100″ height=”550″style=”background:yellow”>
<strong> ISI Konten</strong>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</td>
</tr>
<tr>
<td colspan=”2″ style=”background:greenyellow”>
<h1>Footer</h1>
</td>
</tr>
</table>
- colspan digunakan untuk menggabungkan kolom.
- width digunakan untuk mengatur lebar kolom. Kita bisa mengisinya dalam bentuk px maupun %.
- height digunakan untuk mengatur tinggi kolom. Kita bisa mengisinya dalam bentuk px maupun %.
Ketika script diatas diakses melalui browser, maka tampilan akan seperti screenshot dibawah ini.
Setelah membuat kerangka layout sederhana, kita dapat mengembangkan layout tersebut seperti menambahkan navigasi pada kolom sidebar.
<ul>
<li><a href=”home.html”>Home</a></li>
<li><a href=”about.html”>About</a></li>
<li><a href=”contact.html”>Contact</a></li>
<li><a href=”forum.html”>Forum</a></li>
</ul>
Saat ini membuat layout dengan table mulai ditinggalkan. Membuat layout dengan table tidak direkomendasikan. Mengapa demikian? karena itu akan menyulitkan kita dalam mendesain ulang di kemudian hari. Namun tidak ada salahnya jika kita mempelajari ini.
Sekian pejelasan kali ini tentang cara membuat list dengan HTML. Semoga dapat bermanfaat, terus berlatih semoga skill kalian semakin jago hehe 🙂
