In our first lesson, we examined the basic commands to create a Web Page. In this lesson we will look at the basic commands that can be used to design a web page by adding Color, Anchors for the same Web Page, Links to other Web Pages, and placing the date automatically using JavaScript whenever a page is changed.
Using Color on Your Web Page
In order to use Color on your Web Pages, you must first understand the various colors that are available, and the way that they are displayed. There are 32 colors that are available on both the Internet Explorer and Netscape Browsers by simply using the name of the color. In addition, these colors can be referenced by using their Hexadecimal value. (There are many other colors available to use with the Hexadecimal value.) Here is an example of displaying Agua and Blueviolet by their name or Hex value.
| <FONT COLOR="AQUA"> Aqua |
<FONT COLOR="#00FFFF> Aqua |
| <FONT COLOR="blueviolet"> Blueviolet |
<FONT COLOR="#9F5F9F> Blueviolet |
This is the way that it will look.
| Aqua |
Aqua |
| Blueviolet |
Blueviolet |
The following are the 32 colors available for Netscape and Internet Explorer.
| Aqua |
Black |
Blue |
Blueviolet |
| Chocolate |
Darkgoldenrod |
Firebrick |
Fuchsia |
| Gold |
Gray |
Green |
Hotpink |
| Indigo |
Lime |
Maroon |
Mintcream |
| Navy |
Olive |
Orange |
Paleturquoise |
| Peachpuff |
Purple |
Red |
Salmon |
| Seagreen |
Sienna |
Silver |
Snow |
| Tan |
Teal |
White |
Yellow |
Links to Web Pages
Linking is the means by which you can move from one place to another on the same Web Page, moving from one document to another on the same computer, or moving to another document on another computer in a different part of the world entirely.
A Link Within the Same Web Page
If you are creating a large continuous Web Page, it may become necessary to move from one part of the page to another section of that page. This could be done by the user of the Web Page by scrolling down, but it is much more convenient to have a place to click that automatically moves you to the other section. For instance, if we had four different areas that we wished to access that looked as follows:
Topic One Topic Two
Topic Three Topic Four
By clicking unto any of these four topics above, the user is transferred to another part of the same Web Page that has the connecting phrases. Here is the coding to accomplish what you see above. Simply place a "#" sign before the name of the section you wish to go to on the page. Thus it looks like "#One", "#Two", etc.
<a href="#One" > Topic One </a>      
< a href="#Two" > Topic Two </a>      
<a href="#Three" > Topic Three </a>      
<a href="#Four" > Topic Four </a>      
To connect to the other part of the Web Page, you change the code as follows:
<a name="One"> Topic One
< a name="Two" > Topic Two
<a name="Three" > Topic Three
<a name="Four" > Topic Four
As you can see the   are all dropped because there is no need to separate the Topics, as they will be separated within the document. In addition the href is changed to name, and the # sign is dropped before the topic name. When you click the href phrase, you are immediately moved to the part of the Web Page that has the name above.
A Link to a Web Page on the Same Computer and Same Directory
If you are creating a Web Page that will use another Web Page in the same directory, the coding is a little different. Let us use for example the coding above for linking within the same page and see what needs to be changed. In lieu of the "#One", "#Two", etc. all
we need to do is drop the "#" sign and change the link name to "one.htm", "two.htm", etc.
<a href="one.htm" > Topic One </a>
< a href="two.htm" > Topic Two </a>
<a href="three.htm" > Topic Three </a>
<a href="four.htm" > Topic Four </a>
A Link to a Web Page on the Same Computer and the Web Page is in Another Directory
If you are creating a Web Page that will use another Web Page on the same computer, but is found in another directory, the coding is a only requires a small amount of change. Let us use for example the coding above for linking and see that the only change that is necessary is to place the directory name in front of the page name using a "/", such as "/dir1/one.htm", "/dir2/two.htm", etc.
<a href="/dir1/one.htm" > Topic One </a>
< a href="/dir2/two.htm" > Topic Two </a>
<a href="/dir3/three.htm" > Topic Three </a>
<a href="/dir4/four.htm" > Topic Four </a>
The "/" sign tells the computer that the directory being referenced is below the current directory. This is followed with the directory name such as "dir1", "dir2", etc. That is then followed with a "/" indicating that what follows is the web page name "one.htm", two.htm, etc.
A Link to a Web Page that is Located on the Internet Apart from Your Computer
If you are creating a Web Page that will that will link to another Web Page on the Internet, you must provide the full path to the computer that you wish to access. Let us say you wished to access: (1) Yahoo, (2) Sumter On Line and (3) My Home Page. Here is the coding that would be needed.
<a href="http://www.yahoo.com" > Yahoo </a>
< a href="http://www.sumter.sc.us" > Sumter On Line </a>
<a href="http://www.joegagne.com" > Joe Gagne's Web Site </a>
Placing a Tag that Updates the Date for Your Web Page Change
Nearly all the Web Pages on the Internet undergo changes either, daily, weekly, monthly or at odd times. It is important to keep some type of announcement on your pages as to when these changes take place. Through the use of JavaScript, it is possible to place a command that any time you make a change to a Web Page it will automatically change the date and time of the change. Here is the code that is needed.
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write("Last modified: " + document.lastModified);
//-->
</SCRIPT>
In a later lesson, we will explain fully what the various words listed above mean, but this must wait until a later time. Use the code, spacing, upper and lower case exactly as you see it.
Web Page Updated by:
Joe Gagne