Cara Membuat Link Yang
Akan Mengarah ke Bagian Lain Halaman HTML
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
digunakan pada tag HTML. Atribut id bisa diibaratkan sebagai
identitas dari sebuah tag HTML. Setiap halaman HTML tidak boleh ada atribut id yang
sama dan setiap tag HTML tidak harus menggunakan atribut id. Berikut ini
adalah 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 Mas
Abdi.</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 dibuka di browser. Karena tag id hanya sebagai identitas sebuah tag HTML dan atribut id akan terlihat identitasnya ketika HTML menggunakan CSS dan JavaScript.
Cara Membuat Link Yang Akan Mengarah ke Bagian Lain Halaman HTML Yang Sama
Selain digunakan untuk
pemangilan identitas sebuah tag dengan CSS dan JavaScript, atribut id juga
digunakan 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 :
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 Mas Abdi.</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>
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.
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.
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 Mas Abdi.</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
Mas Abdi.</p>
</body>
</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.
Referensi
: https://mas-abdi.blogspot.com/2018/01/cara-membuat-link-yang-akan-mengarah-ke-bagian-lain-halaman-html.html
No comments:
Post a Comment