STEP BY STEP GUIDE
TO HTML - PART 5
Horizontal Lines & Backgrounds
By now you should have the bare bones of a webpage set up.
Here are a few things that can add some flare to your site.
First we'll look at putting horizontal lines in to separate up sections of your page.
Then we'll look at adding background colour and images
You can break your text up with a horizontal line using the <hr> tag. In most browsers this appears with a shading 3D effect. Try this
I'm above<hr>I'm below
Will appears as this !!! I'm above
The appearance of the line can be set by attributes. Here are a few-
size - determines height of line in pixels
noshade - stops shading. Line looks 2D
- width - expressed as either pixels e.g. width = 200 or
- % of browser window e.g. width = 50%
align - Determines position (center default)
So for example <hr size = 12 noshade width = 50% align = "right"> would Gives this
A line that is 12 pixel high, 2 D line (i.e.. no shading) and fills 50% of browser window and is aligned to the right.
You can set the colour or use an image for your background.
To set a background colour we need to add the bgcolor attribute to the <body> tag. Its values are based on RGB coding
<body bgcolor = "#808080">
will give a gray background like so.
Or it can also be expressed in colour names. There are 16 basic names defined by HTML 4.0 but many browser (but not all !!!) support extended colour names
e.g. <body bgcolor = grey>
A list of both can be found in our HTML reference library
To use an image you first need to get one( as we've described previously). Look for ones that are specifically labelled as such as they will tile nicely together.
The background attribute is used
e.g. <body background = "mybackground.gif ">
will give a background made up of tiles of a image called mybackground.gif
for example this image
Will tile out as below
By doing this they take up less space and are quicker to download than having a massive background image. We used to use a variant of this image (without the border) which is a mere 137 bytes
This tiles vertically to give a background image with a blue border
With Internet explorer browsers you can fix the background so that the page contents will scroll over it as you move up and down the page. This is sometimes called a watermark
To do this add the bgproperties attribute to the body tag & background attribute
<body background="background.gif" bgproperties="fixed">