Address List "How To"

The purpose of this document is to explain how you can build your own page like this one.

This document is arranged into several sections:

Getting Started
Explanation of the HTML Source Code
Abbreviated Source Code Listing
Scanning the Photos
Diagram of Web Pages

Getting Started

Probably the best way to start is to "grab a copy" of the HTML file that generates this page, and modify it to meet your needs. At least it works, and the result is known; ie, what you see in your browser window. It is a lot easier to start with something that works, and make it into what you want, than to create it from scratch.

In most browsers clicking the "File" button reveals a "Save As" option. Use this to save a copy of the HTML source code to your hard disk. Next print this page. Then read through it. Finally, use a text editor to edit the file you saved to your hard disk ("addr_67.htm") to adapt it to your class. (You can use your word processor. Just be sure to save the document in ASCII format). Change the name of your file to "addr_XX.htm", where "XX" is the year of your class.

When you begin to edit the file, have a hard copy of your class's address list (alphabetized by last name) at hand. Change "Jane Abraham" to the name of the first person on your list. Within the file we follow a naming convention for position labels and image file names. We use "JAbraham" for Jane Abraham. The scheme is the person's first initial followed by the first seven letters of their last name. Note that there is one notable exception to this convention. Joe and John Kelley have the same first initial and the same last name. To give each of them a unique label, we use "JeKelley" and "JnKelley".

Code Explanation

There are a few conventions followed in this section of the document the reader will want to be aware of:

HTML source code appears in black.
Commentaries about the code appear in red.
Within the commentary, symbols lifted from the HTML source code appear in blue.
Key HTML buzz-words appear in italics.

The following section takes exerpts of actual HTML code used to create the Class of '67 Address List, and explains it it enough detail that hopefully the reader can create their own page for their class. A minimal attempt is made to help HTML "make sense" to the reader.

NOW, LET'S GET STARTED ...

These first 2 lines identify the document as HTML, and indicate the beginning of the document's heading. Note that HTML essentially discards "whitespace" (spaces, tabs, and end-of-line characters). It generally prints text to the window until it runs out of space, and then starts a new line.

< HTML>
< HEAD>

The next 2 lines identify the character set used -- Just copy them "as is".

   < META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
   < META NAME="GENERATOR" CONTENT="Mozilla/4.03 [en] (X11; I; SunOS 5.5.1 sun4u) [Netscape]">

This line is used to name the bookmark if one is saved by the user's browser.

   < TITLE> Leland High School -- Class of 1967 </TITLE>

In HTML a label enclosed in < >, like < HEAD> , is called a start tag. An analogous tag beginning with a slash, like < /HEAD> , is called an end tag, and ends the section the start tag began. For clarity in reading the code, the convention is to indent start tags and their corresponding end tags the same distance from the left margin. Tagged sections are often nested, with subsequent indentation. Tagged sections "on the same level" are often separated with the vertical space provided by a blank line.

< /HEAD>

This begins the BODY , and specifies the background color as white in terms of RGB (RRGGBB in hexadecimal).

< BODY BGCOLOR="#FFFFFF">

The heading below uses the font size associated with the highest-level heading (H1), and it is centered.

   < CENTER>
      < H1>
         Leland High School -- Class of 1967  
      </H1>
   < /CENTER>

