Membuat List dan Link pada HTML
Membuat Elemen List
Pernahkan teman-teman melihat elemen list seperti pada gambar di bawah ini?
Kalian mungkin akan sering menemukannya saat membuka beberapa website yang berisi daftar sesuatu, contohnya resep masakan. Untuk menampilkan resep masakan, langkah-langkah cara memasak dan alat serta bahan masakannya, tentu saja kita memerlukan elemen yang mampu menampilkan beberapa item satu persatu. Saat itulah kita memerlukan elemen list.
Ordered List (Daftar Terurut)
Pernahkah kalian merasa perlu mengatur informasi dalam urutan yang rapi dan jelas? Nah, di sinilah ordered list atau daftar terurut dalam HTML datang untuk menyelamatkan! Ordered list adalah alat yang super keren yang memungkinkan kita membuat daftar item dengan nomor atau huruf yang berurutan, menjadikannya alat yang sangat bermanfaat untuk menyampaikan informasi dengan cara yang terstruktur dan mudah dimengerti.
Apa yang perlu kita ketahui tentang ordered list adalah dua hal utama: tag <ol> (Ordered List Tag) dan tag <li> (List Item Tag). Tag <ol> digunakan untuk mengawali daftar terurut kita, dan setiap item dalam daftar ditempatkan di bawah tag <li>. Contohnya seperti ini:
<ol>
<li>Langkah 1: Persiapan</li>
<li>Langkah 2: Pelaksanaan</li>
<li>Langkah 3: Evaluasi</li>
</ol>
Pada elemen <ol>, kita dapat memberikan properti "type" untuk mengubah tampilan default berupa angka di depan setiap item-nya.
<ol type="a">
<li>Langkah 1: Persiapan</li>
<li>Langkah 2: Pelaksanaan</li>
<li>Langkah 3: Evaluasi</li>
</ol>Pada potongan kode di atas, kita mengubah properti "type" menjadi bernilai "a" yang akan mengubah tampilannya menjadi seperti gambar di bawah ini.
type="1"
Menampilkan list dengan angka (default)
type="A"
Menampilkan list dengan huruf kapital
type="a"
Menampilkan list dengan huruf kecil
type="I"
Menampilkan list dengan angka romawi kapital
type="i"
Menampilkan list dengan angka romawi kecil
Unordered List (Daftar Tidak Terurut)
Ketika kita ingin menyajikan informasi dalam bentuk daftar tanpa perlu menunjukkan urutan atau hierarki khusus, unordered list (daftar tak terurut) adalah pilihan yang sempurna. Unordered list memungkinkan kita untuk mengatur item atau elemen tanpa menggunakan angka atau huruf sebagai penomoran. Sebaliknya, setiap item ditampilkan dengan simbol khusus seperti bulletpoints (lingkaran atau kotak kecil). Sadarkah teman-teman bahwa tag <ol> yang sebelumnya kita gunakan merupakan sebuah singkatan dari "ordered list". Maka untuk membuat unordered list, kita menggunakan tag <ul>. Simpel banget kan? 😄
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
Membuat Elemen Link
Tautan, atau yang lebih dikenal dengan istilah hyperlink, adalah salah satu elemen yang menarik dalam HTML. Elemen ini memungkinkan kita untuk membuat koneksi antara halaman web, dokumen, atau sumber daya lainnya. Dengan tautan, kita semua bisa dengan mudah berpindah antara berbagai halaman web atau konten yang seru dan terkait. Yuk, mari kita bahas lebih lanjut mengenai penggunaan elemen link dalam HTML!
<a href="https://www.facebook.com">Kunjungi Contoh Website</a>Hanya dengan sebaris kode di atas, kita sudah berhasil membuat elemen link yang jika diklik akan mengarahkan kita ke www.facebook.com. Sekarang, coba ganti url tersebut dengan url website yang teman-teman sering kunjungi!
Tautan Internal
Selain menghubungkan ke situs web eksternal, tautan juga bisa menghubungkan berbagai halaman di dalam situs web kita. Ini disebut tautan internal. Misalnya:
<a href="halaman.html">Baca Lebih Lanjut</a>Tautan ke Sumber Daya Lainnya
Tidak hanya untuk halaman web, tautan juga dapat digunakan untuk menghubungkan ke berbagai jenis sumber daya, seperti dokumen PDF, gambar, atau file musik. Contohnya:
<a href="dokumen.pdf">Unduh Dokumen PDF</a>Tautan E-mail
Kita juga bisa menggunakan tautan untuk membuka aplikasi email dengan alamat yang sudah ditentukan. Misalnya:
<a href="mailto:email@example.com">Hubungi Kami</a>Beberapa contoh di atas akan membuat sebuah elemen link yang jika diklik akan mengarahkan teman-teman di url tujuan. Lalu bagaimana jika teman-teman ingin membuka sebuah url pada tab lain? Mudah banget!
<a href="https://www.contohwebsite.com" target="_blank">Buka di Tab Baru</a>Referensi
https://www.w3schools.com/html/html_lists_ordered.asp https://www.w3schools.com/html/html_lists_unordered.asp https://www.w3schools.com/html/html_links.asp
Last updated