Assalamu’alaikum Wr. Wb
Pengantar
Hai bagaimana kabarnya? Semoga baik-baik saja ya teman-teman. Melanjutkan artikel yang sebelumnya membahas tentang tag tag dan atribut yang sudah deprecated (using). Dan pada kesempatan kali ini akan membahas List Element pada HTML.
Harapan saya teman-teman dapat mempraktekan dan lebih baik lagi memahami materi kali ini dengan catatan di ulang pelajaran yang sudah dipraktekan agar tidak lupa. Teman-teman mulai dari sini harus membaca dengan teliti agar tidak salah memahami materinya. Semoga sukses dan berhasil, Amin.
Praktik HTML
Pada praktik kali kita akan membahas List Element yang dimana ada tiga yang akan kita praktikan, yaitu:- Ordered List adalah list yang berurutan. List ini bisa menggunakan angka atau huruf.
- Unordered List adalah list yang tidak perlu menggunakan ururutan.
- Description List digunakan untuk struktur list seperti kamus, list ini memiliki judul dan keterangan.
Baik kita bahas satu persatu ya teman-teman, mulai dari yang pertama yaitu:
A. Ordered List
Untuk membuat syntax ini perlu menggunakan tag (ol), dan tag <li> untuk isi dari listnya.
Contoh praktik ordered list:Kode HTML:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Belajar HTML di Alami Computer</title>
</head>
<body>
<h1>Cara memberikan perhatian kepada pasangan</h1>
<ol>
<li>Jadilah Pendengar yang Baik</li>
<li>Gunakan Bahasa Cinta (Love Languages)</li>
<li>Tunjukkan Dukungan & Apresiasi</li>
<li>Komunikasi dan Kejujuran</li>
<li>Lakukan Hal Kecil yang Berkesan</li>
<li>Hargai Privasi</li>
<li>Pastikan sudah ada pasangannya, kalau tidak ada tips yang diatas tidak berlaku kepasangan 😂</li>
</ol>
</body>
</html>
 |
| Gambar 1 Kode Ordered List |
 |
| Gambar 2 Hasil Kode Ordered List |
B. Unordered List
Untuk membuat syntax ini perlu menggunakan tag (ul), dan tag <li> untuk isi dari listnya.
Contoh praktik unordered list:
Kode HTML:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Belajar HTML di Alami Computer</title>
</head>
<body>
<h1>Tips mendapatkan si Dia dengan cepat secepat kilat 😁</h1>
<ul>
<li>Bidik targetnya dulu siapa yang mau di dekatin ya? hehe</li>
<li>Kalau sudah pastikan dapat kontak WA atau IG</li>
<li>Mulai percapakan sederhana seperti tanya kabar dan kesibukanya</li>
<li>Mulai dari sini kita coba terapkan beberapa hal</li>
<ul>
<li>Gunakan Teori "The Law of Least Effort(Daya Tarik Pasif)</li>
<ul>
<li>Optimalisasi Profil Digital seperti pasang foto yang jangan kaku dan tunjukin hobi yang kamu cintai</li>
<li>Sering-sering berada di tempat yang sama secara konsisten (kafe, gym, perpustakan)</li>
</ul>
<li>Teknik "The Scarcity & Mystery" (Bikin Penasaran)</li>
<ul>
<li>Jangan semua kamu ceritakan tentang dirimu simpan beberapa hal-hal untuk pertemuan berikutnya</li>
<li>Kurangi Respon cepat. Berikan jeda biar menunjukkan kamu punya kesibukan</li>
</ul>
<li>Tips "Out of the Box" untuk menarik perhatiannya:</li>
<ul>
<li>Teknik Ben Franklin Effect: Mintalah bantuan kecil padanya(misal: boleh minta saran buku yang bagus?)</li>
<li>Puji hal yang tidak terlihat (contoh: puji pilihannya atau cara berpikirnya)</li>
<li>nah ini yang perlu kontak manta 3 detik 😀 + senyum tipis 😊</li>
</ul>
<li>Terakhir Gunakan "Sosial Proof" (Bukti Sosial) dengan terlihat akrab kepada semua orang dalam ruangan </li>
<li>Kalau sudah semua dipraktik kasih tau yaaa kabarnya berhasil atau gak? hehe
biar nanti mau di coba praktiknya juga wkwkw 😂
</li>
</ul>
</ul>
</html>
 |
| Gambar 3 Kode Unordered List |
 |
| Gambar 4 Hasil Kode Unordered List |
C. Description List
List yang terakhir adalah description list yang dimana digunakan untuk membuat struktur yang berisi atau daftar penjelasan.
Contoh praktik description list:
Kode HTML
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Belajar HTML di Alami Computer</title>
</head>
<body>
<h2>Saya sedang belajar HTML di Alamicomputer.com</h2>
<dl>
<dt>HTML</dt>
<dd>HTML kepanjangan dari Hypertext Markup Language</dd>
<dt>CSS</dt>
<dd>CSS kepanjangan dari Cascading Style Sheet</dd>
<dt>JavaScript</dt>
<dd>JavaScript untuk lanjutan dari CSS</dd>
</dl>
</body>
</html>
 |
| Gambar 5 Kode Description list |
 |
| Gambar 6 Hasil Kode Description list |
Kesimpulan
Pembahasan tentang List Element yang digunakan untuk membuat biar menarik tulisan. Tujuan teman-teman yang membuat file html atau pemograman bisa menggunakan dengan baik dan sesuai dengan fungsi dan kelayakan pada sebuah kode-kode program yang akan dijalankan.
Terimakasih sudah berkunjung sampai ketemu di artikel selanjutnya, jangan lupa ikuti chanel kami yaitu :
YouTube: Alami Computer
Website: www.alamicomputer.id
Instagram: chaerullah.fadli
Daftar Pustaka: Tim Riset Alami Computer