The anchors below, like < A HREF="#A"> [A]< /A> , are shortcuts to other places on this page ( #A through #Reunion_Photos ). When the user clicks on the symbol enclosed here in [ ], the browser takes them to that place on the page. Note that the last link How To , takes the user to another file (web page).

   < CENTER> 
      < A HREF="#A"> [A]< /A>  
      < A HREF="#B"> [B]< /A>  
      < A HREF="#C-G"> [C-G]< /A>  
      < A HREF="#HI"> [HI]< /A>  
      < A HREF="#JK"> [JK]< /A>  
      < A HREF="#L"> [L]< /A>  
      < A HREF="#MNO"> [MNO]< /A>  
      < A HREF="#PQ"> [PQ]< /A>  
      < A HREF="#R"> [R]< /A>  
      < A HREF="#S"> [S]< /A>  
      < A HREF="#TUV"> [TUV]< /A>  
      < A HREF="#W-Z"> [W-Z]< /A>  
      < A HREF="#E-Mail List"> [E-Mail List]< /A>  
      < A HREF="#Other Photos"> [Other Photos]< /A>  
      < A HREF="#Reunion Photos"> [Reunion Photos]< /A>  
      < A HREF="67_addrs.htm"> [How To]< /A>

This is a centered horizontal rule -- a divider mark across the page. The word "ALIGN" is an attribute of the horizontal rule, and its "value"; ie, "CENTER", tells the browser where and how to align the horizontal rule.

   < HR ALIGN="CENTER">< /CENTER>

Here's the main part of the document -- a gigantic table. (In HTML tables are built one horizontal row at a time. Each horizontal row is called a "table row" and is referenced by the symbol < TR>, and each part of a vertical column within the row (cell) is referred to as "table data" and is referenced by the symbol < TD>.)

  < CENTER>
   < TABLE BORDER=0 CELLPADDING=3 WIDTH="100%" NOSAVE >

This begins a horizontal row in the table.

   < TR NOSAVE>

The first (left-most) cell of the row is a table header, aligned to the top left. It uses the font size associated with the second-biggest header (2). The < A NAME="A">< /A> is called an anchor . It is a "bookmark" used by the [A] at the top of this page to take the user to this place in the document when they click on [A] .

      < TH ALIGN=LEFT VALIGN=TOP WIDTH="147" NOSAVE>
	 < H2> < A NAME="A">< /A> < /H2>
      < /TH>

The remaining cell of this row is designated as "table data"; ie, "< TD>". The < P> marks the beginning of a new paragraph. The paragraph tag generates a vertical space, and printing resumes at the left margin. It is used here between addresses. The < BR> ( break) at the end of each line tells the browser to start a new line, rather than continuing on the same one. It is like the paragraph tag, except that it does not generate any additional vertical space. Each address (paragraph) includes the following three parts:

< A NAME="JAbraham">< /A> -- an anchor so this address can be reached from elsewhere in the document.
< A HREF="GIF/JAbraham.gif"> Jane Abraham < /A> -- a hotlink to access Jane's photograph. ("GIF/JAbraham.gif" is the image file. "Jane Abraham" is what the user sees in the browser window.)
< A HREF="mailto:70303.2240@compuserve.com">70303.2240@compuserve.com< /A> -- a hotlink to send e-mail to Jane.

      < TD WIDTH="50%" NOSAVE>
	< A NAME="JAbraham">< /A>
	< A HREF="GIF/JAbraham.gif"> Jane Abraham < /A> < BR>
	256 Angelus Street< BR>
	Memphis, TN  38112-5202< BR>
	< A HREF="mailto:70303.2240@compuserve.com">70303.2240@compuserve.com< /A> < BR>
	< A HREF="mailto:QJaneA@compuserve.com">QJaneA@compuserve.com< /A>
      < P>
	< A NAME="PAustin">< /A>
	< A HREF="GIF/PAustin.gif"> Patsy Austin< /A> Daniels < BR>
	1722 West Azalea< BR>
	Greenville, MS  38701

< /TD> ends the table data (the data cell); ie, this column within the horizontal row. < /TR> ends this horizontal table row.

      < /TD>
   < /TR>

Now the next row in the table starts....

   < TR NOSAVE>
      < TH ALIGN=LEFT VALIGN=TOP WIDTH="147" NOSAVE>
	 < H2> < A NAME="B">< /A>B < /H2>
      < /TH>

      < TD WIDTH="50%" NOSAVE>
	< A NAME="CBailey">< /A>
	< A HREF="GIF/CBailey.gif"> Carolyn Bailey< /A> Phillips < BR>
	1045 Flynt Drive, Apt. L-3< BR>
	Jackson, MS  39208
      < P>

                . . .
                . . .     (And so it goes, until all the data is entered . . .)
                . . .

      < P>
	< A NAME="BWest">< /A>
	< A HREF="GIF/BWest.gif"> Betty West< /A> Hambly < BR>
	205 Sandy Lane< BR>
	Vicksburg, MS  39180
      < P>
      < /TD>
   < /TR>

Here's where we create the mailing list.

   < TR NOSAVE>
      < TH ALIGN=LEFT VALIGN=TOP WIDTH="147" NOSAVE>
	 < H2> < A NAME="E-Mail List">< /A>E-Mail List < /H2>
      < /TH>

      < TD WIDTH="50%" NOSAVE>
	< A HREF="mailto:
		70303.2240@compuserve.com,
		leighb@ibm.net,
		rhitch33@aol.com,
		bad_email_address,
		ALH1@ra.msstate.edu,
		brad@wardsrus.net,
		lgycphil@vba.va.gov,
		rroark@primenet.com,
		blossom@tecinfo.com,
		sethomas@aec.apgea.army.mil
	"> E-mail Class of '67 < /A>< BR>
      < P>
      < /TD>
   < /TR>

The beginning of another row in the table -- links to some photos.

   < TR NOSAVE>
      < TH ALIGN=LEFT VALIGN=TOP WIDTH="147" NOSAVE>
	 < H2> < A NAME="Other Photos">< /A>Other Photos < /H2>
      < /TH>

Links to the pages that assemble the composite photos.

      < TD WIDTH="50%" NOSAVE>
	< A HREF="pg_1_67.htm"> Class Photos, Page 1 (Warning, 480 Kb!) < /A> < BR>
	< A HREF="pg_2_67.htm"> Class Photos, Page 2 (Warning, 480 Kb!) < /A> < BR>
	< A HREF="pg_3_67.htm"> Class Photos, Page 3 (Warning, 480 Kb!) < /A> < BR>
	< A HREF="pg_4_67.htm"> Class Photos, Page 4 (Warning, 480 Kb!) < /A> < BR>
	< A HREF="pg_5_67.htm"> Class Photos, Page 5 (Warning, 480 Kb!) < /A> < BR>
	< A HREF="pg_6_67.htm"> Class Photos, Page 6 (Warning, 160 Kb!) < /A> < BR>
      < P>

Links to some other photos that are GIF and JPEG images.

	<A HREF="GIF/Graduati.gif"> Graduation</A> <BR>
      <P>
	<A HREF="GIF/ClassFav.gif"> Class Favorites</A> <BR>
      <P>
	<A HREF="JPEG/LakePrty.jpg"> Lake Party</A> <BR>
      <P>
      </TD>
   </TR>

   <TR NOSAVE>
      <TH ALIGN=LEFT VALIGN=TOP WIDTH="147" NOSAVE>
	 <H2> <A NAME="Reunion Photos"></A>Reunion Photos </H2>
      </TH>

      <TD WIDTH="50%" NOSAVE>
	<A HREF="JPEG/DianeBur.jpg"> Diane Burchfield </A> <BR>
      <P>
	<A HREF="JPEG/PepRal_1.jpg"> Pep Rally, Photo 1</A> <BR>
      <P>
	<A HREF="JPEG/PepRal_2.jpg"> Pep Rally, Photo 2</A> <BR>
      <P>
	<A HREF="JPEG/PepRal_3.jpg"> Pep Rally, Photo 3</A> <BR>
      <P>
	<A HREF="JPEG/PepRal_4.jpg"> Pep Rally, Photo 4</A> <BR>
      <P>
	<A HREF="JPEG/PepRal_5.jpg"> Pep Rally, Photo 5</A> <BR>
      <P>
	<A HREF="JPEG/CheckIn.jpg"> Check In at the Country Club</A> <BR>
      <P>
      </TD>
   </TR>

END of the TABLE.

   < /TABLE>
   < /CENTER>

Date this page was last modified -- a good idea.

   < H3> < CENTER> < FONT COLOR="#88AFE8">
      Last Updated 9/23/98. < /FONT COLOR> < /CENTER> 
   < /H3>

End of the "body", and End of the HTML document.

< /BODY>
< /HTML>

HTML Source Code

< HTML> 
< HEAD> 
   < META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> 
   < META NAME="GENERATOR" CONTENT="Mozilla/4.03 [en] (X11; I; SunOS 5.5.1 sun4u) [Netscape]"> 
   < TITLE> Leland High School -- Class of 1967 < /TITLE> 
< /HEAD> 
< BODY BGCOLOR="#FFFFFF"> 
 

   < CENTER> 
     < H1> 
       Leland High School -- Class of 1967  
     < /H1> 
   < /CENTER> 


   < CENTER> 
      < A HREF="#A"> [A]< /A>  
      < A HREF="#B"> [B]< /A>  
      < A HREF="#C-G"> [C-G]< /A>  
      < A HREF="#HI"> [HI]< /A>  
      < A HREF="#JK"> [JK]< /A>  
      < A HREF="#L"> [L]< /A>  
      < A HREF="#MNO"> [MNO]< /A>  
      < A HREF="#PQ"> [PQ]< /A>  
      < A HREF="#R"> [R]< /A>  
      < A HREF="#S"> [S]< /A>  
      < A HREF="#TUV"> [TUV]< /A>  
      < A HREF="#W-Z"> [W-Z]< /A>  
      < A HREF="#E-Mail List"> [E-Mail List]< /A>  
      < A HREF="#Other Photos"> [Other Photos]< /A>   < BR> 
      < A HREF="#Reunion Photos"> [Reunion Photos]< /A>  
      < A HREF="67_addrs.htm">  [How To]< /A>  < BR> 

   < HR ALIGN="CENTER"> < /CENTER> 

   < CENTER> 
   < TABLE BORDER=0 CELLPADDING=3 WIDTH="100%" NOSAVE > 

   < TR NOSAVE> 
      < TH ALIGN=LEFT VALIGN=TOP WIDTH="147" NOSAVE> 
	 < H2>  < A NAME="A"> < /A> A < /H2> 
      < /TH> 

      < TD WIDTH="50%" NOSAVE> 
	< A NAME="JAbraham"> < /A> 
	< A HREF="GIF/JAbraham.gif">  Jane Abraham < /A>  < BR> 
	256 Angelus Street< BR> 
	Memphis, TN  38112-5202< BR> 
	< A HREF="mailto:70303.2240@compuserve.com"> 70303.2240@compuserve.com< /A>  < BR> 
	< A HREF="mailto:QJaneA@compuserve.com"> QJaneA@compuserve.com< /A> 
      < P> 
	< A NAME="PAustin"> < /A> 
	< A HREF="GIF/PAustin.gif">  Patsy Austin< /A>  Daniels < BR> 
	1722 West Azalea< BR> 
	Greenville, MS  38701
      < P> 
      < /TD> 
   < /TR> 

   < TR NOSAVE> 
      < TH ALIGN=LEFT VALIGN=TOP WIDTH="147" NOSAVE> 
	 < H2>  < A NAME="B"> < /A> B < /H2> 
      < /TH> 

      < TD WIDTH="50%" NOSAVE> 
	< A NAME="CBailey"> < /A> 
	< A HREF="GIF/CBailey.gif">  Carolyn Bailey< /A>  Phillips < BR> 
	1045 Flynt Drive, Apt. L-3< BR> 
	Jackson, MS  39208
      < P> 

     
             . . . 
             . . .   (And so it goes, until all the data is entered  . . .)
             . . . 
     

      < P> 
	< A NAME="BWest"> < /A> 
	< A HREF="GIF/BWest.gif">  Betty West< /A>  Hambly < BR> 
	205 Sandy Lane< BR> 
	Vicksburg, MS  39180
      < P> 
      < /TD> 
   < /TR> 

   < TR NOSAVE> 
      < TH ALIGN=LEFT VALIGN=TOP WIDTH="147" NOSAVE> 
	 < H2>  < A NAME="E-Mail List"> < /A> E-Mail List < /H2> 
      < /TH> 

      < TD WIDTH="50%" NOSAVE> 
	< A HREF="mailto:
		70303.2240@compuserve.com,
		leighb@ibm.net,
		rhitch33@aol.com,
		bad_email_address,
		ALH1@ra.msstate.edu,
		misschris@linknet.net,
		brad@wardsrus.net,
		lgycphil@vba.va.gov,
		rroark@primenet.com,
		blossom@tecinfo.com,
		sethomas@aec.apgea.army.mil
	">  E-mail Class of '67 < /A> < BR> 
      < P> 
      < /TD> 
   < /TR> 

   < TR NOSAVE> 
      < TH ALIGN=LEFT VALIGN=TOP WIDTH="147" NOSAVE> 
	 < H2>  < A NAME="Other Photos"> < /A> Other Photos < /H2> 
      < /TH> 

      < TD WIDTH="50%" NOSAVE> 
	< A HREF="pg_1_67.htm">  Class Photos, Page 1 (Warning, 480 Kb!) < /A>  < BR> 
	< A HREF="pg_2_67.htm">  Class Photos, Page 2 (Warning, 480 Kb!) < /A>  < BR> 
	< A HREF="pg_3_67.htm">  Class Photos, Page 3 (Warning, 480 Kb!) < /A>  < BR> 
	< A HREF="pg_4_67.htm">  Class Photos, Page 4 (Warning, 480 Kb!) < /A>  < BR> 
	< A HREF="pg_5_67.htm">  Class Photos, Page 5 (Warning, 480 Kb!) < /A>  < BR> 
	< A HREF="pg_6_67.htm">  Class Photos, Page 6 (Warning, 160 Kb!) < /A>  < BR> 
      < P> 
	< A HREF="GIF/Graduati.gif">  Graduation< /A>  < BR> 
      < P> 
	< A HREF="GIF/ClassFav.gif">  Class Favorites< /A>  < BR> 
      < P> 
	< A HREF="JPEG/LakePrty.jpg">  Lake Party< /A>  < BR> 
      < P> 
      < /TD> 
   < /TR> 

   < TR NOSAVE> 
      < TH ALIGN=LEFT VALIGN=TOP WIDTH="147" NOSAVE> 
	 < H2>  < A NAME="Reunion Photos"> < /A> Reunion Photos < /H2> 
      < /TH> 

      < TD WIDTH="50%" NOSAVE> 
	< A HREF="JPEG/DianeBur.jpg">  Diane Burchfield < /A>  < BR> 
      < P> 
	< A HREF="JPEG/PepRal_1.jpg">  Pep Rally, Photo 1< /A>  < BR> 
      < P> 
	< A HREF="JPEG/PepRal_2.jpg">  Pep Rally, Photo 2< /A>  < BR> 
      < P> 
	< A HREF="JPEG/PepRal_3.jpg">  Pep Rally, Photo 3< /A>  < BR> 
      < P> 
	< A HREF="JPEG/PepRal_4.jpg">  Pep Rally, Photo 4< /A>  < BR> 
      < P> 
	< A HREF="JPEG/PepRal_5.jpg">  Pep Rally, Photo 5< /A>  < BR> 
      < P> 
	< A HREF="JPEG/CheckIn.jpg">  Check In at the Country Club< /A>  < BR> 
      < P> 
      < /TD> 
   < /TR> 

   < /TABLE> 
   < /CENTER> 

   < H3>  < CENTER>  < FONT COLOR="#88AFE8"> 
      Last Updated 9/23/98. < /FONT COLOR>  < /CENTER>  
   < /H3> 

< /BODY> 
< /HTML>

Scanning the Pictures

There are two image formats that can be displayed by web browsers: GIF and JPEG. Both utilize compression to make the size of the image file smaller. (That's good because it makes the images load faster.) GIF loses no information, and JPEG does, but can compress the image more. Generally GIF is preferable for black and white images, and JPEG produces acceptable results with color.