Hallo sobat program, bertemu kembali dengan saya Rizal dan masih tetap sama diwebsite dumetschool. Disini kita akan masih membahas seputar bootstrap 4 yaitu tentang Cara Membuat Description List dengan Bootstrap 4.
Pada dasarnya list dalam HTML ada 3 yaitu ordered list, unordered list, dan yang akan kita coba sekarang yaitu description list. Description list atau daftar penjelasan dalam html tag
digunakan untuk mereferensikan daftar istilah berikut penjelasannya. Dan dalam penggunaannya
digunakan bersamaan dengan tag
(menunjukan istilah) dan
(penjelasan dari istilah tsb).
Cara Membuat Description List dengan Bootstrap 4.
Oke saya rasa penjelasan secara teori diatas sudah cukup jelas, dan selanjutnya kita akan mencoba membuat description list dengan bootstrap 4. Langkah pertama siapkan sebuah folder lalu jalankan/run text-editornya kemudian buka website bootstrapnya lalu ikutilah step dibawah ini untuk menggunakan starter template default dari bootstrap 4 dengan menggunakan CDN bootstrap 4. Step by step seperti dibawah ini :
Jika sudah, pada bagian
hello world
dihapus saja dan tambahkan script description list seperti pada gambar dibawah ini :
Jika sudah ditambahkan, silahkan dijalankan. Dan hasilnyapun masih default dari bootstrap itu sendiri. Dan disini kita akan mengcostum defaultnya menjadi seperti yang kita inginkan dengan menambahkan css sendiri seperti pada gambar dibawah ini :
Cara Membuat Description List dengan Bootstrap 4.
Jika sudah ditambahkan css nya, langkah selanjutnya teman-teman boleh langsung dijalankan kembali dan hasilnya akan menjadi seperti dibawah ini :
Dan untuk hasil mobile atau smartphone akan menjadi seperti pada gambar dibawah ini :
Bagaimana ? mudah dan bagus kan teman-teman, jadi seperti itulah contoh sederhana dipembahasan kali ini tentang Cara Membuat Description List dengan Bootstrap 4.
Perhatikan Code diatas, untuk memulai sebuah teks dengan Description List dibuka dengan tag
dan ditutup dengan tag
. Untuk sebuah istila, kita menggunakan tag
dan dilanjutkan tag
sebagai penjelasan istila tersebut.
List jenis ini mungkin tidak sepopuler ordered list atau unordered list, namun jika anda membutuhkan struktur HTML untuk membuat list yang berisi penjelasan istilah-istilah dengan keterangannya, mungkin bisa menggunakan list jenis ini.
List merupakan cara penulisan yang sering digunakan untuk membuat daftar berurutan. Terdapat 3 macam list yang ada di HTML yaitu ordered list, unordered list dan description list. Cara membuat list di html tentunya berbeda-beda sesuai jenisnya. Ketiga macam list HTML tersebut juga memiliki tampilan dan fungsi yang berbeda.
Perbedaan penulisan ketiga jenis list ini terdapat pada pembuka dan penutupnya saja. Sedangkan untuk membuat item pada ordered dan unordered list menggunakan elemen yang sama yaitu
..
. Untuk mengetahui lebih dalam masing-masing list tersebut kita akan bahas satu-persatu.
Ordered List pada HTML
Ordered list adalah jenis list berurutan yang ditampilkan dengan menggunakan angka atau nomor atau huruf. Ordered list biasa digunakan untuk menampilkan daftar item yang membutuhkan penomoran misalnya daftar pemenang lomba, daftar urutan ranking kelas dan urutan-urutan lain yang membutuhkan nomor. Tag digunakan untuk membuat list yang berjenis ordered list.
Cara membuat ordered list HTML
Ordered list atau list angka/nomor dibuat dengan menggunakan tag . Penulisan item-item list tersebut menggunakan tag
yang ditelakkan diantara tag pembuka dan tag penutup .
Contoh penulisan ordered list:
Belajar ordered list
Urutan nama pemenang lomba koding:
Nama juara pertama
Nama juara kedua
Nama juara ketiga
Hasil tampilan pada browser:
Penjelasan kode: Pada contoh kode di atas, penulisan ordered list dimulai dari baris ke-8 yaitu tag
. Lalu, baris ke-9 hingga ke-11 merupakan item-item dari list tersebut dimana penulisannya menggunakan tag
. Lalu berakhir pada baris ke-12 yaitu tag penutup
. Secara otomatis angka 1 hingga 3 akan ditampilkan pada tiap item (di depan nama juara).
Atribut-Atribut untuk Elemen
Telah kita ketahui bahwa fungsi tag ol digunakan untuk membuat ordered list. Elemen
memiliki 3 atribut khusus yang dapat digunakan yaitu atribut type, atribut start dan atribut reversed.
Atribut type
Atribut type digunakan untuk mengubah jenis pengurutannya. Misalnya ingin mengubah dari angka (1,2,3,…) menjadi huruf (a,b,c,…). Terdapat 5 macam value yang dapat kita gunakan yaitu:
AtributFungsitype=”1″Pengurutan dengan angkatype=”a”Pengurutan dengan huruf kecil (a,b,c,…)type=”A”Pengurutan dengan huruf besar/kapital (A,B,C,…)type=”i”Pengurutan dengan angka romawi kecil (i,ii,iii,…)type=”I”Pengurutan dengan angka romawi besar (I,II,III,…)
Contoh penggunaan atribut type:
Atribut type Ordered list
Pengurutan dengan type 1
item list
item list
item list
Pengurutan dengan type a
item list
item list
item list
Pengurutan dengan type A
item list
item list
item list
Pengurutan dengan type i
item list
item list
item list
Pengurutan dengan type I
item list
item list
item list
Hasilnya:
Penjelasan kode: Setelah menggunakan atribut type kita dapat melihat perbedaan pada hasilnya yaitu pada tipe pengurutannya.
Atribut Start
Atribut start digunakan untuk mengubah atau menentukan angka awal pengurutan. Jika tanpa menggunakan atribut ini pengurutan akan dimulai dari angka 1 namun jika kita ingin dimulai dari angka 5 maka kita perlu memasukkannya pada value atribut start menjadi
.
Contoh penggunaan atribut start:
Atribut start Ordered list
Pengurutan dengan type 1
item list
item list
item list
Pengurutan dengan type a
item list
item list
item list
Hasilnya:
Penjelasan kode: Atribut start pada contoh di atas menunjukkan pengurutan dimulai dari angka 5. Hal tersebut juga berlaku untuk penggunaan atribut type yang dimulai dari huruf e (huruf ke-5) tanpa kita ubah manual hanya dengan menambahkan atribut start.
Atribut reversed
Atribut reversed digunakan untuk mengubah urutan dari yang terbesar menuju yang terkecil. Atribut ini adalah atribut tanpa value jadi hanya perlu menambahkan reversed pada tag pembuka ol.
item list
item list
item list
Unordered List pada HTML
Unordered list adalah jenis list yang tidak berurutan yang ditampilkan dengan menggunakan simbol. Unordered list digunakan untuk menampilkan daftar list yang tidak memerlukan angka pengurutan misalnya daftar OS komputer, daftar aplikasi editor html dan lain-lain.
Cara Membuat Unordered List Html
Unordered list atau list simbol dibuat dengan menggunakan tag
. Sama dengan list sebelumnya, item-item list ini ditulis dengan menggunakan tag
yang terletak di dalam elemen
.
Contoh penulisan unordered list:
Belajar unordered list
Daftar OS komputer:
Linux
Windows
Mac
Hasilnya:
Penjelasan kode: Penulisan unordered list pada contoh di atas dimulai dari baris ke-8 yaitu tag
. Lalu dilanjutkan dengan item-itemnya yang diapit oleh tag
pada baris ke-9 hingga ke-11. Kemudian ditutup dengan tag
.
Atribut untuk Elemen
Seperti dijelaskan di atas bahwa fungsi ul pada HTML adalah untuk membuat unordered list. Pada versi HTML5 Elemen
tidak memiliki atribut khusus. Sebenarnya terdapat 2 atribut khusus yang populer untuk elemen
namun sudah tidak disupport oleh HTML5 sehingga kita tidak perlu mempelajarinya. Untuk sekedar pengetahuan, atribut tersebut adalah atribut type dan atribut compact.
Atribut type digunakan untuk merubah jenis simbol yang secara default adalah disc, dapat kita ubah menjadi circle dan square.
Atribut compact digunakan untuk menampilkan ukuran lebih kecil untuk list.
Dapat dilihat bahwa antara ordered dan unordered list sama-sama menggunakan tag
. Fungsi li pada html adalah untuk menampilkan item pada unordered dan ordered list. Sedangkan pada description list tidak menggunakan tag
. Mari kita bahas lebih lanjut.
Description List pada HTML
Description list adalah jenis list yang digunakan untuk menampilkan istilah dan penjelasannya seperti kamus. Description list jarang digunakan jika dibandingkan 2 jenis list sebelumnya. Cara penulisan description list sedikit berbeda dari jenis list sebelumnya. Jika kita hanya perlu 2 tag pada ordered dan unordered list, maka untuk menulis description list kita membutuhkan 3 tag HTML yaitu tag
, tag
dan tag
.
Tag
digunakan untuk mendefinisikan bahwa kode tersebut adalah description list. Tag
digunakan untuk mengapit istilah (term). Tag
digunakan untuk mengapit penjelasannya (description).
Contoh penulisan description list:
Belajar description list
Daftar istilah:
HTML
HyperText Markup Language yaitu bahasa untuk membuat halaman web.
PHP
Bahasa pemrograman yang populer digunakan untuk membuat web disisi server.
Hasilnya:
Penjelasan kode: Penulisan description list pada contoh tersebut dimulai dari baris ke-8 yaitu tag
. Kemudian istilah diapit oleh tag
pada baris ke-9 dan ke-11. Lalu tag
mengapit penjelasan masing-masing pada baris ke-10 dan ke-12. Lalu diakhiri dengan penutup tag
.
Nested List HTML
Nested list adalah list di dalam list. Misalnya saat kita menulis list OS komputer yang terdiri dari Linux, Windows dan Mac. Linux dalamnya terdapat list lagi yaitu Ubuntu, Debian, RedHat, dll. Pada contoh seperti inilah kita perlu membuat nested list.
Cara Membuat Nested List HTML
Untuk membuat nested list di HTML, list tambahan harus diletakkan di dalam tag
. List tersebut ditulis lengkap dari tag atau
di dalam tag
.
Contoh kode:
Belajar nested list
Daftar OS komputer:
Linux
Ubuntu
Debian
RedHat
Windows
Mac
Hasilnya:
Penjelasan kode: Pada baris ke-9 tag
tidak ditutup dengan
tetapi dimasukkan list tambahan lagi yang dimulai pada baris ke-10 yaitu tag
. List tambahan berakhir pada baris ke-14 dengan tag
. Setelah itu baru ditutup dengan tag
.
Selain digunakan untuk membuat daftar urutan dalam halaman web, list juga biasa digunakan untuk pembuatan menu. Namun, untuk membuat menu kita harus mempelajari CSS dan JS. Sebaiknya tuntaskan dahulu pembelajaran HTML sebelum belajar CSS dan JS. Jika ada pertanyaan tentang materi list HTML ini silahkan kirim komentar pada kolom komentar.
List HTML apa saja?
Ada tiga macam jenis list yang bisa dibuat di HTML:.
Ordered List adalah list yang terurut;.
Unordered List adalah list yang tak terurut;.
dan Descriptiona List adalah list yang berisi definisi..
Apa itu dl pada HTML?
HTML element DL (Description List) merupakan jenis list yang ditujukan untuk membuat struktur yang berisi deskripsi list atau daftar penjelasan. Pada HTML 4.01 ke bawah jenis list ini sering disebut sebagai Definition List.
Tag ol digunakan untuk membuat list apa?
Ordered List di HTML. Ordered list dibuat dengan tag <ol> . Lalu di dalamnya diisi dengan item-item yang akan dimasukkan ke dalam list. Item dibuat dengan tag <li> (list item).
Apa itu OL dalam HTML?
Elemen <ol> (ordered list) merupakan elemen HTML untuk menampilkan daftar (list) dalam bentuk butir-butir melalui nomor secara berurutan. Nomor urut dapat berbentuk urutan angka desimal maupun daftar berbentuk urutan abjad.
