to home page

BWRS
SEARCH

HOMETUTORIALSLINKSFORUMGLOSSARYNEWS
 
PART 5
RAM from Crucial.com
advertisement

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

Horizontal Lines

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
I'm below

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.

back to the top

BACKGROUND IMAGES AND COLOUR

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

e.g.

<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 background 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

e.g.

<body background="background.gif" bgproperties="fixed">

 

BACKBack to adding linksBack to Tutorial menunext - publishing your siteNEXT
BASIC HTML MENU

back to the top