Part IV - Linking to the World

One of the nicest features of HTML is the ability to create text or images that, when clicked on with a mouse, will take you to another location. This is called a hyperlink. It's the basis for what HTML was created and how it got it's name Hyper Text Markup Language. Let's take a look at the modifications made to last issue's example:

<html>

<head>
<title>Harry's Home Page</title>
</head>

<body bgcolor="#FFFFFF">

<p align="center"><font color="#0000FF" size="4">This is my First HTML Page</font> </p>

<p align="center"><a name="No1">
</a><img src="/checkmar.gif" alt="Check Mark">
<font size="2">1) First lesson</font></p>
<p align="center">
<img src="/checkmar.gif" alt="Check Mark">
<font size="2">2) Second lesson</font></p>
<p align="center">
<img src="/checkmar.gif" alt="Check Mark">
<font size="2">3) Third lesson</font></p>
<p align="center">
<img src="/checkmar.gif" alt="Check Mark">
<a href="http://www.visiontm.com/#No1"><font size="2">4) Back to Number 1</font></a></p>
<p align="center">
<a href="http://www.visiontm.com/index.html">
<img src="/visionsm.gif" alt="Vision Technology Management" border="0" width="149" height="45"></a></p>

<center><table border=1>
<tr><td><p align="center">
<img src="/checkmar.gif" alt="Check Mark"></td>
<td><font size="2">1) First lesson</font></p></td></tr>
<tr><td><p align="center">
<img src="/checkmar.gif" alt="Check Mark"></td>
<td><font size="2">2) Second lesson</font></p></td></tr>
<tr><td><p align="center">
<img src="/checkmar.gif" alt="Check Mark"></td>
<td><font size="2">3) Third lesson</font></p></td></tr>
<tr><td><p align="center">
<img src="/checkmar.gif" alt="Check Mark"></td>
<td><a href="http://www.visiontm.com/#No1"><font size="2">4) Back to Number 1</font></a></p></td></tr>
</table>
<p align="center">
<a href="http://www.visiontm.com/index.html">
<img src="/visionsm.gif" alt="Vision Technology Management" border="0" width="149" height="45"></a></p>
</center>

</body>
</html>

I've added quite a bit since last issue. Hopefully yours looks a whole lot better than mine, with a lot more meaningful information. There are five primary additions I would like you to look at:

  1. I have formatted the coding with spaces as indents and carriage returns for new lines. It's easier to read, but does not affect the operation of the HTML.
  2. The first section that begins <p align="center"> has something next to it that the others do not. It establishes a bookmark called No1 for the first checkmark line and looks like this <a name="No1">. While it is hard to tell what it does when you view example 3 in your browser, it is a feature that you will probably use often. See number 3 below for how it is used.
  3. I have added a <a href="http://www.visiontm.com/#No1"> to the line that contains " 4) Back to Number 1 "and put a matching </a> after the </font> Try experimenting with where you place the <a href="http://www.visiontm.com/#No1"> and it's matching </a> tag. What these matched tags do is establish a hyperlink for the entire line "4) Back to Number 1". The hyperlink brings the browser to the bookmark No1. Note the # is the trigger for a bookmark, and can be used within an http reference as well
  4. I have added a new image, my small Vision logo, with a hyperlink to the Vision Technology Management home page located at http://www.visiontm.com/index.html . The http:// is very important in the ahref line but can be ftp://, mailto:, and others (see the HTML reference guide for use of the <a> anchor tag. The http:// tells the browser to look for a page that may be on another server. Without the http:// the browser would look for the page relative to the base element or the address used to reach this page (i.e. <a href="/example1.html#No1"> looks for a document example3.html in the current directory and also looks for the bookmark No1.
  5. The final addition to the example is a simple table. Tables can get very complex, but are very powerful. Many attributes are available that are best explained in the reference guide. For our purposes, I would like you to know that tables help you format how your page looks and how to place items on the page with center, left, and right justification. In the example above I have included the same list of items only in table format so that you can see how the same data can be presented in columns.

Each table begins with the <table> tag and tables can be placed within tables to allow additional formatting. This layering is especially useful when you want to center a heading but left justify a list of items. If you use plain <center> or Paragraph center, the formatting can cause you problems. By using cell properties in the <td> tag, formatting is much neater. Each row in the table is separated with a <tr> tag pair and each column in the table is separated with the <td> tag pair. Both tags have additional properties available which also allow individual color, background, and other elements. Play with tables for a while. They can be very powerful.

This should give you all the basics you need to create some pretty impressive pages. It is now up to you to dig through the HTML Reference Library for particular tags and tag criteria. All of this information will be helpful as you move in to Web development programs like Front Page. If you do use Front Page, or something like it, remember they are doing a lot of work for you in their own way. Do not fight the programs, but instead see how they work and work with them to accomplish your goals.

Your assignment for the next issue of VisionNews is to finalize your home page. Add a list of links using a table, add bookmarks on your page for top and bottom and try some solid color background in your table cells. You will have accomplished a lot. See you all in the next issue when we discuss the power of web hosting and the tools available.