Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / HTML

Materi HTML #5 : Attribute Link HTML

Oleh Miftakhul Nur Choirul W.S.S Posting Komentar

Selain attribute href, kemarin kita sudah mencoba menggunakan atribut pada link yaitu (target="_blank"). kali ini kita akan mempelajari lebih lanjut tentang attribute yang biasanya digunakan pada link, disini saya akan menggunakan sedikit CSS. 

Dalam membuat tag link terdapat juga tambahan atribut untuk membuat link pada html, seperti target, title, rel, media, dan masih banyak lagi. kemarin kita sudah mempelajari dua attibute, yaitu href  dan target. Kita akan membahas lebih lanjut dulu tentang attribute href dan target. Sebelum memulai saya akan menjelaskan dulu arti dari tanda # pada nilai href.

Yuk langsung saja :)

HTML Logo

Penggunaan tanda # nilai dari href

Penggunaan tanda # (pagar) pada nilai dari href tidak akan membuka apa apa, tanda # ini digunakan untuk sampel atau contoh saja. 

Format kode :

<a href="#"> nama link </a>

Link Anchor

Kegunaan lain dari tanda # yaitu untuk membuat link anchor. Link anchor ini merupakan link yang digunakan untuk menuju ke suatu elemen tertentu yang masih dalam satu dokumen. Dengan kode awalan mengisi alamat URL dengan tanda # , kemudian pada teks yang akan dituju di dalam tag diberi attribute id.

Format kode :

<a href="#Penutup"> nama link </a>
<h1 id="penutup"> nama teks </h1>

Cara membuat Link Anchor 

<!DOCTYPE html> 
<html>
<head>
    <title> Link Anchor HTML </title>
</head>
<body>
    <nav>
      <a href="Index.html"> Homepage </a> &nbsp &nbsp
      <a href="Tabel.html"> Tabel </a> &nbsp &nbsp
      <a href="Orderedlist.html"> Ordered List </a> &nbsp &nbsp
      <a href="Internal Link.html"> Internal Link </a> &nbsp &nbsp
      <a href="External Link.html" target="_blank"> External Link </a>&nbsp &nbsp
    </nav> 

<h1> Link Anchor </h1>
<h2> ----- Pengantar ----- </h2>

   <p> Ini merupakan link anchor, silahkan coba klik link berikut ini:
      <a href="#kebawah"> Bawah </a> yang nantinya akan dibawa ke bagian bawah dari dokumen ini.    </p><hr/>
    
<h2> Apa itu Anchor (Jangkar)? </h2>

    <p> Anchor dalam bahasa indonesia artinya jangkar. Di dalam html fungsi anchor untuk membuat link yang bisa membawa kita menuju ke tujuan anchor (jangkar) itu yang masih dalam satu dokumen maupun untuk membuka dokumen yang lain, kemudian mengaitkan dengan anchor.</p>
    <p> Anchor umumnya dibuat dengan tanda # (pagar), lalu dengan nama dari elemen yang ingin dituju. Contohnya #kebawah maka link anchor tersebut akan mencari HTML yang memiliki id `kebawah',dan akan menuju ke tempat id tersebut.</p>

<h2 id="kebawah">----- Penutup ----- </h2>

    <p> Bagian Ini merupakan penutup dari dokumen html ini, perhatikan pada bagian heading, disana menggunakan id="kebawah" yang artinya elemen ini menjadi tujuan dari link anchor. Di sana kita menggunakan id="penutup". Maka elemen ini akan menjadi tujuan dari anchor link.</p> <<br/>
 
    <a href="#top" style="padding: 15px; font size: 20px; background-color: black; color: white;"> ^ </a>

    <footer>
        <a href="Index.html"> Home </a> &nbsp &nbsp
        <a href="About.html"> About </a>
      <div> Copyright &copy; 2021-syteekno </div>
    </footer>
</body>
</html>

Cara membuat Link dengan Attribute 


Attribute Target

Attribute target digunakan untuk menentukan tempat untuk membuka dokumen dari link. Berikut beberapa value dari target :

  • _blank : digunakan untuk membuka link pada jendela atau tab baru.
  • _self : digunakan untuk membuka link dari halaman itu sendiri (default target).
  • _top : digunakan untuk menuju bagian paling atas pada halaman.
  • _parent : digunakan untuk membuka link pada frame induk.

Kemarin kita sudah membuat link dengan attribute _blank, sekarang kita akan membuat link dengan attribute _top dan _parent

Attribute _top

Disini saya akan menggunakan file html yang sudah kita buat dengan nama file tabel, yang sudah saya isi deskripsi.

Format kode :

<a href="#" target="_top"> ke atas </a>

Kode HTML :

<!DOCTYPE html> 
<html>
<head>
    <title> Link Anchor HTML </title>
