Flamingosolution.com | Lanjutan kali ini yaitu tentang Cara membuat Daftar/ List dalam HTML Sederhana. Adapun teman teman sekalian yang belum membaca ulasan sebelumnya, karena sebelum sampai pada Tahap ini Blog telah mengulas topik terdahulu yang juga bisa di lihat dibawah ini yaitu tentang ;
Dasar HTML 1 ( Pengenalan)
Dasar HTML 2
Dasar HTML 3 ( Pengenalan Judul dan Attribut)
Dasar HTML 4 ( Membuat Tabel)
Dasar HTML 5 ( Membuat Link)
Maka untuk itu kita akan mengulas tentang Judul Kali ini yaitu HTML List :
List dalam HTML atau HTML LIST ialah sebuat daftar dari beberapa item dalam sebuah menu pilihan.
jadi misalkan contoh dalam daftar menu makanan, Biasanya kita melihat daftar menu makanan ditulis dengan beberapa item yang tertera didalamnya seperti ini ;
Menu Makanan
1. Nasi Goreng
2. Mie Goreng
3. Ifo Mie
4. Pangsit.
dll.
Nah daftar seperti diatas lah yang termasuk sebuah List, jika dalam HTML kita juga pasti akan menemukan hal serupa dan pasti akan memakai untuk penerapannya..
HTML List terbagi menjadi 3 yaitu :
1. Ordered Lists
2. Unordered Lists
3. Defenition Lists
1. Ordered Lists
2. Unordered Lists
3. Defenition Lists
1. Ordered Lists
Yaitu suatu metode perintah dalam Html yang berfungsi dapat mengurutkan daftar dengan menggunakan angka biasa, angka romawi abjad.
contoh :
Daftar Penjualan
a. Sembako
b. Gas Elpiji
c. Rokok dll
Dalam Ordered List. "Tag" yang dipakai untuk pengurutan itu adalah Tag <ol>, Sedangkan tag untuk membuat daftar item nya ialah <li>.
Sehingga dalam segi penerapan Tag item ( <li> ) diapit atau berada diantara tag pengurut (<ol>).
Lebih jelasnya lihat penerapan dibawah ini :
<body><ol> Menu Makanan<li>Nasi Goreng</li><li>Mie Goreng</li><li>Ifo Mie</li><li>dll</li></ol></body>
hasil pada Browser akan kamu temui sama seperti contoh dibawah ini ;
Menu Makanan1. Nasi Goreng
2. Mie Goreng
3. Ifo Mie dll
Atau list bisa juga digunakan dalam penggunaan tag judul seperti dibawah ini:
<h3>Numbered List:</h3>Hasilnya
<ol>
<li>apples</li>
<li>bananas</li>
<li>Lemon</li>
<li>orange</li>
</ol>
Numbered List:
- apples
- bananas
- Lemon
- orange
Berdasarkan gambar tersebut, bisa disimpulkan bahwa tag <li> dapat berfungsi langsung mengurutkan daftar daftar tersebut langsung menggunakan angka sebagai simbol.
2. Unordered Lists
Sedangkan yang satu ini ialah metode dalam HTML yang mengurutkan daftar dengan menggunakan simbol atau special character.
Spesifikasi Laptop- CPU Intel Dual core processor (1.9 GHz)- Ram 4 GB- Harddisk 500 GB dll
Sedangkan dalam Unordered List, "Tag" yang dipakai untuk pengurutan itu adalah Tag <ul>, Sedangkan tag untuk membuat daftar item tetap menggunakan tag <li>.
Dan dalam penerapan, Tag item ( <li> ) diapit atau berada diantara tag pengurut (<ul>).
Lebih jelasnya lihat penerapan dibawah ini<body>dalam Browser hasilnya akan terlihat seperti dibawah ini;
<ul>Spesifikasi Smartphone
<li>Layar 5.5 In </li>
<li>Jaringan 3G, EDGE</li>
<li>Memory Internal (MicroSD)</li>
<li>dll</li>
</ul>
</body>
Spesifikasi Smarphone
- Layar 5.5 In
- Jaringan 3G, EDGE
- Memory Internal (MicroSD) dll
Nah , jadi perbedaan antara Ordered dan Unordered bisa dilihat dari jenis lambang lambang yang digunakan dalam pengurutannya.
3. Defenition Lists
Adalah sebuah pengurutan dalam html yang diurutkan berdasarkan daftar daftar defenisi atai istilah.
Jenis ini berfungsi/ digunakan saatmembuat daftar defenisi atau menggunakan istilah istilah yang ada dalam dokumen , terutama membuat Glosarium HTML.
Dengan kata lain, jenis ini digunakaan disaat kita ingin memberi Indeks Tersendiri.
Tag yang dipakai dalam bentuk ini adalah;
Tag <dl> (sebagai pengurut)
Tag <dt> (Sebagai Pembuat Defenisi/istilah)
Tag <dd> (Sebagai isi/ istilah)
Dalam penerapan Tag <dd> haruslah diapit atau berada dalam Tag <dt> , dan Tag <dd> harus berada atau diapit oleh Tag <dl>.
Sebagai contoh lihat penerapan dibawah ini ;
Maka dalam browser akan terlihat seperti dibawah ini :
ATTRIBUT dalam List
Tak sampai disitu, dalam Tag list ada juga saat saat dibutuhkannya penggunaan attribut,
Berikut Contoh penggunaan attribut dalam tag ordered list sebeagai abjad, yang ditandai kode "Biru" seperti dibawah ini :
Maka Kesimpulannya Attribut (warna Biru) tersebut berfungsi untuk menampilkan pengurutan berdasarkan abjad (Ordered List) tersebut menjadi abjad Kapital.
Namun jika pada Attribut ditulis seperti ini Type="a" , maka pengurutan abjad akan kembali ke huruf kecil.
Dan berikut contoh penggunaan attribut dalam tag Unordered list sebeagai Angka Romawi, yang ditandai kode "Biru" seperti dibawah ini :
Sekian pembahasan topik kali ini, semoga bermanfaat dan dapat menambah refrensi.
Jangan lupa Klik Like Facebook, atau bagikan Link ke teman anda yang ingin belajar HTML,
Jika ada sesuatu dalam artikel yang kurang dipamahi, atau kesalahan, silahkan meninggalkan pertanyaan atau saran dalam kotak komentar.
Terima kasih,
Salam.
Jenis ini berfungsi/ digunakan saatmembuat daftar defenisi atau menggunakan istilah istilah yang ada dalam dokumen , terutama membuat Glosarium HTML.
Dengan kata lain, jenis ini digunakaan disaat kita ingin memberi Indeks Tersendiri.
Tag yang dipakai dalam bentuk ini adalah;
Tag <dl> (sebagai pengurut)
Tag <dt> (Sebagai Pembuat Defenisi/istilah)
Tag <dd> (Sebagai isi/ istilah)
Dalam penerapan Tag <dd> haruslah diapit atau berada dalam Tag <dt> , dan Tag <dd> harus berada atau diapit oleh Tag <dl>.
Sebagai contoh lihat penerapan dibawah ini ;
<body>
<dl>
<dt>Kopi</dt>
<dd>Kopi Hitam Panas</dd>
<dt>Susu</dt>
<dd>Susu Putih Panas</dd>
</dl>
</body>
Maka dalam browser akan terlihat seperti dibawah ini :
--------------------------------------------------------------------------------------------------------------------
- Kopi
- Kopi Hitam Panas
- Susu
- Susu Putih Panas
ATTRIBUT dalam List
Tak sampai disitu, dalam Tag list ada juga saat saat dibutuhkannya penggunaan attribut,
Berikut Contoh penggunaan attribut dalam tag ordered list sebeagai abjad, yang ditandai kode "Biru" seperti dibawah ini :
<h4>Letters Lists: </h4>hasilnya
<ol type ="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
Letters Lists:
- Apples
- Bananas
- Lemons
- Oranges
Maka Kesimpulannya Attribut (warna Biru) tersebut berfungsi untuk menampilkan pengurutan berdasarkan abjad (Ordered List) tersebut menjadi abjad Kapital.
Namun jika pada Attribut ditulis seperti ini Type="a" , maka pengurutan abjad akan kembali ke huruf kecil.
Dan berikut contoh penggunaan attribut dalam tag Unordered list sebeagai Angka Romawi, yang ditandai kode "Biru" seperti dibawah ini :
<h4>Roman Number List: </h4>Hasil dalam browser seperti dibawah
<ol type ="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
Roman Number List:Namun jika mengubah attribut Type menjadi type="i" ,maka secara otomatis juga pengurutan unordered list berdasarkan romawi kecil, seperti dibawah ini
- Apples
- Bananas
- Lemons
- Oranges
<h4>Roman Number List: </h4>hasilnya
<ol type ="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
Roman Number List:
- Apples
- Bananas
- Lemons
- Oranges
Sekian pembahasan topik kali ini, semoga bermanfaat dan dapat menambah refrensi.
Jangan lupa Klik Like Facebook, atau bagikan Link ke teman anda yang ingin belajar HTML,
Jika ada sesuatu dalam artikel yang kurang dipamahi, atau kesalahan, silahkan meninggalkan pertanyaan atau saran dalam kotak komentar.
Terima kasih,
Salam.
.jpg)
.png)
Bagi kamu yang membutuh box makanan untuk makanan kecil seperti pangsit, dim sum, siomay, takoyaki, dll. Kamu bisa coba cek di sini http://www.greenpack.co.id/
ReplyDeleteterima kasih ilmunya kak. ini sangat bermanfaat untuk saya.
ReplyDeleteMantap, terima kasih kak. artikel ini sangat membantu saya.
ReplyDeleteMy blog