Tutorial HTML-10 (ateonsoft.com/ayomaju.com)

Pada tutorial HTML lengkap 9 telah dibahas tentang Preformatted text dan Grouping element. Pada tutorial kali ini tetap akan membahas hyperlink yang meliputi Absolute Address, Relatif Address, dan Link ke Section tertentu dalam sebuah dokumen. Pembahasan ini sangat penting dalam kaitannya dengan urusan ngeblog dan SEO, karena untuk optimalisasi SEO penulisan link sendiri saya sudah pernah membahasnya khusus disini.

Hyperlink adalah sebuah link ke alamat (address) suatu halaman atau dokumen HTML (Hypertext Markup Language) Saya akan bahas 3 jenis hyperlink dibawah ini:

1. Absolute Address


2. Relatif Address


3. Link ke Section tertentu dalam sebuah dokumen

Absolute Address

Absolute Address (alamat mutlak) merupakan full internet address (URL) yang meliputi protocol, network location, path dan nama file. Pada umumnya saat kita memberi backlink pada artikel, baik artikel di blog kita sendiri maupun blog orang lain kita selalu menggunakan hyperlink jenis ini. Contoh alamat absolute untuk artikel saya "Jurus SEO bangkit dari kubur" seperti dibawah ini:
http://www.ateonsoft.com/2008/11/jurus-seo-bangkit-dari-kubur.html
Jika ditulis sebagai anchor seperti dibawah ini:
<a href="http://www.ateonsoft.com/2008/11/jurus-seo-bangkit-dari-kubur.html">Jurus SEO bangkit dari kubur</a>

Relatif Address

Relatif Address (alamat relatif) adalah URL yang tidak menyebutkan protocol dan network locationya (hanya path dan nama filenya). Penggunaan alamat relatif ini banyak digunakan pada link kedalam pada sebuah website maupun blog. Jika kita membangun website dengan macromedia dreamweaver misalnya, maka link-link ke dalam halaman-halaman website sendiri akan menggunakan alamat relatif ini. Walau begitu saat kita buka dengan browser maka alamat yang tampil akan sama dengan absolute address.

Keuntungan menggunakan relatif address adalah efisiensi penulisan serta kumpulan halaman dapat bekerja portable, sehingga dibuka dikomputer saat offline juga akan bekerja link-nya. Atau jika anda akan membuat halaman help maka penulisan menggunakan alamat relatif ini yang harus digunakan agar meski dibuka dikomputer manapun hyperlink akan tetap bisa bekerja dengan baik. Dengan hyperlink jenis ini sebuah website bisa dibuka baik dibuka dari server maupun dibuka dari file yang tersimpan dikomputer klien.

Hanya saja untuk aktivitas ngeblog relatif address ini jarang digunakan karena justru merepotkan. Tapi kalau mau digunakan mungkin bisa juga (saya yakin 90% hanya belum saya coba), untuk contoh artikel saya "Jurus SEO bangkit dari kubur" maka anchor text dengan relatif address seperti dibawah ini:
<a href="jurus-seo-bangkit-dari-kubur.html">Jurus SEO bangkit dari kubur</a>
atau kalau tidak bisa mungkin bisa dengan:
<a href="2008/11/jurus-seo-bangkit-dari-kubur.html">Jurus SEO bangkit dari kubur</a>
Lebih merepotkan bukan? dan alamat relatif ini hanya bisa digunakan untuk link kedalam saja. Jadi contoh anchor text diatas

hanya bisa bekerja jika hyperlink ditulis di ateonsoft.com sendiri. Keuntungan menggunakan alamat relatif adalah jika anda berganti domain, maka link otomatis berubah mengikuti domain baru.

Eh iya agar penjelasan semakin lengkap maka penulisan anchor sebenarnya memiliki format penulisan seperti dibawah ini:

<A HREF="URL">Hypertext</A>
<A HREF="protocol://host.domain:port/path/filename">Hypertext</A>

Berkaitan dengan penulisan anchor text menggunakan alamat relatif maka gunakan contoh dengan kode dibawah. Buatlah dua file HTML dengan notepad dan letakkan dua file dalam folder yang sama. Silahkan kode dibawah ini yang dibuat file HTML, nama file beri nama link1.html dan link2.html.

File "link1.html"

<code><html>
<head>
<title>Using Link</title>
</head>
<body>
<center><font size="5" color=hotpink>Creating Link
</font></center>
<br />
<a href="link2.html"> Click here to view document 2</a>
</body>
</html>
</code>

File "link2.html"

<code><html><br /><head><br /><title>Document 2</title><br /></head><br /><center><font size="5" color=limegreen>Creating<br />Link </font></center><br /><br><br /><a href="link1.htm">back to document 1</a><br /><body><br /></body><br /></html><br /></code>

Kalau sudah dibuat filenya buka dengan browser dan klik link disitu, nah sudah mengerti? Saya anggap sudah mengerti ya.... mari kita teruskan.

Link ke Section tertentu dalam sebuah dokumen

Maksudnya adalah membuat link ke wilayah (section) tertentu dari suatu dokumen atau artikel. Ini bisa digunakan untuk membuat kamus juga. Nah kalau bingung kita teruskan dulu semoga akan memperjelas, karena saya sertai contoh juga diartikel ini. Kita lanjutkan cara membuatnya. Untuk membuat link ke section tertentu dalam satu document gunakan property name untuk membuat nama tujuan dari link.

Syntax name anchor:

<A NAME="nama">Topic name</A>
untuk membuat link ke name:
<A HREF="#nama">menuju ke Topic name</A>

Untuk lebih jelas silahkan klik disini, kemudian klik salah satu dari link yang ada. Pasti anda akan mengerti maksudnya. Perlu diketahui penulisan address pada anchor link ke section ini juga merupakan Relatif Address.Selain bisa dipanggil dari halaman yang sama, "NAME" pada anchor juga bisa dipanggil dari halaman lain. Hanya saja penulisan URL utama artkel atau dokumen ditulis lebih dulu. Misalnya jika ada anchor name dengan nama "surga" di artikel Kisah pemuda beribu-bapakan babi, maka jika ingin menuju bagian tersebut penulisan anchor text-nya sbb:

<A HREF="http://alkisah.ateonsoft.com/2008/12/kisah-pemuda-beribu-bapakan-babi.html#surga">Masuk Surga karena berbakti</A>

Wah banyak sekali artikel ini saya tulis, banyak penulisan kode yang ruwet lagi, pantes jari tangan sudah pada bengkak hehe... disambung pada tutorial selanjutnya saja, dengan bahasan mengenai tabel dan atributnya. Happy blogging!

feed dari situs: http://www.ateonsoft.com

Tweet

Jangan sampai ketinggalan postingan-postingan terbaik dari Personal Blog. Berlangganan melalui email sekarang juga:

Atau sobat juga bisa follow Personal Blog dengan mengklik tombol di bawah ini:

Artikel keren lainnya:

Ditulis oleh Unknown pada tanggal Senin, 14 Juni 2010