HTML 101: pt3 - Pulling it Together with Links - HTML Forums

Horus_Kol · 06-23-2005, 04:53 AM

Part 2: Simple Page Layout

“Hang on!” I hear you cry, “We haven’t got a site, we’ve only done one page!”

True… but here we are now – how to connect from one page in your site to another.

The Hyperlink

This is what gave HTML its power when it was first created. A system of linking pages with similar information together into a coherent collection. And this is how it is done:

Code:

  <a href=’target_page.html’>Click Here</a>

Pretty simple, huh?

This places a hyperlink text onto your page which, when clicked, will load the target_page.html file in your browser.

The <a>…</a> element is more properly called an anchor, and using the various attributes it is possible do a lot more than just connect to another page.

Relative/Absolute

An example of a relative path would be just “index.html”. The link will open the page index.html – so long as it is in the same folder as the page where the link is.

You can even access sub-folders or even parent folders:

Code:

  <a href=’info/index.html’>Open the index file for the info folder</a>

  <a href=’../index.html’>Open the index file for the parent folder</a>

An absolute path starts from the very beginning, for example “http://www.htmlforums.com/index.html” would be an absolute path – it takes you to the index page of the HTML Forums site.

Normally, absolute paths are only used when navigating to another site. When linking to pages within your own site it is better to use relative paths – this means that if you change your domain name or move your pages into a sub-folder, they will still be able to find each other.

Targets

The anchor element has an optional target attribute:

Code:

  <a href=’index.html’ target=’_blank’>Open index in a new window</a>

This attribute was originally used with the old “frameset” designs, but as technology has improved framesets have fallen by the wayside – mainly because they were quite troublesome.

However, the attribute remains to enable some control over where the page being linked to will be displayed.

The target attribute can be set to either ‘_blank’ (to open the page in a new window), or ‘_self’ (to open the page in the current window – the default option), or even to the name of an existing window.

As a good design philosophy, you will want to have the pages within your site to stay in the same browser window – users don’t appreciate clutter from having too many windows open. However, some links, such as one to another site, or an enlarged picture, or even a printable version, would possibly be better handled in a new window.

It is, of course, entirely up to you how you design your page.

Internal Anchors

If you have a fairly long page, then you may want to enable users to link directly to sections within that page.

Markers can be placed in the page using the anchor element as below:

Code:

  <div class=’section’>
    <p>
       This is a really long section of text, and some people may want to skip it
    </p>
  </div>

  <div class=’section’>
    <a id=’marker’></a>
    <p>
      This may be the bit they are after.
    </p>
  </div>

The id attribute can be given any name – so you can make them more meaningful.

To link to the anchor within the page, just put a hash (#) after the page name in the href attribute, followed by the anchor’s id. For example:

Code:

  <a href=’news.html#Tuesday’>News for Tuesday</a>

Using an Image for a Link

It is entirely possibly for an image to be used as a link instead of just text.

Code:

  <a href=’index.html’><img src=’images/logo.jpg’ style=’height : 50px; width : 150px; border : 0px’ alt=’Homepage’ /></a>

Notice that we have added a third CSS style element in the image – images within links are automatically bordered, although it is generally not what designers want nowadays.

The alt attribute for the image is required anyway, but here you can appreciate how important it is – if there image was not displayed for whatever reason, then the hyperlink would use the value in the alt instead.

Hints and Tips

Now that you know how to link, you should start spreading your content about a bit.

Make sure that the information on the page is all of the same or similar topics – otherwise when people use search engines they will not find your page because the relevant information is swamped by other stuff they are not interested in.

Put meaningful text within an anchor – “Click Here” is not descriptive, and some search engines penalise for this kind of thing. The same applies for the alt attribute of images used as links – search engines ignore the actual image and only read this.

If you are using an image as a link, make it reasonably obvious that the image has that purpose.

Most users expect the image used for the site banner to link them to homepage for that site.

That’s about it for links – moving on to tables and lists next…

Part 4: Displaying Data - Tables and Lists