Hyperlink


One of the fascinating things about the web experience is the linking (hyperlink) between pages. In this chapter we shall learn about hyperlinks.

Any object such as text, graphic images can be use as a link for navigating between web pages. Links can point to a page on our site or to a web page on another site.
The syntax for hyperlink is <A HREF=”URL linking to”>Link Object</A>
For example <A HREF=”contact.htm”>Contact</A>

We shall continue with the last website “myweb” we will start by creating two more pages, contact.htm and about_us.htm, then we will link to these pages and vice versa. 

 

To maintain consistency and ease we will use the index.htm to create these two pages, by copying and pasting it and renaming the copied file, to do this you can simply select the index.htm file and use the short-cut, Ctrl+C to copy it, then Ctrl+V to paste it OR you use the simple steps below.


Step1. Open the website myweb


Step2. Right-click on the “index.htm” and click “copy” from the menu displayed, to copy the file


Step3. Right-click on the empty space within the “myweb” open window, and click “paste” from the menu displayed


Immediately this is done we should have the pasted copy as we have below.


Now we have a new webpage so let’s rename it to “about_us.htm” to do this:
Step1. Right-click on the copied index page and click “rename” from the menu displayed



The file should be in rename mode as we have below


So type in the new name about_us and deselect, by clicking at the empty window.


Don’t forget that this new page contains the content of the index.htm, from which it was created from, so we need to edit its content, so open the webpage about_us.htm with your editor and edits the WELCOME section only, it should now look like the code below.


about_us.htm


<HTML>
<HEAD>
<TITLE>Welcome to BICL website</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH="50" BORDER=0 align="center">
<TR>
<TD COLSPAN=3>
<IMG SRC="images/banner.jpg">
</TD>
</TR>
<TR height="300px">
  <TD width="14%" VALIGN=TOP BGCOLOR="#FFFF99">
<b>MY LINK</b> <br />
Home <br />
Contact <br />
About Us</TD>
  <TD width="67%" VALIGN=TOP><b>ABOUT US</b>
    <p>
           This should contain information about the company   
  </TD>
  <TD width="19%" VALIGN=TOP bgcolor="#FFFF99">
<b>EMAILS</b> <br />
bicl@bengallery.net <br />
Benjamin.onuorah@gmail.com
  </TD>
</TR>
<TR>
  <TD colspan="3" align="center" BGCOLOR="#FFFF99">
Copyright (2014) Bengallery Integrated Company Ltd.
All rights reserved.
  </TD>
</TR>
</TABLE>
</BODY>
</HTML>

See the two bolded lines in the code are the lines I modified, just to make this page (about_us.htm) difference from the index.htm, see both page in the screenshots below.





Now create the contact page,, by similarly copying and pasting the about_us.htm, and rename the new page, to contact.htm, we should now have three pages



And the contact.htm should be modified too, as we did below.

contact.htm

<HTML>
<HEAD>
<TITLE>Welcome to BICL website</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH="50" BORDER=0 align="center">
<TR>
<TD COLSPAN=3>
<IMG SRC="images/banner.jpg">
</TD>
</TR>
<TR height="300px">
  <TD width="14%" VALIGN=TOP BGCOLOR="#FFFF99">
<b>MY LINK</b> <br />
Home <br />
Contact <br />
About Us</TD>
  <TD width="67%" VALIGN=TOP><b>CONTACT US</b>
    <p>
                Feedback form will be here
  </TD>
  <TD width="19%" VALIGN=TOP bgcolor="#FFFF99">
<b>EMAILS</b> <br />
bicl@bengallery.net <br />
Benjamin.onuorah@gmail.com
  </TD>
</TR>
<TR>
  <TD colspan="3" align="center" BGCOLOR="#FFFF99">
Copyright (2014) Bengallery Integrated Company Ltd.
All rights reserved.
  </TD>
</TR>
</TABLE>
</BODY>
</HTML>

Just like the about_us.htm, I simply edited two lines I bolded as seen above.
Note: when we get to FORM in the next chapter we will put a Feedback form, in place of the text “Feedback form will be here”

Below is screenshot of the contant.htm page


Now that we have all the pages in place we can now link the pages, let’s start with index.htm page, we already have the page navigation section at the left “MY LINK” of every page, below is a closer look of this section on the index.htm  



To hyperlinked this three text (Home, Contact and About us) to their respective pages (index.htm, contact.htm and about_us.htm).


Still in index.htm; I edit this HTML section…

<TD width="14%" VALIGN=TOP BGCOLOR="#FFFF99">
<b>MY LINK</b> <br />
     Home <br />
     Contact <br />
     About Us
</TD>

… By wrapping the hyperlink tag around the texts


<TD width="14%" VALIGN=TOP BGCOLOR="#FFFF99"><b>MY LINK</b> <br />
<a href="index.htm">Home</a><br />
<a href="contact.htm">Contact</a><br />
<a href="about_us.htm">About Us</a>
</TD>


Back to the browser view



Typically a link is underlined with blue colour for unvisited link and purple colour for visited link, however this can be alter with CSS, we will learn CSS later in this book.

Note: this link is only present in the index.htm page, therefore when you click on the contact link from this index page, you will notice that the contact page navigations are not linked, so you need to link the navigations in contact.htm and about_us.htm pages as well, just as you did with the index.htm, this can be easy done by copying the already linked navigation (I am talking about the last code section above) in the index.htm to the other two pages

 

Image links
In previous exercise we used a text as a link point, as said earlier It is possible to use an image instead of text. To do this, you must replace link text in between hyperlink tag with <IMG> tag
In this example we link the banner image to the home or index page from about_us.htm and contact.htm pages

<TD COLSPAN=3>
<a href="index.htm"><IMG SRC="images/banner.jpg"></a>
</TD>


Email links
The email link makes it easy for a site visitor email you.
Below I added the email link to one of the email address on the index page 


<TD width="19%" VALIGN=TOP bgcolor="#FFFF99">
<b>EMAILS</b> <br />
<A HREF="mailto:info@bengallery.com">info@bengallery.net </A> <br />
Benjamin.onuorah@gmail.com
</TD>


The browser view will look like what we have below.


And when the user clicks on the info@bengallery.net link it opens the default email program and the email after the "mailto:" is use as the recipient email address, as show in the screenshot below.



Next »


Creating webpage with HTML »

META Data »

Background colour »

HTML Versions »

Setting up a website »

Break Line, paragraph and alignment »

Special character, bold, italics, underline and marquee »

Text Formatting »

Listing items and Horizontal rule »

Images »

Tables »

Hyperlink »

Form »