Cara Membuat Link Yang Akan Mengarah ke Bagian Lain Halaman HTML

By | June 14, 2019
Cara Membuat Link Yang Akan Mengarah ke Bagian Lain Halaman HTML 1

Jika sebelumnya kita telah mempelajari Cara Membuat Link di HTML, sekarang pada artikel kali ini kita akan mempelajari Cara Membuat Link Yang Akan Mengarah ke Bagian Lain Halaman HTML dengan menggunakan atribut id.

Mengenal Atribut id di HTML

Atribut id bisa di gunakan pada tag HTML apapun. Atribut id bisa di ibaratkan sebagai identitas dari sebuah tag HTML. Di dalam sebuah halaman HTML, tidak boleh ada nilai dari atribut id yang sama, namun setiap tag HTML tidak harus menggunakan atribut id. Berikut ini adalah contoh yang benar dalam penulisan atribut id di tag HTML :

<!DOCTYPE html> <html> <head>  <title>Belajar HTML</title>  <meta charset="utf-8"/> </head> <body>  <h1 id="judul-pertama">Saya Sedang Belajar HTML</h1>    <p id="paragraf1">Kali ini Saya sedang belajar HTML di blog .</p>    <img id="logo-abdi" src="Abdi.png"/>    <h1 id="judul-kedua">Mari Belajar HTML</h1>  <p id="paragraf2">Nah, bagi Anda yang ingin belajar tentang HTML silahkan kunjungi alamat <a href="https://mas-abdi.blogspot.com">https://mas-abdi.blogspot.com</a>.</p> </body> </html>

Atribut id tidak memiliki tampilan apa-apa jika di buka di browser, itu karena tag id hanya sebagai identitas sebuah tag HTML yang akan di panggil identitasnya dengan menggunakan CSS dan JavaScript.

Cara Membuat Link Yang Akan Mengarah ke Bagian Lain Halaman HTML Yang Sama

Selain di gunakan untuk pemangilan identitas sebuah tag dengan CSS dan JavaScript, atribut id juga di gunakan untuk mengarahkan ke bagian lain halaman HTML yang sama.

Misalnya kita mempunyai 2 buah tag <h1> yang letaknya berjauhan, tag <h1> yang pertama memiliki atribut id="judul-pertama" dan tag <h1> yang kedua memiliki atribut id="judul-kedua" agar mudah untuk menuju tag <h1> yang kedua dengan cepat kita bisa menggunakan link yang akan memindahkan jendela browser ke bagian atribut id="judul-kedua", dengan menuliskan kode link HTML di bawah ini :

<p>Lanjut ke <a href="#judul-kedua">judul kedua</a></p>

Contoh kode lengkapnya seperti di bawah ini, pastikan Anda menyimpan filenya dengan nama Belajar HTML.html :

<!DOCTYPE html> <html> <head>  <title>Belajar HTML</title>  <meta charset="utf-8"/> </head> <body>  <h1 id="judul-pertama">Saya Sedang Belajar HTML</h1>  <p>Kali ini Saya sedang belajar HTML di blog .</p>  <p>Lanjut ke <a href="#judul-kedua">judul kedua</a></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/>  <h1 id="judul-kedua">Mari Belajar HTML</h1>  <p>Nah, bagi Anda yang ingin belajar tentang HTML silahkan kunjungi alamat <a href="https://mas-abdi.blogspot.com">https://mas-abdi.blogspot.com</a>.</p>  <p>Lanjut ke <a href="#judul-pertama">judul pertama</a></p> </body> </html>

 sekarang pada artikel kali ini kita akan mempelajari  Cara Membuat Link Yang Akan Mengarah ke Bagian Lain Halaman HTML

Dalam contoh kode di atas Saya sengaja membuat banyak tag <br/> supaya tag <h1> yang kedua tidak terlalu berdekatan dengan tag <h1> yang pertama. Silahkan Anda klik teks judul kedua.

 sekarang pada artikel kali ini kita akan mempelajari  Cara Membuat Link Yang Akan Mengarah ke Bagian Lain Halaman HTML

Maka secara otomatis Anda akan di arahkan ke atribut id="judul-kedua" yaitu Mari Belajar HTML dengan sangat cepat tanpa harus men-scroll. Silahkan Anda klik judul pertama maka Anda akan kembali lagi ke atribut id="judul-pertama" yaitu Saya Sedang Belajar HTML.

 sekarang pada artikel kali ini kita akan mempelajari  Cara Membuat Link Yang Akan Mengarah ke Bagian Lain Halaman HTML

Syarat agar link dapat berfungsi dengan baik yaitu di dalam tag <a> terdapat atribut href="#judul-kedua" dan terdapat tag HTML seperti tag <h1> yang memiliki atribut id="judul-kedua". Perhatikan juga bahwa nilai dari atribut href, kita menggunakan tanda “#” di awal sebelum nilai dari atribut id di tulis.

Selain untuk mengarahkan ke bagian lain pada halaman yang sama, kita juga bisa mengarahkan ke bagian lain pada halaman yang berbeda.

Cara Membuat Link Yang Akan Mengarah ke Bagian Lain Halaman HTML Yang Berbeda

Silahkan buka file Belajar HTML.html di text editor  yang sebelumnya kita buat tadi lalu ketikan kode di bawah ini :

<!DOCTYPE html> <html> <head>  <title>Belajar HTML</title>  <meta charset="utf-8"/> </head> <body>  <h1 id="judul-pertama">Saya Sedang Belajar HTML</h1>  <p>Kali ini Saya sedang belajar HTML di blog .</p>  <p>Lanjut ke judul kedua pada halaman <a href="Main HTML.html#judul-kedua">Main HTML</a></p> </body> </html>

Jika sudah di ketik kodenya, silahkan simpan, lalu buatlah sebuah file baru dengan nama Main HTML.html, pastikan Anda menyimpan filenya di folder yang sama dengan file Belajar HTML.html. Jika sudah silahkan ketikan kode di bawah ini di file Main HTML.html :

<!DOCTYPE html> <html> <head>  <title>Main HTML</title>  <meta charset="utf-8"/> </head> <body>  <h1 id="judul-pertama">Mari Belajar HTML</h1>  <p>Nah, bagi Anda yang ingin belajar tentang HTML silahkan kunjungi alamat <a href="https://mas-abdi.blogspot.com">https://mas-abdi.blogspot.com</a>.</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/>  <a id="judul-kedua"><h1>Terimakasih</h1><a>  <p>Terimakasih telah mengunjungi blog .</p> </body> </html>

 sekarang pada artikel kali ini kita akan mempelajari  Cara Membuat Link Yang Akan Mengarah ke Bagian Lain Halaman HTML

Silahkan simpan, lalu buka file Belajar HTML.html di browser, lalu klik teks Main HTML. Maka Anda akan langsung di arahkan ke halaman Main HTML tepat pada bagian tag <h1> yang kedua yaitu Terimakasih.

 sekarang pada artikel kali ini kita akan mempelajari  Cara Membuat Link Yang Akan Mengarah ke Bagian Lain Halaman HTML

Begitulah Cara Membuat Link Yang Akan Mengarah ke Bagian Lain Halaman HTML. Semoga penjelasan dari Saya bermanfaat untuk Anda yang baru belajar HTML.