Tutorial Belajar HTML 6 – Link HTML (Penting!)

By Adhi P. - Last updated: Thursday, October 20, 2011 - Save & Share - Comments

banner438kursus Tutorial Belajar HTML 6   Link HTML (Penting!)

Mudahnya gini, sebuah link HTML adalah sebuah alamat yang merujuk ke dokumen atau alamat lainnya di Internet. Menurut saya sebenarnya konsep link HTML inilah yang akhirnya benar-benar membuat web menjadi sangat bermanfaat dan akhirnya menjadi sangat besar seperti sekarang ini.
Orang sangat mudah merujuk ke referensi lain yang semuanya tersedia online. Bener-bener jenius icon smile Tutorial Belajar HTML 6   Link HTML (Penting!) .
Jadi, pelajari baik-baik ya…

Ndak usah pake contoh ya , kan udah banyak banget di Internet. Link HTML itu ya tempat kamu main klak klik itu lah. Yuk kita pelajari lebih lanjut.
Hyperlinks, Anchors, dan Links

Dalam istilah web, hyperlink adalah referensi (sebuah alamat) ke sumber-sumber informasi lain di Internet. Hyperlink biasanya merujuk ke sebuah halaman HTML, sebuah gambar, file suara, movie, dll.Sedangkan anchor (bahasa Indonesianya Jangkar) adalah istilah yang digunakan untuk mendefinisikan tujuan hyperlink dalam sebuah dokumen.

Jadi gini, alamat halamannya ditunjukkan oleh hyperlink, sedangkan kalau di dalam dokumen itu ada bab 2, maka kita bisa langsung merujuk ke bab 2 tadi dengan bantuan anchor.

Untuk membuat hyperlink dan anchor kita menggunakan elemen HTML anchor <a>.

Dalam tutorial kali ini, kita akan menggunakan istilah link HTML saat elemen <a> merujuk ke sebuah halaman dan istilah anchor HTML saat element <a> tersebut merujuk ke sebuah alamat di dalam dokumen.
Bikin Link HTML

Sintaks Link:


<a href="/caramembuatwebsite/url">Teks Link</a>

Perhatikan, tag HTML pembuka berisi atribut link tersebut.

Isi elemen (Teks link) mendefinisikan apa yang ingin anda tampilkan ke pengunjung.

Catatan: Isi elemen tidak harus berupa teks lho. Kamu juga bisa me-link dari sebuah gambar atau elemen HTML lainnya.

Atribut href

Atribut href adalah alamat yang akan dibuka saat seseorang mengklik link yang kita buat.

Elemen <a> ini mendefinisikan sebuah link yang akan menuju ke sebuah web site yang saya kelola juga yaitu kursus-online.com:


<a href="http://www.kursus-online.com/">Pengen belajar bikin web
sambil Praktek sekalian bisa dapet duit?. Klik di sini aja!</a>

Kode tersebut akan ditampilkan seperti ini. Sok atuh dicoba klik biar kerasa. icon smile Tutorial Belajar HTML 6   Link HTML (Penting!)

Pengen belajar bikin web sambil Praktek sekalian bisa dapet duit? Klik di sini aja!!

Atribut target

Atribut target sangat berguna bagi kita untuk mengatur halaman yang kita tuju itu akan dibuka di mana.

Kita bisa membukanya di halaman utama ini langsung atau membukanya di halaman baru saat seorang pengunjung mengklik link yang kita sediakan.

Berbeda dengan kode sebelumnya yang membuka web site kursus-online.com di jendela yang sama, kode ini akan membuka web site kursus-online.com pada sebuah jendela baru:


<a href="http://www.kursus-online.com/"
target="_blank"> Pengen belajar bikin web sambil Praktek sekalian
bisa dapet duit?. Klik di sini aja!</a>

Sok di klik link di bawah ini biar tahu bedanya:

Pengen belajar bikin web sambil Praktek sekalian bisa dapet duit? Klik di sini aja!!

Attribute name

Saat kita menggunakan atribut name, maka itu berarti kita mendefinisikan sebuah nama anchor yang berada di dalam sebuah halaman HTML.

Nama anchor tidak akan nampak di mata pengunjung. Itu hanya merupakan pendefinisian di sebuah halaman web aja.

Cara membuat sebuah anchor:


<a name="label">Apapun</a>

 

Try This: 4 Langkah Mudah Belajar Cara Membuat Website, Langsung Praktek! KLIK DI SINI!.

Nah, link yang menuju ke halaman itu bikinnya gini:


<a href="#label">Apapun</a>

Perhatikan tanda # yang mendefinisikan nama anchor

Contoh:

Sebuah anchor dalam dokumen HTML:


<a name="top">Ini bagian paling atas</a>

Sebuah link yang merujuk ke bagian paling atas dalam dokumen yang sama:


<a href="#top">Kembali ke atas</a>

Sebuah link yang menuju ke sebuah anchor di halaman web lain:


<a href="http://www.prothelon.com/mambo/contoh.htm#top">
Kembali ke halaman utama paling atas</a>

Nah, kalau mau lihat bagaimana sebuah link anchor bekerja, klik Kembali ke atas ini untuk menuju ke bagian paling atas dari halaman ini.

Catatan penting dan tips yang pastinya akan berguna buat kamu

Ingat untuk selalu menambahkan garis miring di akhir sub folder link kita.

Jika link kita bentuknya seperti ini:

href=”http://www.prothelon.com/mambo”,

maka kamu akan membuat 2 buah permintaan http ke server, karena server akan menambahkan garis miring dan membuat alamat yang kita minta tadi menjadi seperti ini:

href=”http://www.prothelon.com/mambo/”

Nah, dengan menambahkan garis miring di akhir sub folder, kita sudah menghemat resource di server.

Kamu bisa menggunakan Anchor untuk membuat daftar isi di awal sebuah dokumen yang panjang.

Kalau browser tidak bisa menemukan anchor yang kita tentukan, maka secara otomatis akan menuju ke bagian paling atas dari dokumen. Tanpa error.
Nah, itu adalah materi belajar HTML mengenai link.
Jika ingin mempelajari tutorial lainnya, silahkan klik link tutorial lain di menu utama sebelah kiri.
Kalau bosen belajar cuman baca doang kaya gini, coba aja ke kursus-online.com. Di sana kamu bisa dapet materi yang sangat lengkap tentang bikin web, bisa belajar langsung praktek dengan metode 4 langkah mudah bisa bikin web, plus ada peluang belajar sambil dapet penghasilan tambahan.

About the author

 Tutorial Belajar HTML 6   Link HTML (Penting!) Adhi Prasetio mulai menggeluti pembuatan website sejak tahun 2001. Di samping kesibukannya sebagai pengajar dan pembicara dengan topik e-commerce, penulis juga telah bertahun-tahun aktif menulis di internet. Sebagian besar tulisannya ditujukan untuk berbagi pengalaman dan membantu para pemula dalam mempelajari cara membuat website dan internet marketing. Penulis yang juga dikenal sebagai Prothelord, merupakan pengelola sekaligus kontributor utama websitehttp://prothelon.com yang merupakan salah satu website populer untuk belajar membuat website. Buku yang sudah diterbitkan antara lain Cara Mudah Membuat Desain web untuk Pemula, Tip & Trik Menjadi Master PHP, Buku Pintar Pemrograman Web dan Smart Guide Jualan Online. Anda bisa melihat profilnya di Google+

Posted in Tutorial Belajar HTML • Tags: , , , Top Of Page