ALL ABOUT LINKS

INDEX-----HTML tags-----NEWARTPOTTERY.COM

Links -aka "hyperlinks"- are any words or images, that when you click on them, take you to another web page or web image. Generally, links are words in blue, or images with a blue border around them. That indicates it is a link. It does not confirm that a link exists, just that there is SUPPOSED to be a functioning link.

Links are very simple to master. Generally when you say "link" you are talking about a path to another web page. This is what I'll show you first. Here is the basic template for a link: <a href="your link here">. If you remember: <a href=""> you are well on your way to mastering links. Between the quotes is where you put the location of where you want to go. It can be another page of your site, it could be a photograph, or it could be a link to a web site on the other side of the world. It doesn't matter. As long as where you want to go has an address, you can link to it. Also note that this is an "open" tag. Eventually there must be a "closed" link tag like so: </a>. You will see that below.

We are quickly going to create a link from your home page ( your index.html) to the second page of your web site.

On your index.html SIMPLETEXT or NOTEPAD file, I want you to copy and paste the following sentence on to the bottom of your page just after whatever you wrote last. Copy and paste the two line breaks and the sentence.

Click the following link to go to <a href="secondpage.html"> MY SECOND PAGE</a>.

(Did you note the "closed" link tag at the end of the line above?)

After you copy and paste the above to your index.html file, save it, then click your browser window and REFRESH and you will see the blue link appear stating "MY SECOND PAGE."

If you click on that link, you will get a message saying that the file cannot be found. That's because you have not yet created the secondpage.html file yet.

So admire what you have done then save and close your index.html file. Next, open a "NEW" SIMPLETEXT or NOTEPAD file. Since you are starting a new HTML page, it is best to copy and paste (or just type them if you remember them) the basic web page tags. Here they are again. Remember them. These should be the first things you put on any soon-to-be web page.

<html>
<title></title>
<body></body>
</html>

Between the title tags put "MY SECOND PAGE" then do a "save as" and title it secondpage.html and put it into your desktop "website" folder where your index.html is. You now have something to link to when you click on the "MY SECOND PAGE" link on the bottom of your INDEX.HTML file. Open your index.html in your BROWSER window and try the link. It should open a window titled "MY SECOND PAGE," but since you have supplied no text, the window will be blank.

For the time being, we are going to put all your website material in the same desktop folder. It will make everything easy.

Let's briefly look at the difference between the link on your SIMPLETEXT file and the link you see on your browser window displaying your web page.

SIMPLETEXT link reads: <a href="secondpage.html"> MY SECOND PAGE</a>.

While your browser shows you MY SECOND PAGE.

With the <a href="secondpage.html"> you actually instruct the browser to find the secondpage.html file but display the words between the link tags. So whatever is between <a href="secondpage.html"> and the closing tag which is </a> will be displayed in blue as a link. Got it? Easy, huh?

For the time being, we will save all your HTML pages to the same folder. If they are in the same folder (or on the same level of your hard drive) you only have to supply the file name in your link. If you had your file in one folder ("Folder-1") and your secondpage.html in another folder ("Folder-2"), your link would have to read differently. You would have provide a path for the browser to follow. Your link path from your home page to your second page would then have to read:

 
 
Click the following link to go to <a href="folder2/secondpage.html"> MY SECOND PAGE</a>.

More about those paths later. So now you have two pages but they are linked in only one direction. you can go from your home page to your second page, but not the reverse. To make it so you can click back and forth between the two, you have to put a link on your second page to your home page. So, copy and paste the following onto you secondpage.html SIMPLETEXT file:

Click the following link to go to <a href="index.html"> HOME</a>

Do a "save" and then when you click your browser window, you should have a HOME link on your second page and you should be able to jump back and forth between the pages by clicking links. Try it.

Now it is up to you to put some content on your second page.

As soon as you create a third page you are going to have to have a "navigation bar." This is something you are going to put on the top and bottom of every HTML page you create and it will allow anyone surfing your site to jump around to any point in your web site from any point in your web site.

So click this link and learn about your NAVIGATION BAR.

INDEX-----HTML tags-----NEWARTPOTTERY.COM