Membuat Internal Link ke Bagian Lain Dokumen dengan Atribut id

belajar HTML dan CSS untuk pemula

Bila pada tutorial HTML Dasar kita sudah mempelajari cara membuat link ke halaman lain (baik link dengan alamat absolut ataupun alamat relatif), kita juga dapat membuat link ke bagian lain dari dokumen yang sama. Dalam Tutorial HTML Lanjutan saat ini kita akan mempelajari Membuat Internal Link ke Bagian Lain Dokumen dengan Atribut id.

Mengenal Atribut id dalam HTML

Atribut id ialah atribut yang dapat diberikan kepada tag apapun di dalam HTML. Atribut id bisa diibaratkan sebagai ‘identitas’ dari sebuah tag. Di pada sebuah halaman, tidak bisa ada atribut id yang sama, tetapi setiap tag tidak mesti mempunyai atribut id. Berikut ialah contoh penulisan atribut id pada beberapa tag HTML:

<p id="paragraf1"> </p>
<a id="situs1" href="http://www.infanthree.com">Digital Marketing Makassar</a>
<img id="gambar_logo" src="logo.jpg" />
<div id="footer"></div>

Atribut id sebagian besar dipakai untuk pengkodean dengan CSS atau pemograman JavaScript, dan atribut ini tidak akan berdampak apa-apa kedalam tampilan text HTML.

Cara Membuat Link ke Bagian Lain Dokumen HTML

Selain dipakai di dalam CSS dan JavaScript, atribut id juga dipakai di dalam HTML sebagai ‘penanda’ bagian dari halaman web.

Jika paragraf pertama dari halaman kita mempunyai id=”paragraf1”, maka kita dapat membuat link yang akan ‘memindahkan’ jendela web browser ke bagian “paragraf1”, dengan menuliskan:

<a href="#paragraf1">Kembali ke paragraf pertama</a>

Bila bagian itu dijalankan, web browser akan menampilkannya seperti link ‘normal’, tetapi saat user men-klik kalimat link itu, dia akan dipindahkan ke bagian halaman yang mempunyai id=”paragraf1”. Perhatikan bahwa di dalam tag <a>, kita memakai tanda pagar “#” untuk berpindah ke bagian lain halaman.

Syarat dari link itu dapat berfungsi yaitu di bagian lain halaman, perlu ada tag yang mempunyai atribut id=”paragraf1”.

Selain dipakai untuk pindah ke bagian lain pada halaman yang sama, kita juga dapat membuat link untuk halaman lain, dan sekalian memindahkan tampilan ke bagian tertentu. Untuk kebutuhan ini, kita cuma tinggal menambahkan tanda pagar pada akhir atribut href, seperti contoh berikut ini:

<a href="halaman_lain.html#paragraf1">Link ke paragraf pertama halaman lain</a>

Bila digabungkan dengan alamat absolut, kita dapat memandu visitor situs ke bagian tertentu situs lain, dengan syarat di bagian itu mempunyai tag id.

Sebagai contoh, berikut ialah kode HTML cara membuat link ke bagian lain dokumen HTML:

<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di Infanthree</title>
</head>
<body>
<h3 id="judul1">Saya sedang belajar HTML di Infanthree.com</h3>
<p id="paragraf1">HTML ialah singkatan dari Hypertext Markup Language. 
Disebut hypertext sebab di dalam HTML sebuah text biasa bisa 
berfungsi lain, kita bisa membuatnya jadi link yang bisa 
berpindah dari satu halaman ke halaman lainnya dengan 
cuma meng-klik text itu.</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<a href="#judul1">Kembali ke judul pertama</a>
<br />
<a href="#paragraf1">Kembali ke paragraf pertama</a>
</body>
</html>

Pada contoh diatas, saya sengaja membuat banyak tag <br /> supaya halaman web jadi panjang, dan kita dapat melihat efek saat men-klik link untuk kembali ke paragraf pertama halaman web.


Butuh Web Developer Makassar atau Jasa SEO di Makassar yang bergaransi? Jangan ragu dengan infanthree.com. Kami juga penyedia Jasa Pembuatan Aplikasi Android di Makassar yang terkemuka. Selain itu ada layanan SEM, SMM, Internet Marketing Agency Makassar dan Social Media, Pembuatan Logo, Konten, Video, Maskot dan Instalasi jaringan ataupun mikrotik, hingga pelatihan komputer dan internet marketing.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *