Adding Pizazz to Your Web Pages

Professional Growth
Basic HTML

Activity Three
Adding Pizazz to Your Web Pages


	Brief Description Objectives Materials and Resources Activity Description Internet Resources

Brief Description
    Basic Web pages can be spruced up by adding lines, buttons, icons, and backgrounds. This activity describes how to include these in your Web pages and where to find them on the Internet.

Objectives

Learn about backgrounds and textures, and where to find them on the Internet.
Learn about HTML lines.
Learn about icons and buttons, and where to find them on the Internet.

Materials and Resources
    In developing our lessons and activities, we made some assumptions about the hardware and software that would be available in the classroom for teachers who visit the LETSNet Website. We assume that teachers using our Internet-based lessons or activities have a computer with the necessary hardware components (mouse, keyboard, and monitor) as well as a World Wide Web browser. In the section below, we specify any "special" hardware or software requirements for a lesson or activity (in addition to those described above) and the level of Internet access required to do the activity.

Special hardware requirements: none.
Special software requirements: none.
Internet access: Medium-speed (28,800 BPS via phone) or higher.

Activity Description
    In this activity, we help you locate and include lines, buttons, icons, textures, and backgrounds on your Web pages. To include these in your HTML files, simply download the graphic, add the appropriate HTML tags to your Web pages, and make sure the graphic files are in the right folder or directory.

Backgrounds and Textures: To include a background on your Web page, use the <BODY BACKGROUND="backgroundfilename.ext"> tag, where backgroundfilename is the name of the background file you want (as a GIF or JPEG file). For example, if you add the <BODY BACKGROUND="paper.gif"> to your HTML file, when it is displayed by the browser it will automatically use the GIF file, paper.gif, as a background for the page. Likewise, to have your Web page use a background color, use the <BODY BGCOLOR=" backgroundcolor"> tag. For example, if you place the <BODY BGCOLOR="#000000"> tag in your HTML file, the page will have a black background. Backgrounds and textures are available on the Internet (see Internet Resources below).

Icons and Buttons: Icons and buttons are actually image files included in your HTML files (see Activity Two: Adding Images to Your Web Pages). To locate icons and buttons, visit any of the Internet Resources below.

Lines: A horizontal line <HR> can be added to an HTML file by including the <HR SRC="linefilename.gif"> tag, where linefilename is the name of the file with the line file (GIF or JPEG format). This will display the graphic line, in the line_name.gif file, at the current location in the Web page. For example, the <HR SRC=" line1.gif"> <br> would display the following:

Use lines to visually separate the contents of your Web pages. Download lines from any of the Internet Resources below.

Internet Resources Background and Texture Resources

The Background Archive
[http://www.public.iastate.edu/~haley/bgnds.html]
An extensive archive of over 700 HTML background images.

The Background Generator
[http://east.isx.com:80/~dprust/Bax/index.html].
A Website with many backgrounds you can view and use, and with a nice preview feature.

Free Bullets, Bars, Buttons, Backgrounds, and Bingbats
[http://www.ccnet.com/~elsajoy/free.html]
This Website contains lots of fun things to add to your Web pages.

Textureland
[http://www.meat.com/textures/]
HTML backgrounds and textures.

Icon and Button Resources

Fuzzy's Icon Directory
[http://fuzine.mt.cs.cmu.edu/mlm/iconlist.html]
More wacky icons.

The Icon Browser
[http://www.cli.di.unipi.it/iconbrowser/icons.html]
A series of imagemaps of many icons.

Randy's Image and Icon Bazar
[http://www.iconbazaar.com/]
More icons available at Randy's Website.

Web Icons and Logos
[http://www-ns.rutgers.edu/doc-images/]
Lots of icons and logos.

YAHOO Icon Index
[http://www.yahoo.com/Computers_and_Internet/Internet/World_Wide_Web/Page_Design_and_Layout/Icons/]
A list of Icon resources.

Lines

HTML Lines
[http://www.eecs.wsu.edu/~rkinion/lines/lines.html]
A set of HTML lines or horizontal rulers (HR).

The Internet Planet
[http://www.telepath.com/benw/iplanet/]
Another useful resource for lots of HTML add-ins.

Back to Basic HTML Module