Penjelasan dari macam - macam list, mulai dari Ordered List <ol> , Unordered List <ul> , Nested List ( List Bersarang) , hingga Definition List.
Halo kawan ID-Libra, Kali ini Mr. Libra akan menjelaskan mengenai Macam - macam lisl, mulai dari Ordered List <ol> , Unordered List <ul> , Nested List ( List Bersarang) , hingga Definition List. Oke, gk usah panjang lebar basa basinya . . . langsung ke Materinya aja ;-)
List merupakan bentuk yang umum yang bisa kita gunakan untuk menguraikan daftara sesuatu, misalnya jenis-jenis list dalam HTML:
- List dengan nomor
- List tanpa nomor
- List definisi
List dengan nomor adalah model daftar yang setiap itemnya diberi nomor atau biasa disebut ordered list <ol>. Pada contoh kalimat di atas merupakan contoh list tanpa menggunakan nomor atau biasa disebut unordered list <ul>.
Selain list bernomor dan tanpa nomor, ada sebuah list lagi yang bisa digunakan untuk membuat list yang memberi uraian terhadap sesuatu item dalam daftar ? disebut list definisi.
Untuk membuat list tanpa nomor, disebut juga bulleted list:
- Mulai dengan tag pembuka list <ul>
- Memasukkan setiap item list dengan menggunakan tag <li> kemudian tuliskan itemnya (satu saja), tag penutup item </li>, sebenarnya ini tidak harus dituliskan (tetapi sebaiknya dituliskan)
- Ulangi lagi langkah kedua untuk menuliskan item list berikutnya
- Akhiri seluruh list dengan sebuah tag penutup </ul>.
Untuk list dengan nomor, disebut juga ordered list, tag <ul> diubah dengan <ol>, demikian juga </ul> diganti dengan </ol>
# Pengertian Ordered List <ol> dan Unordered List <ul>
Ordered List :
Ordered List atau <ol> artinya list yang berurutan,
Contoh atau Macam - macam Ordered List :
1, 2, 3, 4, 5 ( Angka )
A, B, C, D, E ( Huruf Abjad Besar )
a, b, c, d, e ( Huruf Abjad Kecil )
i, ii, iii, ( Angka Romawi Kecil )
I, II, III, ( Angka Romawi Besar )
Format dari Orderet List <ol> adalah Angka 1, 2, 3, ...
Unordered List :
Unordered list atau <ul> artinya list yang tidak berurutan,
Contoh atau Macam - macam Unordered List :
Disc : Berbentuk lingkaran, namun tidak berlubang seperti titik.
Square : Berbentuk Persegi / Segi Empat / Kotak.
circle : Berbentuk linkaran, dengan lubang di tengahnya.
Format dari Unordered List <ul> adalah Square atau segi empat.
Nested List ( List Bersarang ) :
Cara Membuat List Bersarang. Maksudnya ialah didalam list ada list lagi. Hal yang menarik dari list adalah kita bisa membuat list didalam list. Jadi misalnya list pertama kita adalah angka 1, kemudian di list angka 1 kita membuat list baru dengan huruf abjad, kemudian membuat lagi dengan symbol disc begitu juga seterusnya.
Definition List :
List yang bisa digunakan untuk membuat list yang memberi uraian terhadap sesuatu item dalam daftar (list definisi)
Ordered List atau <ol> artinya list yang berurutan,
Unordered list atau <ul> artinya list yang tidak berurutan,
Cara Membuat List Bersarang. Maksudnya ialah didalam list ada list lagi. Hal yang menarik dari list adalah kita bisa membuat list didalam list. Jadi misalnya list pertama kita adalah angka 1, kemudian di list angka 1 kita membuat list baru dengan huruf abjad, kemudian membuat lagi dengan symbol disc begitu juga seterusnya.
List yang bisa digunakan untuk membuat list yang memberi uraian terhadap sesuatu item dalam daftar (list definisi)
# Struktur Penulisan Ordered List <ol> :
<html>
<head>
<title> List </title>
</head>
<body>
<h4> Belajar Membuat Ordered List </h4>
<ol>
<li> List Satu </li>
<li> List Dua. </li>
<li> List Tiga </li>
<li> List Empat </li>
<li> List Lima </li>
<li> List Enam </li>
</ol>
</body>
</html>
Nanti akan berubah menjadi :
- List Satu
- List Dua
- List Tiga
- List Empat
- List Lima
- List Enam
* Catatan Tambahan :
Untuk memulai list dari angka atau huruf yang kita inginkan adalah dengan cara menggunakan attribut start dan value angka atau huruf yang kita inginkan.
Contoh :
<html>
<head>
<title> List </title>
</head>
<body>
<ol start="5">
<li>Aku</li>
<li>Anak</li>
<li>Indonesia</li>
<li>Cinta</li>
<li>Produk</li>
<li>Indonesia</li>
</ol>
</body>
</html>
* Akan Menjadi :
- Aku
- Anak
- Indonesia
- Cinta
- Produk
- Indonesia
Untuk mengubah list dengan tipe Huruf atau angka yang kita inginkan adalah dengan menggunakan attribute type dan value angka atau huruf yang kita inginkan.
Contoh :
<html>
<head>
<title> List </title>
</head>
<body>
<ol type="A">
<li>Sapi</li>
<li>Kambing</li>
<li>Kerbau</li>
<li>Ayam</li>
<li>Rusa</li>
<li>Gajah</li>
</ol>
</body>
</html>
* Maka akan menjadi :
- Sapi
- Kambing
- Kerbau
- Ayam
- Rusa
- Gajah
Bisa juga menggunakan Value a <ol type="a"> ( untuk Huruf Abjad Kecil ), Menggunakan i <ol type="i"> ( Untuk Angka Romawi Kecil ), Menggunakkan I <ol type="I"> ( Untuk Angka Romawi Besar )
<head>
<title> List </title>
</head>
<body>
<h4> Belajar Membuat Ordered List </h4>
<ol>
<li> List Satu </li>
<li> List Dua. </li>
<li> List Tiga </li>
<li> List Empat </li>
<li> List Lima </li>
<li> List Enam </li>
</ol>
</body>
</html>
<head>
<title> List </title>
</head>
<body>
<ol start="5">
<li>Aku</li>
<li>Anak</li>
<li>Indonesia</li>
<li>Cinta</li>
<li>Produk</li>
<li>Indonesia</li>
</ol>
</body>
</html>
* Akan Menjadi :
- Aku
- Anak
- Indonesia
- Cinta
- Produk
- Indonesia
<head>
<title> List </title>
</head>
<body>
<ol type="A">
<li>Sapi</li>
<li>Kambing</li>
<li>Kerbau</li>
<li>Ayam</li>
<li>Rusa</li>
<li>Gajah</li>
</ol>
</body>
</html>
* Maka akan menjadi :
- Sapi
- Kambing
- Kerbau
- Ayam
- Rusa
- Gajah
# Struktur Penulisan Pemrograman WEB Unordered List <ul>
Untuk mengubah list menjadi tipe dari symbol yang kita inginkan adalah dengan cara menggunakan type dan value symbol ( disc, square, circle )
Contoh :
<html>
<head>
<title> List </title>
</head>
<body>
<ul type="circle">
<li>Aku</il>
<li>Sayang</il>
<li>Ibu</il>
<li>Aku</li>
<li>Rindu</li>
<li>Ibu</li>
</ul>
</body>
</html>
* Maka akan menjadi :
- Aku
- Sayang
- Ibu
- Aku
- Rindu
- Ibu
Bisa juga menggunakan value <ul type="disc"> <ul type="square">
<html>
<head>
<title> List </title>
</head>
<body>
<ul type="circle">
<li>Aku</il>
<li>Sayang</il>
<li>Ibu</il>
<li>Aku</li>
<li>Rindu</li>
<li>Ibu</li>
</ul>
</body>
</html>
* Maka akan menjadi :
- Aku
- Sayang
- Ibu
- Aku
- Rindu
- Ibu
# Struktur Penulisan Pemrograman WEB Nested List :
<html>
<head>
<title> List </title>
</head>
<body>
<ol>
<li>Makan Setiap Hari</li>
<ol type="A">
<li>Soto Ayam</li>
<ol type="a">
<li>Bubur Ayam</li>
<ol type="I">
<li>Tahu Tempe</li>
<ol type="i">
<li>Sayur sayuran</li>
<ul type="disc">
<li>Minuman</li>
<ul type="circle">
<li>Air Putih</li>
<ul type="square">
<li>Jus Buah</li>
</ol>
</ol>
</ol>
</ol>
</ol>
</ul>
</ul>
</ul>
</body>
</html>
<head>
<title> List </title>
</head>
<body>
<ol>
<li>Makan Setiap Hari</li>
<ol type="A">
<li>Soto Ayam</li>
<ol type="a">
<li>Bubur Ayam</li>
<ol type="I">
<li>Tahu Tempe</li>
<ol type="i">
<li>Sayur sayuran</li>
<ul type="disc">
<li>Minuman</li>
<ul type="circle">
<li>Air Putih</li>
<ul type="square">
<li>Jus Buah</li>
</ol>
</ol>
</ol>
</ol>
</ol>
</ul>
</ul>
</ul>
</body>
</html>
# Struktur Penulisan Pemrograman WEB Definition List
<html>
<head>
<title>Definition List</title>
<body>
<h4>Contoh Definition List : </h4>
<dl>
<dt>Minuman</dt>
<dd>Air Putih Biasa</dd>
<dt>Susu</dt>
<dd>Jus Buah Buahan dan Sayuran</dd>
</dl>
</body>
</html>
* Keterangan Definition List :
- Tag Awal <ol> kegunaan sebagai Defines an ordered list
- Tag Awal <ul> kegunaan sebagai Defines an unordered list
- Tag Awal <li> kegunaan sebagai Defines a list item
- Tag Awal <dl> kegunaan sebagai a Defines a definition list
- Tag Awal <dt> kegunaan sebagai Defines a definition term
- Tag Awal <dd> kegunaan sebagai Defines a definition description
- Tag Awal <dir> kegunaan sebagai Deprecated. Use <ul> instead
- Tag Awal <menu> kegunaan sebagai Deprecated. Use <ul> instead
Sekian Penjelasan dari Mr. Libra mengenai Penjelasan dari macam - macam list, mulai dari Ordered List <ol> , Unordered List <ul> , Nested List ( List Bersarang) , hingga Definition List. Semoga apa yang saya sampaikan bermanfaat bagi agan agan sekalian. Jika ada yang masih bingung atau ada yang ingin di tanyakan silahkan bertanya di kolom komentar yang sudah tersedia di bawah. # Terimakasih
<head>
<title>Definition List</title>
1 komentar so far
yuhuuu, bermanfaat sekali min
Solder uap
Komentar kalian sangat bermanfaat bagi kemajuan blog saya nantinya. Harap menggunakan bahasa yang sopan untuk bertanya dan berkomentar. Menggunakan "LINK" saat berkomentar sama dengan "SPAM"
EmoticonEmoticon