Friday, 28 February 2014
Membuat Daftar (List) HTML
Baca dulu
Dalam contoh diatas list diurutkan dengan menggunakan penomoran angka. Penomoran tersebut dapat diganti dengan memberikan atribut “type” pada tag <ol>.
Jenis Daftar
1.
Daftar yang terurut
Daftar
yang terurut
Daftar yang terurut adalah daftar yang isinya harus berurut tidak bias
diacak. Biasanya ditandai dengan pemberikan penomoran dengan menggunakan huruf
atau abjad.
Bentuk pembuatan dalam HTML:
<ol>
<li>urutan
ke 1</li>
<li>urutan
ke 2</li>
…
<li>urutan
ke n</li>
</ol>
Contoh:
<html>
<head>
<title></title>
</head>
<body>
<ol>
<li>Urutan
ke 1</li>
<li>Urutan
ke 2</li>
<li>Urutan
ke 3</li>
</ol>
</body>
</html>
Dalam contoh diatas list diurutkan dengan menggunakan penomoran angka. Penomoran tersebut dapat diganti dengan memberikan atribut “type” pada tag <ol>.
Daftar nilai atribut type yang dapat dimasukan:
Type=’A’ : akan membuat daftar dengan penomoran huruf kafital
(A,B,C,…).
Type=’a’ : akan membuat daftar dengan penomoran huruf bukan kafital
(a,b,c,…).
Type=’I’ : akan membuat daftar dengan penomoran huruf romawi kafital
(I,II,III,…).
Type=’i’ : akan membuat daftar dengan penomoran huruf romawi bukan
kafital (i,ii,iii,…).
Contoh :
<html>
<head>
<title></title>
</head>
<body>
<p>Menggunakan
type A, B, C,...
<ol
type='A'>
<li>Urutan
ke 1</li>
<li>Urutan
ke 2</li>
<li>Urutan
ke 3</li>
</ol>
<p>Menggunakan
type a, b, c,...
<ol
type='a'>
<li>Urutan
ke 1</li>
<li>Urutan
ke 2</li>
<li>Urutan
ke 3</li>
</ol>
<p>Menggunakan
type I, II, III,...
<ol
type='I'>
<li>Urutan
ke 1</li>
<li>Urutan
ke 2</li>
<li>Urutan
ke 3</li>
</ol>
</body>
</html>
Daftar
yang tidak terurut
Daftar yang tidak terurut adalah daftar yang isinya dapat dirubah
urutannya secara acak.
Saya langsung lihatkan contoh lengkapnya beserta atribut untuk merubah
tandanya.
<html>
<head>
<title></title>
</head>
<body>
<p>Menggunakan
type disk (bawaannya)</p>
<ul>
<!-- atau bisa juga <ul type='disk'> saja -->
<li>Item
1</li>
<li>Item
2</li>
<li>Item
3</li>
</ul>
<p>Menggunakan
type lingkaran</p>
<ul
type='circle'>
<li>Item
1</li>
<li>Item
2</li>
<li>Item
3</li>
</ul>
<p>Menggunakan
type kotak</p>
<ul
type='square'>
<li>Item
1</li>
<li>Item
2</li>
<li>Item
3</li>
</ul>
</body>
</html>
Daftar
Bersarang
<html>
<head>
<title></title>
</head>
<body>
<ol>
<li>Daftar
Siswa
<ul>
<li>Anah</li>
<li>Ani</li>
<li>Agus</li>
</ul>
</li>
<li>Daftar
Guru
<ul>
<li>Bima</li>
<li>Arjuna</li>
<li>Billi</li>
</ul>
</li>
</ol>
</body>
</html>
Selanjutnya temen-temen bias berkreasi sendiri.
Baca Juga
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment