Home‎ > ‎ICT Programming‎ > ‎Assignments Fall 2012‎ > ‎

HTML - Links

posted Oct 2, 2012, 8:34 AM by Jon Hamlin   [ updated Apr 20, 2015, 11:02 AM ]

LINKS

 You use links to:
  1. jump from section to section within the same web page
  2. link to a different page within your own website
  3. link to another web page or website anywhere in the world
There are different ways to provide these links. The three most common ones are:
  1. clicking on a word, phrase or sentence
  2. clicking on a button
  3. clicking on an image (that is, a picture or graphic)


LINKING TO ANOTHER PAGE ANYWHERE IN THE WORLD

Often you see web pages with links to other web pages or websites and these other web pages can be anywhere in the World Wide Web (WWW). Recall in the above section, that the command to link to another web page within your own website is:

<A HREF="filename">Click on these words</A>

as in:

<A HREF="index.htm">Go back to home page</A>

where the browser will load the file called "index.htm" when you click on the words "Go back to home page".

To link to any page in the world, just replace the file name with the COMPLETE ADDRESS (URL) of the page you want to link to. Remember that you must also enclose the COMPLETE ADDRESS (the URL) of the link with quotation marks. For example, the command

<A HREF="http://www.dayspring.com/ecards/">Want to e-mail a greeting card to someone?</A>

will link you to a website that lets you send e-mail greeting cards. Try it now in your index.html file




LINKS WITHIN A PAGE - PAGE JUMP

To offer a page jump, you need two items:

  1. The command that points or sends the browser to another section on your web page.
  2. The place or point on the page where you want the browser to jump to.
You can also think of page jumps as bookmarks. You place bookmarks at different places on your web page and then at the top of your web page you provide links to these bookmarks. You must assign a name to each bookmark, otherwise the browser will not know where the bookmark is located. Here is the basic link command that points to another section on your web page.

<A HREF="#linkname">Click on these words to go to the bookmark</A>

Where "linkname" is the name of the section you are jumping or linking to. That is, a section of the web page has been bookmarked with the name "linkname". An example of a page jump is the following

Example code:

<H4 ALIGN="CENTER">
<A HREF="#top">click here to go to the top of the page</A></H4>

If you do not want to use a header tag, then use the paragraph tag as in:

<P ALIGN="CENTER">
<A HREF="#top">click here to go to the top of the page</A></P>

At the point or place where you want the browser to jump to, you insert the following command:

<A NAME="#linkname"></A>

For example, at the top of this page (right after the BODY tag), I entered this command:

<A NAME="top"></A>


LINKING TO ANOTHER PAGE IN YOUR WEBSITE

Linking to pages within your own website is easy to do. Recall that the basic command for a page jump studied in the last section is:

<A HREF="#linkname">Click on these words</A>

Well, to link to another page such as to your home page, just replace the #linkname with the name of your file as in:

<A HREF="filename.htm">Click on these words</A>

For example, if your home page was named index.htm, you could have:

<A HREF="index.htm">Go back to home page</A>

which will be displayed in the browser as:

Go back to home page

If you do click on these words, the browser will immediately load your index.html page. To return to this spot, click on the "BACK" button on the menu bar. 


TARGETING YOUR LINK

The target attribute specifies where to open the linked document.

This example will open the linked document in a new browser window or in a new tab:

<a href="http://www.mrhamlin.ca/" target="_blank">See Mr. Hamlin's Site</a>


Target ValueDescription
_blankOpens the linked document in a new window or tab
_selfOpens the linked document in the same frame as it was clicked (this is default)
_parentOpens the linked document in the parent frame
_topOpens the linked document in the full body of the window
framenameOpens the linked document in a named frame

Continue to HTML - Indenting, Lists, and Symbols

Comments