Welcome to Little Miss Alien.co.uk

Head & Body Sections

When you start to code a webpage there are 2 essential sections needed to put your code in. The HEAD and BODY.

Until you are more proficient with HTML, the only thing we will put in the head section is the page title. In later tutorials we will add some other codes which will enhance your page further.

The page title is displayed in the very top left corner of your browser window. I can't stand sites where you open up a page and it is called "New Page 1" or something similar, which is the default MS FrontPage page title. I even see this on commercial sites and it makes me shudder. It's such a simple tag to do that it's ridiculous that people neglect it so often.

Right, enough ranting. All you do is in the <head> tag is add a <title> tag, add your text, close the title tag (</title>) and close the head tag (</head>). Here's the code:

<head><title>Let's talk about code!</title></head>

Now, look at the top left hand corner of your browser window - that's what the code above does! How simple is that?! And you can use any characters and symbols you want. There are even some DHTML and JavaScripts that can give dynamic effects to the page titles!

The body section contains the most important bits - the actual HTML code for your webpage. All you do is set up some basic attributes for the entire page in the body tag and away you go!

What you put in the <body> tag defines the overall look and feel of your page. You can choose whether to use a background image or colour, define the colour of your links and text and even add CSS styles (we'll look at this later).

When you start your page you'll want to make it in the colours and/or theme you want. On the page pictured below I have used a background image.

A background image is usually a small image which the browser will automatically tile when you use it as a background image. For example, this is the image I have used for the background of the page shown in the above screenshot:

See how small it is? It's only 100x100 px. The browser repeats it to fill the whole screen. It's called tiling. Here's how you do it:

This will give you a background like you see on this page. However, sometimes you just want a background to be a different colour other than the default white. This can be any code from the hex colours, or one of the predefined colours (see the colours section). Here's how you do it:

This will give you an entire background in this colour:

Nice. Now you'll want a corresponding font colour and links that coordinate. So, to change your text colour:

And now you get:

This

There are three stages of links, links, active links and visited links. Normal links (link) have not been clicked on before, active link (alink) describes the state of a link when you click on it and visited links (vlink) are links that have already been clicked on. So, here we go:

This gives us this:

Pretty cool! There are more things you can do with the body section and links in the CSS section.