<body>

Talk about HTML resources, styles etc.
Post Reply
User avatar
JimBb
Deep Thought
Posts: 1964
Joined: Sun Nov 16, 2003 8:19 pm
Location: Dilbeek, Belgium
Contact:

<body>

Post by JimBb » Sun Feb 06, 2005 1:43 pm

In HTML Basics I showed you the <body> tag. The main "container" holding everything that is visible on your page: text, images, the lot. The Body-tag itself has some interesting arguments as well. They all have to do with some defaults you can set for your entire page.

Code: Select all

<body BGCOLOR="green">
Okay, green is maybe not your favourite background color for a page, but you never know someone might find good use for it ;) Anyway, it's just to show the syntax, pick any color you like. Really any color: if there is no name for it you can always use its hex-code:

Code: Select all

<body bgcolor="#00FF00">
Yup, that's the same green. Not familiar with using hex colors? Try this list.

Okay, so we have set one color - you can set more:

Code: Select all

<body bgcolor="#00FF00" TEXT="yellow">
That would give you yellow text on a green background. Unless... Unless you define a different color in your Font-tag. Remember, what you set in the Body-tag are defaults, that's all.

Wait a second: my links are in that ugly default blue now, it doesn't fit that lovely green I have! Fear not, the links can be tuned far more than you hoped for...

Code: Select all

<body bgcolor="#00FF00" text="yellow" LINK="yellow" ALINK="orange" VLINK="red">
Any link on this page will show in yellow.
Any link you visited before will be in red.
And active links will be orange. What's an active link? Suppose you have a link to a page that opens in a pop-up or in a separate window. When you click it you can read that other page, but when you look at the first page you'll see that the "alink" (orange in this case) color will indicate that this link is the one you're using right now.

Colors, colors, is that all you have? Patience my friend, patience...:

Code: Select all

<body bgcolor="#00FF00" text="yellow" link="yellow" alink="orange" vlink="red" BACKGROUND="/images/nicepicture.jpg">
Ah, a background image! As always: make sure you type the name and the location exactly as they should. The code shown indicates that in the root of your site you have a folder called "images", and in there "nicepicture.jpg". Not IMAGES, not NicePicture.jpg, for a webserver they are different files. Be careful with that.

Now look at this:

Code: Select all

<body bgcolor="#00FF00" text="yellow" link="yellow" alink="orange" vlink="red" background="/images/nicepicture.jpg" BGPROPERTIES="fixed">
Adding this will make your background image act like a tiled watermark: it will not move when you scroll the page. The previous code just tiles the image: if the page is scrolled the background would have scrolled with it.

And finally...:

Code: Select all

<body bgcolor="#00FF00" text="yellow" link="yellow" alink="orange" vlink="red" background="/images/nicepicture.jpg" bgproperties="fixed" LEFTMARGIN="25">
As you probably guessed: this indicates a margin on the left, of 25 pixels. You can define the LEFTMARGIN, RIGHTMARGIN, TOPMARGIN and BOTTOMMARGIN this way.

Just a word of warning: before getting carried away with colors, background-colors and background-images, make sure that your page doesn't cause any headaches, and that all those colors and images don't prevent your content from being and staying legible.. Certainly background-images can cause lots of problems, while with a decent graphics editor it's fairly easy to reduce the colors to a hazy shade that doesn't make your text disappear against it.

Jim

Post Reply