n
Lesson
3- Backgrounds and Images
In
the last two lessons you learned the basics of page
construction and text formatting. Lets move onto adding some
design elements to your pages.
One
of the easiest design effects is created by customizing the background
of your pages. Background is an attribute of the <BODY>
tag. Background can be represented by a tiled image
file or as a solid color.
We
recommend using hexadecimal color codes to define the
color attributes of your web pages because it broadens the
color combinations you can create with-in your pages. Hexadecimal
color codes are 6 character alpha-numeric codes assigned to
combinations of the standard primary colors. By assigning
these codes to the colors it makes a wider range of color
available to your web browser. Keep in mind that not all
machines support all colors when selecting your color
attributes for your pages. We have assembled a color chart of Hexadecimal
color codes and provided it in the Reference area of
this feature.
With
your notepad open the web page we created in the last 2
lessons or start a new one now.
In
the <BODY> tag of the page add the attribute BGCOLOR="#000000".
The resulting tag should look like this <BODY BGCOLOR="#000000">.
#000000 is the Hexadecimal color code for black.
Save your page now and open it in your web browser to view.
Your page should be displayed in the browser with a black
background. If it isn't check your code and make sure you
included the # (number) sign with the color code and that you
enclosed it in whole quotations rather than single quotes
(apostrophe marks).
Well,
you say, background color is nice but I'd like to use a
picture for my background instead.
Try
this second very easy option to add a background tile. You can
make your own or find them all over the net. Even if you
choose to use a background image you should still add a
background color. Some viewers have images turned off. To add
the image add this inside the body tag BACKGROUND="myimage.gif"
so it looks like this:
<BODY
BACKGROUND="myimage.gif" BGCOLOR="#000000">
That's it! The size of your image will determine how many
times it is "tiled" or repeated on the page. It's
recommended that you use small images to save file size and
load speed.
Important
Note: For compatibility with all browsers use graphic
images in the file formats of .jpg or .gif . The
.bmp image files are acceptable but can only be viewed
by Internet Explorer. Experiment with this, remembering to
save your file after each change and to refresh your browser
to view the changes.
Images
Now
you're ready to approach adding individual images into your
pages. This is easy! Anywhere between the <BODY>
tags where the viewer sees what your page contains add this
tag :
<IMG
SRC="myimage.jpg" /> you can also specify the
height and width of the image by adding those attributes to
the tag like this <IMG SRC="myimage.jpg
WIDTH="100" Height="150" /> don't
forget your quotations. EAAAAAAAAAAAAAAAASY! You can use
multiple images in your pages. Images can be added to the <P>
tags to present a picture with text wrapped around it. The alignment
attributes we discussed in the last lesson can also be
used in the image tags. If you haven't already noticed, the <IMG
/> tag doesn't have a closing tag. This tag closes
itself by using a / at the end of the tag.
Now
if you want that image to go in a particular part of the page,
and the alignment attributes aren't providing the results you
want, you'll need to learn how to use tables. That's coming in
Lesson 4- Tables
|
