Bahasa Penanda Hiperteks (HTML)/Hiperpautan

Hiperpautan merupakan asas pandu arah Internet. Hiperpautan digunakan dalam semua tindakan, daripada bergerak dari satu penanda laman ke penanda lain, memuat turun aplikasi dan melompat daripada satu laman ke laman yang lain yang dihos oleh pelayan lain. Mari kita lihat contoh ringkas:

Untuk maklumat lanjut, sila layari <a href="http://ms.wikipedia.org/wiki/Laman_Utama">Wikipedia</a>.

Mutlak lawan Relatif

Sebelum kita membuat hiperpautan atau "pautan", kita perlu bincangkan perbezaan antara URL Mutlak (Absolute URL) dengan URL Relatif (Relative URL). Pertama, URL mutlak dapat digunakan bagi mengarah pelayar kepada mana-mana lokasi. Sebagai contoh, sebuah URL mutlak mungkin ditulis sedemikian:

http://www.google.co.za/

Walau bagaimanapun, apabila timbul situasi yang memerlukan kewujudan pelbagai objek dalam direktori yang sama dengan halaman sesawang (atau dokumen HTML), prosedur menaip URL penuh setiap objek ke dalam dokumen rumit dan memenatkan. Juga usaha yang sama diperkuan sekiranya dokumen dipindahkan ke lokasi baharu. Dalam keadaan inilah penggunaan URL relatif memainkan peranannya: URL relatif menuding kepada laluan relatif kepada direktori semasa dokumen HTML itu. Misalnya,

home.html
./home.html
../home.html

Ini URL relatif yang menunjukkan fail HTML yang dipanggil "home.html" yang terletak di dalam direktori (atau folder) yang sama dengan laman web yang mengandungi pautan tersebut. Sama juga:

images/top_banner.jpg

Ini ialah URL relatif yang menunjuk kepada sebuah subdirektori yang digelar "images" yang mengandungi fail imej bergelar "top_banner.jpg".

Memaut Lokasi Di Dalam Dokumen Dengan Tag anchor

Sometimes specifying a link to a page isn't enough. You might want to link to a specific place within a document. The book analogue of references of this type would be saying "Third paragraph on page 32" as opposed to just saying "page 32". The anchor tag (<a>) can be used for this too. Let's assume that you want a link from document a.html to a specific location in a document b.html. Then you start by naming the interesting location in b.html. This is done by adding a <a name="some_name"> (where some_name is a string of your choice) tag at the interesting place in b.html. Now that location can be referenced to with <a href="b.html#some_name"> from document a.html.

Target Links

Now we are ready to create a hyperlink. Here is the basic syntax :

<a href="URL location" target="target">Alias</a>;  

In the above syntax "URL location" is either the absolute or relative path of the object being linked to. "target" is an optional attribute which specifies where the object being linked to is to be opened / displayed. For example :

<a href="http://www.google.co.za" target=0>Google Search Engine</a>

The above example uses an Absolute URL of http://www.google.co.za, and specifies a target of "0" (which would cause the URL to be opened in a new browser window). If frames are used, the name of a frame could be specified as the target for the URL to open in. This is useful if you have one frame containing a navigation bar with important links, and then another frame which is used to display the linked pages/objects.

Special targets

_blank

A new blank window is opened to load the linked document into. The location in the address bar (if shown in the new window) gives the hyperlink location of the new resource requested by the user's clicking on the hyperlink.

_self

The current frame that contains the document and the link to be clicked on is used to load the linked document; if the link is part of a document that occupies a whole window then the new document is loaded into the whole window, but in the case of a frame, the linked document is loaded into the current frame. The location won't be shown in the address bar unless the linked document was loaded into the main window as opposed to a child frame of a frameset.

_parent

The linked document is loaded into the parent frame of the one containing the link to be clicked on; this is only important in nested framesets. If window W contains frameset F consisting of a child frame A and also a child frame B that is itself a frameset FF with "grandchildren" frames C and D (giving us Window W with three visible panes A, C and D), then clicking a hyperlink in the page in frame D with a target=_parent will load the linked document into D's parent frame, that is, into frame B, so replacing frameset FF that was previously defined as the content of frame B. Documents C and D that were the frames of this frameset FF in B will be entirely replaced and this will leave only frame A and the new document from the hyperlink left in frame B, all inside the main frameset F in window W. The location is only shown in the address bar of the window if the parent frame happened to be the window itself.

_top

The linked document is loaded into the window, replacing all files currently displayed in the window in whatever frames they may be found in. The location at the top of the window, in the address/location bar is seen to point to the linked document once the hyperlink is clicked.

Hyperlinks on images

An example:

<a href="http://en.wikipedia.org/wiki/HTML">
<img src="http://commons.wikimedia.org/wiki/Image:Html-source-code2.png"></a>

Example rendering:

<a href="http://en.wikipedia.org/wiki/HTML"> <img src="http://commons.wikimedia.org/wiki/Image:Html-source-code2.png"></a>

As you can see, placing hyperlinks on images is in complete analogy to placing them on text. Instead of putting text inside the a element, you place there an image.