HTML LEsson Four - creating hyperlinks

Open Notepad and start a new file

Add the basic code for a page:

<html>
<head>
<title>Links Page 1</title>
</head>
<body bgcolor=”#CE94BA”>
<p>First line of text for page links 1</p>
</body>
</html>

 

Save it as links1.html

Don’t just copy and paste – get used to typing in this very basic part of every web page. Plus, if you copy the code there is a good chance the quote marks will turn into something unrecognizable by the browser.

Save it and be sure it works.  

Change the title, background color, and the words in the first line of text (from links page 1 to links page 2)

Save as links2.html

So, now you have two pages to work with - each with a separate title, background color, and first line of text

Now we are going to add a few different types of links.

Part 1 – creating a plain text hyperlink

Open up links1.html

After the first paragraph add this code:

<p><a href=” http://www.popsci.com”>Popular Science</a></p>

* Note: The html code can all go on one line – it is just because of the word document that it rolls to the 2nd in the example – either way works. I made it small font on purpose to try and fit it on this page.

Save it and see if it works. You should see a link that now takes you to the Popular Science website when you click on it.

Notice that it does not open a new window. Often when you are linking to something outside of your own website you may prefer these to open in a new window (so your visitors don’t leave your site)

So, go back to the code and add the following attribute:

target=”_blank”

Your link code will now look like this:

<p><a href=” http://www.popsci.com” target=”_blank”>Popular Science</a></p>

Save it and try again. This time when you click the link a new window should open.

 

Part II – using an image to create a hyperlink

Open up links1.html again
This time we are going to add a small image

Take this picture and save it to your images folder

Add this to your links1.html page and have it link over to links2.html

My code:
<p>Click on the cat to go to the Links 2 page <br>
<a href="links2.html"><img src="images/birthday-cat.jpg"></a></p>

Notice the <br> tag I added

This forces a line break – I wanted the cat picture to show up under my words rather than right next to it

Get the cat link to work properly - taking you to links2.html when you click on it

Now add another simple text link that goes to the links2.html page

Since this is within your site do not use the target=”_blank” attribute

Now go to the links2.html code
Add a text link back to links1.html
Add an image link back to links1.html

Don’t email me these - until it is live on the web these only work on your computer. I will come around and view the results. Just let me know when you are ready.