ADDING LINKS TO YOUR PAGE
are Hypertext Links] [
[ Internal Links]
[ Activity # One] [ Activity # Two] [ Section Summary]
The only truly interactive components of most Web pages are the hypertext links. They are an easy way to give your page some dynamics and entice people to come back for a second look. Links allow you to put the "hypertext" into HTML.
A hypertext link is a special word or phrase in a Web page that, when the user clicks on it, takes him or her to a different Web document (or any other Web resource). Each Web page also has its own address or URL (Uniform Resource Locator) and for a hypertext to work properly you need to know the address of the site you are linking to.
In order to better understand the structure of the URL, we will break it down into four basic components: How://Who/Where/What
SO, WHAT THE HECK IS THIS ALL ABOUT?
Well, it is quite simple really. Just have a look at the following information.
HOW: The very first part of a URL specifies how the data is going to be transferred across the Internet. This is the Web protocol and, luckily, we do not have to know a lot about this concept. All we really need to know is which protocol each resource uses, which is fairly simple. The most obvious example is the WWW's protocol -- the HTTP that is at the beginning of most of the Web URLs you use. So the HOW part of the URL is the protocol followed by a colon (:) and two slashes (//). So a Web page will always start (or at least most often start like) http://
WHO: This is not really a person -- it is instead the name of the computer where the resource is located. In Web-Head circles this would be called the host name. (Example -- www.istar.ca/) The home page at Breton Education Centre is located on a computer named www.cbnet.ns.ca (It is now at www.cbv.ns.ca)We just tack this who part on the how part like such:
WHERE: This part of the address specifies WHERE on the computer the resource is located. This generally means the directory the resource is stored in; the directory may be something like /pages /junk /software etc. B.E.C.'s home page is in its own directory which is /~highsch So now you add this to what we have already and you will get the following:
WHAT: The only thing left is the what part. What the heck files do you want to access anyway. For a Web page you use the part of a document that contains the HTML codes and text. The File that contains B.E.C.'s home page is called start.htm so here is Breton's full URL:
Ok, now that we know what a URL is, how the heck do we place it in the Web page. Well, as usual, we use HTML code -- in this case the <a> and </a> tags.
These tags are usually referred to as ANCHORS and are just a bit different from the tags we used so far: you do not use it by itself. You stick it in with the URL of your link. Here's how she goes bye:
I know. I know. I forgot to tell you about the HREF -- don't get your socks in a knot, I'll fill you in now. The HREF stands for Hypertext REFerence (this would be a good test question). Just replace the URL with the address of an actual Web page that you want to create a link to (And YES YOU DO NEED THE EQUAL SIGN (=) AND THE QUOTES (" "). Your Hyperlink should look something like this:
Now you know why the construction of the URL is so important -- if you make a mistake in your address your link will not work.
You might have noticed that we did not close the <A> tag in the last example. Well there was a good reason for this: we were not finished with it. We must add some descriptive text so people will know where they are going. The good thing is that, like most HTML tags, it is easier to do than to say (especially if you are as long winded as I am). All we have to do is insert the text between the <a> and </a> tags. Check this out:
<A HREF="URL"> Place your text right here </A>
The browser will highlight and underline the link text and when you point your mouse at it, the URL you specified will appear in the status bar.
Hypertext links are generally divided into two categories: internal and external.
This will sent the reader to a different document (either a different Web page in the same directory or to a different system all together).
This will sent the reader to a different part of the same document.
The most common type of link will take the reader to a page at some other Web site. This can be placed right in the text of the document you are working on if you wish. Let us assume that you are doing the descriptive section of your own home page and you are telling people that you are a student at Breton. If you want your reader to be able to surf to your school's site, you simply follow the procedure outlined above and insert the name of your school between the <a> and </a> tags. Lets give it a try.
CREATING EXTERNAL LINKS IN A DOCUMENT
Create a bare bones HTML document and insert the following in the body section.
Hi, my name is (PUT YER NAME HERE BYE) and I am a student at Breton Education Centre.
Do not forget to place the text Breton Education Centre in the proper tags. (You will find the Web address in the previous section). Call up your browser and give the link a whirl.
If it works, save the file as link1.htm.
Ok, that's one way of doing it -- now let's look at another. Remember those HOT LISTS we talked about earlier -- well guess what, we are going to make a list right now.
Many people want to place a list of cool, or favorite, sites on their home pages to direct others with similar interests to specific hits. Let's give it a hook, shall we.
1. Create a bare bones document.
2. Save it as link2.htm.
3. Go on the Web and retrieve FIVE Web Addresses.
4. Return to link2.htm and place the URLs in an ordered list on your Web page.
5. Have a look at the saved document in your browser.
Oh yea! Don't forget to give each item in your list some descriptive title.
Just a little hint:
You can use your notepad or some other text editor to copy the URLs and then simply paste each individual address into the <a> tag. This is easier than writing down each address and you will not make a mistake recopying it.
Better still -- you could bookmark your sites in your browser and copy and paste them to your HTML file.
Most of your HTML pages will be short and to the point and your readers will have no problem surfing around in them. However, if you do have the occasion to suffer from terminal verbosity there is no reason for your reader to suffer along with you. You can create links within your document that allow your reader to move effortlessly from one section to another. You can assemble these links at the top of your page as a sort of HTML table of contents.
Here is where the A in anchor comes in. We place an anchor in specific parts of our document (usually the topic headings) that allow us to jump between these sections.
The anchor performs much the same function as a bookmark -- it "marks" a particular spot in the HTML document. Our bookmark (OR ANCHOR) is a bit different than the external link -- Here is an example.
<A NAME="NAME"> Anchor text goes here </a>
The "NAME can be whatever you want it to be; however, it is best to keep it short -- section1 or part1, for example, would do fine.
This is for the ANCHOR in the document. When you set up your table of contents, you are going to use the regular <a> tag. You know, that HREF thing. (IT IS USUALLY A GOOD IDEA TO BEGIN YOUR NAME WITH THE # SIGN -- JUST SO THE BROWSER DOES NOT CONFUSE IT WITH SOME OTHER DOCUMENT)
<a HREF="#section1"> <H2> YOUR HEADING TEXT GOES HERE </H2></A>
So, your table of contents uses the HREF in the <A> tag and -- the bookmark (or anchor) uses the NAME in the <A> tag.
Try the following assignment to see if you really understand this concept.
CREATE A TABLE OF CONTENTS
The following is a sample of what your finished assignment should look like.
HYPERTABLE OF CONTENTS
THIS IS PART ONE
THIS IS PART TWO
THIS IS PART TWO A
THIS IS PART TWO B
THIS IS PART THREE
THIS IS PART FOUR
NOTE: Some browsers may not underline your Hypertext -- it may just turn it blue (or whatever color you have set as default)
THIS IS PART ONE
BACK TO CONTENTS
And so on and so on... .
THE LEAST YOU SHOULD KNOW ABOUT LINKS
internal (sends the reader to a different part of the same document)
external (sends the reader to a different document).
<A NAME="NAME"> Anchor text goes here </a>