Halo sobat chipeng blog semua,, kembali lagi bersama saya irfan ali, dalam kajian Belajar HTML. Setelah kemarin kita membahas tentang perkenalan html dan element body page, sekarang saya akan menjelaskan tentang cara membuat List atau daftar menu dalam dokumen html. Mudah koq sobat semua...
List dapat kita gunakan dalam sebuah dokumen sebagai pengefektifan terhadap materi yang sedang kita bahas dalam dokumen tersebut. Dalam HTML, list itu sendiri terbagi menjadi 3 bagian, yaitu ordered list/numberred list, daftar yang berurut dengan nomer atau abjad. Kemudian ada unordered list/bulleted list, daftar yang berurut dengan simbol. Dan yang terakhir adalah Definition list, daftar yang digunakan sebagai glosary atau daftar istilah.
<html>
<body><h4> Contoh Ordered List: </h4>
<ol>
<li> Warrior Job </li>
<li> Cleric Job </li>
<li> Sorcerer Job </li>
<li> Archer Job </li>
</ol>
</body>
</html>
Maka pada dokumen html akan muncul seperti ini:
Contoh Ordered List
- Warrior Job
- Cleric Job
- Sorcerer Job
- Archer Job
Dalam tag ordered list, kita bisa nembahkan atribut type untuk menganti urutan nomer menjadi huruf atau bilangan romawi.
adapun valuenya adalah sebagai berikut:
-"A" daftar dengan huruf Besar
-"a" daftar dengan huruf kecil
-"I" daftar dengan romawi besar (I,II,III dst)
-"i" daftar dengan romawi kecil (i,ii,iii,iv dst)
Contoh penggunaanya: <ol type="i">......</ol> Maka list item akan diawali dengan romawi kecil
-Unordered List
Unordered list adalah suatu daftar dimana urutan tidak diutamakan, jadi item-item dalam daftar bisa muncul di sembarang urutan. untuk menggunakannya, kita harus menggunakan tag <ul> dan diakhir dengan </ul>. Sama seperti halnya ordered list, untuk menunjukan item-item dalam list Unordered digunakan tag <li>..</li>.
Untuk valuenya bisa kita gunakan "Disc", Circle, dan Square. Disc untuk membuat urutan dengan simbol berupa disc, circle membuat urutan dengan simbol lingkarang dan value square untuk membuat urutan dengan simbol berupa kotak.
Contoh penggunaanya: <ul type="circle"> Maka list item akan diawali dengan simbol lingkaran
-Definition List
List definisi digunakan untuk mendefinisikan atau menjelaskan istilah-istilah, oleh karena itu list ini juga biasa disebut sebagai daftar istilah. Dalam penggunaanya terdapat 3 tag yang wajib kita pakai:
| TAG | Keterangan |
| <dl>....</dl> | Untuk menyatakan List Definisi |
| <dt> | Istilah yang akan didefinisikan |
| <dd> | Definisi dari istilah tersebut. |
sebagai contoh ikuti latihan dibawah ini:
<html>
<body>
<h4> Contoh List Definisi: <h4>
<dl>
<dt>HTML<dt>
<dd>Hyper text markup Language, merupakan bahasa markup yang digunakan untuk mebuat halaman-halaman web.</dd>
<dt>SAO<dt>
<dd>Sword Art Online </dd>
<dt>ASEAN</dt>
<dd>ASEAN merupakan kependekan dari Association of Southeast Asia Nations merupakan sebuah organisasi geo-politik dan ekonomi dari negara-negara di kawasan asia Tenggara </dd>
</dl>
</body>
</html>
Dan nanti, kode html diatas akan tampak di halaman web seperti dibawah ini
Contoh List Definisi:
HTML- Hyper text markup Language, merupakan bahasa markup yang digunakan untuk mebuat halaman-halaman web.
- SAO
- Sword Art Online
- ASEAN
- ASEAN merupakan kependekan dari Association of Southeast Asia Nations merupakan sebuah organisasi geo-politik dan ekonomi dari negara-negara di kawasan asia Tenggara
ya mungkin posting kali ini, saya cukupkan.. semoga bisa bermanfaat bagi kita semua.. Jangan bosen untuk terus nongkrongin blog gw ya.
Well,, its time to say good bye,,, wassalam...
1 comments
mulai agak rumit kalo udah bikin nested list /list bersarang
ReplyDelete