Adding More Pages Using Links
HTML Tutorial 5

Aims

• To add more pages to your site and link them together
• Using pictures as links and what to be aware of
• To use internal links (anchors) to save scrolling for visitors

Adding More Pages

There are not many single-page websites out there. Most have multiple pages - and the bigger the organisation, the more pages there will be.

Even a basic site will be structured to have a standard set of pages. For example:-

• Welcome Page
• Products/Services Page
• Some sort of 'Contact Us' page

And depending on what the organisation does there may be multiple product pages, a company history, some customer reviews/feedback and much much more.

So let's set up a basic personal site and link the pages together.

So far you have probably only been using one HTML document - so you need to create two new HTML files. We will use the original file as a welcome page and then use two new files for an "All About Me" and "Pictures of Me" page. Name them like this:-

• All About Me - aboutme.html
• Picture of Me - picturesofme.html

Stop here for a moment and put together some basic information on those pages; make sure you use the <title> tag, maybe a <h1> for the page title and in the case of 'pictures of me', put a couple of pictures in as per the Adding Pictures tutorial.

The <A> Tag

The <a></a> tags are used to create links. The 'A' stands for 'Anchor'. This will be explained better later on!

What goes between the tags is simply the text you want to be the link to the other pages. Make this descriptive and appropriate - it must describe what the page is people will travel to when they click the link. So a set of links to our pages above might be:-

I have put the "^_^" between the links just for a 'text pattern'.

But these links don't point anywhere yet so your links do nothing when they are clicked. We need a new attribute to make these links work.

The HREF Attribute

In short, the HREF Attribute is for the "Hyper-Reference". No-one ever told me the real meaning of this, but I'm guessing this is accurate enough for your understanding. Basically, you need put your file name in here. Like this:-

<a href="homepage.html">Homepage</a> ^_^ <a href="aboutme.html">About Me</a> ^_^ <a href="picturesofme.html">Picture of Me</a>

The other thing you must remember is that your href filenames must be relative to the page with the link on it. So if you have a homepage in one folder and all your other pages are in the same folder, then great. If, however you are more organised and like to put things in separate folders then you will need to include the folder name in your href attribute. e.g. personalinfo/aboutme.html or another example scotlandholidays/photos.html.

One last warning on filenames. If you have a file in a folder already, which is not your 'homepage' folder, then you need to get your href to look at 'one folder up'. This is achieved by this:

<a href="../homepage.html">Back to Homepage</a>

For each folder you need to go backwards through you will need a ../.

For a little working demo of 3 pages with titles & links click here (this will open in a new window).

Opening Stuff in New Windows

So you have a few pages you want people to read about you but you've also spotted a blog or article which your visitors may like. But you don't want them to lose your site and end up surfing several websites down the line and forgetting about your site do you? No!

One trick is to load any 'external links' - i.e. pages which are not on your own website into a new window or tab. Now given that people can set their browsers to load links in windows or tabs, we're not going to concern ourselves with that. The important thing is that the page is not loaded in place of your pages.

The TARGET Attribute

One more attribute of the <a> tag is the target attribute. The target is 'Where I want that link to load'. Here are a few values:-

So in order to get that external link in a new window/tab simple plonk in the value like this:-

<a href="page3.html" target="_blank">Go to Page 3</a>

The only problem with this is you might get a visitor who clicks the same link more than once. It can be very annoying for visitors to have lots of windows or tabs open, especially if it looks like you have set them up with 20 windows all with the same article in it!

So the alternative approach is to put a name for your window/tab instead of _blank. Make up a name, any name. That's good! What this does is to give the window/tab the name you specify and then when your link is clicked, if your window/tab is still open it loads the link into that window - it re-uses it! So bear this in mind.

Using a Picture as a Link

So you don't just want to use boring text as links eh? Well you don't have to! Maybe you're a graphical expert and have made some amazing buttons! Or maybe, like many people who start out learning HTML, you've downloaded some.

Well you can turn that picture into a link! You already know from the Adding Pictures Tutorial how to put a picture on your page.

All you have to do is put your <img> tag in the place of text between your <a> tags, like this:-

<a href="mypets.html"><img src="pictures/button_pets.gif" border="0" alt="My Pets"></a>

The border part is very important, because some browsers may put a nasty, bright-blue line around your pretty button (to show it's a link) if you don't put that in. And you don't want a browser spoiling your page do you?

Page Anchors

And finally we come to internal links, or page anchors. The idea behind these is that if you get a long document (like a HTML tutorial!) but you want to flick between sections or quickly get back to the top, then instead of making your visitors scroll all the way back and forth, then they can just click a link and it will take them there instead.

Setting Up An Anchor

To set up an anchor, you use an <a> tag just like a regular link but without the HREF or TARGET attributes. Instead you use the name attribute and give it a short name.

<a name="section1"></a>

This has lowered your anchor! That marks the position on the page where "section1" starts. Now you could wrap a <h1> (or any other header number) in an anchor - and this may be logical on your page. Alternatively, you can just leave it like it is - nothing will show up on your page as it is an invisible marker.

Your Internal Link

So now, somewhere else on your page you want to get your visitors to refer back to "section1" what do you do? You create a normal link tag, but instead of a page filename in your HREF you do this:-

<a href="#section1">Go To Section 1</a>

Do not forget the hash (#) else your internal link will not work! The last thing to note is that you can link directly to a page and an anchor on that page. You just need to do the following:-

<a href="mypets.html#myfish">Read About My Fish</a>

Or if you want to put the full web address you can simply extend it like this:-

<a href="http://www.mypersonalwebsite.com/mypets.html#myfish">Read About My Fish</a>

The Classic Application

The classic use for the internal link was to create 'To the Top' links. So on long pages, wherever you were on that page, your visitor could jump to the top. So here's the challenge:-

• Create a page with different sections of text - make sure you have quite a long page.
• Put an Anchor at the top of your page (hint: somewhere AFTER the <body> tag)
• Create Anchors at the start of each section - give each a new name
• Create links to each section Anchor at the top of the page (maybe under a page header)
• Create 'Back to the Top' links after each section of text

Because we're kind here at the Tutorial Resource Centre, we have put together a demo for you, but have a go yourself first - that's the best way of learning.

The demo is Here - load it, then right click on the page and select "Vewi Source" or "View Page Source" (depending on what browser you're using. (By the way, if you have had the other demo open in another window/tab and you've just clicked this link - it's in the same window/tab!).

HTML Bullet/Numbered Lists >>>

Bookmark this on Delicious