Selamat pagi kawan sekalian, semoga kita semua dalam keadaan sehat Jasmani, Rohani, dan Ekonomi.
Sebelumnya masih ingatkah kawan sekalian dengan materi pertemuan sebelumnya.?, dari pertemuan sebelumnya kita telah berkenalan dengan HTML, dan pada kesempatan kali ini kawan sekalian akan diajak untuk mengenal dengan Tag <ul> </ul> dan <ol> </ul> atau biasa dikenal dengan nama List, dalam list terbagi menjadi dua jenis yaitu:
- List menggunakan simbol atau bentuk.
- Data satu.
- Data dua.
- Data tiga.
- List menggunakan nomer.
- Data satu.
- Data dua.
- Data tiga.
List atau Bullet and Numbering
Itulah istilah yang lebih dikenal dan sering dibicarakan, Mengapa.? ya karna dengan adanya List atau Bullet and Numbering maka akan mempermudah kita untuk membaca dan memahami isi dari suatu tulisan atau artikel. kenapa kita membutuhkan List.? karena sebagian besar tulisan atau artikle memiliki berberapa informasi yang lebih mudah dipahami bila ditulis dengan menggunakan List. contoh sederhana.
Nama Buah:
Buah Mangga, Buah Jeruk, Buah Apel, Buah Melon, Buah Kedongdong, Buah Kelapa. dan lain sebagainya.
Bandingkan dengan yang menggunakan List:
- Buah Mangga
- Buah Jeruk
- Buah Apel
- Buah Melon
- Buah Kedongdong
- Buah Kelapa
- Buah lainya
Menurut saya, tulisan yang menggunakan List akan lebih mudah dibaca dan dipahami, karena informasinya ditampilkan secara terpisah dan antara data satu dan yang lain memiliki jarak sehingga memudahkan untuk di baca. Betul Tidak.?
Mari kawan sekalian kita lihat contoh penggunaan Tag <ul> dan <ol> dibawah ini :
- Membuat sebuah folder dimana nanti file - file disimpan, sehingga mudah untuk digunakan kembali.
- Contoh : D://web/belajar_html/
- Buatlah file menggunakan Notepad dengan nama "latihan_3a.html" yang berisi:
latihan_3a.html
<html>
<head>
<title>Latihan 3a - Bullet and Numbering</title>
</head>
<body>
<h2> Data Buah di pasar Kembar</h2>
<ul>
<li> Buah Mangga Mentah</li>
<li> Buah Mannga Matang</li>
<li> Buah Apel Mentah</li>
<li> Buah Apel Matang</li>
<li> Buah Jeruk Mentah</li>
<li> Buah Jeruk Matang</li>
<li> Buah Kedongdong Mentah</li>
<li> Buah Kedongdong Matang</li>
<li> Buah Kiwi Mentah</li>
<li> Buah Kiwi Matang</li>
</ul>
<h2> Daftar Belanjaan Mamah</h2>
<ol>
<li> Cabe Merah.</li>
<li> Cabe Hijau.</li>
<li> Buah Kelapa</li>
<li> Kantong Kresek</li>
<li> Tali Rapia</li>
<li> Tahu Bulat</li>
<li> Tempe Mendoan</li>
</ol>
</body>
</html>
Dari Script diatas mari kita bahas beberapa Poin yang penting:
- Tag <ol> dan <ul> hanya digunakan diawal dan diakhir.
- Tag <li> digunakan disetiap data yang akan ditampilkan
Seletah melihat contoh diatas mungkin akan terlintas pertanyaan, apa bisa Tag <ol> berada di dalam Tag <ul>.? dan jawabanya tentu saja Bisa.
Tidak ada hal yang tidak mungkin dalam dunia teknologi, hanya saja memerlukan waktu untuk memikirkan dan membuatnya. Dengan tidak berpanjang lebar mari kita contoh Sricpt berikut ini.
- Membuat sebuah folder dimana nanti file - file disimpan, sehingga mudah untuk digunakan kembali.
- Contoh : D://web/belajar_html/
- Buatlah file menggunakan Notepad dengan nama "latihan_3b.html" yang berisi:
latihan_3b.html
<html>
<head>
<title>Latihan 3b - Nesting Bullet and Numbering</title>
</head>
<body>
<h2> Data Buah di pasar Kembar</h2>
<ol>
<li> Buah Mangga
<ul>
<li> Mentah - Rp. 20.000,00-</li>
<li> Matang - Rp. 30.000,00-</li>
<li> Busuk - Rp. 5.000,00-</li>
</ul>
</li>
<li> Buah Apel
<ul>
<li> Mentah - Rp. 40.000,00-</li>
<li> Matang - Rp. 50.000,00-</li>
<li> Busuk - Rp. 20.000,00-</li>
</ul>
</li>
<li> Buah Jeruk
<ul>
<li> Ukuran Kecil
<ol>
<li> Mentah - Rp. 15.000,00-</li>
<li> Matang - Rp. 20.000,00-</li>
<li> Busuk - Rp. 10.000,00-</li>
</ol>
</li>
<li> Ukuran Sedang
<ol>
<li> Mentah - Rp. 20.000,00-</li>
<li> Matang - Rp. 30.000,00-</li>
<li> Busuk - Rp. 10.000,00-</li>
</ol>
</li>
<li> Ukuran Besar
<ul>
<li> Mentah - Rp. 25.000,00-</li>
<li> Matang - Rp. 30.000,00-</li>
<li> Busuk - Rp. 10.000,00-</li>
</ul>
</li>
</ul>
</li>
<li> Buah Kiwi
<ul>
<li> Mentah - Rp. 70.000,00-</li>
<li> Matang - Rp. 90.000,00-</li>
<li> Busuk - Rp. 30.000,00-</li>
</ul>
</li>
</ol>
</body>
</html>
Dari Script diatas mari kita bahas beberapa Poin yang penting:
- Memasukan Tag <ol> kedalam Tag <ul> memiliki proses yang sama seperti biasa.
- Kita bisa memasukan sebanyak apapun Tag kedalam Tag lain (Nesting).
- Attribut dapat digunakan juga jika kawan sekalian mau.
Demikian pertemuan kita, bila ada yang ditanyakan, saran, kritik bisa hubungi saya melalui kolom komentar, semoga pembahasan tadi menjadi ilmu yang bermanfaat bagi kawan sekalian.
Terimakasih dan sampai berjumpa kembali di pertemuan berikutnya.
Tidak ada komentar:
Posting Komentar
Terima kasih atas komentar yang anda berikan, semoga dapat membuat kami lebih baik lagi.