Professional Growth
Basic HTML
Activity Three
Adding Pizazz to Your Web Pages
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
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
LETSNet is © Michigan State University College
of Education and Ameritech
