Vaughn McGrath | HTML Lessons, Pres. of USA, Style Eras, Repairs

L E S S O N S
2 :: HTML - Adding Links to Text Within a Document 3 :: Automatically Changing from One HTML Page to Another Page After a Time Period 4 :: Phonetic Alphabet, Fractions to Decimal, Morse Code 5 :: Learn Morse Code 6 :: Modeling Scales	7 :: The Presidents of the United States 8 :: Style Eras 9 :: Repairing Lead-came Glass Panels 10 :: Dartboard Measurements

1 :: HTML Frames

Frames is the next big step in HTML once you've learned the basics. The < body> command in the html file is replaced by the <frameset> command. This command divides the window space into rows and columns much like the <table> command does. However, <frameset> allows you to keep specific information on the screen all the time in a set column or row, while the rest of the page changes.

This means that you can have a constant, like a TOC, on the screen all the time so that at any time, from any place, you can quickly change to a different area shown on the TOC.

-- Basic 2-Frame Format -- Frames Formats Lets visualize how frames can break a window space into some basic formats. There are four basic formats The first format has an area across the top of the page, a banner, that holds the constant. The rest of the area below the top area changes as you click on links found in the constants area above it. (See Drawing-B, Top Banner Style). The second format has an narrow column that runs down the left side of the page. The rest of the window area to the right changes as you click on links found in the constants area on the left. (See Drawing-C, Left Index Style). The third format is uses a row along the top and a column down the left side. (See Drawing-D, Banner and Index Style). The fourth format adds an additional constant to the bottom of the page. (See Drawing-E, add a Bottom-of-Page Banner). Note that you can use any or all of these three formats (constants top, constants left, constants right) either separately or in combination. Values Values determine the height and width of frames and are presented in either percentages of a page or in specific pixels per page. For example: Rows adjust to the width of the screen size. <frameset rows=100,*,100> would create a frame with a short row at the top of the page (100), a short row at the bottom of the page (100), and a center row taking up the remaining part of the page. Choosing between the two styles allows the writer to choose wether the rows (or columns) should stay at a specific width or depth, or should the rows (or columns) change their size as the screen size changes.
Wild Cards You can use global wild cards (). For example: <frameset rows=200,>	<-- A page having two frames, one along the top taking up 200 pixels of the top of the page, and another frame consuming the remaining part of the page.
Columns <frameset columns=100,*,100>	<-- A page having three frames, one down each side totaling 200 pixels of the page width, and another frame consuming the remaining part of the page.
Target Frames When you click on a link displayed in the left column (like in a TOC), the linked file must be told which of the remaining frames the file will open into. Thus the Target and Name Command. For example: A typical web page will have a TOC along the left side of the page with links that open into the remaining part of the page. Give the Receiving Frame a name by adding the name= command to the end of the <frame src line for that frame. <html> <head> <title> <title> </head > <frameset cols=160,* border=0 frameborder=0> <frame src="toc.htm" marginwidth=0 marginheight=0> <frame src="page-1.htm" marginwidth=0 marginheight=0 name=stage> </frameset > </html > In the two column page example above, it has a TOC in a narrow left column which displays in the larger right column. To do this the receiving column (the larger right column) is given a name. Look at the frame src for the larger column and note that it ends with name=stage (where stage is the name you wish to assign the receiving frame). The TOC link needs a command added to it as well, the Target command.
<a href=sample-1.htm target=stage>	<-This directs sample-1.htm to display in the frame called "stage". Otherwise it will display in it's own frame, the one the TOC is in.
E x a m p l e s ( Note that you can cut & paste the code shown below directly into your html file ). The Syntax for a page built with Frames starts slightly different than those you've built in HTML. The <BODY > command line is replaced instead by a <Frameset> command. The frameset command divides the window space into rows and columns. The following is an example of typical Frames syntax: Top Banner Style This format will break the windows page in to two areas, a small ban across the top that will remain constantly, and the remainder of the page that can change or scroll under it. In this example the top row could contain a navbar that controls what appears on the "stage" below it. -- Top Banner Style --
<html > <head ></head > <frameset rows=150,*> <frame src=topbanner.htm > <frame src=1st-page.htm name=stage> </frameset > </html >	<- 2-rows: top is 150, bottom is remainder <- Row-1 html could contain navbar or banner at page top <- Row-2 html (named "Stage") could contain homepage or first page. <- Ends frameset
Side Index Style This style has a constant column down the left of the windows page, and the remainder of the page changes. In this example the left column could contain a Table of Contents or an Index for pages that would be displayed on the "stage" at the right. -- Side Index Style -- <html > <head ></head > <frameset cols=120,* border=0 border=0 frameborder=0> <frame src="toc.htm" marginwidth=0 marginheight=0> <frame src="page-1.htm" marginwidth=0 marginheight=0 name=stage> </frameset > </html > Banner and Index Style This style combines the two examples above. Here you might find a Banner or Navbar at the top and an Index or Table of Contents in the left column. The pages would appear on the "stage" at the right. -- Banner and Index -
<html> <head ></head> <frameset rows=100,> <frame src=topban.htm > <frameset cols=120,> <frame src=index.htm > <frame src=stage.htm name=stage> </frameset> <noframes> Sorry, you need frames to view this file. </noframes> </html >	<-2-rows 100 and the rest of the screen <-Row-1 html contains GIF for page top <-Row-2 divided into two columns 120, and * <-Col-1 contains page index file <-Col-2 display area for the index <-Closes Row-2 <- Error display message for web viewers <- unable to view frames.
Add a Bottom-of-Page Banner Top horizontal ban with two vertical columns underneith it, and another horizontal ban along the bottom. This style might be used to display a banner or message at the bottom of the page. -- Add a Bottom-of-Page Banner --
<html > <head ></head > <frameset rows=100,,100> <frame src="topban.htm"> <frameset cols=120,> <frame src="index.htm"> <frame src="stage.htm" name=stage> </frameset> <frame src="bottom.htm"> </frameset> <noframes> Sorry, you need frames to view this file. </noframes> </html>	<-Page has 3-rows 100,,100 <-Row-1 html contains GIF for page top <-Row-2 divided into two columns 120. <-Col-1 contains page index file <-Col-2 display area for the index <-Closes Row-2 <-Row-3 html contains GIF for page bottom <-Closes Row-3 <- Error display message <- for web viewers unable to view frames.
End - Vaughn McGrath, 1997 Return to Top

