Home » Technology » Website Creation » Part 2 - Adding some Content

Part 2 - Adding some Content

© Tracy Ryan

So now we've established the basics of what MUST be included on each page, let's get on to adding what YOU want on the page! Here is where we learn to set our colours, format text, and add pictures to our web pages.

What we should have so far is a document that looks like this:

This is where our text and pictures will appear.

In our browser this looks like a plain white page with just a boring sentence at the top left corner. Let's look at jazzing it up a bit, starting with different background colours.

The basic tag that sets our background colour is actually not a tag of its own. It's something we add to our opening tag - since it's going to describe what shows up in the body part of our page. The format for specifying the background colour is where #nnnnnn is the "hexadecimal" code for a colour.

Some basic colours you might use are:
#000000 White
#FFFFFF Black
#FF0000 Red
#00FF00 Green
#0000FF Blue
#FFFF00 Yellow

You can find a much more comprehensive list of colours at http://www.dreamartists.com/hexcode.html
Note: there are MANY sites that will give you lists of hex codes for colours. This one has a handy java applet so you can mix your own colours too!)

We also need to specify a text colour. This is because the browser default is for black text, so if we set a black background colour, our text would blend in. The text colour also goes inside the tag with the following format . Combined with our background colour, it would look like

To set white text on our black background, we'd have the following page:

This is where our text and pictures will appear.

Easy so far, isn't it? But what if we want our text to be spaced out on the page, or centred, or right aligned? Well, we have text formatting tags as well. We can set paragraphs on our page, or place some single line breaks, with some very simple tags. So far our tags have all been pretty easy to remember, and text formatting tags are no different.

The tag that sets up a paragraph is

with the closing

. All text that lies between those two tags will be formatted as a single paragraph. You can also specify the alignment by adding the ALIGN tag as follows.