HYPERLINKS

The Web gets its name from its resemblance to a spider web. One page is linked to another by an imaginary line, and that page is linked to another, and so on. All of these links cross and re-cross, forming a web. Youre about to learn the ins and outs of linking web pages together.

Understanding File Paths

Your web page is going to be kept on a computer called a server. A server is pretty much like your computer; it stores information in exactly the same way. Everything in any computer is kept in a folder, so web pages on a server are kept in a folder too. Your web site is stored in one main folder called the root folder. Sometimes there are folders in that root folder, but every element is kept under the umbrella of the root folder. When you type in http://www.awdsf.com you are giving the Internet enough information to find the root folder and the home page.

A hyperlink is basically an instruction to your computer, telling it to find and open a file. Youre going to have to direct the computer, in computer language, from the page a viewer is looking at to the page they wish to see. You have to give the computer a map from one page to the next. This map, or path, is called a "file path". The file path is simply the path a computer must follow to find a particular file.

 

Writing File Paths

If you were giving me directions from one folder to the next you might say:

Go to folderA, then go to FolderB, then open webpage.htm.

To give the same directions to a computer as a file path, you would say:

folderA/folderB/webpage.htm

"/" (slash) basically means "then go to".

When giving directions to a computer, the first thing you name in the file path is the first step in the computers path. Dont write the name of the folder the starting point is in. You wouldnt give someone directions by saying "Start where you are" would you?

The last thing in the file path should be the name of the file you want the computer to open.

In the below image, how would you write the file path hyperlinking from page1.htm to page2.htm?

(try to figure it out, the answer is below)

The correct file path would be:

folder2/page2.htm

Remember, you dont write the name of the folder or the file the starting point is in.

 

Internet Addresses are all File Paths

So, a file path like:

"http://www.awdsf.com/courseware/internet_education_files/workings_of_the_web.htm"

Gets you to the root folder for awdsf, then goes to a folder called "courseware" then to a folder called "internet_education_files", then to a web page called "workings_of_the_web.htm"

 

Sometimes an Internet Address Doesnt End in .htm. Whats going on?

You may have seen addresses like www.cnn.com/sports

Some addresses dont end in .htm. How does that work? Well, the nice people who made up HTML decided that it would be cool if you could just direct a computer using the Internet to a certain folder and it would automatically open the main HTML page. To make this work, there has to be a standardized name for the main file. If you dont tell the computer which HTML file to open, it would automatically open a pre-determined main file in that folder, called:

          index.htm

You can save a file "index.htm" in a particular folder and direct a file path to the folder. The Internet will automatically open "index.htm"!

How nice for you.

You can name as many files "index.htm" as you want, as long as theyre in different folders. Shorter addresses are easier to remember, use this to your advantage.

Rules About Saving Your Homepage

Always Call Your Homepage "index.htm", and Always Store it in Your Root (main) Folder

Your URL (www.yourpage.com) only directs a user to your root folder. If you dont name your homepage "index.htm", your viewers will be treated to the dreaded "Page Not Found". Likewise, theyll see the same evil message if your homepage is not saved directly in your root folder.

Your Home page cannot be kept in any other folder than your root folder. It must reside on the top level of your web site.

In rare cases, a hosting service may want you to call your homepage "default.htm", but theyll usually make a big deal about it, so you dont really have to worry.

Okay, so whats the Hyperlink tag?

Not so fast First we have to have some pages to link between. Follow the below steps to create a new page:

1. Open Notepad or SimpleText
2. Were going to make a new page. If youre still looking at HTML from "firstpage.htm", click FILE-> NEW (make sure you save firstpage.htm)
3. Type:
   <HTML>
   <HEAD>
   <TITLE> Second Page! </TITLE>
   </HEAD>
   <BODY>
   <CENTER> This is the Second Page! </CENTER>
   </BODY>
   </HTML>
4. Save this page in the "website" folder on the desktop.
   Call it "secondpage.htm"
   (Write it exactly like that, no spaces, all lowercase. Dont forget to add the ".htm")
5. Check the new page in the Internet Explorer to make sure it works.
   (Remember, in the Internet Explorer, youll have to go to FILE-> OPEN-> BROWSE)
6. Hit the "BACK" button in the browser, so youre looking at the firstpage.htm again.
7. In Notepad or Simple Text, open "firstpage.htm"
   If you cant find firstpage.htm You may have to instruct the program to look for all files (see picture)

Okay, now youre ready to learn the Hyperlink Tag!

The hyperlink tag references another web page or file. For that reason, it is called the "Hyperlink Reference Tag". Hyperlink Reference is conveniently abbreviated:

          href (pronounced "H-REF")

The Hyperlink tag is always preceded by an "A", called an anchor. The tag looks like this:

          <a href="the_file_path_and_name_of_the_file_youre_linking_to.htm">

            </a>

So, the HREF tag needs a closing tag. Notice that the closing tag is only "</a>"

Okay, here comes an important point (appropriately in italics):

Anything in-between the opening and closing Hyperlink tag becomes click-able!

So, if you wrote:

            <a href="the_file_path_and_name_of_the_file_youre_linking_to.htm">

          Please click here

          </a>

You would get:

Please Click Here

"Please click here" would become blue, and underlined, and would be click-able, linking you to "the_file_youre_linking_to.htm".

Later, youll make buttons by placing images in-between the opening and closing href.

Want to try it making a link?

1. Make sure your looking at the HTML for firstpage.htm
2. Click into the body, and add:
   <A HREF="secondpage.htm"> Click here for the Second Page </A>

3. Save the HTML, and refresh the page in the Internet Explorer
   (if you closed the browser, youll have to open it and click FILE-> OPEN-> BROWSE to find firstpage.htm)
4. Click the link!
5. Celebrate.
6. Open the HTML for secondpage.htm and add a link back to firstpage.htm
   The link would be: <A HREF="firstpage.htm"> Click here for the First Page </A>
7. Test your links.

Thats it. You rule.

Linking to Pages on the World Wide Web

Its perfectly legal to link to whomever you want to. You dont have to ask. Keep in mind that a link to another site is a recommendation to leave your site

Its easy to link to any web address. The only thing you have to remember is that you have to type the whole address, including the "http://".

To link to the Academy of Web Design, SF (which is highly recommended):

          <a href="http://www.awdsf.com"> This school rules! </a>

 

Linking to E-Mail

Linking to E-mail is also easy, but it doesnt work on everyones browser. Users must configure their e-mail program directly within their browser, and most home users have absolutely no idea how to do such a thing. Im not telling you never to set up an e-mail link, but its a good idea to consciously post the actual address in a conspicuous location. The e-mail link looks like this:

          <a href="mailto:the_e-mail_adress.com"> the e-mail address.com </a>

Easy enough, eh?

Take some time to practice building pages and linking between them.

|