How to add and link pages

Go back to HTML and CSS Index

In many cases, you don't want to have just one page on your website - you want to have multiple pages that are linked. In this lesson, we will add a new page to our website, and place a link on each page to the other so that we can move back and forth between them.

Creating a new page

The procedure is pretty much the same as we saw in the previous lesson:

  • Create a new file:
    • File -> New
    • Select HTML
    • Add a title, e.g. Welcome!
    • Create
  • Save the file:
    • File -> Save as...
    • Name the file index.html
    • Save the file in the same folder as the about.html file (not in the img subfolder).

Linking the two pages

Once we have the two pages that we want to connect or link, we place an a element, also known as an anchor. The a start tag is a bit different from the others we've seen so far as it contains an attribute which basically just gives the browser more to work with.

<a href="filename.fileextension"> Clickable link </a>
Example 2.20 | The a element

The href attribute is used to identify the page or section, you want the page to connect with. In this case, we will get a link that says Clickable Link, and if we click on it, it will take us to a file called filename.fileextension which does not exist since fileextension is not really a file extension - so let's look at another example:

<a href="about.html"> Link to about page </a>
Example 2.21 | Link to about page

Now, if we place this line of code in the body element of our index.html file, we create a clickable link that says Link to about page and if we click on it, it will take us to the file called about.html which is the name of the file that we created last time.

Try it!

Ok, so we now have a link from our index page to our about page, but once we're there, we can't get back. Let's fix that.

  • Open about.html in the code editor
  • Inside the body element, above the h1 element, insert a link to the index page
  • Save the file and open it up in a browser.
  • You have succeeded with the assignment, if you can go back and forth between the two pages by clicking on the links.

Next up

We've now created two pages - about.html and index.html, and we have placed a link between them.

In the next lesson, we will add some lists to our page as well.

Next up: Adding lists