What's New? | Competitions | About us | Site Map | Privacy | Contact | Join
All About Me
Kids on the Net

Kids on the Net
is supported by

WiredKids Approved Safe Site Seal

   

 All About Me |  Friends |  St Labre Indian School |  News About Me |  My Sports
 Amandas School, Zimbabwe | How to write about yourself

  How to create your own website

This guide to writing a web page has been produced by Michael, 15, of Nottingham, UK, as part of his Silver Duke of Edinburgh's Award

How to make a web page

To make a web site in notepad using HTML you need to use a series of tags.

To put the document in an HTML format you use HTML tags. These are at the start and end of your document. The one at the start looks like <html> and the one at the end looks like </html>.

The next set of tags are the head tags which look like <head> and </head> . Within the head you have the title which appears across the top of the browser window. The title for this web page is "Writing a web page - Kids on the Net". You put the title in tags <title> and </title> within the head tags.

Then after closing the head you open the body with the tag <body>. The body is where you put all the writing and pictures that you wish to have on your web page.To start a new paragraph you use the tag <p>. Obviously you put writing in here and you close the paragraph with </p> then you close the body with the following tag </body>. At the end of the document you put in the HTML close tag </HTML>. So a simple web page written in HTML format might look like this.

<HTML>
<head>
<title>my web page<title>
</head>
<body>
<h1>EG1</h1>
<p> this is an example</p>
</body>
</HTML>

divider line

Formatting text

This section is all about how to do different text fonts, colours, and sizes, and different backgrounds.

To set the font you use the following tag
<font size="4" color="#000000" face="Arial, sans serif">ADD TEXT HERE</font>

For example:

Size 6, color #00CC00, and font Arial

this is font size 4, color #000000, and font Arial
this is size 2, color #6600ff, font Tahoma

The colours I used here are web safe colours. There are loads of sites on the internet where you can find a complete list of all the web safe colours, such as here

Now onto setting the background. For this you use the tag

</BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#000099" ALINK="#6600ff">

This will make the background white, the text black, the link colour blue, and the visited link colour purple.

divider line

Hyperlinks

This section is on how to use links to connect your web page together.

The tag you use to insert a link is

<A HREF="insert web address here">insert link description here</A>

So the link might look like

<A HREF="http://www.shudokan.info">website</A>

This is a link I have used making my website.

You can also apply links to pictures. this is slightly more complicated as you need to insert a picture with the same tag.

This is quite a complicated tag

<A HREF="link details"> <IMG SRC="name of image" WIDTH="xxx" HEIGHT="xxx"</A>

If you want to remove the border simply add BORDER="0"

divider line

General Stuff

This is how to insert a picture into your web page and guess what another tag is needed. This one is basicaly the second part of the picture hyperlink tag on the last page. It looks like this <IMG SRC="picture name" WIDTH="xxx" HEIGHT="xxx">

Headings come in 6 different varieties: all are similar.

<H1>Heading 1: point size 18 </H1>

<H2>Heading 2: point size 16 </H2>

<H3>Heading 3: point size 14 </H3>

<H4>Heading 4: point size 12 </H4>

<H5>Heading 5: point size 11 </H5>
<H6>Heading 6: point size 10 </H6>

The tag <HR> gives a horizontal line across the page.


<BR> gives a break line like a carriage return.

<Blockquote> Indents your text. </Blockquote>

<center> guess what.... this centres your text, end it with </center>

<P> starts a new paragraph </P>

<UL>bullet pointed list</UL>

<OL>numbered list</OL>

Each list item is denoted using <LI>list item</LI>

Good luck with making your web pages!

divider line

One you have made a web page, or several pages in a site, you will need to upload them onto a webserver so that everyone can see them. Michael used Angelfire.com, which is free web space, but it does add adverts to your site.

If you would like to contribute some tips and hints on making a web page,
please send them via the form here.

divider line

divider line

©2003-2011 Kids on the Net and the authors        Last revised 13-May-2006
Kids on the Net

divider line

Return to Top