OverviewGraphics - pictures and diagrams - are highly valued on Web pages because they add a rich sense of dimensionality to a page, and they can convey a lot of important information. No Web page looks complete without some images, either in the background to supply texture and character, or in the foreground to illustrate a point, decorate the page, or provide a fancy text that may not be available on the users' computers.
OK. So here's what we'll be doing:
- Open the Links page
- Put in a background image for texture
- Put in a WCC logo
- Open the Format Text page
- Put in a background image
- Put in separator lines
- Put in a text image
- Upload the files to the server and email the instructor with the URL.
Open
the Links page; Put in a background image for textureUse your copy (the one on your disk) of the Links page sitemap.htm which you did as part of exercise W23h "Creating HTML Links".
Choose a background image. You may find one you like on the Web, or you may use one of these:
- To save a Web image like the ones above, right-click on it (Mac: hold the mouse button down over it) and you should see a context menu pop up. Choose Save Image As... and put the image into the same directory that your HTML file is in.
- To save a background image, right-click on any empty part of the background of a page (Mac: hold the mouse button down over it), and when the context menu pops up, choose Save Background As... and put the image into the same directory that your HTML file is in.
In the Body tag of your file, add a background= parameter to set the background image to the name of the file you saved. For example,
<body background="purp_nob.gif">
Save your file and check it in a browser:
- Does the image appear as the background?
If not, check the file name to make sure it and the parameter name background are spelled correctly and the file name has no capital letters. Also, check to make sure the file was saved in the same directory as the HTML file- Can you read the text clearly?
If not, edit the HTML file and change the color of the text in the Body tag.
Put
in a WCC logoRight below the line that says, "Web Site Organization for Sarah Strong" (but your own name should be in it, unless your name really is Sarah Strong) you should put an image of the WCC logo. Here are some to choose from:
Open
the Format Text page; Put in a background imageChoose an image - either the same as for the Links page, or different. If you haven't already, save it in the same directory as your HTML file. Make it the background, save your file, and make sure your code is working properly. If necessary, change the color of the text.
Put in separator lines Right under the line that says, "Sarah Strong's HTML Format Sampler" (with your own name in it, of course), put a separator line image.
Also, put a separator under the line that says, "This line is in Arial, Helvetica or sanserif font", put another separator line. It may e the same as the first one, or different.
Here are some separator lines to choose from; you may also look for lines on the Web:
Put
in a text imageFind the place where the words read,
CLASSIC MYSTERY AND DETECTIVE STORIES EDITED BY JULIAN HAWTHORNE
Don't remove these, but make them the contents of the alt=" " parameter in an image tag for this image:
Save the image into the directory where your HTML file is located, and create the Img tag for it.
Upload the files to the server... and email the instructor with the URL.
Audience: This
is for people who are familiar with HTML formatting and linking, and want to
put images in their files both as forground and background. This requires hav
ing completed both exercise W22i and W23h.
Objectives: When you successfully complete this lesson,
you will be able to...
About this document...
Module W23i: This document is part
of a modular instruction series in computer technology. For more information,
see the overview
or the list of modules in this series, W: World Wide Web.
This document has been used in the following classes: INP 165
