learn web technologies, the easy way

Intra-page links

You’ve seen sites where you click on a link and it takes you to another place on the same page? These types of links are useful for pages with a large amount of content. They are quite easy to create and use in practice. You just need to create "named anchors" within the page and then within the link itself (the <a> tag) you use href="#thenamedanchor". Note the "#" character before the name? This is the convention to tell the browser that it should jump to the name that follows. The named anchor itself looks like this: <a name="jumptohere">This is where it would jump if you clicked on the last link.</a>

Live Example

Just click this link, and you'll jump to the bottom of the page. At the bottom you can click on another link to come back here.

Extra-page links within your own site

Relative links

Relative links mean you specify the path to the resource relative to where the calling page is That means if the current page is resident in the /htdocs/acct/ folder and you want to link to a page that is in the /htdocs/reports/ folder, you would need to create a link like “../reports/somepage.html”, or in the actual <a> tag:

<a href=”../reports/somepage.html”>Click here to go to somepage</a>

Relative tags are useful when you have a site that needs to be moved to another location, or even if you need to move a sub-section of the site. The only requirement is that the folders remain in the same position relative (there comes that word again) to each other. If you need to start moving things around and changing the relative position of folders, then you’d be better off using “absolute links” (see below).

Absolute Links

As was mentioned above, if you need to move things around then this is the way to go. The other thing to consider is that if you are linking to any external sites (see below), then you will be using absolute links any way. Here is how an absolute link looks:

<a href=”/htdocs/reports/somepage.html”>Click here to go to somepage</a>

or

<a href=”http://www.mysite-com/reports/somepage.html”>Click here to go to somepage</a>

This second form is exactly the same form that you need to link to an external site, as you’ll see below.

External Links

If you want to link to a page not within your own site, then you need to use an external link. Here is an example of one: <a href=”http://www.yahoo.com”>Click here to go to Yahoo!</a> When you link to an external site, you may make the decision to keep your page open and open a new window or tab for the external site. If this is the case, then you need to modify the <a> tag with the “target” attribute, as follows:

<a href="http://www.yahoo.com" target=”blank”>Click here to go to Yahoo!</a>

Click here to return