Backgrounds with Images
Using a coloured background livens up your page. You can go further and use a much more elaborate background through the use of small images saved in the GIF and JPG formats. Instead of using a colour code, you can specify the name of an image file in the BACKGROUND option of the <BODY> command. This image will be spread over the whole page and fill in the screen background. The use of this technique allows you to create an image in an image editor program and use it in your page. For example, you can use your company's logo, the emblem of your soccer team, or your boyfriend's or girlfriend's picture.
Consideration when using images:-
Before starting to use images, you should consider some important points. Be sure to use a small image, as otherwise it will take too long for the browser to execute the fill in. Use images smaller than 10 KB as much as possible.
Try to use images with few colours to avoid making the text difficult to read. Remember that complex images can be unattractive when used as background.
The syntax to specify an image is:
<body background=#"file.gif/jpg">
The next figure shows the Examp11e.htm file, where a small image of a sphere was used for the background.
<html>
<head>
<title>Spain</title>
</head>
<BODY BACKGROUND="sphere.jpg">
<img align=left src="elogos.gif">
<center><h1>Spain</h1></center><p>
The sphere adds and interesting effect, but the text is illegible.
In a case like this, you should either change the text colour to obtain legibility or delete the background.
In the next example (Examp11h.htm), white text is placed on a background with a blue texture.
You can even use a large image background (Examp11g.htm), taking into consideration the time it will take to load. When an image is specified as background, the screen is initially displayed with the standard grey background and the image is then loaded.
Notice that, although it is pretty, this image makes it difficult to view part of the text. On the CD accompanying this book, there is a series of GIF and JPG files you can use to create your backgrounds.
Recommendations :-
Always choose a background with few tone variation so as not to compromise the viewing of the text. Remember that the major function of a webpage is to transmit information through the text. Don't impede it threw images that add nothing to the information.
Special backgrounds
In the fonts and backgrounds folder on the CD (font-bg), are 11 backgrounds that can add a special touch to your page. Below the several examples of these backgrounds. The document name appears in the browser's address lines.
Spiral notebook :-
Spiral block :-
One more memo pad :-
Continuous form :-
Brick wall :-
Modern background :-
Blank page :-
School notebook :-
Two colors (1) :-
It is not difficult to create your own backgrounds.
Using Paint Shop Pro :-
One of the most popular capture and drawing programs is Paint Shop Pro. A shareware version is easily obtainable. You can try the version included on the companion CD or try a new version on sites like www.tucows.com or www.shareware.com. After loading the program, click on the file menu and then click on the New option. The following screen appears :
Enter 800 pixels as width to alert users using 800×600 resolution. For height, you may enter any value, even one pixel. In this example, we are using the value 5, which will create an image of less than 2 KB.
After pressing the OK button, a blank window will appear. The next step consists of creating a dividing line that will be used to separate the two screen colours. This line may be made using one of those two colours or yet a third class to further highlight the colour separation.
In the above example, the colour red was used to draw the line, which was the colour selected as the foreground colour.
The next step consists of selecting the colours to be used to fill in the two parts of the figure. In this example, we choose yellow for the left corner and cyan for the right corner.
Now you should fill in the two areas of the figures with the selected colours.
After filling in the two areas, use the File | Save option and the name Coolbg12.gif. See the result of this background in the bg12.htm file.
Your pages will never be the same after you start using backgrounds.
👈Episode 10.1 Episode 11.1👉
Share This Post
No comments:
Post a Comment
If you have any doubts. Please let me know.