Jika pada tutorial HTML Dasar kita telah mempelajari cara membuat link ke halaman lain (baik link dengan alamat absolut maupun alamat relatif), kita juga bisa membuat link ke bagian lain dari dokumen yang sama. Dalam Tutorial HTML Lanjutan kali ini kita akan mempelajari Cara Membuat Internal Link ke Bagian Lain Dokumen dengan menggunakan atribut id.
Mengenal Atribut id dalam HTML
Atribut id adalah atribut yang bisa diberikan kepada tag apapun di dalam HTML. Atribut id bisa diibaratkan sebagai 'identitas' dari sebuah tag. Di dalam sebuah halaman, tidak boleh ada atribut id yang sama, namun setiap tag tidak harus memiliki atribut id. Berikut adalah contoh penulisan atribut id dalam beberapa tag HTML:
<p id="paragraf1"> </p> <a id="situs1" href="https://www.duniailkom.com">Situs Dunia Ilkom</a> <img id="gambar_koala" src="koala.jpg" /> <div id="footer"></div>
Atribut id kebanyakan digunakan untuk pengkodean dengan CSS atau pemograman JavaScript, dan atribut ini tidak akan berpengaruh apa-apa kedalam tampilan text HTML.
Cara Membuat Link ke Bagian Lain Dokumen HTML
Selain digunakan di dalam CSS dan JavaScript, atribut id juga digunakan di dalam HTML sebagai 'penanda' bagian dari halaman web.
Apabila paragraf pertama dari halaman kita memiliki id="paragraf1", maka kita bisa membuat link yang akan 'memindahkan' jendela web browser ke bagian "paragraf1", dengan menuliskan:
<a href="#paragraf1">Kembali ke paragraf pertama</a>
Jika bagian tersebut dijalankan, web browser akan menampilkannya seperti link 'normal', namun ketika user men-klik kalimat link tersebut, ia akan dipindahkan ke bagian halaman yang memiliki id="paragraf1". Perhatikan bahwa di dalam tag <a>, kita menggunakan tanda pagar "#" untuk berpindah ke bagian lain halaman.
Syarat dari link tersebut bisa berfungsi adalah di bagian lain halaman, harus ada tag yang memiliki atribut id="paragraf1".
Selain digunakan untuk pindah ke bagian lain pada halaman yang sama, kita juga bisa membuat link untuk halaman lain, dan sekaligus memindahkan tampilan ke bagian tertentu. Untuk keperluan ini, kita hanya tinggal menambahkan tanda pagar di akhir atribut href, seperti contoh berikut ini:
<a href="halaman_lain.html#paragraf1">Link ke paragraf pertama halaman lain</a>
Jika digabungkan dengan alamat absolut, kita bisa memandu pengunjung situs ke bagian tertentu situs lain, dengan syarat pada bagian tersebut memiliki tag id.
Sebagai contoh, berikut adalah kode HTML cara membuat link ke bagian lain dokumen HTML:
<!DOCTYPE html> <html> <head> <title>Belajar HTML di Duniailkom</title> </head> <body> <h3 id="judul1">Saya sedang belajar HTML di Duniailkom.com</h3> <p id="paragraf1">HTML adalah singkatan dari Hypertext Markup Language. Disebut hypertext karena di dalam HTML sebuah text biasa dapat berfungsi lain, kita dapat membuatnya menjadi link yang dapat berpindah dari satu halaman ke halaman lainnya dengan hanya meng-klik text tersebut.</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>
Dalam contoh diatas, saya sengaja membuat banyak tag <br /> agar halaman web menjadi panjang, dan kita bisa melihat efek ketika men-klik link untuk kembali ke paragraf pertama halaman web.
Big thanks bro, cuma mau nanya, html ini bisa dijadikan web publik kah? Masih kurang paham untuk penggunaannya. Trims
Yup bisa gan… Malah setiap website yang ada di internet ini harus terdiri dari HTML (tapi ada yang di 'generate' menggunakan program lain seperti PHP). Agar halaman HTML ini bisa diakses public di internet, kita harus menyewa sebuah web hosting. Tentang cara membuat website online ini telah saya buat tutorial khusus, bisa kesini: Cara Membuat Web Online.
Semoga bisa membantu :)
cara membuat 2 tabel di dalam masing masing kolom ada teksnya dan dalam satu halaman yang sama! nah masalahnya jika dibuka hanya ingin muncul satu kolom dan jika di klik selanjutnya muncul kolom selanjutnya ? bagaimana ya gan caranya ?
Kalau ingin membuat efek interaksi seperti itu harus menggunakan JavaScript gan, tidak bisa dengan HTML saja..
bang, apa bisa membuat attribut id untuk link, terus kalaw bisa carnya gimana?
Maksudnya gan? untuk membuat link di HTML memang menggunakan tag <a>, jadi kalau ditanya apa bisa membuat attribut id untuk link, jawabnya bisa, seperti berikut:
<a id="situs1" href="https://www.duniailkom.com">Situs Dunia Ilkom</a>
Mas,, "Situs Dunia Ilkom" kenapa bisa mas cuma dunia ilkomnya aja yang ter link sama situs..
sedangkan kata "Situs"nya tidak terlink ?
Kalau pengen kata "Situs" tidak ter-link, tinggal dihapus saja / dikeluarkan dari tag <a>:
Situs <a href="https://www.duniailkom.com">Dunia Ilkom</a>
Mas, kalau back to top nya dunia ilkom itu kok naeknya 'alus' si, itu pake apa ya?
Itu dibuat dengan JavaScript mas, sudah bawaan theme yang saya gunakan :)
gan, kalo ngasih link setelah section id apa ?
biasanya kalo php kan gini, file.php?kode_id=[0]
kalo section id, abis #namasection trus apa ya ?
Maksudnya gimana y gan? kalau buat link dengan id, tinggal ditambahkan saja di bagian terkakhirnya, seperti: "halaman_lain.html#paragraf1", kalau di PHP seperti itu, sudah beda fungsinya.
Punya sya ko ga jalan nya engga tampak gambar nya
Contoh dalam tutorial ini memang g pakai gambar gan, cuma teks saja. Ketika link di-klik, tampilan akan pindah ke bagian atas.
<formaction="provinsi.html"method="get">
<b>PROVINSI</b>:<select name="provinsi"> <option value="jawa barat" selected>Jawa Barat</option>
<option> Jawa Tengah </option>
<option> Jawa Timur</option>
</option>
</select>
<br/>
<p>
<b>KABUPATEN</b> :<select name="kabupaten"> <option value="pangandaran"> Pangandaran </option> <option> Bandung</option> <option value="Kota Semarang"selected> Semarang
</option>
</select>
<br/>
<p>
<input type="submit"value="Mulai Mencari!">
</p>
gan kalo mau proses pencarian ke 2 halaman selanjutnya bisa ga gan,, ane belum paham, baru belajar
Untuk pemrosesan form dan pencarian, harus menggunakan PHP dan MySQL gan (kalau artikelnya di simpan di dalam database)
gan gimana ni gue pusing cara membuat link emotikon yang bisa d klik ??
Gambar emo-nya di letakkan di dalam tag <a> gan, misalnya:
<a href="alamat_link.html"><img src="alamat_gambar.jpg"></a>
mkasih gan infonya,, saya coba
Siip, lanjut gan..
gan kok ngak mucul apa apa
G munculnya seperti apa gan? Sudah copy paste kode yang saya tulis diatas? Kalau agan tulis sendiri, pastikan g ada yang kurang di penulisan link dan atribut id HTMLnya.
gan, gimana caranya agar tulisan "tutorial membuat web" jika di klik akan menayangkan penjelasan tentang "tutrial membuat web" ??
terima kasih gan
Buat 2 halaman terpisah gan, lalu ketika link di klik, yang tampil adalah halaman ini (yang berisi penjelasannya).
gan tapi kalau munculnya pada halaman yang sama gimana ?
Makasih bny gan ilmunya, smg bermanfaat, ane sng blajar lewat situs ini gan
Siip gan, sama2…
Thnks gan
Gan saya mau bertanya, kalau menampilkan 2 frame dalam satu layar. Terus frame kiri berisi hiperlink. Ketika hiperlink trsebut diklik, maka yang keluar di frame kanan. gimana penyelesainnya gan? terima kasih
Penggunaan tag <frame> sebenarnya sudah tidak disarankan lagi gan, bahkan di HTML5 sudah dihilangkan. Meskipun begitu, mayoritas web browser memang masih mendukungnya. Tutorial tentang tag <frame> saat ini belum ada di duniailkom. Agan bisa pelajari kesini: http://www.w3schools.com/tags/tag_frame.asp
Keren gan, ane banyak belajar
Siip gan, semoga bermanfaat…
Pebedaan atribut 'name' dan 'id' untuk link ke dokumen tertentu apa ya mas?
Apa penggunaan 'name' untuk dokumen yg terpisah dan 'id' pada dokumen yang sama?
Thx b4…
"halaman_lain.html#paragraf1" kenapa kalo mau pindah ke html lain kita harus memakai id =paragraf1, sedangkan saya coba tanpa menggunakan id , tetap bisa pindah ke html lain ?
Kalau untuk sekedar pindah ke halaman lain, memang cukup ditulis nama filenya saja gan: https://www.duniailkom.com/belajar-html-cara-membuat-link-di-html-tag-a/
Bagian id=paragraf1 digunakan untuk pindah ke "bagian lain", misalnya langsung ke bagian bawah website.
mau tanya dong.
kalau nge link tanpa pindah k halaman baru gimana ya?
semisal ada 2 frame kanan dan kiri. tulisan yg nge link ada di sebelah kiri, terus di pindahkan ke kanan gimana ya
Penggunaan tag <frame> sudah tidak disarankan lagi, bahkan di HTML5 sudah mau dihapus (deprecated). Hampir semua web link itu pindah halaman (halamannya di bikin mirip, yang berubah cuma isi artikelnya saja, yang dibagian tengah).
Kalau mau yang lebih modern, nanti bisa belajar JavaScript dan menggunakan AJAX.
pakai js/ajax DOM saja, frame sudah tidak didukung
gan, mau tanya..
tempat ane kalo mau ngelink ke folder sebelumnya pake tanda titik titik slash ../ kok halamannya malah gak bisa dibuka ya ? padahal filenya ada,,,itu cma gk bsa ngelink kalo k file .php
tapi kalo file selain .php (.js, .css) bisa gan…
Saya juga kurang tau apa masalahnya, soalnya kalau yang lain bisa seharusnya php juga bisa.
Atau untuk sekedar memastikan, agan menjalankannya sudah lewat XAMPP dan alamatnya localhost kan? soalnya file PHP harus dijalankan dari http://localhost/bla..bla.. Tidak bisa jika alamat di web browser masih tertulis: file:///C://bla..bla.. . Untuk kasus yang terakhir ini file html, css, dan js akan jalan tapi tidak dengan PHP (harus dari localhost).
Gan mau tanya , saya sudah bisa melakukan dari page1 html ke page 2 yang tipe php , tapi pada saat saya ingin pindah lagi dari page 2 ke page 1 kenapa eror ? padahal saya sudah menulis scriptnya sama hanya di ganti jdi alamat ke page 1 yang html
Mau tanya kalau mau buat link untuk nambahin foto tapi nanti yng kebuka direktori kita itu caranya gimana ka?
Ini untuk blog seperti blogspot atau buat sendiri dari nol? Kalau buat sendiri dari nol, kita mesti rancang dulu tampilan directorynya itu. Pemrosesan form upload (untuk upload foto) juga harus menggunakan bahasa pemrograman PHP.
hahahaha jadi tau apa fungsinya.,
jaya terus duniailkom.com
Amiin, terimakasih doanya… :)
Maaf, saya mau nanya kalau berpindah nya keliatan halus bagaimana ya?
seperti mengskrol perlahan ke arah yang di tuju?
trimakasih
Kalau ingin membuat yang seperti itu, harus menggunakan JavaScript lagi (dan cukup rumit), Contohnya bisa kesini: https://css-tricks.com/snippets/jquery/smooth-scrolling/
Terimakasih ..
Sangat bermanfaat :)
thank you admin user for artikel
Gan mau tanya….. rencananya saya mau beli ebook HTML, terus klo kita nguasai HTMl tuh fungsinya buat apa aja (Maaf Newbie)…. terus klo beli lebih dari 1 dapet diskon gak gan, hehe
Terimakasih Duniailkom atas semua ilmunya, ini sangat bermanfaat terutama bagi saya yg masih awam ttg html ini..
kak ada cara agar saya bisa liat hasil coding saya langsung tanpa harus save baru liat di chrome
kalo ada salah coding agak ribet jadinya
Web programming memang seperti itu. Atau bisa pakai code editor online seperti codepen.io
Suhu hehehe mau nanya nih, kalo misalkan kita bikin satu link utama, tapi link ini kalo di klik ngga pergi ke halam selanjutnya atau sebagainya, tapi saya mau link utama yang saya klik ini menampilkan daftar-daftar link anakan yang jika di klik link anakan ini baru akan pergi ke halaman yang kita tuju. Itu gimana cara nya hu hehe makasih
Maksudnya mungkin dropdown menu ya? seperti menu di bagian atas web duniailkom ini.
Membuat dropdown menu memang cukup rumit dan banyak melihatkan CSS (perpaduan HTML + CSS). Silahkan pelajari semua dasar HTML dan CSS terlebih dahulu, baru kemudian search di google "dropdown menu CSS".
Gan ada email atau gimana wa atau Ig saya butuh banget masih anak smk saya . Tertarik banget sama html
Silahkan, jika ingin memesan buku duniailkom bisa kontak ke [email protected]
Info yang menarik.
Mau tanya dong biasanya kan di forum2, ada kaya tombol yang jika diklik keluar teks , jika tidak diklik tulisan itu tidak terbuka. itu namanya pakai methode apa, main di css kah ?
Dulunya itu hanya bisa dibuat dengan JavaScript + CSS. Tapi akhir2 ini ada tambahan tag baru ke HTML5, yakni <details> dan <summary>:
<details>
<summary>Belajar HTML</summary>
<p>Sedang belajar HTML di Duniailkom</p>
</details>
Kalau ingin tampilanya lebih menarik lagi, memang harus di style menggunakan CSS.
mohon bantuannya min,
saya mempunyai 2 hamalan yang berbeda, dihalaman 1 terdapat tombol (button).
saya ingin, ketika saya memproses halaman ke 2, maka halaman akan header ke halaman 1, dan mengklik button pada halaman 1.
itu kodenya gimana ya min?
mohon bantuannya min.
terima kasih.
Kalau otomatis men-klik, itu harus pakai JavaScript.
Kodenya kira2 seperti ini :
document.getElementById("tombol").click()
Tapi harus paham dulu tentang konsep DOM dan event di JavaScript.
saya sudah coba begini tapi salah satu tombol dropdown yang idnya tampilan tidak mau di klik otomatis min,
<script>
$(document).ready(function(){
$('auto').click(function(){
document.getElementById('tampilan').click();
});
});
</script>
.
jadi halaman 1 saya mempunyai dropdown , yang isinya 1 2 3, idnya 1=tampilan 2=add 3=halo
.
jadi saya ingin memproses 1 tombol pada halaman 2, dan saya ingin ketika saya memproses tombol pada halaman 2 ini, dia akan header ke halaman 1 + menekan dropdown id tampilan.
mohon bantuan listing nya seperti apa min?
terima kasih min andre
Gan saya mau tanya nih..
Saya mau buat link internal ni..
Say link ke halaman lain. Agar tampilan home nya tidak berubah gmna y..
Maksud saya..halaman yg saya link itu tampil di bagian isi atau konten awal tanpa merubah tampilan awal web nya
Kalau webnya dibuat dari HTML dan CSS saja, maka itu tetap jadi 2 halaman yang terpisah. Caranya, seluruh kode yang ada di halaman home di copy ke halaman kedua. Di halaman kedua ini, edit bagian konten saja, biarkan bagian header dan footer sama seperti halaman home.
hallo gan mau tanya
kalo menggabungkan text link tapi posisi di sebelah kanan gimana ya ?
contoh :
<a href="https://…../tentang-gaet/">Tentang Kami</a> ( tapi ini mau saya taruh di sebelah kanan )
terimakasih
Bisa coba pakai kode berikut:
<a style="text-align:right" href="https://…../tentang-gaet/">Tentang Kami</a>
mau nanya bagaimana caranya meneruskan id lewat klik button ke halaman lain dengan javascript
Ada beberapa cara.
Jika halaman tersebut dijalankan dari web server, bisa minta bantuan PHP untuk mengambilnya (id tombol nanti dikirim lewat form / query string).
Atau bisa juga menggunakan set Cookie langsung dari JavaScript (kodenya memang sedikit panjang).
Alternatif lain bisa juga menggunakan HTML5 localStorage API.
Bg cara agar file html saya bisa diakses semua orang melalui web
Itu caranya gimana ya
Apakah harus mengunakan web hosting
Betul, jika file HTMLnya ingin bisa diakses dari internet, maka harus menggunakan web hosting.
Kepanjangan dari atribut id itu apa min?
Kalau g salah "identifier"
min kalo mau bikin pilihan halaman yg bisa di klik 123nya itu gmn ya?
Itu disebut sebagai "Pagination". Untuk saat ini tutorialnya belum ada di duniailkom. Jika ingin membuat tampilannya saja, paling praktis bisa pakai Bootstrap (sudah tersedia pagination bawaan).
Jika ingin yang benar2 menampilkan data dari database, bisa pakai library seperti https://datatables.net, atau framework PHP: Laravel
Makasih banyak bang, ini ngebantu banget
hallo kak terimakasih banyak atas tutorialnya, saya ingin bertanya caranya agar ada animasi scroll nya bagaimana ya?