Please note:
Colour By Numbers has become a tutorial only site, the graphics linkware site can be found at:
Indigo Moon Graphics

:: Welcome :: :: Fonts :: :: HTML Tutorials :: :: PSP Tutorials :: :: Stationery Tuts :: :: Links :: :: Webrings :: :: GuestBook ::

Fonts Directory

Your First Page

Inserting Backgrounds

Inserting Graphics

Linking Pages

Choosing Fonts

Tag Glossary

Free Backgrounds

Inserting Graphics

Now - let's start by opening your original page, by this time you should have a pretty pink/red textured background. But the page is still looking a little bare. Insulting - but bare ;o)

How about we give it a little splash of colour? Right click on the graphic below and 'save picture as' in the same folder as your 'firstpage.html' - and we'll add that to your page.

(Pimboli tube courtesy of Jazzl Tubes)



Okay, you have your page open.

Now go down to the line where you have - <p> Hello. At the beginning of the line, just hit 'enter' three times to give yourself a little room to enter the following code. As in the example below.
Note: This won't alter the way your page looks in the browser yet!

<html>
<head>
<title> My First Page </title>
</head>
<body bgcolor="#ff4040" background="bg1.jpg">



<p> Hello.
<p>How are you?
<p>This is my first page.
<p>Karen is a twit!
</body>
</html>


Add two <br> to bring the spacing down a little, like so:

<html>
<head>
<title> My First Page </title>
</head>
<body bgcolor="#ff4040" background="bg1.jpg">
<br>
<br>


<p> Hello.
<p>How are you?
<p>This is my first page.
<p>Karen is a twit!
</body>
</html>

This is what your page should show - Example.

You will notice now, that instead of the words being right at the top of the page, you'll have a short space between the top of the browser window and where your text begins.

It's that time again...

[Yes - I do drink a lot of coffee ;o) ]



Okay - almost there!

Underneath the second <br> enter the following code to bring your graphic (the Pimboli Heading) into the page. You'll see I also added another two <br> 's to the page. This is to make a couple of line spaces under the graphic.

<html>
<head>
<title> My First Page </title>
</head>
<body bgcolor="#ff4040" background="bg1.jpg">
<br>
<br>
<img src="myfirstpagehead.gif">
<br>
<br>
<p> Hello.
<p>How are you?
<p>This is my first page.
<p>Karen is a twit!
</body>
</html>

This is what your page should look like now; Example

One last thing to do before we end this part of the tutorial.

It doesn't look right having everything sitting on the left hand side of the page, so we'll move the graphic over to the center of the page, and leave the text where it is.

We need to tell the browser where to place the graphic, so we add the <center> and </center> tags to the graphic as in the example below. Do this and then look at your page.

<html>
<head>
<title> My First Page </title>
</head>
<body bgcolor="#ff4040" background="bg1.jpg">
<br>
<br>
<center>
<img src="myfirstpagehead.gif">
</center>
<br>
<br>
<p> Hello.
<p>How are you?
<p>This is my first page.
<p>Karen is a twit!
</body>
</html>


Example

If you've stuck with me this far - thank you! And yes - you're right - it's time for another coffee break.



While I'm having a coffee - how about you practise what you've learned so far by creating a real first page? Tell the world something about yourself, your likes/dislikes, fave movies/music etc.

Remember to use your <br> and <p> to form your page. You can download some free backgrounds from my site by clicking on the menu at right where it says 'free stuff' - you'll also find some header graphics there as well - just to start you off. [Or you can browse some of the links I have included to other sites offering free backgrounds].

If you're feeling adventurous you may like to choose from one of the free sets I have available. The choice is yours.

When you have the pages set up the way you want them, we'll then proceed to linking the pages together. Both with written links and with graphical links.

**stumbles off in search of some hot coffee**

Let's Link...

:: Welcome :: :: Fonts :: :: HTML Tutorials :: :: PSP Tutorials :: :: Stationery Tuts :: :: Links :: :: Webrings :: :: GuestBook ::

This site is best viewed at 1024 x 768
IE6 Compatible

This website is owned and maintained by Kaysea.
All Rights Reserved.
2002 - 2004