Tags: html, nepal

Q. What is a hyperlink and how can I use it in my own web page?

asked by Sudarshan Ghaju, Glasdtone Academy, Nepal
http://sudarshan.creativecodeworks.com

A hyperlink is a reference in a document (a HTML webpage) to one of two places:

• to another place of the same document
• to another document

The first one is used, for example to make an index of the sections of a document. If your document has three sections and you put three hyperlinks at the top of the document, clicking any of the hyperlinks you "jump" directly to that section of the document without the need to browse all the document.

How is it done?

We have to use piece of HTML whose name is "the anchor tag", or simply "a".

This is the HTML code you need to, using the "a" tag, create an index to a document:

Index of the document

<a href="#section1">first section of the document</a>
<a href="#section2">second section of the document</a>
<a href="#section3">third section of the document</a>

<p>
<a name="section1"></a>
This text is in the first section, it can be as long as needed.

<p>
<a name="section2"></a>
This text is in the first section, it can be as long as needed.

<p>
<a name="section3"></a>
This text is in the first section, it can be as long as needed.

Observe the use of the symbol #. It is used to identify the section inside of a page.

The way of using this symbol for jumping to pages or sections of pages is:

webpage-address#webpage-section

You see in the above example that there's nothing on the left part of the # in "#section1", so it means "section 1 of this page".

If you write the URL of a webpage before the # symbol you do a different thing, you will "jump" to another page, leaving the page you are reading. This is what we would do next.

The second use of a hyperlink is to "jump" to another web page. It is the most common use of the "anchor" tag. We will do it by clicking over a text of the page.

How is it done?

This is, for example, the HTML tag that I have to put in my website to allow my readers to jump to your website:

Observe that in this case there's nothing in the right part of the # symbol, so, we will "jump" to another page.

Here is the link so that you can test if it works: click here to visit Sudarshan's website

To sum up, here you have all the combinations possible inside the "href" part of the "a" (anchor) tag. To simplify we will use a fictitious web page named www.myweb.com:

http://www.page.com
It means "go to the top of the www.myweb.com page". In this case you can do it without the # symbol.

http://www.page.com#section34
It means "go to the mark "section34" inside the www.myweb.com page". Remember, on the left of the # symbol, the address, on the right part, the section.

It means "go to the section named 'last_part' of this same page". In this case you would not "jump" to another page, you just will move to another part of the same page.