-->
›

Cara Membuat Link Yang Akan Mengarah ke Bagian Lain Halaman HTML

January 01, 2018 Add Comment
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 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 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 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>

Lanjut ke judul kedua

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.

Lanjut ke judul pertama

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.

Ini ke judul pertama

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>

Lanjut ke judul kedua pada halaman Main 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.

Judul kedua pada halaman Main HTML


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

0 Response to "Cara Membuat Link Yang Akan Mengarah ke Bagian Lain Halaman HTML"

Post a Comment

Subscribe to: Post Comments (Atom)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel