Add a Page With a Hyperlink, Upload and Test

Current Progress
Current Progress
Current Progress
Current Progress

Introduction

This is pretty much the final lesson about webpages. I want you to truly understand how the components of a web page are accessed and referenced. By components I mean images and external files. Once you understand this, you will be very well placed for troubleshooting errors whenever they arise (and they will!).

It’s a bit like owning a car – there are some basic things you can do for yourself such as top up radiator fluid, oil, windscreen wash fluid, check tyre pressures and inflate, change a wheel, use jump leads for starting a car with a flat battery etc. Some of us have more advanced knowledge that we can use before we resort to calling out the break down recovery company.

We can always pay others to do things for us, but this takes (a) time / delays and (b) costs money! So when things go wrong, it is worth knowing the basics in order to try to fix for yourself because on a live system that will be visited by your fee paying customers, down time = lost $revenue. And when things are fixed (possibly by others) you will want to know what was wrong and what they did to fix it, then how to test it thoroughly to make sure it has been properly fixed. And also fixed the right way, not just a quick bodge.

Hyperlinks

Hyperlinks – these are the items you click to load another page. Hyperlinks can be attached to images and text. The html for a hyperlink looks like this:

<a href="url">link text</a>

e.g.

<a href="https://www.my-amazing-website.com/">Visit My Amazing Website!</a>

This would display the text Visit My Amazing Website! which when clicked would load the page https://www.my-amazing-website.com into your browser.


By default, links will appear as follows in all browsers:

  • Unvisited Link - underlined and blue
  • Visited Link - underlined and purple
  • Active Link - underlined and red

Image links are as follows:

<a href="index.html">< img src="dog-photo.jpg" </a>

Where dog-photo.jpg is the filename of the image for the hyperlink.

Relative and Absolute Addressing

Relative or absolute URLs – by the way, URL means Uniform Resource Locator, typically the address of a web page.

This is an important aspect to understand also because it will help you troubleshoot things like images not showing up.

An absolute address is the complete, explicit address to an item. The following are examples

https://www.my-amazing-website.com

https://www.my-amazing-website.com/images/dogo-photo.jpg

Relative addresses are a way of referencing an item from where you are. So if the dog-photo.jpg is in the same folder as the web page it is being referenced from,

<img src="dog-photo.jpg">

And 

<img src="https://www.my-amazing-website.com/dog-photo.jpg" >

Would work. If the image was stored in separate folder it might look like this:

<img src="./images/dog-photo.jpg" >

And 

<img src="https://www.my-amazing-website.com/images/dog-photo.jpg" >

Note the dot in

<img src="./images/dog-photo.jpg">

This means “from here” i.e. refers to a folder below where we are.

Absolute addressing is best avoided because it makes web pages hard to maintain, introduces extra characters on a page that will increase load speed and also make it difficult to move pages and folders around.

The other thing about absolute addressing is that any files you create containing absolute addresses to items simply would not work properly when uploaded. This is because on a computer an absolute address would look like:

C:\Users\PAULU\OneDrive\Desktop\web-pages-for-lesson\dog-photo.jpg

OK so now we know about relative and absolute addresses we are going to introduce some hyperlinks.

We will do this exercise initially on your computer, then we’ll upload to your server and test there. We will create three pages altogether and hyperlink to the others.

Follow Along With Me! 

1


So, we know that the index.html file we created works ok so we edit this as follows:

<!DOCTYPE html>

<html>
<head>
<title>Welcome!</title>
</head>
<body>
<h1>Paul’s Website</h1>
<p>You will learn amazing things!</p>
<h2>Relative URLs</h2>
<p><a href="shoes.html">Our Range of Shoes</a></p><p><a href="trousers.html">Our Range of Trousers</a></p>
</body>
</html>

And save.


2

Now, from your file manager, copy 

3


Paste the file:


4

And you will end up with:

5


With the file highlighted as shown, press F2 (or right click and select rename)


6

And enter shoes to give:

7


Repeat this –  make a copy of index.html and rename it to trousers.html so you end up with:


8

Now, open shoes.html in Notepad and edit to give:

<!DOCTYPE html>

<html>
<head>
<title>Welcome!</title>
</head>
<body>
<h1>Shoes Page</h1>
<p>You will learn amazing things!</p>
<h2>Relative URLs</h2>
<p><a href="index.html">Home Page</a></p>
<p><a href="trousers.html">Our Range of Trousers</a></p>
</body>
</html>

Then save and close.

9


Now open trousers.html in Notepad and edit to give:

<!DOCTYPE html>

<html>
<head>
<title>Welcome!</title>
</head>
<body>
<h1>Trousers Page</h1>
<p>You will learn amazing things!</p>
<h2>Relative URLs</h2>
<p><a href="shoes.html">Our Range of Shoes</a></p>
<p><a href="index.html">Home Page</a></p>
</body>
</html>

Then save and close.


10

That’s the editing done. Now, from your file manager, double click on the index.html file to open the web page and you should see:

11


Click on “Our Range of Shoes” and you should be presented with:

You can easily guess what happens when you click one of the other links.

That's it!

So, that’s it. This is the foundations on which websites are built – a collection of interlinked pages.

Whist we have created overly simplistic pages, you will have learned how websites work and how pages are accessed. 

Refer to the earlier lesson if you need to in order to upload the three files (web pages) to your server and repeat some of the above steps to make sure things work as expected – click the links and see what happens.

  • 👍 TIP – After you have built a website or outsourced the work, you should review every single page and click every link to make sure it works.

Join Our Facebook Group

Our community is filled with awesome, like-minded individuals who love to share ideas and resources!

Book a session now!

Remember, if you’ve purchased the Gold Level personal support option with the course, you can call me and I will help you with this. Book your slot by clicking the button below!

Current Progress
Current Progress
Current Progress
Current Progress
{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
Pen
>