2 :: Adding Links Within Text

An easy trick to create a link to a specific place within an HTML document. You can use this to create an easy Table of Contents or to create a quick link to another referenced document, or a link can be added to the bottom of a document (like this one) that will return you to the the top.

There are two parts to the command. The first command, placed where you wish to link from, includes a file name and the "link-name" that you're linking to. The second command is placed where you wish to be able to link to and includes the "name" command followed by the "link-name".

For example, to return to the top of a document once you've reached the bottom, add the following line near the top of your HTML file: <a name="top">

At the bottom of the file add this next line. (Note that "thisfile.htm" referers to the name of the html file that you are using this in.

<a href="thisfile.htm#top">Return to Top< /a>

In the example above, the word "top" is the link-name. By adding additional link-names into an html file you can quickly jump to different parts of the document. Create a Table of Contents at the top of a document and then have links to different locations in the document.

For example, create a Table of Contents that would look like this:

Table of Contents
Introduction
Section-1: Understanding HTML
Section-2: HTML Tables
Section-3: HTML Frames
Section-4: Advanced HTML

The code would look like this (again "thisfile.htm" refers to the file you are writing in).

Table of Contents 
<a href="thisfile.htm#Intro">Introduction< /a> 
<a href="thisfile.htm#Sect-1">Section-1: Understanding HTML< /a> 
<a href="thisfile.htm#Sect-2">Section-2: HTML Tables< /a> 
<a href="thisfile.htm#Sect-3">Section-3: HTML Frames< /a> 
<a href="thisfile.htm#Sect-4">Section-4: Advanced HTML< /a>

Then add these lines respectively just before each Section in your document:

<a name="Intro">

<a name="Sect-1">

<a name="Sect-2">

<a name="Sect-3">

<a name="Sect-4">

Linking to a Different File

You can link to a specific section in a different html file just by changing "thisfile.htm" to the other file's name. Don't forget to add a return link from the other file back to your first file.

End
- Vaughn McGrath