MFL 195 - Integrating Technology
into Foreign Language Education

Put Some Pzazz in Your Web Pages:
Color, Graphics, Images and Sound

You're staring at the web page you created yesterday and thinking, "Gad, this is boring. It needs some punch." You're right-- pzazz is what the web is all about. Nothing will replace solid content, but a bit of spritz will certainly lighten things up. So, let's put the bang in the walla walla bing bang!

Color: Background color

First, let's get rid of that plain white background. To change white to another color is easy. Open your INDEX.HTM file in Notepad. Go back up to the top of your source code to the <BODY> command. Make the following change: Now, save your changes and switch to Netscape. Open your file in the browser and voilą - COLOR! Brilliant, vibrant yellow! (If you don't see yellow, something's wrong!). Of course, the next logical question is, "How did you know that "FFFF00" is yellow?" I didn't. I had to look up the code for the color. I did that by going to the following site: Color Specifier for Netscape. This is a terrific site that not only lists the color codes, but displays examples of each color on the same page. Check it out, choose a color you like, write down the code letters (the six letter/digit code in the far right hand column), then change the color of your background using the BGCOLOR command within the BODY tag.

More Color: Text

That was so much fun, let's do some more. We can change the color of our text as well using the same codes from the site listed above. Go back to the Color Specifier for Netscape and choose three more colors: one for the basic text (which is now black) on your page, a second color for the links (which are now blue) on your page, and a third color for the visited links (which are now purple). When you have three more color codes written down, make the following changes in your source code (in Notepad):

Again, you are inside of the BODY command. Where I have placed the six dots, you will insert the color codes you have chosen for your page. It often takes a bit of fooling around to get the right combination of colors. You don't necessarily have to change all three. You might, for example, just want to change the color of the text and leave the link colors (blue and purple) intact. In that case, your code would look like this:

Graphics

A solid color makes a nice background, but we have another option for the background of our page. We can put in a graphic instead of a color to make up the background of the page. If you prefer a background to a color, go back to the body command at the top and make the following changes in your source code:

The tag for inserting a background graphic is BACKGROUND. It goes inside the BODY command, just like background color did.

Now, where do you find neat backgrounds? Everywhere! You can do a net search or try:

Warning! Searching for graphics on the Web is a time-consuming process. You can spend literally hours looking for "just the right thing." Graphics pages also take a long time to load, so if you do not have a high-speed connection, this process can become painfully slow! For our purposes, do not spend an inordinant amount of time searching for graphics. The point is not to create a masterpiece of web design. We simply want to learn how to do it!

The next thing we want to get rid of is that ugly (formerly gray) horizontal line that marks off the sections of our page. Instead of using the default <HR> tag, let's use a jazzy horizontal line, or bar. Where are we going to find one? You can, of course, design your own (using PaintShop Pro), but on the assumption that that's another story, let's proceed to find one on the web. There are a gazillion sites for free web graphics. You might try:

When you have found a divider bar you like, save it (if you don't remember how, see the tutorial How To Grab an Image From the Web). Then go back to Notepad, and replace the HR tag with the following code: The tag for inserting graphics or images is <IMG SRC>. ANY image can be inserted this way, whether it is a picture, a piece of clip art, a scanned photo, a scanned slide, or a graphic. Notice that the tag is followed by an equal sign and the filename is in quotation marks. Be sure that you have copied the file into your own directory.

Images

Recently, we gave you a diskette with a digital picture of yourself. Now, let's put your picture on your web page. Using the code above for inserting graphics and images, put your picture there for the world to see!

Sound

Sound files exist for the web in the same way that html files or image files (.gif, .jpg, etc.) exist. You can spot a sound file by its extension, which is usually .au, .wav, .mid, or .aif. You can either record your own sound file, or snag a sound file off the web. For now, we will grab one off the web to add to our page. We'll record later.

First, grab this sound icon off my page and put the file in your directory on your A drive. We're going to make this a clickable image, so that when a reader clicks on the sound icon, the sound will play.
Next, grab a sound file off the web. To find one, do a net search for ".wav". You will have a gazillion to choose from. Once you've got the sound icon and the sound file, you're ready to insert the following code in your page: