Ordered list
adalah suatu metode mengurutkan daftar dengan menggunakan angka, abjad dan
angka romawi pada html. Sedangkan Unordered list adalah kebalikannya yaitu
metode mengurutkan daftar dengan menggunakan simbol atau special character pada
html. Pemburtan daftar pada ordered list dan unordered list pada html
menggunakan <li> untuk menampilkan isi dari daftar.
Contoh :
Coba script dibawah ini untuk Ordered List :
<html>
<head><title>ordered list</title></head>
<body>
<ol>
<li>saya
<li>dia
<li>kamu
</ol>
</body>
</html>
</body>
</html>
Coba script dibawah ini untuk Unordered List :
<html>
<head><title> unordered list</title></head>
<body>
<ul>
<li>saya
<li>dia
<li>kamu
<li>dia
<li>kamu
</ul>
</body>
</html>
</html>
Ordered list
di bagi atas beberapa macam yaitu dengan tipe angka, abjad, angka romawi.
Macam macam
type ordered list :
Jika type="1" maka
akan menampilkan 1,2,3,....
Jika
type="a" maka akan menampilkan
a,b,c,....
Jika
type="A" maka akan menampilkan
A,B,C,....
Jika
type="i" maka akan
menampilkan i,ii,iii,....
Jika
type="I" maka akan menampilkan
I,II,III,....
Coba script di bawah ini :
<html>
<head><title> ordered list</title></head>
<body>
<ol type="i">
<li>saya
<li>saya
<li>saya
</ol>
<ol type="A">
<li>dia
<li> dia
<head><title> ordered list</title></head>
<body>
<ol type="i">
<li>saya
<li>saya
<li>saya
</ol>
<ol type="A">
<li>dia
<li> dia
<li>
dia
</ol>
</body>
</html>
</body>
</html>
Unordered list
di bagi atas beberapa macam yaitu dengan tipe berbentuk lingkaran dengan warna
hitam (default), lingkaran berwarna putih dan bentuk kotak.
Macam macam type
unordered list :
type="disc"
(default) untuk bentuk lingkaran berwarna hitam
type="square" untuk
bentuk lingkaran kotak
Coba script di bawah ini :
<html>
<head><title> ordered list</title></head>
<body>
</ul>
<ul type="square">
<li>dia
<li> dia
<head><title> ordered list</title></head>
<body>
</ul>
<ul type="square">
<li>dia
<li> dia
<li> dia
</ul>
<ul type="disc">
<li>saya
<li>saya
<ul type="disc">
<li>saya
<li>saya
<li>saya
</ul>
</body>
</html>
</body>
</html>
List
Dalam
pembuatan sebuah dokumen, list (daftar) merupakan sebuah hal yang tidak dapat
dihindari. Daftar mengenai berbagai hal selalu dapat ditemukan dalam penulisan
dokumen. Resep masakan memiliki daftar bahan yang diperlukan, serta
langkah-langkah memasak yang harus diikuti. Penunjuk jalan memiliki daftar
tempat yang dapat dituju, sesuai dengan arah yang akan diambil. Seorang
mahasiswa yang ingin memilih mata kuliah akan dihadapkan dengan daftar mata
kuliah. Banyaknya kegunaan daftar ini menjadikan HTML memberikan sekumpulan elemen
khusus untuk membuat daftar.
Terdapat
tiga daftar utama yang dapat dibuat dengan HTML, yaitu:
- Unordered List (Daftar Tidak Terurut), seperti namanya, memungkinkan kita untuk membuat daftar dari hal-hal yang tidak memiliki urutan tertentu.
- Ordered List (Daftar Terurut), kembali lagi, sesuai namanya, memberikan kita fasilitas untuk membuat daftar hal-hal yang harus diurutkan dengan benar.
- Definition List (Daftar Definisi), digunakan untuk membuat daftar definisi dari istilah-istilah yang ada dalam dokumen, digunakan terutama untuk glosarium dan indeks.
Pemilihan
list yang akan digunakan sendiri tentunya tergantung kepada konten yang akan
ditulis, serta makna semantik yang diinginkan.
Bagian
ini akan membahas bagaimana menggunakan elemen-elemen list pada HTML, serta
cara untuk memperindah tampilan list dengan menggunakan CSS.
Unordered List
Seperti
yang telah dijelaskan sebelumnya, unordered list digunakan untuk memberikan
daftar dari hal-hal yang tidak memiliki urutan tertentu, atau yang urutannya
tidak penting. Pembuatan unordered list dilakukan dengan menggunakan elemen ul (unordered list),
yang merupakan sebuah block
level element. Untuk mengisikan daftar, kita dapat menggunakan elemen li (list item),
seperti pada kode di bawah:
<ul>
<li>Windows 8</li>
<li>Microsoft Office 2013</li>
<li>Visual Studio 2012</li>
</ul>
Mengubah Tampilan Unordered List
Seperti
yang dapat dilihat pada gambar Unordered List
Sederhana, secara standar browser akan menampilkan titik bulat
berwarna hitam sebagai penanda daftar. Tentunya kita dapat mengubah hal ini,
dengan menggunakan properti CSSlist-style-type,
seperti berikut:
li {
list-style-type: square;
}
Selain
itu, kita juga dapat menghilangkan penanda dengan memberikan nilai none pada properti list-style-type:
li {
list-style-type: none;
}
Kita
bahkan juga dapat menggunakan gambar yang kita inginkan sebagai penanda dari
list, melalui propertilist-style-image:
li {
list-style-image: url('images/list-style.png');
}
Terakhir,
dengan memanfaatkan nilai none pada list-stype-type dan pseudo-selector :before,
kita juga dapat membuat penanda daftar dengan karakter apapun yang kita
inginkan, seperti berikut:
li {
list-style-type: none;
}
li:before {
content: "-";
margin-right: 5px;
}
Ordered List
Seperti
namanya, ordered list membuat daftar yang terurut. Elemen untuk pembuatan
ordered list yaitu ol (orderedllist),
dan isi dari list sendiri dibuat dengan menggunakan elemen li,
sama seperti pada unordered lsit. Secara standar ordered list akan menggunakan
angka sebagai penanda daftar:
<ol>
Ordered List
<li>Windows 8</li>
<li>Microsoft Office 2013</li>
<li>Visual Studio 2012</li>
</ol>
Nilai
awal memulai perhitungan sendiri dapat diubah dengan menggunakan atribut start,
sehingga kode berikut:
<ol start="10">
Ordered list:
<li>Windows 8</li>
<li>Microsoft Office 2013</li>
<li>Visual Studio 2012</li>
</ol>
selain
itu, kita juga dapat mengubah urutan nilai menjadi terbalik (dari besar ke
kecil) dengan menggunakan atributreversed seperti berikut:
<ol start="10" reversed="reversed">
Ordered list:
<li>Windows 8</li>
<li>Microsoft Office 2013</li>
<li>Visual Studio 2012</li>
</ol>
Perlu
diingat bahwa atribut start dan reverse belum didukung oleh
semua browser. Jadi, pastikan anda mengujikan kode pada kelima browser populer
jika ingin menggunakan kedua atribut ini.
Selanjutnya,
jika ingin mengubah urutan perhitungan pada pertengahan daftar, kita dapat
menambahkan atribut valuepada elemen li.
Atribut value akan
mengubah perhitungan, dan elemen-elemen li setelahnya
akan dihitung ulang sesuai dengan nilai yang diberikan. Kode:
<ol>
Ordered list:
<li>Windows 8</li>
<li>Microsoft Office 2013</li>
<li value="30">Visual Studio 2012</li>
<li>Expression Studio</li>
<li value="10">Microsoft SQL Server 2008 R2</li>
<li>Windows Phone 8</li>
</ol>
Mengubah Tampilan Ordered List
Sama
seperti unordered list, kita juga dapat mengubah penanda daftar agar tidak menggunakan
angka desimal saja. Pengubahan penanda juga menggunakan properti list-style-type,
sama seperti pada unordered list. Adapun nilai-nilai yang dapat digunakan untuk
mengubah penanda pada ordered list yaitu: decimal, lower-roman, lower-greek,upper-alpha, upper-latin, georgian, decimal-leading-zero, upper-roman, lower-alpha, lower-latin,
dan armenian.
Posisi Teks List (Ordered dan Unordered)
Ketika
menuliskan sebuah daftar, tidak jarang kita menemukan daftar panjang, yang
diikuti dengan deskripsi mengenai daftar tersebut, dapat
dilihat bagaimana teks pada baris baru akan secara otomatis bergeser sedikit ke
kanan, agar menjadi sejajar dengan titik mulai teks pada daftar. Kita dapat
mengubah posisi teks ini dengan menggunakan propertilist-style-position.
Properti list-style-position memiliki dua nilai
utama, yaitu outside dan inside.
Nilai outside merupakan
nilai standar, di mana teks berada pada “luar” dari penanda daftar, dan nilai inside akan menjadikan
posisi teks pada baris baru sejajar dengan penanda daftar.
Penggabungan Properti List
Seperti
banyak properti lainnya, properti list-style-* dapat dituliskan
dengan singkat, menjadi hanya list-style saja.
Sintaks penulisan singkat properti ini ialah sebagai berikut:
ul {
list-style: list-style-type list-style-position list-style-image;
}
Definition List
Selain
daftar terurut dan tidak terurut, kita juga seringkali menjumpai daftar
definisi, yang memberikan kita penjelasan singkat terhadap sebuah kata atau
istilah yang mungkin tidak kita ketahui. Dalam dunia menulis, daftar ini
dikenal dengan nama glosarium.
Membuat
glosarium dalam HTML dilakukan dengan menggunakan elemen dl (definition list),
dan kemudian alih-alih menggunakan li untuk
mengisikan daftar, kita menggunakan dua elemen lain, yaitu dt (definition term
- istilah yang akan didefinisikan) dan dd (definition description
- penjelasan dari istilah).
Perhatikan
contoh pembuatan sebuah definition list berikut:
<dl>
<dt>study</dt>
<dd>
the devotion of time and attention to acquiring knowledge
on an academic subject, esp. by means of books
</dd>
<dt>design</dt>
<dd>
a plan or drawing produced to show the look and function
or workings of a building, garment, or other object before
it is built or made
</dd>
<dd>
purpose, planning, or intention that exists or is thought
to exist behind an action, fact, or material object
</dd>
<dt>business</dt>
<dt>work</dt>
<dd>a person's regular occupation, profession, or trade</dd>
</dl>
dan
tentunya kita dapat mengubah tampilan dari definition list dengan menggunakan
CSS, seperti kita mengubah tampilan elemen-elemen lainnya. Perhatikan juga
bahwa tidak terdapat elemen khusus untuk mengatur definition list, bertolak belakang
dengan adanya list-style untuk
ordered maupun unordered list.
Nested List
Salah
satu fitur list yang paling menarik dari HTML ialah kemampuan untuk membangun
list di dalam list. Sebuah ordered list dapat dituliskan kembali di dalam
unordered list, yang keduanya berada di dalam definiton list, ataupun
sebaliknya. Sama sekali tidak ada batasan dalam menuliskan list di dalam lsit,
selain permasalahan makna semantik tentunya.
Menuliskan
kode untuk list di dalam list juga sangat sederhana, dengan langsung memasukkan
list yang ingin ditambahkan ke dalam elemen li, seperti berikut:
<ol>
<li> HTML dan CSS Dasar
<ul>
<li>
Elemen, Tag, dan Atribut
<ol>
<li>Elemen</li>
<li>Tag</li>
<li>Atribut</li>
</ol>
</li>
<li>Struktur Dokumen HTML</li>
<li>
Dasar CSS
<ol>
<li>Selector</li>
<li>Property</li>
<li>Value</li>
<li>Sintaks CSS</li>
</ol>
</li>
<li>Mengimplementasikan CSS pada HTML</li>
</ul>
</li>
</ol>
Tidak ada komentar:
Posting Komentar