123Webmaster.com : Onsite : Building
The ABC of HTML: Lesson 3

by Janine Dalton
http://www.httpcity.com/jalouda/
 

Lesson 3 - Colors And Graphics

In lesson 2 we looked at how to display text on a page but the WWW would be an extremely boring place if it consisted solely of black text on a white background. So now we turn our attention to adding individuality to a page by making it more visually atttractive.

CHOOSING A COLOUR SCHEME

The default colour scheme in HTML is as follows:

BACKGROUND: white/grey
TEXT: black
LINKS: blue
ACTIVE LINK: purple
VISITED LINKS: red

So if you do not specify an alternative scheme you will end up with the above. You can choose your own colours by specifying them inside the BEFORE or OPENING part of the BODY tag, near the top of your page's code. You simply put the name for the relevant part of your page (TEXT, LINK, ALINK or VLINK) equal to the hexadecimal code of your chosen colour preceded by the symbol #, in inverted commas. You can find a list of colour codes at Lynda.com.

For example, if I wanted my text to be yellow (#ffff00), links to be green (#00ff00), active links to be blue(#0000ff) and visited links to be black(#000000) I would use the following code:

<BODY TEXT="#ffff007" LINKS="#00ff00" ALINKS="#0000ff" VLINKS="#000000">

Note that all links will be green at first, when you follow one it will be blue until you follow another (at which time it will no longer be active) and then turn black, being the colour I chose for my visited links.

If you want to have text in colours other than the one you specify in the body tag on your page, you will need to add a bit of extra code in the FONT tag each time you want a different colour (see lesson 2 for more details).

Some hold the view that it is best to keep the default colours for links so that people do not get confused. I would not worry too much about this. Unless you are some lunatic who has underlined text all over the place, people will know where your links are regardless of what shade they are in :o) .

BACKGROUNDS

If you just want a plain coloured background , the procedure is identical to picking colours for anything else. You put BGCOLOR equal to the appropriate colour code inside the BODY tag e.g. if you wanted a red background you would use the code below:

<BODY BGCOLOR="#ff0000">

If you find plain backgrounds too boring, you can choose any image you want, as long as it is saved in your area (directory) at your website provider's site. So if your background is on your hard drive, you will need to upload it along with your page. You use the separate BACKGROUND tag to do this so there is no need to specify a background within the BODY tag. Note that this tag does not have 2 parts.

Basically this tag takes your picture and tiles it (repeats it over and over) until it fills the background of your page, appearing like patterned wallpaper. If I had a picture of a star called star.gif and used the following tag beneath the opening body tag, :

<BACKGROUND SRC="star.gif">

the result would be that the background of my page would be covered in stars. Note that if the picture is stored in your main directory, the filename, in this case star.gif should be all that is needed. If you have set up subdirectories ie other folders so that your main directory does not get too cluttered, then you will need to specify the name of this subdirectory too eg mygraphics/star.gif .

INSERTING IMAGES

If you want to place any image on your page one basic tag is all that is involved:

<IMG SRC="mypicture.gif">

This tag is a bit unusual in that it does not have 2 parts. To just insert the filename followed by its extension (usually .gif or .jpg) as above, the picture must be stored in your directory at your site provider. So, if you are creating a site on your computer (offline) and it includes 3 pictures, you will need to upload the page and the 3 pictures before anyone will see your complete page on the net.

If you only use the IMG tag at its most basic, then your pages will load very slowly. The more graphics you have on your page, the longer it will take to load. That is why many sites contain few graphics. Some would rather people waited a little time and read the whole page, than got tired waiting for fancy graphics to load and surfed on elsewhere! But never fear because there is something you can do to make your pages load more quickly - specify the width and height of your images as in this example:

<IMG SRC="star.gif7" WIDTH="80" HEIGHT="50">

The width and height measurements are in pixels but you do not need to measure your images yourself. Pixels are just a unit of measurement like cm or inches. Simply right click your graphic and choose properties from the pop up menu and you will see its dimensions in pixels, usually stated as eg 80x50. The first number is the width and the second is the height measurement. Your page will load more quickly if you include the dimensions of images because it saves your browser from having to find out the size of your graphics.

The last thing you should include is some text that will be displayed if the image does not appear. This will happen if there is something wrong with your link to the image or if your visitor has their browser set not to load images (to decrease page loading time). It is vital to include this text, especially if the image links to somewhere (see lesson 4 for the lowdown on links). If nothing appears how is your visitor to know how to get there? You include this text by using the ALT attribute as in the example below:

<IMG SRC="star.gif" ALT="a nice picture of a star">

You could also use the ALT attribute to give some extra detail about your graphic, since if your picture loads correctly and your visitor moves their mouse over it, the alternative text automatically appears in a little cream box.

POSITIONING IMAGES

You can use the same techniques for positioning images that we used for text in lesson 2. For more details consult that lesson. In the example below the picture would appear on the right hand side of the page:

<IMG SRC="star.gif" ALIGN="right" WIDTH=50 HEIGHT=50>

Lesson Index

Introduction: Anyone Can Learn HTML!
Lesson 1: First Steps
Lesson 2: Text
Lesson 3: Colours & Graphics
Lesson 4: Sound & Links
Lesson 5: Tips & Tricks



Discussion - HTML Layout
Related Sites - Check out the extensive list of html tutorial links on 123webmaster.com , to further your html understanding.