</head>
<body>
    <nav>
      <a href="Index.html"> Homepage </a> &nbsp &nbsp
      <a href="Tabel.html"> Tabel </a> &nbsp &nbsp
      <a href="Orderedlist.html"> Ordered List </a> &nbsp &nbsp
      <a href="Internal Link.html"> Internal Link </a> &nbsp &nbsp
      <a href="External Link.html" target="_blank"> External Link </a>&nbsp &nbsp
    </nav> 

<h1> Link Anchor </h1>
<h2> ----- Pengantar ----- </h2>

   <p> Ini merupakan link anchor, silahkan coba klik link berikut ini:
      <a href="#kebawah"> Bawah </a> yang nantinya akan dibawa ke bagian bawah dari dokumen ini.    </p><hr/>
    
<h2> Apa itu Anchor (Jangkar)? </h2>

    <p> Anchor dalam bahasa indonesia artinya jangkar. Di dalam html fungsi anchor untuk membuat link yang bisa membawa kita menuju ke tujuan anchor (jangkar) itu yang masih dalam satu dokumen maupun untuk membuka dokumen yang lain, kemudian mengaitkan dengan anchor.</p>
    <p> Anchor umumnya dibuat dengan tanda # (pagar), lalu dengan nama dari elemen yang ingin dituju. Contohnya #kebawah maka link anchor tersebut akan mencari HTML yang memiliki id `kebawah',dan akan menuju ke tempat id tersebut.</p>

<h2 id="kebawah">----- Penutup ----- </h2>

    <p> Bagian Ini merupakan penutup dari dokumen html ini, perhatikan pada bagian heading, disana menggunakan id="kebawah" yang artinya elemen ini menjadi tujuan dari link anchor. Di sana kita menggunakan id="penutup". Maka elemen ini akan menjadi tujuan dari anchor link.</p> <<br/>

    <a href="#" target="_top"> ke atas </a><br/>
 
    <a href="#top" style="padding: 15px; font size: 20px; background-color: black; color: white;"> ^ </a>

    <footer>
        <a href="Index.html"> Home </a> &nbsp &nbsp
        <a href="About.html"> About </a>
      <div> Copyright &copy; 2021-syteekno </div>
    </footer>
</body>
</html>


Atribut Title

Atribut dari title digunakan untuk membuat tooltips.

Tooltips merupakan pesan singkat dan informatif yang akan tampil saat link disentuh pointer atau saat kita menahan tap di hp.

Format kode :

<a href="#" title="informasi dari link"> nama link </a>

Kode HTML :

<!DOCTYPE html> 
<html>
<head>
    <title> HomePage </title>
</head>
<body>
    <h1> Selamat Datang Di Website Saya </h1>
    <nav>
      <a href="Index.html"> Homepage </a> &nbsp &nbsp
      <a href="Tabel.html"> Tabel </a> &nbsp &nbsp
      <a href="Orderedlist.html" title="Menuju halaman Orderedlist"> Ordered List </a> &nbsp &nbsp
      <a href="Internal Link.html"> Internal Link </a>
      <a href="External Link.html" target="_blank"> External Link </a>
    </nav>
        <p> Disini merupakan halaman awal situs (utama), yang juga berisi halaman direktori lain. Silahkan klik menu di atas (Tabel, Orderedlist,Internal link, dan About).    </p><hr/>
    <footer>
        <a href="Index.html"> Home </a> &nbsp &nbsp
        <a href="About.html"> About </a>
      <div> Copyright &copy; 2021-syteekno </div>
    </footer>
</html>


Attribute Rel

Attribute ini terletak di tag link yang digunakan untuk menghubungkan dokumen saat ini dengan dokumen external seperti menghubungkan html dengan css. 

Format kode :

<link rel="stylesheet" href="style.css"> 

Kode HTML :

<!DOCTYPE html> 
<html>
<head>
    <title> HomePage </title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1> Selamat Datang Di Website Saya </h1>
    <nav>
      <a href="Index.html"> Homepage </a> &nbsp &nbsp
      <a href="Tabel.html"> Tabel </a> &nbsp &nbsp
      <a href="Orderedlist.html" title="Menuju halaman Orderedlist"> Ordered List </a> &nbsp &nbsp
      <a href="Internal Link.html"> Internal Link </a>
      <a href="External Link.html" target="_blank"> External Link </a>
    </nav>
        <p> Disini merupakan halaman awal situs (utama), yang juga berisi halaman direktori lain. Silahkan klik menu di atas (Tabel, Orderedlist,Internal link, dan About).    </p><hr/>
    <footer>
        <a href="Index.html"> Home </a> &nbsp &nbsp
        <a href="About.html"> About </a>
      <div> Copyright &copy; 2021-syteekno </div>
    </footer>
</html>

Kode CSS :

.body {
background: silver;
margin: 10px;
}    


Sekian untuk pembahasan Attrbute link html. untuk attribute link yang lain akan saya posting dilain hari. Selanjutnya kita akan mempelajari tentang menampilkan gambar pada dokumen html.


Posting Komentar untuk " Materi HTML #5 : Attribute Link HTML"