Path // www.yourhtmlsource.com → My First Site → <BODY> ATTRIBUTES

<body> Attributes

by Ross Shannon

Now that you are a bit of a genius at HTML, you will want your site to start looking more presentable. That means good use of colour, and an attractive design. Up until now, the only colours on your page have been white in the background, black for text, and blue for links. Wouldn't you like to change them for something far more stylish?

Clock This page was last updated on 2012-08-21


The <body> tag

Now that you have the gist of using attributes in tags, this should make perfect sense. Remember the <body> tag from the first page, which everything visible on your page goes into? That is the tag we'll be adding to in this, as it's been left untouched up until now. There are 7 attributes to be added here, and they all change how your page looks.

bgcolor

This is the colour of the BG, or BackGround, of your page. You need to put the colour in as a HEX code, like the rest of these colours. What are HEX codes? Glad you asked. Because it means you have to read this definition! If you want to see a list of HEX codes for 216 different colours, look at this chart. The code is:

bgcolor="#FFFFFF"

Note that, even though the default BG is white, you should still code in #FFFFFF, because older browser's default BG is a nasty grey.

text

This will change the colour of all the text on your whole page, unless you have changed the colour manually (find out how in the text section). Your best bet here is to leave it black, because that's the easiest to read. Code!

text="#000000"

Instead of the normal blue, you can now change the colour of all your links to something a bit more classy.

link="#FF00FF"

Links change colour once you have clicked on them, from blue to purple. The V stands for 'Visited'. You can change this too, but make sure it is visibly different to the link colour, otherwise people will get confused.

vlink="#660066"

When you click on a link, it changes colour momentarily, to show you that you've clicked it I guess. If you click the 'Back' button, it is highlighted as being Active so you don't click through on it again. The default is usually red. Make sure you highlight it right; it's a nice feature.

alink="#FF0000"

background

If you want to put an image as your background, use this attribute, and set the value to the same as you would for an image src (don't know how? Read the preceding lesson on images). You can also link to an image from another site, by giving the entire URL.

background="http://www.yoursite.com/media/BACKGROUND.gif"

Whatever image you choose to use, it will be tiled across your page, filling it up. That means it will repeat itself across your page, so choose one that doesn't look too obvious.

If you want your background to be set in place and not scroll, add the attribute bgproperties="fixed" into the body. This will leave the image as a watermark.

margins

There are two sets of margins on a page, the ones at the sides and the ones at the top and bottom. The two main browsers use different attributes to put in these margins, so when you change one, change the other as well.

  • For Internet Explorer: topmargin="0" and leftmargin="0"
  • For Netscape: marginheight="0" and marginwidth="0"

Despite this, the units of measurement are the same — pixels, so to make your margins the same in both browsers just set them both to the same value.

Show me the code
So now, a complete body tag would look something like this:

<body bgcolor="#ffffff" background="bubbles.gif" text="#000000" link="#3399ff" vlink="#9966ff" alink="#000000" bgproperties="fixed" topmargin="0" marginheight="0">

Step into Style

During the time you've spent learning HTML so far, you may have heard mention of CSS, or Cascading StyleSheets, and wondered what they were. I'm going to explain the whole thing now, and hope that you're ready for it. I do have an entire stylesheets section, and a dedicated introduction to CSS here, but think of this as an induction to the introduction.

There are many tags in HTML that exist purely to create a certain look on your pages. There are also techniques, like using transparent images to space your page out. This was all well and good a few years ago (and is why you'll see practices like these mentioned in older HTML tutorials...), but they are not at all suitable for the web that exists today. These techniques create accessibility problems, add to the bulk of your HTML files, and are generally awkward to work with. Nowadays, we have a better method of styling our pages.

Style Sheets are the best way to define how your page looks. Everyone should use them. You create a simple text file, styles.css for example, with a number of rules defining the colours and spacing of certain HTML elements. Let's say, in your stylesheet, you command all of your headings (<h1>) to be red. You then put a line of code into your HTML that shows your web browser where its CSS file is. When it loads up the page, it looks for the CSS file, reads it and sees that all h1 elements should be red and then displays red headings, without any extra code.

In this way you can apply all of the presentational stuff through simple CSS, and keep your HTML relatively clean and simple. So, open a new document and add this to it:

body {margin: 0px; }
h1 {color: red; }

That's all that needs to be in the file. Save it as styles.css (or whatever). Now add this line into the head of all your pages:

<link rel="stylesheet" type="text/css" href="styles.css">

This tells your browser where to look for the CSS file. These two lines of code will make all the headings on your site red, and will set the page margins to zero pixels without all of that laborious topmargin/marginheight/etc. attribute tomfoolery. It's actually probably best if you take out those attributes.

Already you should be seeing some of the benefits of using CSS — that one line will take care of the margins on every one of your pages that use this stylesheet. Once you have a CSS file, you can continue adding new rules to it to pretty up your pages. There is some amazing power in stylesheets, and you have loads of options for designing the look of your site. Head on over to the CSS section for more.

A word on colour schemes

Avoid a shocking colour scheme at all costs. It is no coincidence that the best sites have subdued, light colours, and the worst sites have brash, painful ones. Luminous yellows, reds, pinks and greens are just a big no-no. The more easy it is to read, the more professional it will look. Keep the contrast high between bgcolors and text colours, so no text disappears because it is too close in shade.

If you think people might want to print parts of your site out, don't use a black background and white text. No one will print it if it takes up all their ink. It is also not as easy to read as the normal black on white.

The colour-scheme you use and the subject of your site will often have a lot in common. They will also create a different mood. Visit sites like your own and see which colours they use, and criticise whether they work or not. A site about say, the game Quake, can get away with dark, foreboding colours because they fit in well with the atmosphere of the subject. However, if you were designing a tourism site the same colours couldn't be used because you want to generate a happy, welcoming mood. Think about your audience.

Pick your background well

If you do use a background (remember, you don't have to), pick out the main colour in the image. Then set that colour as your bgcolor. The reason for this is that some people don't have images turned on, and won't see your image. Therefore, the colour has to be close to the images colour so the text remains readable.

Try and avoid using those God-awful free background tiles you can find on the net, or those painfully dull ones that come with Microsoft Office programs. Your site will look horribly cheap. Clever use of a simple background tile can work wonders on the visual impact of your site. Look at our own simplistic bubbles to see what I mean.