Web Design Tutorials and Lessons: The Five Minute web page

When you click New, a dialogue box pops up asking you to choose your Background options. The dialogue box looks like this one:

Background Options Dialogue Box

The default is set to None. Click "Background Colour". The dialogue box changes to show you the background colour options. It looks like the one below:

Background Options - Background Colour

Click the black down-pointing arrow just to the right of White to reveal a drop-down list of colours for your web page. Clicking the "More" button will reveal another dialogue box with a wider range of colours to choose from. For now, though, select one of the colours from the drop-down list. In the image above, we've gone for Magenta:

Before clicking the OK button, notice that you can also set a Background Image for a web page, instead of using a coloured background. We'll explore this later.

When you have chosen your colour from the drop-down list, click the OK button. The dialogue box will close, and this rather daunting code will now be in your editor's window:

HTML code in the Editor

We'll explain what all that code means in a moment, but as we're designing a five minute web page, let's crack on.

The cursor will be flashing right at the top of your code. Move it down so that it's flashing on an empty line after "<BODY BGCOLOR = Magenta>" but before </BODY>.

From the menu bar, click on Insert > Heading > H1

Insert a H1 Heading

When you click H1 (the H stands for Heading) a pair of H1 tags will be inserted onto your page. We'll get on to what tags are soon, but for now just type something in between those pair of H1 tags:

<H1>My First Web Page</H1>

Nearly there. Next, highlight that entire H1 line, like in the image below:

Highlight the H1 heading

From the menu bar, click on Format > Centre. When you do, another pair of tags will be added to the start and end of those H1 tags. Your code will now look like this:

<CENTER><H1>My First Web Page</H1></CENTER>

Notice the spelling of the centre tag, you Brits! It's CENTER. The American spelling "er" is used in HTML, rather than the English "re".

OK, we're done with our five minute web page. Time to see what it looks like.