Membuat List Kombinasi pada HTML

Advertisement

Rekomendasi

Perhatikan daftar berikut ini :

Daftar Menu 1.   Makanan ·        Bakso ·        Mie Ayam ·        Soto 2.   Minuman ·        Teh Panas ·        Jeruk Panas ·        Kopi

Dapat dilihat bahwa daftar di atas adalah gabungan daftar berurutan dan daftar tidak berurutan.

Untuk membuat daftar diatas pada dokumen HTML maka cukup menggabungkan <ol> dangan <ul>.

Perhatikan penggabungan <ol> dengan <ul> berikut ini :

<ol>    <li></li>    <li>      <ul>         <li></li>         <li></li>         <li></li>      </ul>   </li> </ol>

Ketika kita menggabungkan tag tidak berurutan <ul> tipe bullet dengan tag tidak berurutan <ul> pada daftar berikutnya, maka daftar yang kedua oleh browser akan ditampilkan secara otomatis menjadi daftar bullet.

Tidak demikian dengan daftar berurutan <ol>, maka agar tipenya sama dengan daftar berurutan sebelumnya, kita harus memberikan atribut tipe yang sama dengan daftar berurutan sebelumnya. Contoh :

<ul>       <li> </li>               <ol type=i>                   <li > </li>                   <li> </li>              </ol>       <li>              <ol type=i>                 <li > </li>                <li> </li>              </ol>       </li>       <li>       </li> </ul>

Memulai dengan nomor tertentu

Untuk membuat daftar bernomor dengan urutan yang tidak dimulai dengan 1 (nomor/huruf awal), maka kita harus mendefinisikan dengan atribut “start” pada elemen tag <ol>. 

Misalnya contoh berikut :

<ol start="17"> <li>Blok huruf dengan text tool</li> <li>Klik tab karakter</li> <li>Pilih jenis huruf pada menu pop-up .</li> </ol>

Maka urutan daftar yang ditampilkan akan dimulai dengan 17, selanjutnya 18 dan 19.

Demikian juga apabila :

<ol type=”A” start="17"> <li>Blok huruf dengan text tool</li> <li>Klik tab karakter</li> <li>Pilih jenis huruf pada menu pop-up .</li> </ol>

Maka urutan daftar yang ditampilkan akan dimulai dengan Q, selanjutnya R, dan S.

Penggunaan daftar bernomor yang tidak dimulai dengan nomor awal, biasanya diperlukan apabila daftar yang kita buat sudah diselingi beberapa paragraph, sehingga ketika dibuat daftar bernomor, secara default akan dimulai dari awal, padahal harusnya melanjutkan nomor sebelumnya. Maka digunakanlah atribut “start=” tersebut.

CONTOH : 

Sebagai contoh praktek pembuatan list, lihat dibawah ini 

<ol>    <li>Makanan</li>      <ul>         <li>Bakso</li>         <li>Mie Ayam</li>         <li>Nasi Goreng</li>      </ul>   </li> </ol>  </li> </ol>

jika kode diatas diterapkan maka akan tampil seperti gambar dibawah ini : 

[[ Berikutnya : angkah Pembuatan Tabel pada HTML >>>