List
dalam kode html menggunakan tag :
a.
<ol> </ol> = Ordered
List (Membuat list dengan urutan contoh 1,2,3,.., a,b,c,... dll)
Attribut
tag ol : type Value
tag
ol : 1, i, I, a, dan A
Contoh
: <ol type='i'><li> Ade Putra Blo</li><ol>
b.
<ul>
</ul> = Unordered list (membuat list tanpa urutan)
Attribut tag ul :
type
Value tag ul : disc,
circle, dan square
contoh : <ul
type='square'><li> Ade Putra Blo</li><ul>
c.
<li></li> = Tag li berfungsi
untuk menampilkan kalimat yang ingin kita buat.Tag li
disisipkan diantara tag ol ataupun tag ul
contoh:
contoh:
<ol>
<li>teks
</li>
<li>teks
2 </li>
<li>teks
dsb. </li>
</ol>
1. Membuat Kombinasi List
Membuat list kombinasi tidak cukup sulit, hanya saja kita
harus meletakkan kodenya dengan teliti agar list yang kita buat tidak kacau.
Pertama,
tulis atau copy kode dibawah dengan notepad kalian.
<html>
<head>
<title>Membuat
list Kombinasi</title>
</head>
<body>
Daftar
Makanan
<ol>
<li>Ayam
</li>
<li>Soto
</li>
</ol>
</body>
</html>
Yang
kedua adalah cara membuat submenu pada ayam dan soto. caranya yaitu dengan
menyisipkan tag ol atau ul di dalam tag li pada ayam dan soto. Caranya seperti
kode dibawah.
<html>
<head>
<title>Membuat
list Kombinasi</title>
</head>
<body>
Daftar
Makanan
<ol>
<li>Ayam
<ul>
<li
type='circle'>Daging</li>
<li
type='disc'>Bakar</li>
<li
type='square'>Kecap</li>
</ul>
</li>
<li>
Soto
<ol
type='a'>
<li>Daging</li>
<li>Bakar</li>
</ol>
</li>
</ol>
</body>
</html>
2. Posisi Teks List (Ordered dan
Unordered)
Ketika
menuliskan sebuah daftar, tidak jarang kita menemukan daftar panjang, yang
diikuti dengan deskripsi mengenai daftar tersebut, seperti yang dapat dilihat pada gambar
di bawah:
 |
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.
 |
0 comments:
Post a Comment