Tutorials - HTML - Lesson 5
Right, what's the point of having a site if you can't link to other
pages of your own that you've created or perhaps a favourite site you
have.
Step 5 - Adding Links
Open up notepad and make a page of your own, make sure it's different
from "index.html" or you won't be able to tell if you've linked
properly! Save this new page as "page2.html" in the same
folder as "index.html", then open up "index.html" and
add the following code.
<html>
<head>
<title>My first Web Page - Text Formatting</title>
</head>
<body bgcolor="#FFFFFF">
<font face="comic sans ms" size="3"
color="#D2D2D2">
<h1>My First Web Page</h1>
<p>My teacher always told me to use <b>
paragraphs</b></p>
<p>I wonder <i> whether</i> she was right or not<br>
I <u>don't</u> think she was you know!<br>
No She really <strike>wasn't</strike>!
<p>Why Not Visit <a href="page2.html">my second
page</a>?</p>
</font>
</body>
</html>
You should see the text "my second page" underlined and in a
different colour to the rest of the text. This is telling everyone it's a
link and meant to be clicked, so go on! What are you waiting for? Click
it! If you've copied the code correctly, your second page,
"page2.html" should now have opened, yeay! Put a link on
"page2.html" back to "index.html" and check it works.
The <a></a>
tags tell the browse that the text within them that there is a link and
the href statement points
to the page you want to link to.
If you want to link to another site, you don't normally want it to open
in the same browser window as you may have a long list of sites you want
people to be able to visit. To get the link to open in another window you
simply add target="_blank" into the <a> tag. This tells
the browser to open a blank window then load your link inside it. Try the
following:
<html>
<head>
<title>My first Web Page - Text Formatting</title>
</head>
<body bgcolor="#FFFFFF">
<font face="comic sans ms" size="3"
color="#D2D2D2">
<h1>My First Web Page</h1>
<p>My teacher always told me to use <b>
paragraphs</b></p>
<p>I wonder <i> whether</i> she was right or not<br>
I <u>don't</u> think she was you know!<br>
No She really <strike>wasn't</strike>!
<p>Why Not Visit <a href="page2.html">my second
page</a>? Or if you
feel lucky, visit <a href="www.microsoft.com"
target="_blank">Microsoft</a></p>
</font>
</body>
</html>
You can see that the Microsoft site loaded in a brand new window and
your own page is still visible. What now? How about Step
6 - Showing Images?
back
| 
