Membuat Daftar Menu di HTML (OL, UL & DL)
Cara membuat daftar menu atau seperti daftar isi yang ada disetiap buku-buku yang kita baca, pasti selalu ada daftar isi. Nah seperti itulah nanti program yang akan kita buat nanti.
Ada beberapa jenis program diantaranya :
- Ordered list (OL) : Daftar terurut
- Unordered list (UL) : Daftar tak terurut
- Definition list (DL) : Daftar istilah
Saya jelaskan dahulu yah untuk masing-masing program yang akan kita bahas dan kira runing ke dalam HTML.
Ordered List
Element yang digunakan untuk mendifinisikan list item adalah <ol>, dengan nilai atribut type yang dapat digunakan berupa :
- "A" untuk huruf besar / kapital
- "a" untuk huruf kecil
- "I" untuk huruf besar romawi
- "i" untuk huruf kecil romawi
- "1" untuk bilangan yang merupakan simbol default
Contoh Program :
<body>
<ol type="i" start="3">
<li>Nama : Nurul Iman</li>
<li>Nama Panggilan : David</li>
<li>Jenis Kelamin : Laki-laki</li>
<li>Alamat : Tawam Wisma Asri 2</li>
</ol>
</body>
Output yang ditampilkan :
Unordered List
Unordered list adalah daftar item yang tersusun tanpa urutan bilangn maupun abjad. Penandaan item yang digunakan adalah sebuah simbol yang dapat berupa lingkaran, kotak atau bulatan hitam. Daftar item ini biasanya diistilahkan dengan buletted list. Untuk mendefinisikan Jenis list ini, kalian dapat mengunakan tag element <ul> </ul>.
Contoh Program :
<body>
<ul>
<li> Fakultas : Management Informatika, BSI </li>
<li> Lulus : 14 September 2012 </li>
<li> Nilai IP : 3.01 Dalam skala 4.00</li>
</ul>
</body>
<ul>
<li> Fakultas : Management Informatika, BSI </li>
<li> Lulus : 14 September 2012 </li>
<li> Nilai IP : 3.01 Dalam skala 4.00</li>
</ul>
</body>
Output yang dihasilkan :
Secara default, bila tidak ada pemberian simbol item yang digunakan, maka yang akan muncul di layar kalian adalah berupa bulatan hitam atau disc.
Jika kalian ingin menampilkan simbol yang lain, maka kalian tambahkan sebuah atribut type dengan nilai atribut berupa simbol yang kalian gunakan, circle atau square.
- <ul type="square">
Kalian juga bisa membuat nya beda loh, di setiap tag element <li> kalian masukan type yang berbeda.
Contoh Program :
<body>
<ul>
<li type="square"> Fakultas : Management Informatika, BSI </li>
<li type="circle"> Lulus : 14 September 2012 </li>
<li type="square"> Nilai IP : 3.01 Dalam skala 4.00</li>
</ul>
</body>
<ul>
<li type="square"> Fakultas : Management Informatika, BSI </li>
<li type="circle"> Lulus : 14 September 2012 </li>
<li type="square"> Nilai IP : 3.01 Dalam skala 4.00</li>
</ul>
</body>
Output yang dihasilkan :
Definition List
Kalo yang ini berbeda dengan daftar item sebelumnya, defonition list adalah daftar item yang tidak memiliki simbol di setiap item anggotanya. list ini biasanya dibuat untuk membuat daftar penjelasan atau daftar definisi loh. bisa juga untuk membuat sistem map dan sebagainya.
Ada 3 element pokok :
- <dl> </dl> Element untuk mendelarasikan definition list.
- <dt> </dt> Element untuk mendefinisikan istilah.
- <dd> </dd> Element untuk mendefinisikan penjelasan istilah yang dimaksud.
<body>
<dl>
<dt>HTML</dt>
<dd> Hyper Text Markup Language</dd>
<dt>CSS</dr>
<dd>Cascading Style Sheet</dd>
</dl>
</body>
<dl>
<dt>HTML</dt>
<dd> Hyper Text Markup Language</dd>
<dt>CSS</dr>
<dd>Cascading Style Sheet</dd>
</dl>
</body>
Output yang ditampilkan :
Nah itu penjelasan saya diatas. tolong baca dan pahami agar kalian paham yah. saya sudah sebisa mungkin menjelaskan supaya anda paham. semoga bermanfaat yah artikel saya kali ini mengenai cara membuat daftar isi denga HTML. semoga bermanfaat. Terima kasih telah berkunjung.
No comments:
Write komentar