Pemrogaman WEB dengan HTML, Link HTML, Tag anchor, Link, Membuka Link untuk Window Baru, Link pada Lokasi di Halaman yang Sama, Keluar Dari Suatu Frame, Link yang Tidak Digaris Bawahi, Mailto
Tag anchor
Kelebihan utama dari dokumen HTML adalah kemampuannya untuk memberikan link dari suatu teks dan/atau gambar menuju ke dokumen atau bagian lain dalam suatu dokumen. Browser web akan menyorot (‘highlight’) teks atau gambar yang didefinisikan sebagai link dengan warna dan/atau garis bawah untuk menunjukan bahwa itu adalah hypertext link (sering diperpendek dengan hyperlink atau link saja).
Dokumen HTML menggunakan hyperlink (anchor) untuk menghubungkan kepada dokumen lain dalam web.
HTML menggunakan tag <a> untuk membuat suatu link kepada dokumen lain dalam web. Sintak dari penghubungan dalam HTML adalah dengan menggunakan tag <a>, atribut href digunakan untuk mendefinisikan lokasi link.
Anchor berikut menunjukan Microsoft:
<a href=”http://wongbanaran.blogspot.com”>This teks is displayed</a>
Ada tiga jenis link:
- Link relative
- Link absolute
- Link dalam dokumen yang sama
Perbedaannya hanya pada letak dokumen yang menjadi linknya, berada pada computer yang sama atau tidak.
Link Relatif: Dibuat apabila anda membuat suatu link pada page anda ke page lain pada computer yang sama, tidak memerlukan menggunakan alamat internet yang lengkap. Jika dua page pada direktori yang sama, anda dapat menuliskan nama file html seperti berikut:
<a href=”file_2.html”>Berikutnya</a>
Link absolute: Dibuat apabila anda membuat link ke page web lain yang berada pada web site lain di internet. Dalam hal ini anda harus menuliskan alamay internet secara lengkap. Berikut adalah contohnya:
<a href=” http://wongbanaran.blogspot.com ”>Teks yang ditampilkan</a>
Link ke Bagian Lain Dalam Dokumen: Link jenis ini dibuat apabila untuk dokumen yang panjang sekali, sehingga jika ditampilkan dalam browser web akan mengharuskan kita melakukan scroll layar berulang-ulang.
Navigasi untuk penelusuran dokumen dapat dimudahkan dengan membuat link antar bagian, dengan menandai setiap bagian tersebut dengan memberinya nama. Sehingga pada beberapa tempat didalam dokumen aka nada bagian yang bernama, dan dibagian lainnya dapat diletakkan link untuk menuju bagian-bagian tersebut.
Umumnya teknik ini diimplementasi pada dokumen-dokumen yang menampilkan daftar isi dokumen tersebut, kemudian pada daftar isi tesebut dimungkinkan untuk diklik langsung menuju ke isinya secara langsung.
Member nama suatu bagian dalam dokumen:
ü Letakkan kursor pada baris atau teks yang menjadi awal dari bagian tersebut
ü Sisipkan nama bagin tersebut dengan; <a name=”namabagian”>
Membuat link yang menuju pada bagian dokumen yang sama dengan cara yang sama seperti link absolute atau lnik relative, hanya saja nama dokumen dalam ling diganti dengan nama bagian dokumen dengan sebelum nama tersebut ditambah dengan #.
Berikut adalah contoh member link tersebut:
<a href=”#namabagian”>Bagian tentang link</a>
Tanda # menunjukkan bahwa link tersebut ditujukan kepada linkdalam dokumen yang sama.
Link HTML
Contoh ini mendemonstrasikan bagaimana untuk menambahkan beberapa link ke dalam suatu dokumen HTML.
<!—coba_linkà
<html>
<body>
<p>
<a href=coba_entitas2.html”>
Teks ini</a> merupakan link kepada suatu page dengan nama soba_entitas2.html paa directori yang sama.
</p>
<p>
<a href=” http://wongbanaran.blogspot.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 mendemontrasikan bagaimana untuk melakukan link kepada page lain dengan membukanya pada window baru, sehingga pengunjung tidak harus meninggalkan website kita.
<!—coba_linkbaru.htmlà
<html>
<body>
<a href=” http://wongbanaran.blogspot.com ” target=”_blank”>Ngoprekkompi</a>
<p>
Jika anda menentukan atribut link to “_blank”, link akan dibuka pada window baru.
</p>
</body>
</html>
Link pada Lokasi di Halaman yang Sama
Contoh ini Mendemontrasikan bagaimana menggunakan suatu link untuk melompat pada bagian lain pada halaman yang sama.
<html>
<body>
<p>
<a name=”top”>
<a href=”#B4”>
Lihat BAB 4.
</a>
</a>
</p>
<p>
Bab 1 ini menjelaskan bla…bla…bla… Bab 1 ini menjelaskan bla…bla…bla… Bab 1 ini menjelaskan bla…bla…bla… Bab 1 ini menjelaskan bla…bla…bla… Bab 1 ini menjelaskan bla…bla…bla… Bab 1 ini menjelaskan bla…bla…bla… Bab 1 ini menjelaskan bla…bla…bla… Bab 1 ini menjelaskan bla…bla…bla… Bab 1 ini menjelaskan bla…bla…bla… Bab 1 ini menjelaskan bla…bla…bla… Bab 1 ini menjelaskan bla…bla…bla… Bab 1 ini menjelaskan bla…bla…bla… Bab 1 ini menjelaskan bla…bla…bla… Bab 1 ini menjelaskan bla…bla…bla… Bab 1 ini menjelaskan bla…bla…bla… Bab 1 ini menjelaskan bla…bla…bla… Bab 1 ini menjelaskan bla…bla…bla… Bab 1 ini menjelaskan bla…bla…bla… Bab 1 ini menjelaskan bla…bla…bla… Bab 1 ini menjelaskan bla…bla…bla… Bab 1 ini menjelaskan bla…bla…bla… Bab 1 ini menjelaskan bla…bla…bla… Bab 1 ini menjelaskan bla…bla…bla…
</p>
<h2>bab 2</h2>
<p>
Bab 2 ini menjelaskan bla…bla…bla… Bab 2 ini menjelaskan bla…bla…bla… Bab 2 ini menjelaskan bla…bla…bla… Bab 2 ini menjelaskan bla…bla…bla… Bab 2 ini menjelaskan bla…bla…bla… Bab 2 ini menjelaskan bla…bla…bla… Bab 2 ini menjelaskan bla…bla…bla… Bab 2 ini menjelaskan bla…bla…bla… Bab 2 ini menjelaskan bla…bla…bla… Bab 2 ini menjelaskan bla…bla…bla… Bab 2 ini menjelaskan bla…bla…bla… Bab 2 ini menjelaskan bla…bla…bla… Bab 2 ini menjelaskan bla…bla…bla… Bab 2 ini menjelaskan bla…bla…bla… Bab 2 ini menjelaskan bla…bla…bla… Bab 2 ini menjelaskan bla…bla…bla… Bab 2 ini menjelaskan bla…bla…bla… Bab 2 ini menjelaskan bla…bla…bla… Bab 2 ini menjelaskan bla…bla…bla… Bab 2 ini menjelaskan bla…bla…bla… Bab 2 ini menjelaskan bla…bla…bla… Bab 2 ini menjelaskan bla…bla…bla… Bab 2 ini menjelaskan bla…bla…bla… Bab 2 ini menjelaskan bla…bla…bla… Bab 2 ini menjelaskan bla…bla…bla… Bab 2 ini menjelaskan bla…bla…bla…
</p>
<h2>Bab 3</h2>
<p>
Bab 3 ini menjelaskan bla…bla…bla… Bab 3 ini menjelaskan bla…bla…bla… Bab 3 ini menjelaskan bla…bla…bla… Bab 3 ini menjelaskan bla…bla…bla… Bab 3 ini menjelaskan bla…bla…bla… Bab 3 ini menjelaskan bla…bla…bla… Bab 3 ini menjelaskan bla…bla…bla… Bab 3 ini menjelaskan bla…bla…bla… Bab 3 ini menjelaskan bla…bla…bla… Bab 3 ini menjelaskan bla…bla…bla… Bab 3 ini menjelaskan bla…bla…bla… Bab 3 ini menjelaskan bla…bla…bla… Bab 3 ini menjelaskan bla…bla…bla… Bab 3 ini menjelaskan bla…bla…bla… Bab 3 ini menjelaskan bla…bla…bla… Bab 3 ini menjelaskan bla…bla…bla… Bab 3 ini menjelaskan bla…bla…bla… Bab 3 ini menjelaskan bla…bla…bla… Bab 3 ini menjelaskan bla…bla…bla… Bab 3 ini menjelaskan bla…bla…bla… Bab 3 ini menjelaskan bla…bla…bla… Bab 3 ini menjelaskan bla…bla…bla… Bab 3 ini menjelaskan bla…bla…bla… Bab 3 ini menjelaskan bla…bla…bla… Bab 3 ini menjelaskan bla…bla…bla… Bab 3 ini menjelaskan bla…bla…bla… Bab 3 ini menjelaskan bla…bla…bla… Bab 3 ini menjelaskan bla…bla…bla… Bab 3 ini menjelaskan bla…bla…bla… Bab 3 ini menjelaskan bla…bla…bla… Bab 3 ini menjelaskan bla…bla…bla…
</p>
<a name=”B4”>
<h2>Bab 4</h2>
</a>
<p>
Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla… Bab 4 ini menjelaskan bla…bla…bla…
</p>
<a href=”#top”>Kembali ke Atas</a>
</body>
</html>
Keluar Dari Suatu Frame
Contoh ini mendemontrasikan bagaimana keluar dari suatu Frame jika sit anda dikunci pada suatu frame.
<!—coba_linkoutframe.htmlà
<html>
<body>
<p>Dikunci dalam sebuah Frmae?</p>
<a href=” http://wongbanaran.blogspot.com ” target=”top”> Klik di sini </a>
</body>
</html>
Link yang Tidak Digaris Bawahi
Contoh ini mendemontrasikan bagaimana membuat suatu link yang tidak di garis bawahi.
<!—coba_linkgaris.htmkà
<html>
<body>
<a href=” http://wongbanaran.blogspot.com ” style=”text-decoration:none”>INI SEBUAH LINK</a>
</body>
</html>
Mailto
Contoh ini mendemontrasikan bagaimana untuk membuat link pada suatu pesan mail (tidak akan bisa bekerja jika mail client tidak dipasang).
<!—coba_linkemail.htmlà
<html>
<body>
<a href=”mailto:ngoprekkompi@gmail.com?Subject=Tanya Jadwal Kursus!”>Kirim Email !</a>
</body>
</html>
