Senin, 20 April 2015

HTML Link

Html menyediakan tag yang dapat mengarahkan kita pada halaman lain yakni dengan mengklik suatu teks atau gambar yang sudah diberi tag link. Tag link di definisikan dengan <a>…</a>. untuk menentukan arah tujuan link maka tag <a> memerlukan attribute href untuk menentukan tujuan halaman web.

<a href=”lokasi”> Nama link </a>

Kita akan mencoba membuat sebuah link, namun kita memerlukan file html lebih dari satu. Kita akan mencoba membuat 2 halaman dengan nama link-home.html dan link-profile.html

Contoh : link-home.html

<html>
<head>
<title>Home</title>
</head>
<body>
<a href="link-home.html">Home</a> | <a href="link-profile.html">Profile</a>
<hr />
<h1>Selamat datang di halaman Home</h1>
</body>
</html>

Penjelasan : Pada kode html di atas terdapat dua buah link :
Home : mengarah pada halaman itu sendiri
Profile : Mengarah pada halaman link-profile.html

Contoh : link-profile.html

<html>
<head>
<title>Profile</title>
</head>
<body>
<a href="link-home.html">Home</a> | <a href="link-profile.html">Profile</a>
<hr />
<h1>Selamat datang di halaman Profile</h1>
</body>
</html>

Penjelasan : Pada kode html di atas terdapat dua buah link :
Home : mengarah pada halaman link-home.html
Profile : Mengarah pada halaman itu sendiri


Hasil keluaran browser :



Penjelasan gambar : teks yang memiliki link akan berubah warnanya menjadi ungu. Itu menandakan teks telah memiliki link. Untuk mengatur warna default link, warna pada saat di klik, anda dapat menggunakan CSS (materi css akan di bahas pada blog ini dan sebaiknya anda menguasai HTML terlebih dahulu).

Bagaimana jika kita ingin mengarahkan sebuah link pada tab baru pada browser ?
Pada link terdapat attribute target dan nilai _blank yang berfungsi untuk membuat dokumen baru / tab baru pada browser, contoh :

<a href="lokasi" target="_blank">nama link</a>

Anda dapat mencobanya, selamat mencoba.

Bagaimana jika kita ingin membuat tujuan link pada sebuah URL ?
Anda dapat menambahkan http://domain/ atau anda dapat mengcopy URL tersebut pada browser lalu paste ke dalam nilai href.
Contoh : 

<a href="http://facebook.com/">

Selamat mencoba.

Tidak ada komentar:

Posting Komentar