Customizing Templates
Revised February, 2004
1. Background and text color
Each page in the template can have its own separate color scheme. The default (standard) color scheme is black text on a light background, but it's easy to change it on any page. Simply replace the <BODY> tag on that page (5th line of the HTML text) with: 

<BODY BGCOLOR="#XXXXXX" TEXT="#XXXXXX"> 

where #XXXXXX are codes that determines the color of the background color (BGCOLOR) and text, respectively. The color change applies only to that page.  Here are a few examples of some codes for familiar colors that can be used for background color or text color. See http://www.bagism.com/colormaker/ for the codes for more colors.

000000 = black           ffffff = white          404040 = dark gray
808080 = medium gray     B0B0B0 = light gray     ff0000 = red
ff8080 = pink            00ff00 = green          80ff80 = pale green
0000ff = blue            8080ff = pale blue      ffff00 = yellow
ffff80 = pale yellow     ff00ff = magenta        00ffff = cyan
800080 = purple          401000 = brown          ff7000 = orange

2. Background Patterns
You can specify a graphic (GIF or JPG file) to be used as a background pattern for any page. Simply place the graphic file in your HTML folder and replace the <BODY> tag at the top of the HTML file with: 

<BODY background="xxxx.gif"> 

where "xxxx.gif" ("xxxx.jpg") or is the name of a graphic file in gif (or jpg) format that is to be used as the background pattern. The graphic will be "tiled" to fill the page.  The background appears only on that page; however, you can use one background graphic file on several pages just by changing the <BODY> tag on those pages to refer to the same graphic file. There are several examples of suitable background graphic files in the Background patterns folder on the CD.

3. Alternative Navigation arrows
You can change the navigation arrows.  Open the "Alternative navigation arrows" folder on the CD and open one of the folders of alternative arrow graphics.Copy each of the three arrow graphics "bf.gif", "bb.gif", and "bh.gif" to the folder containing your HTML files, replacing the existing three arrow graphics. This change applies to all the pages in that folder. You can also design arrows in a drawing program or download arrows from the Internet (search on "arrows" or "buttons"); simply save then as GIF files and change the names to "bf.gif" (for the "forward" arrow), "bb.gif" (for the "back" arrow), and "bh.gif (for the arrow that returns to the index).

4. Adding graphics
The general HTML template for a graphic is <img src="">. You simply put the graphic file in the same folder as the HTML files and put the file name of the graphic between the quotes.  If you want the graphic centered on the page, use  <center><img src=""></center>. If you want to embed the graphic in the body text, so that the text wraps around the graphic, use <img align=right src=""> or <img align=left src="">.

5. Adding links
The general template for a link to an external Web site is <a href=""></a>. You simply put the address of the site between the quotes "" and the link text (the text that you want to act as the hot link) between the > and the <. For example:

Pictures of the First Family may be viewed on the <a href="http://www.whitehouse.gov">White House Home Page</a>.

This will make the phrase "White House Home Page" a hot link; if you click on it, it takes you to http://www.whitehouse.gov. 

6. Basic text formatting
Effect           HTML tags                          What it looks like
boldface          <b>example</b>                        example
Italic            <i>example </i>                       example
bold italic       <i><b>example</i></b>                 example
larger font       <font size="+1">example</font>        example
larger font       <font size="+2">example</font>        example
smaller font      <font size="-1">example</font>        example
Color text        <font color="#ff0000">example</font>  example
Centering         <center>example</center>               example
subscript         H<sub>2</sub>O                        H2O
superscript       cm<sup>2</sup>                        cm2

7. Adding sound
You can record sound bytes on your PC by connecting a microphone to the microphone input on the back of the computer and running Start --> Programs --> Accessories --> Entertainment --> Sound Recorder.  Or you can download sound and music files from the Internet. There are several ways to add sound to a Web page.  Suppose you have a sound file called "s1.wav".  

One way to play this from a Web page is to add this to the HTML text: 

<a href="s1.wav">[Click here to hear a sound bite]</a>. 

 This creates a hot link labeled [Click here to hear a sound bite]; when you click on it, your browser's sound player is launched and the sound is played.  Depending on your sound player, this also works for other audio file formats such as ".au", ".aiff", ".mp3" and ".mid" files. Just change the file name in the HTML link to match the exact name of the audio file.  

Another way  to play sound from a Web page is to use an embedded sound controller:

<embed src="s1.wav" width=144 height=45 autostart=false>

This displays a sound controller on the Web page, with controls to start and stop the sound and adjust the volume. To hear the sound, click on the right arrow icon on the controller. If you want the sound to play automatically as soon as the page is opened, replace autostart=false with autostart=true.  

8. Adding video
You can make your own video clips using a digital camcorder or a Sony Mavica camera (which records video in ".mpg" format).  Video works just like sound.  Suppose you have a video file called "v1.mpg".  One way to play this from a Web page is to add this to the HTML text: 

<a href="v1.mpg">[Click here to see a video clip]</a>. 

 This creates a hot link labeled [Click here to see a video clip]; when you click on it, your browser's video player is launched and the video is played.  Depending on your video player, this also works for other video file formats such as ".mov" files. Just change the file name in the HTML link to match the exact name of the video file.
Another way is to add this to the HTML text: 

<embed src="v1.mpg" width=350 height=300 autostart=false>

This displays a video controller on the Web page, with controls to start and stop the video and adjust the sound volume.  (You may need to increase the width and height numbers if the whole video frame is not shown). To see the video clip, click on the right arrow icon on the controller. If you want the video to play automatically as soon as the page is opened, replace autostart=false with autostart=true.
9. Using NoteTab Light to customize templates more easily.
NoteTab Light is a freeware multi-file text editor useful for editing templates. It allows all the files in a template to be opened at once and performs search and replace functions within all the files of one template simultaneously. Great for changing background and text color throughout an entire template, adding image and sound links, or changing graphic or sound file types. See the handout "How to Edit Templates in NoteTab Light".
(c) Tom O'Haver (toh@umd.edu), Last updated, April, 2004