Link HTML

Nah sekarang ini saya akan membahas bagaimana cara menggunakan Link pada dokument HTML. Tag yang digunakan pada bagian ini adalah tag <a>, dan juga menggunakan atribut href untuk pendefinisian lokasi file HTML yang akan di link.

Link dalam dokumen HTML pun terbagi menjadi 3 yaitu Link Relatif, Link absolut, dan Link dalam dokumen yang sama.

Link Relatif

Link ini biasanya digunakan apabila kita hanya melink dokumen HTML pada komputer yang sama. Misalnya kita mempunyai  file HTML yaitu file.html yang akan di link dan terletak pada direktory yang sama. Maka link yang digunakan adalah:

<a href=”file.html”>File aku</a>

Link absolut

Link ini akan digunakan apabila kita ingin melink suatu dokumen HTML, akan tetapi dokumen HTML itu terletak pada website lain. Misal terletak di website wordpress dengan nama imron02.wordpress.com. Maka kodenya adalah:

<a href=”http://www.imron02.wordpress.com”>Imron Belajar HTML</a>


Link dalam dokumen sama

Link ini biasanya digunakan untuk melink dari dokumen HTML yang isinya itu panjang sekali. Sebagai contoh yang memakai ini adalah wikipedia. Atau melink dari suatu daftar isi. Contoh link yang digunakan adalah:

<a href=”#namabagian”>Bagian dari…</a>

Oke sekarang saya akan mencotohkan dari penggunaan jenis-jenis link di atas.

<html>
<body>
<p><a href=”file1.html”>FIle aku</a> merupakan link pada file1.html. Dengan syarat sudah membuat file1.html sebelumnya dan menyimpannya satu direktory pada file html pe link-nya.</p>
<p><a href=”http://www.google.com”>Google</a&gt; Ini adalah link menuju website Google.</p>
</body>
</html>

Hasilnya:

FIle aku merupakan link pada file1.html. Dengan syarat sudah membuat file1.html sebelumnya dan menyimpannya satu direktory pada file html pe link-nya.

Google Ini adalah link menuju website Google.

Membuka link pada tab baru

Oke sekarang saya akan menjelaskan bagaimana cara membuka link pada tab baru saat kita mengklik link tersebut. Jadi kesimpulannya, pengunjung web kita tidak akan meninggalkan web kita. Contoh:

<html>
<body>
<a href=”http://www.google.com&#8221; target=”_blank”>http://www.google.com</a&gt;
</body>
</html>

Hasilnya:

www.google.com

Link pada lokasi yang sama

Nah disini saya akan membahas cara untuk melink pada halaman yang sama (halaman yang itu itu juga).Hehe
Contoh:

<html>
<body>
<p><a name=”atas”>
<a href=”#B3″>Lihat bagian 3</a>
</a>
</p>
<b>Bagian 1</b>
<p>Bagian ini adalah tentang titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titiktitik titik titiktitik titik titiktitik titik titiktitik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titiktitik titik titik titik titik titik titik titik titik titik titik titiktitik titik titiktitik titik titik titik titik titiktitik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titiktitik titik titik titik titik titik titik titik titiktitik titik titiktitik titik titik</p>
<b>Bagian 2</b>
<p>Bagian ini adalah tentean titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik </p>
<a name=”B3″>
<b>Bagian 3</b>
</a>
<p>Bagian ini adalah tentean titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik </p>

<a href=”#atas”>Kembali ke atas</a>
</body>
</html>

Hasilnya:


Lihat bagian 3
Bagian 1
Bagian ini adalah tentang titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titiktitik titik titiktitik titik titiktitik titik titiktitik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titiktitik titik titik titik titik titik titik titik titik titik titik titiktitik titik titiktitik titik titik titik titik titiktitik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titiktitik titik titik titik titik titik titik titik titiktitik titik titiktitik titik titik
Bagian 2
Bagian ini adalah tentean titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik

Bagian 3
Bagian ini adalah tentean titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik titik
Kembali ke atas

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s