Pemrograman Web - List

Listing

Nama   : M Yasfa Z
Sekolah: SMKN 4 Bandung
Kelas    : XI RPL 1

   Assalamualaikum wr.wb
Setelah belajar mengenai Dasar dan Format Teks pada HTML, sekarang waktunya untuk belajar Hal baru. Jadi, pada Artikel kali ini kita bakal belajar soal Listing di HTML

   Listing? apa itu Listing?
Listing tuh itu tuh, yang biasanya dipake buat Wadah Makan.
Itu Mah Misting!

   Oke, Oke, Serius.
Jadi, Listing itu Tag di HTML yang berfungsi untuk membuat Daftar atau Poin Penting. Kalau kalian pernah buka Web Kuliner atau pergi ke Restoran biasanya ada Daftar Menu kan? Atau mungkin kalian pernah nyatet atau ngetik sambil ditandai sama Agka atau Lingkaran?
Nah, Contohnya tuh kayak  gitu.

 Coba Perhatikan Gambar ini:

 Jenis Listing

Ada 3 Macam Listing di HTML diantaranya:
1. Ordered List : Untuk membuat Penanda secara Terurut
2. Unordered List: Untuk membuat Penanda secara Tak Terurut  
3. Definition List: Untuk membuat Daftar Definisi

   Kalau untuk Ordered List biasanya kita menggunakan angka (1,2,3) atau Huruf Romawi (I, II, III), bisa juga pake Alfabet (a,b,c,d) ataupun dengan Huruf "i" kecil (i,ii,iii). Ordered List ini cocok kalau kita mau bikin sesuatu yang punya urutan. Misalnya Teks Prosedur untuk membuat sesuatu. Cara membuat Bala Bala, Cara membuat Seblak, Cara membuat Origami, dan lain - lain.

Ordered List

    Untuk Ordered List kita perlu memakai Tag <ol> di bagian Awal dan Tag </ol> di bagian Akhir.
Selain itu, kita harus menambahkan Tag <li> dan </li> di bagian yang ingin kita beri Tanda.

Contoh Penulisan Ordered List:

<ol>
<li>Urutan Pertama</li>
<li>Urutan Kedua</li>
</ol>

    Itu contoh penulisan Ordered List yang biasa aja. Barusan kan kita Tau kalau Ordered List itu bisa ditampilkan dengan huruf, angka, angka Romawi, dll. Agar bisa melakukan itu kita perlu menggunakan salah satu Attribut berikut:

Mari kita Coba, Ketikan Kode berikut ini:

Beginilah Hasilnya:

    Bisa kita Lihat Hasilnya, jika kita hanya mengetik Tag <ol> tanpa Attribut maka hasilnya akan muncul sebagai Angka Berurut.

    Sekarang, bagaimana kalau kita coba gunakan Attribut?
 Coba kita ubah Kodenya dikit

Dan sekarang Setelah dikasih Attribut type = "a" hasilnya jadi begini:

Selain itu, kita juga bisa memulai Ordered list dari Angka tertentu Contohnya begini:

Hasilnya begini:

Unordered List

    Sekarang Unordered List, yang satu ini adalah Kebalikan dari Ordered List. Tag ini digunakan untuk membuat Daftar atau Penanda Tak Berurutan yang berupa Bentuk (Lingkaran, Kotak, Dll)

     Untuk penulisanya ada sedikit perbedaan.Bedanya itu Tag sama Atributnya.
Kalau Unordered List pake Tag <ul> dan </ul> dengan Atribut sebagai Berikut:

   Sekarang mari kita lihat bagaimana contoh dari penggunaan Unordered List. Mari ketikan Kode berikut

Dan beginilah hasilnya:

     Bisa kita lihat sendiri bahwa berbeda dengan Ordered List, Unordered List tak memiliki angka sebagai urutan dalam penandanya. Kalau kita liat lagi, contoh yang satu ini keliatan lebih ribet. Yahh.. Wajar sih. Soalnya contoh yang satu ini ada List di dalam List. Mungkin bisa dibilang "List Bersarang"

Definition List

    Kalau Definition list agak sedikit berbeda dengan 2 Jenis List yang barusan.  Soalnya, Definition List itu List yang dipake buat bikin Daftar dari pengertian sesuatu. Coba liat contohnya:

  

Disini ada 3 Tag yang dipakai, diantaranya:
1.  <dl> & </dt>   - Tag untuk mulai menggunakan Definition List
2.  <dt> & </dt>   - Tag untuk Judul dari Definition
3.  <dd> & </dd> - Tag untuk Definisinya

Begini contohnya:

Dan beginilah hasilnya

List Kombinasi

Selanjutnya, ada yang namanya List Kombinasi. Udah keliatan Jelas dari Judulnya bahwa List Kombinasi adalah List yang isinya Kombinasi dari beberapa List. Untuk penggunaanya bisa dengan menggabungkan penggunaan Tag <ol> dan <ul>.

Oh iya..
ada 1 hal yang perlu diperhatikan.

Kalau kita ngegabungin UL tipe Bullet sama UL yang nggak di tentuin Tipenya nanti UL yang nggak ditentuin tipenya itu bakal berubah jadi UL tipe Bullet

Tapi hal yang itu tidak dapat kita lakukan pada OL

Jadi pas pake OL kalau kita mau 2 OL yang tipenya sama (misal Romawi sama Romawi) kita harus nentuin tipe nya dulu

Contohnya seperti ini:

Hasilnya seperti ini:

   Terakhir, Ada Challenge atau Tantangan untuk ngebuat Halaman Biodata menggunakan HTML nih. Contohnya kayak gini:

Bagi para Readers (Itu pun kalau ada yang nge Read selain Bu Hana)
ayo coba kalian buat Biodata kalian sendiri pake HTML. Bisa sekalian buat latihan

Mungkin sekian saja untuk Artikel kali ini. Mohon Maaf kesalahanya
Wassalamualaikum wr.wb