RudihartoSetelah belajar membuat form HTML di sesi sebelumnya, pada series belajar HTML bagian 4 ini, kami akan membahas cara membuat list dan hyperlink dengan kode HTML dasar.
Membuat List
Series belajar HTML bagian 4 ini akan kami awali dengan belajar membuat list. List atau yang kita kenal sebagai daftar berurutan, adalah salah satu fungsi pada HTML yang digunakan untuk menampilkan data berurutan kebawah.
List pada HTML biasanya dibuat menggunakan bullet/numbering untuk menyajikan informasi atau data dalam bentuk yang terstruktur dan mudah dibaca.
Pada HTML terdapat dua jenis type list, yaitu Ordered List dan Unordered List. Seperti contoh dibawah ini:
Unordered HTML List
- First item
- Second item
- Third item
- Fourth item
Ordered HTML list
- First item
- Second item
- Third item
- Fourth item
Unordered HTML List
Berfungsi untuk menampilkan list data berupa poin-poin atau bulatan hitam kecil didepan data. Unordered list dimulai dengan tag <ul>, dan setiap item dimulai dengan tag <li>. Untuk lebih mudah memahami, perhatikan contoh berikut ini:
Contoh kode tag unordered HTML list sebagai berikut:
<!DOCTYPE html>
<html>
<body>
<h2>Tag Unordered HTML List</h2>
<p>Paket Shared Hosting di Rumahweb<p>
<ul>
<li>Unlimited S</li>
<li>Unlimited M</li>
<li>Unlimited L</li>
</ul>
</body>
</html>
Ordered HTML list
Berfungsi untuk menampilkan list data berupa huruf atau angka didepan data. Ordered HTML list dimulai dengan tag <ol>, dan setiap item dimulai dengan tag <li>. Untuk lebih mudah memahami, perhatikan contoh berikut ini:
Contoh kode tag ordered HTML list sebagai berikut:
<!DOCTYPE html>
<html>
<body>
<h2>Tag Ordered HTML List</h2>
<p>Paket Shared Hosting di Rumahweb<p>
<ol>
<li>Unlimited S</li>
<li>Unlimited M</li>
<li>Unlimited L</li>
</ol>
</body>
</html>
Dengan contoh diatas, kita bisa dengan mudah membedakan masing-masing penggunaan list pada HTML.
Apakah hanya dua list seperti diatas didalam HTML? Tentu tidak, ada beberapa list lain dengan fungsi bermacam-macam. Kami akan melanjutkan pembahasanya.
HTML Description Lists
Description List digunakan untuk menambahkan deskripsi didalam masing-masing item. Tag yang digunakan <dl> untuk mendefinisikan list, tag <dt>mendefinisikan nama, dan tag <dd> mendeskripsikan setiap nama.
Agar lebih mudah dipahami, lihat contoh berikut ini:
Tag HTML Description List
<!DOCTYPE html>
<html>
<body>
<h2>Tag HTML Description List</h2>
<p>Layanan Shared Hosting di Rumahweb</p>
<dl>
<dt>Unlimited S</dt>
<dd>- Rp17.900/bln</dd>
<dt>Unlimited M</dt>
<dd>- Rp29.900/bln</dd>
<dt>Unlimited L</dt>
<dd>- Rp49.900/bln</dd>
</dl>
</body>
</html>
Menambahkan CSS dalam HTML List
Kita bisa menambahkan CSS dalam List HTML, untuk mengubah jenis bullet, warna, dan ukuran font.
Contoh lengkapnya:
<!DOCTYPE html>
<html>
<head>
<title>Contoh List</title>
<style>
ul {
list-style: none;
padding-left: 0;
}
ul li::before {
content: "";
display: inline-block;
width: 10px;
height: 10px;
background-color: red;
margin-right: 5px;
}
</style>
</head>
<body>
<h2>Sebelum Membuat Website</h2>
<ul>
<li>Domain</li>
<li>Hosting</li>
<li>Template</li>
</ul>
<h2>Langkah-langkah Membuat Website</h2>
<ol>
<li>Memesan Domain & Hosting</li>
<li>Install WordPress</li>
<li>Klaim Bonus free Theme & Plugins Premium</li>
<li>Desain</li>
</ol>
<h2>Layanan Shared Hosting di Rumahweb</h2>
<dl>
<dt>Unlimited S</dt>
<dd>- Rp17.900/bln</dd>
<dt>Unlimited M</dt>
<dd>- Rp29.900/bln</dd>
<dt>Unlimited L</dt>
<dd>- Rp49.900/bln</dd>
</dl>
</body>
</html>
Selanjutnya, kami akan membahas tentang hyperlink dalam HTML. Anda dapat menambahkan hyperlink ke dalam daftar yang telah dibuat sebelumnya. Namun, sebelum itu, kami akan menjelaskan apa itu hyperlink dalam seri belajar HTML bagian 4.
Apa itu Hyperlink?
Hyperlink atau yang disebut HTML link adalah fungsi yang digunakan untuk mengarahkan sebuah teks/gambar menuju dokumen lain. Misalnya, dalam situs www.rumahweb.com ketika kita klik menu ‘Domain’, kita akan diarahkan ke halaman Domain.
Hyperlink ditulis dengan tag <a> atau yang kenal sebagai anchor (jangkar). Tag <a> selalu diikuti oleh atribut href, di mana dalam href (hypertext reference) kita akan mengisikan alamat yang akan dituju ketika teks/gambar di klik. Berikut penulisan tag secara lengkap:
<a href"#"> teks atau gambar </a>;<a href="https://www.rumahweb.com">Klik Disini</a> Untuk menuju ke situs Rumahweb.com
Secara default, link akan muncul sebagai berikut di semua browser:
- Link yang belum dikunjungi diberi garis bawah berwarna biru
- Link yang telah dikunjungi diberi garis bawah berwarna ungu
- Yang terakhir, link yang aktif diberi garis bawah berwarna merah
Jenis Hyperlink pada HTML
Ada dua jenis hyperlink pada HTML, yaitu Absolute URL dan Relative URL. Berikut penjelasan selengkapnya:
Absolute URL
Yaitu penulisan alamat link yang dituju secara lengkap (menyertakan nama website lengkap https://rumahweb.com/) di dalam attribut href. Sebagai contoh:
<h2>Absolute URL</h2>
<p><a href="https://www.rumahweb.com/">Rumahweb.com</a></p>Relative URL
Yaitu penulisan alamat link yang dituju tidak perlu lengkap. Jika berada di folder yang sama cukup ditulis nama file, contohnya:
<p><a href="info.php">Melihat PHPinfo</a></p>Ketika kita klik “Melihat PHPinfo”, kita akan menuju ke halaman /info.php pada domain utamanya. Sedangkan jika ingin menuju ke file yang berada didalam folder, kita tulis nama folder/namafile. Sebagai contoh:
<p><a href="folder/info.php">Melihat PHPinfo</a></p>Ketika kita klik “Melihat PHPinfo”, kita akan menuju ke https://www.namadomain.com/folder/info.php
Cukup mudah bukan belajar Hyperlink pada HTML? Selanjutnya, kita akan menambahkan attribut target pada hyperlink. Berikut beberapa attribut yang dapat digunakan.
- _self – Default. Membuka dokumen di jendela/tab yang sama dengan saat diklik
- _blank – Membuka dokumen di jendela atau tab baru
- _parent – Membuka dokumen di bingkai induk
- _top – Membuka dokumen di seluruh badan jendela
Berikut contoh penerapannya:
<a href="https://www.rumahweb.com/" target="_blank">Rumahweb.com</a>Hyperlink menggunakan gambar
Selain membuat hyperlink dari teks, kita juga bisa membuat hyperlink dari gambar dengan style. Sebagai contoh:
<a href="https://rumahweb.com">
<img src="https://img.rwbcdn.net/logo/logo-rumahweb_900x178.png" alt="Rumahweb Indonesia" style="width:320px;height:auto;">
</a>
Keterangan:
- a href: adalah tag hyperlink
- img src: tag untuk memanggil sumber berupa gambar
- alt: digunakan memberikan deskripsi teks alternatif, ketika gambar tidak bisa dimuat.
- style: tag untuk menambah style gambar
Kesimpulan
List adalah elemen pada HTML yang sangat berguna bagi kita untuk menyajikan informasi atau data dalam bentuk yang terstruktur dan mudah dibaca. Sedangkan hyperlink berfungsi untuk memberikan tautan pada text atau gambar, agar ketika diakses mengarah ke URL yang dituju.
Dengan memahami cara membuat list dan hyperlink, kita akan dapat membuat halaman web yang lebih informatif dan menarik.
Demikian tadi series belajar HTML bagian ke 4 yang membahas tentang list dan hyperlink. Simak terus series belajar HTML selanjutnya yang segera kami terbitkan. Semoga bermanfaat.
