Anak Males – Jadi kali ini kita akan belajar membuat list html. Kemarin kan kita sudah belajar untuk membuat tabel html.
HTML (Hypertext Markup Language) adalah bahasa markup yang digunakan untuk membuat halaman web.
HTML menggunakan tanda-tanda atau elemen untuk menandai bagian-bagian dari sebuah dokumen dan menjelaskan bagaimana bagian-bagian tersebut harus ditampilkan di layar.
HTML terdiri dari elemen-elemen yang terdiri dari tag-tag yang dikelilingi oleh tanda kurung kurawal < >. Tiap elemen memiliki tujuan tertentu, misalnya untuk menambahkan teks, gambar, atau tautan ke halaman web.
Setiap elemen juga memiliki atribut yang dapat mengontrol bagaimana elemen tersebut ditampilkan atau diakses.
Di HTML, list adalah elemen yang digunakan untuk menyajikan informasi dalam bentuk daftar. Ada dua jenis list yang umum digunakan: ordered list (daftar terurut) dan unordered list (daftar tak terurut).
Macam Macam Elemen List HTML
Di HTML, ada beberapa elemen list yang dapat digunakan untuk menyajikan informasi dalam bentuk daftar. Berikut ini adalah beberapa elemen list yang umum digunakan:
- Ordered list (daftar terurut)
- Unordered list (daftar tak terurut)
- Definition list (daftar definisi)
Ordered List HTML
Menggunakan elemen <ol> untuk menandai daftar terurut, dan elemen <li> untuk setiap item dalam daftar. Item dalam daftar terurut secara otomatis diberi nomor urut.
Untuk membuat ordered list (daftar terurut) di HTML, gunakan elemen <ol> untuk menandai daftar terurut, dan elemen <li> untuk setiap item dalam daftar. Item dalam daftar terurut secara otomatis diberi nomor urut.
Contoh:
<ol>
<li>Mandi</li>
<li>Sarapan</li>
<li>Bersiap untuk bekerja</li>
</ol>
Untuk mengontrol penampilan nomor urut, Anda dapat menggunakan atribut type pada elemen <ol>. Contohnya, untuk menggunakan huruf kecil daripada angka sebagai nomor urut, gunakan type="a":
<ol type="a">
<li>Mandi</li>
<li>Sarapan</li>
<li>Bersiap untuk bekerja</li>
</ol>
Anda juga dapat mengatur mulai nomor urut menggunakan atribut start. Misalnya, untuk memulai nomor urut dari angka 3, gunakan start="3":
<ol start="3">
<li>Mandi</li>
<li>Sarapan</li>
<li>Bersiap untuk bekerja</li>
</ol>
Semua elemen list dapat diatur dengan atribut style untuk mengubah gaya penampilan daftar, seperti mengubah warna nomor urut atau menentukan jenis font.
Unordered List HTML
Menggunakan elemen <ul> untuk menandai daftar tak terurut, dan elemen <li> untuk setiap item dalam daftar. Item dalam daftar tak terurut ditandai dengan bullet point.
Untuk membuat unordered list (daftar tak terurut) di HTML, gunakan elemen <ul> untuk menandai daftar tak terurut, dan elemen <li> untuk setiap item dalam daftar. Item dalam daftar tak terurut ditandai dengan bullet point.
Contoh:
<ul>
<li>Mandi</li>
<li>Sarapan</li>
<li>Bersiap untuk bekerja</li>
</ul>
Untuk mengontrol bentuk bullet point, Anda dapat menggunakan atribut type pada elemen <ul>. Contohnya, untuk menggunakan bullet point yang berbeda dari default (biasanya sebuah kotak hitam), gunakan type="square" atau type="disc":
<ul type="square">
<li>Mandi</li>
<li>Sarapan</li>
<li>Bersiap untuk bekerja</li>
</ul>
<ul type="disc">
<li>Mandi</li>
<li>Sarapan</li>
<li>Bersiap untuk bekerja</li>
</ul>
Semua elemen list dapat diatur dengan atribut style untuk mengubah gaya penampilan daftar, seperti mengubah warna bullet point atau menentukan jenis font.
Definition List HTML
Menggunakan elemen <dl> untuk membuat daftar definisi. Elemen <dl> disertai dengan elemen <dt> (definisi judul) dan <dd> (definisi deskripsi) untuk menjelaskan setiap item dalam daftar.
Untuk membuat definition list (daftar definisi) di HTML, gunakan elemen <dl> untuk membuat daftar definisi. Elemen <dl> disertai dengan elemen <dt> (definisi judul) dan <dd> (definisi deskripsi) untuk menjelaskan setiap item dalam daftar.
Contoh:
<dl>
<dt>Mandi</dt>
<dd>Melakukan kegiatan membersihkan tubuh dengan air</dd>
<dt>Sarapan</dt>
<dd>Makan makanan pagi</dd>
<dt>Bersiap untuk bekerja</dt>
<dd>Melakukan persiapan untuk beraktivitas seperti menyiapkan alat tulis, pakaian, dan lainnya</dd>
</dl>
Semua elemen list dapat diatur dengan atribut style untuk mengubah gaya penampilan daftar, seperti mengubah warna teks atau menentukan jenis font.
Perhatikan bahwa elemen <dt> digunakan untuk menandai judul definisi, sedangkan elemen <dd> digunakan untuk menandai deskripsi definisi. Jangan tukar posisi elemen ini, karena akan menyebabkan penampilan yang salah di browser.
Cara Membuat List di dalam List (Nested List)
Untuk membuat nested list (daftar bersarang) di HTML, Anda dapat menggunakan elemen list di dalam elemen list lainnya. Ini bisa dilakukan dengan menggunakan elemen <ol> atau <ul> di dalam elemen <li> dari daftar yang lebih tinggi.
Contoh:
<ul>
<li>Mandi</li>
<li>Sarapan
<ul>
<li>Buatkan teh</li>
<li>Sajikan roti bakar</li>
<li>Masukkan selai di atas roti</li>
</ul>
</li>
<li>Bersiap untuk bekerja
<ol>
<li>Siapkan pakaian</li>
<li>Siapkan alat tulis</li>
<li>Siapkan tas</li>
</ol>
</li>
</ul>
Anda dapat membuat nested list sebanyak yang diperlukan, dengan menggunakan elemen list di dalam elemen list lainnya sesuai kebutuhan. Semua elemen list dapat diatur dengan atribut style untuk mengubah gaya penampilan daftar, seperti mengubah warna bullet point atau menentukan jenis font.
Menyisipkan Elemen Kedalam List HTML
Untuk menyisipkan elemen lain ke dalam daftar (list) di HTML, Anda dapat menggunakan elemen-elemen lain di dalam elemen <li> (item daftar). Misalnya, untuk menyisipkan teks, gambar, atau tautan ke dalam daftar, gunakan elemen-elemen yang sesuai di dalam elemen <li>.
Contoh:
<ul>
<li>Mandi</li>
<li>Sarapan <a href="/resep-roti-bakar">(lihat resep roti bakar)</a></li>
<li>Bersiap untuk bekerja
<ul>
<li>Siapkan pakaian</li>
<li>Siapkan alat tulis</li>
<li>Siapkan tas <img src="/tas.jpg" alt="Gambar tas" /></li>
</ul>
</li>
</ul>
Anda juga dapat menyisipkan elemen-elemen lain seperti tabel atau form di dalam daftar, dengan menempatkannya di dalam elemen <li>. Namun, pastikan untuk menutup semua elemen yang disisipkan dengan tepat agar dokumen HTML Anda valid dan dapat ditampilkan dengan benar oleh browser.
Penutup
Baiklah, kita cukupkan untuk tutorial html kali ini, sampai jumpa di tutorial html lainnya.