HTML Dasarr : List
Hello Mates 🍻!!!
By : Mr.KLA
Hello Welcome Back !!! Pada kesempatan kali ini Gw akan memberikan materi tentang List pada HTML. Tau nggak sih list pada html itu seperti apa ?. List pada HTML itu hampir sama seperti di Microsoft Word yang biasanya kalian pakai.
Tag List tersebut ialah <ol> , <ul> , <dl> . Tau nggak artinya ??? kalau kalian baca atau masih ingat yang saya berikan materi tentang Tag pada HTML pasti ingat ! .
Tag <ol> artinya adalah Tag untuk membuat list terurut atau bisa dikatakan Order List. Lalu Tag <ul> artinya adalah Tag untuk membuat list tidak terurut atau bisa dikatakan Unorder List. Tag <dl> artinya adalah Tag untuk membuat daftar terminologi dan definisi atau bisa dikatakan Difinison List.
Oke kita langsung Praktekan aja yah !
Disini saya sudah membuat folder latihan 5 yang didalam nya sudah ada satu file list.html berekstensi/bertype HTML. Dan saya sudah membuat struktur HTML dasar nya.
Yang kita bahas pertama adalah <ol> atau order list. Misal Gw akan membuat list ketika besok Pagi. Saya akan buat tag <h3> untuk judul nya lalu dengan membuat Tag <ol>.
Tag <ol> ini akan memberitahu HTML kalau saya akan membuat list terurut, dimana didalamnya terdapat tag <li> yaitu list item misal :
<!DOCTYPE html>
<html>
<head>
<title>HTML List</title>
</head>
<body>
<h3>List Jadwal Kegiatan Besok</h3>
<ol>
<li>Bangun Pagi</li>
<li>Sarapan</li>
<li>Mandi</li>
</ol>
</body>
</html>
Nah list terurut ini atau <ol> dibuat dengan memperhatikan urutan item yang ada di dalam nya. Jadi kalau item nya tertukar posisi berarti makna dari list itu tadi berubah. Lalu kita lihat hasilnya
Disini urutanya terlihat berbentuk angka. Kita juga bisa membuat urutan ini menjadi abc kita bisa menggunakan artibut type <ol type=" " ></ol>, kita juga bisa ganti dengan A , a , I (romawi) , i .
Oke kita coba mengganti bentuk list angkanya misal dengan A
<!DOCTYPE html>
<html>
<head>
<title>HTML List</title>
</head>
<body>
<h3>List Jadwal Kegiatan Besok</h3>
<ol type="A">
<li>Bangun Pagi</li>
<li>Sarapan</li>
<li>Mandi</li>
</ol>
</body>
</html>
Nah 123 nya tadi berubah menjadi ABC dan seterusnya.
Begitu juga dengan i
<!DOCTYPE html>
<html>
<head>
<title>HTML List</title>
</head>
<body>
<h3>List Jadwal Kegiatan Besok</h3>
<ol type="i">
<li>Bangun Pagi</li>
<li>Sarapan</li>
<li>Mandi</li>
</ol>
</body>
</html>
Maka akan juga ABC tadi berubah menjadi i ii iii
Tag kedua yaitu <ul> Unorder List atau list tidak terurut yang diamana didalam nya kita bisa tulis tag <li> sama seperti tadi. Jika menggunkana <ul> artinya urutan dari list item nya itu tidak berpengaruh misalnya :
<!DOCTYPE html>
<html>
<head>
<title>HTML List</title>
</head>
<body>
<h3>List Jadwal Kegiatan Besok</h3>
<ol type="i">
<li>Bangun Pagi</li>
<li>Sarapan</li>
<li>Mandi</li>
</ol>
<hr>
<h3>Makanan Favorit</h3>
<ul>
<li>Makan Temen</li>
<li>Makan Telor/Peler</li>
<li>Makan Bakso</li>
</ul>
</body>
</html>
Jadi jika menggunkan <ul> merupakan list urutannya tidak berpengaruh jadi kalau saya Mood atau seleranya saya makan mana duluan tidak akan mempengaruhi list saya. Lalu kita lihat hasilnya
Jika ingin menggunakan yang lain HTML punya tiga type ada disc , square , dan circle
kita coba menggunakan square
<!DOCTYPE html>
<html>
<head>
<title>HTML List</title>
</head>
<body>
<h3>List Jadwal Kegiatan Besok</h3>
<ol type="i">
<li>Bangun Pagi</li>
<li>Sarapan</li>
<li>Mandi</li>
</ol>
<hr>
<h3>Makanan Favorit</h3>
<ul type="square">
<li>Makan Temen</li>
<li>Makan Telor/Peler</li>
<li>Makan Bakso</li>
</ul>
</body>
</html>
Maka otomatis lingkaran tadi berubah menjadi persegi
Dan kita coba ganti menggunakan circle
<!DOCTYPE html>
<html>
<head>
<title>HTML List</title>
</head>
<body>
<h3>List Jadwal Kegiatan Besok</h3>
<ol type="i">
<li>Bangun Pagi</li>
<li>Sarapan</li>
<li>Mandi</li>
</ol>
<hr>
<h3>Makanan Favorit</h3>
<ul type="circle">
<li>Makan Temen</li>
<li>Makan Telor/Peler</li>
<li>Makan Bakso</li>
</ul>
</body>
</html>
Dan hasilnya akan menjadi lingkaran tak berisi atau lingkaran kosong
Nah itu adalah contoh penggunaan <ul>
Sekarang kita ke Tag yang ketiga yaitu tag <dl> atau definision list. Nah tag ini agak berbeda dengan tag sebelumnya. Digunakan untuk membuat terminologi dan deskripsi. Isinya berpasangan. Pertma kita bungkus dengan <dl> lalu didalmnya terdapat <dt> untuk terminologinya apa lalu dibawahnya di bungkus tag <dd> untuk definisinya apa. Jadi jika kalian punya 3 buah term atau <dt> maka kalian harus juga punya 3 buah <dd>. Misal :
<!DOCTYPE html>
<html>
<head>
<title>HTML List</title>
</head>
<body>
<h3>List Jadwal Kegiatan Besok</h3>
<ol type="i">
<li>Bangun Pagi</li>
<li>Sarapan</li>
<li>Mandi</li>
</ol>
<hr>
<h3>Makanan Favorit</h3>
<ul type="circle">
<li>Makan Temen</li>
<li>Makan Telor/Peler</li>
<li>Makan Bakso</li>
</ul>
<hr>
<h3>Web Programing</h3>
<dl>
<dt>HTML</dt>
<dd>Hyper Text Markup Languagge</dd>
<dt>CSS</dt>
<dd>Casscading Style Sheet</dd>
</dl>
</body>
</html>
Jadi jika membuat <dt> maka harus membuat <dd> nya juga. Lalu kita lihat hasilnya
Jadi otomatis baris keduanya ditambahkan initasi dari HTML nya
Misal kita ingin mempertebal text HTML dan CSS nya, kita juga bisa menggunakan tag <strong> tapi saya tidak sarankan karena ini juga tugas dari CSS.
<!DOCTYPE html>
<html>
<head>
<title>HTML List</title>
</head>
<body>
<h3>List Jadwal Kegiatan Besok</h3>
<ol type="i">
<li>Bangun Pagi</li>
<li>Sarapan</li>
<li>Mandi</li>
</ol>
<hr>
<h3>Makanan Favorit</h3>
<ul type="circle">
<li>Makan Temen</li>
<li>Makan Telor/Peler</li>
<li>Makan Bakso</li>
</ul>
<hr>
<h3>Web Programing</h3>
<dl>
<dt><strong>HTML</strong></dt>
<dd>Hyper Text Markup Languagge</dd>
<dt><strong>CSS</strong></dt>
<dd>Casscading Style Sheet</dd>
</dl>
</body>
</html>
Dan kita lihat hasilnya maka akan berubah menjadi cetak tebal
Jadi itulah 3 list yang dimiliki oleh HTML silahkan dicoba coba silahkan berskpresi :v dengan menggunakan type nya walapun type tersebut juga bisa kalian ubah menggunakan CSS.
Oke sekian dari Gw Jangan lupa MAKAN knp ? karena biar manusia kek lu kaga punah ea :v .
SEE YOU NEXT TIME MATES !!!
Thanks To :
- ANGELS CYBER MOON
- CLOWNSEC TEAM
- TANGGERANG CYBER ARMY
- MALANG XPLOIT CYBER
- AND YOU UWU :v
Gudd :v
BalasHapusMah Minta KiK* :v
Hapus