Membuat Link dan List Dengan HTML

Link adalah sebuah url atau alamat yang dapat diakses atau diklik selain itu juga link dapat disebut dengan penghubung antara satu page dengan page lainnya dalam sebuah halaman web sedangkan list biasa digunakan untuk sebuah penjelasan dengan ada penomoran atau bullet selain itu list juga digunakan untuk membuat menu atau navigasi baik di header atau di sidebar. Berikut dibawah ini penjelasan tentang link dan list serta dengan menu navigasinya.

a

a adalah tag html yang khusus dibuat untuk membuat link atau tautan yang dapat mengakses page/internal atau url/eksternal di sebuah website a harus disertai dengan href yang hampir sama dengan fungsi src yaitu source atau alamatnya.

<!DOCTYPE html>
<html>
<head>
     <title>Page Title</title>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- tag meta, link, script, style, base, title -->
</head>
<body>

<a href="page.html"> ... page ...</a>
<a href="http://www.codeberkas.xyz"> ... url ...</a>
<a href="../../www/folder"> ... folder ...</a>

</body>
</html>

ul, ol dan li

ul adalah kependekan dari unordered list yang berarti list yang berisi bullet yaitu bulat, kotak atau bulat bolong. ol adalah kependekan dari ordered list yang berisi penomoran atau angka romawi atau huruf dengan cara ditambah atribut type didepannya dengan nilai 1, A, a, I, i. li adalah list item dari ul dan ol yang digunakan untuk membuat item-item kepada keduannya sebagai contoh buatlah sebuah berkas bernama list.html dan code seperti dibawah ini.

<!DOCTYPE html>
<html>
<head>
     <title>Page Title</title>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- tag meta, link, script, style, base, title -->
</head>
<body>

<ul>
  <li>... list 1 ...</li>
  <li>... list 2 ...</li>
  <li>... list 3 ...</li>
</ul>

<ol>
  <li>... list 1 ...</li>
  <li>... list 2 ...</li>
  <li>... list 3 ...</li>
</ol>

</body>
</html>

dl, dt, dd

dl adalah definisi dari deskripsi list (description list), sedangkan dt adalah definisi judul (defines the term), sedangkan dengan dd adalah penjelasan deskripsi (describes each), sebagai contoh buatkan berkas deskripsi.html dibawah ini.

<!DOCTYPE html>
<html>
<head>
     <title>Page Title</title>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- tag meta, link, script, style, base, title -->
</head>
<body>

<dl>
  <dt>... judul 1 ...</dt>
  <dd>... penjelasan 1 ...</dd>
  <dt>... judul 2 ...</dt>
  <dd>... penjelasan 2 ...</dd>
  <dt>... judul 3 ...</dt>
  <dd>... penjelasan 3 ...</dd>
</dl>

</body>
</html>

menu dan menuitem

menu dan menuitem umumnya digunakan pada context menu atau bisa dibilang untuk membuat menu klik kanan sedangkan untuk menu navigasi dan sidebar umumnya menggunakan ul dan li, untuk contoh buatkan berkas bernama menu.html seperti code dibawah ini.

<!DOCTYPE html>
<html>
<head>
     <title>Page Title</title>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- tag meta, link, script, style, base, title -->
</head>
<body>

<menu type="context">
  <menuitem label="Share" onclick="window.location.href='http://www.codeberkas.xyz';" icon="share.png"></menuitem>
  <menuitem label="About" onclick="window.location.assign('about.html');" icon="ico_reload.png"></menuitem>
  <menuitem label="Refresh" onclick="window.location.reload();" icon="ico_reload.png"></menuitem>
</menu>

</body>
</html>