Belajar HTML Part 11 - Tautan (Link)

Assalamu'alaikum Warahmatullaahi Wabarakatuh

Sebelumnya kita telah mempelajari kombinasi HTML dengan CSS. Pada tutorial kali ini kita akan mempelajari tentang tautan (link). Sebuah link atau tautan  menghubungkan sebuah halaman website ke halaman lain melalui sebuah klik. Syntax dasar dari sebuah link adalah :

<a href="alamat tautan">Teks</a>

Misal, coba ketik script berikut :

<a href="http://batcweber.blogspot.com">Kunjungi blog kami</a>

Simpan dan jalankan. Berikut tampilannya :

File yang kita buat akan membentuk sebuah link yang ketika kita klik, akan mengarahkan pada halaman tertentu. 

Ada beberapa hal yang harus kita ketahui tentang link. Yaitu :

1. Local Link

Local link dibuat untuk menghubungkan sebuah halaman ke halaman lain yang terletak pada server yang sama. Contohnya, coba Anda ketik script berikut :

<a href="halaman 2.html">ke halaman 2</a>

Simpan script di atas dengan nama halaman 1.html. Kemudian buat file lain dengan script sebagai berikut :

<a href="halaman 1.html">ke halaman 1</a>

Simpan file tersebut dengan nama halaman 2.html. Kemudian jalankan salah satu dari file tersebut. Maka akan ada 2 file berisi tautan yang ketika kita klik akan saling mengarahkan satu sama lain.

2. Link Styling

Sebuah link memiliki cara khusus ketika kita akan menyisipinya style. Ada 4 jenis link yang bisa kita sisipi style.

• Link : Link biasa. style default-nya berwarna biru dan bergaris bawah.
• Visited : Link yang sudah dikunjungi. Default-nya berwarna ungu dan bergaris bawah.
• Hover : Link ketika mous berada di atasnya.
• Active : Link yang sedang aktif. Default-nya berwarna merah dan bergaris bawah.

Untuk mengaturnya, kita bisa menyisipkannya dalam internal ataupun external CSS dengan script seperti berikut :

a:link {masukkan atribut dan nilai di sini} a:visited {masukkan atribut dan nilai di sini} a:hover {masukkan atribut dan nilai di sini} a:active {masukkan atribut dan nilai di sini}

3. Atribut Target

Sebuah link bisa disisipi atribut target. Yaitu di mana link tersebut akan dibuka. Ada 5 nilai dalam atribut target.

• _blank : membuka tautan di tab baru
• _self : membuka tautan di frame yang sama
• _top : membuka tautan di frame teratas
• _parent : membuka tautan di frame induk
• framename : membuka tautan di nama frame secara spesifik

Contoh syntax dari atribut target adalah sebagai berikut :

<a href="http://batweber.blogspot.co.id" target="_blank">Kunjungi blog kami</a>

Dengan syntax di atas, link yang kita tuju akan dibuka pada tab baru.

4. Menggunakan gambar sebagai link.

Hal yang sering dilakukan adalah menjadikan sebuah gambar menjadi link. Caranya adalah kita tinggal memasukkan tag <img> di dalam tag <a>. Lebih jelasnya ikuti langkah berikut:

1. Buka kembali folder yang berisi halaman 1.html dan halaman 2.html yang tadi kita buat.

2. Cari sebuah gambar, kemudian tempatkan gambar tersebut pada folder yang sama dengan kedua file di atas. Beri nama gambar tersebut. Misal namanya batweber.jpg

3.  Lalu ganti script pada halaman 1 dengan script berikut :

<a href="halaman 2.html">
 <img src="batweber.jpg" />
</a>

Anda tinggal merubah tulisan yang tadi Anda buat (tulisan "ke halaman 2") dengan tag <img>. Kemudian jalankan file tersebut pada web browser Anda. Jangan lupa ganti batweber.jpg dengan file gambar yang Anda tambahkan. Berikut tampilan file tersebut :

Gambar yang muncul di atas merupakan gambar saya yang bernama batweber.jpg. Gambar yang muncul pada halaman Anda tentu akan menyesuaikan. Coba klik gambar tersebut, maka kita Anda akan di arahkan pada file halaman 2.html

5. Mengarahkan tautan ke bagian tertentu pada halaman yang sama(Bookmark)

Terakhir, kita akan coba membuat link yang mengarah ke bookmark atau kepada bagian tertentu pada halaman yang sama. Untuk jelasnya, coba ketik script di bawah :

<a id="atas" href="#bawah">Klik untuk menuju ke bawah</a> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> 
<a id="bawah" href=#atas>Klik untuk kembali ke atas</a>

Yang perlu diperhatikan adalah atribut id dan href. id adalah bagian yang dituju, dan href adalah link yang akan mengarahkan kita pada bagian tersebut. Sekarang simpan file tersebut. Misalnya dengan nama bookmark.html. Kemudian jalankan pada web browser. Berikut tampilannya :

Ketika kita klik tulisan tersebut, maka kita akan diarahkan pada bagian bawah file seperti tampilan di bawah :

Begitu pun sebaliknya, ketika kita klik bagian bawah, kita akan diarahkan pada bagian atas file.

Demikian Seri Belajar HTML  untuk membuat tautan/link.  Semoga artikel ini bermanfaat bagi Anda. Terima kasih, wassalamu'alaikum warahmatullaahi wabarakatuh.