Cara membuat link html tanpa pindah halaman
biasanya sebuah web akan membutuhkan sebuah link, dengan link kita akan menuju halaman lain, namun disini kita akan membuat link html tanpa pindah halaman artinya masih di halaman yang sama namun menuju ke bagian yang kita inginkan
Baca juga : macam-macam cara membuat link
contoh membuat link menuju ke bagian paling atas halaman
<!DOCTYPE html>
<html>
<head>
<title> Cara membuat link menuju paling atas </title>
</head>
<body>
<p>
Halaman web paling atas
</p>
<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><br><br>
<p>
<a href="#top">ke atas</a>
</p>
</body>
</html>Code language: HTML, XML (xml)jika kita mencoba script diatas dengan klik tombol coba script maka akan muncul tampilan link ke atas , klik link ke atas maka secara default akan menuju paling atas halaman web tanpa pindah halaman.
tag <br> di atas sengaja saya buat banyak supaya halaman menjadi tinggi dan bisa di scroll ke bawah untuk melihat efek dari fungsi link tersebut.
contoh membuat link menuju ke bagian yang kita inginkan
pada contoh sebelumnya membuat link menuju bagian paling atas tapi kita juga bisa membuat link menuju ke bagian yang kita inginkan
<!DOCTYPE html>
<html>
<head>
<title> Cara membuat link menuju bagian tertentu </title>
</head>
<body>
<p>
Bagian about
</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p id="portofolio">
Bagian portofolio
</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>
Bagian contact
</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>
<a href="#portofolio">portofolio</a>
</p>
</body>
</html>Code language: HTML, XML (xml)jika kita klik link portofolio maka secara otomatis akan scroll ke bagian portofolio
syarat supaya link berfungsi harus ada tag yang memiliki id=”portofolio”
selain digunakan untuk menuju ke bagian tertentu, kita juga bisa pindah halaman lain dan menuju ke bagian yang kita inginkan
<a href="halaman-kedua.html#portofolio">Link ke portofolio halaman kedua</a>Code language: HTML, XML (xml)ada dua halaman dan satu halaman ada link seperti di atas , di halaman kedua harus di sertakan tag dengan id=”portofolio”
<p id="portofolio">
Bagian portofolio
</p>Code language: HTML, XML (xml)jika di klik link nya atau langsung menulis urlnya dibrowser, browser akan otomatis mengarahkan tampilan menuju bagian portofolio.
sangat mudah bukan membuat link html dalam satu halaman, semoga bermanfaat