Quick Links

• Introduction
• Basic Page Structure
• Lists
• Links & Images
• Tables
• Forms

Links & Images in HTML

One of the great innovations of HTML was the ability to allow the viewer/user to jump from one page to another by activating predetermined links. This is the origin of the term `H'yper`T'ext. Initially, graphics was not available on the Internet. However, it did not take long for images to not be just displayed but used as links as well. This page will provide the basics regarding how pictures can be displayed and how links can be coded into your documents.

In the following, the `A'nchor tag pair (<A>...</A>) is used for the link (and for the destination if it is in the same document). The href attribute stands for `H'ypertext `REF'erence and name is the label of a document-internal destination.

Links

Links can be made to another document or to a place within a document. In the following, the A tag is used as the `A'nchor for the link (and for the destination if it is in the same document). The href attribute stands for `H'ypertext `REF'erence

1. In linking to other documents, there are three different methods:
   
   
   • Document in the same directory
     One of the complaints made about web pages is that they are too long or that they contain too much information. Breaking up the information into smaller documents each of which deals with a more delimited topic requires an organizational plan. It is customary to group documents dealing with a certain subtopic in a single directory or folder. Links to such documents have the simplest code. Below is a link to the file called basic.html, which is the starter page for this set of pages about HTML.
     Main Page
     <a href=basic.html>Main Page</a>
   
   
   • Document on the same web site
     If your web site contains many diverse, but related, groups of files, it is best to divide them into different directories/folders. Thus, besides this information about HTML, I have created a great number of pages about how to program in PHP, a popular programming language for the WWW. These are in a separate directory tree. Below is a functioning link to that set of pages.
     PHP Workshop Agenda
     <a href=../PHP/workshop/agenda.html>PHP Workshop Agenda</a>
     This is known as relative addressing for the link, because the ../ specifies that to get to the desired document you must first ascend the directory tree before descending through the PHP directory to the workshop directory, which is where the file resides.
   
   
   • Document on a different web site
     No one is able to include everything about any topic on a single web site -- just go to Google and type in a topic. Consequently, most web sites provide links to others.
     On the Tables page, I show how the header of my four-language Megiser dictionary site was designed. The link to this site is as follows:
     <a href=http://www.dfstermole.net/Megiser/searchmeg6.php>four-language Megiser dictionary site</a>
   
   
2. Linking to another point within a document requires two pieces of code, one for the link and the other to label the point being jumped to.
   
   
   • On the Tables Page of this site, I provide a set of "Quick Links" to other pages and to a spot on that page itself. For the latter, the following link was used.
     <a href=#nestedtables>Nested Tables</a>
     This link causes a jump to the spot on the page which is labeled with
     <a name=nestedtables></a>
     

This document-internal link can also be combined with any of the three methods for jumping to another document. This means that you can jump to any predetermined spot in any document. The following code links to the Special Uses section on the Tables page.

Images

Once graphics was introduced to the Internet, it became possible to not only display pictures and logos of all sorts, but to use the graphics as links.

The `IM'a`G'e tag (<img...>) has no corresponding closer. It does take many attributes, one of which, "src" is obligatory, because without it the browser would not know which image to display. Here is the image produced by
<p><img src=images/pglogo.png></p>

It is also possible to specify the desired size of the graphic, and the browser will scale the picture to the requested height and width as done here with <img src=images/pglogo.png width=24 height=31>. However, as you can see, not all graphics will look as good as when they are rendered at their original size.

It is also possible to cause a graphic to serve as a link. The picture to the right of Hieronymus Megiser is a link to my site for his Dictionarium quatuor linguarum (four-language dictionary). The code to establish this link is
<a href=http://www.dfstermole.net/Megiser/searchmeg6.php><img src=images/megiserst.png align=right></a>