Tutorial / Cara Membuat Berbagai Macam Link HTML Lengkap!!

Posted on

Postingan kali ini melanjutkan artikel tentang Pengertian, Kelebihan, Jenis Dan Kegunaan Link HTML, yang akan membahas contoh penulisan link dalam HTML. Disebutkan bahwa Kelebihan utama dari dokumen HTML adalah kemampuannya untuk memberikan link dari satu teks dan/atau gambar menuju dokumen atau bagian lain dalam suatu dokumen. Dengan HTML menggunakan hyperlink (anchor) untuk menghubungkan kepada dokumen lain dalam web.

link

Link

Contoh dibawah ini digunakan untuk mendemonstrasikan bagaimana menambahkan beberapa link ke dalam suatu dokumen HTML. Lihat hasil gambar dibawah ini:

 6.5

Lihat Source code

<!–coba_link.html–>
<html>
<body>
<p>
<a href=”coba_entitas2.html”>
Teks ini</a> merupakan link kepada suatu page dengan nama coba_entitas2.html pada web site yang sama.
</p>
<p>
<a href = “http://www.microsoft.com”>
This text</a> is a link to a page on the World Wide Web.
</p>
</body>
</html>

Membuka Link untuk Window Baru

Contoh ini mendemonstrasikan bagaimana untuk melakukan link kepada page lain dengan membukanya pada window baru, sehingga pengunjung tidak harus meninggalkan web site kita. Lihat hasil gambar dibawah ini:

6.6

Lihat Source code

<!- coba_linkbaru.html->
<html> <body>
<a href = ”http : //www.microsof t. com” target = “_blank”>Microsof tc/a>
<P>
Jlka Anda menentukan atribut link to “_blank”, link akan dibuka pada window baru.
</p>
</body>
</html>

Link pada Lokasi di Halaman yang Sama

Contoh ini mendemonstrasikan bagaimana menggunakan suatu link untuk melompat pada bagian lain pada halaman yang sama.Lihat hasil gambar dibawah ini:

6.7

Lihat Source code

< ! – – coba__l inksama. html – – >
<html>
<body>
<p>
<a name=”top”>
<a href=”#B4″>
Lihat Bab 4 .
</a>
</a>
</p>
<p>
<h2>Bab l</h2>
<p> Bab 1 ini menjelaskan ba bla bla.
Bab 1 ini menjelaskan ba bla bla. Bab 1 ini menjelaskan ba bla bla. Bab 1 ini menjelaskan ba bla bla. Bab 1 ini menjelaskan ba bla bla. Bab 1 ini menjelaskan ba bla bla. Bab 1 ini menjelaskan ba bla bla. Bab 1 ini menjelaskan ba bla bla. Bab 1 ini menjelaskan ba bla bla. Bab 1 ini menjelaskan ba bla bla. </p> <h2>Bab2</h2>
<p> Bab 2 ini menjelaskan ba bla bla. Bab 2 ini menjelaskan ba bla bla. Bab 2 ini menjelaskan ba bla bla. Bab 2 ini menjelaskan ba bla bla.’ Bab 2 ini menjelaskan ba bla bla. Bab 2 ini menjelask^ff ba bla bla. Bab 2 ini menjelaskan ba bla bla. Bab 2
ini menjelaskan ba bla bla. Bab 2 ini menjelaskan ba bla bla.
</p>
<h2>Bab3</h2>
<p> Bab 3 ini menjelaskan ba bla bla. Bab 3 ini menjelaskan b& bla bla. Bab 3 ini menjelaskan ba bla bla. Bab 3 ini menjelaskan ba bla bla. Bab 3 ini menjelaskan ba bla bla. Bab 3 ini menjelaskan ba bla bla. Bab 3 ini menjelaskan ba bla bla. Bab 3
ini menjelaskan ba bla bla. Bab 3 ini menjelaskan ba bla bla.
</p>
<a narae=”B4″>
<h2>Bab4</h2>
</a>
<p> Bab 4 ini menunjukkan tujuan dari link dalam satu halaman.
Bab 4 ini menunjukkan tujuan dari link dalam satu halaman. Bab 4 ini menunjukkan tujuan dari link dalam satu halaman. Bab 4 ini menunjukkan tujuan dari link dalam satu halaman. Bab 4 ini
menunjukkan tujuan dari link dalam satu halaman. Bab 4 ini
menunjukkan tujuan dari link dalam satu halaman. Bab 4 ini
menunjukkan tujuan dari link dalam satu halaman. </p>
<a href=”#top”>Kembali ke atas</a>
<h2>Bab5</h2>
<p> Bab ini menjelaskan ba bla bla</p>
<h2> Bab 6 </h2>
<p> Bab ini menjelaskan ba bla bla </p>
<h2> Bab 7 </h2>
<p> Bab ini menjelaskan ba bla bla </p>
<h2> Bab 8 </h2>
<p> Bab ini menjelaskan ba bla bla </p>
<h2> Bab 9 </h2>
<p> Bab ini menjelaskan ba bla bla </p>
<h2> Bab 10 </h2>
<p> Bab ini menjelaskan ba bla bla </p>
</body>
</html>

Keluar dari Suatu Frame

Contoh ini mendemonstrasikan bagaimana keluar dari suatu frame jika site Anda dikunci pada suatu frame.Lihat hasil gambar dibawah ini:

6.8

Lihat Source code

< I —coba_l inkout f rame . html <html>
<body>
<p>Dikunci dalam sebuah frame?</p>
<a href=”http ://www. w3schools . com/” target = “__top”>Klik di siniI</a>
</body>
</html>