Kids on the Net
is supported by

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>

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.

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

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

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!

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.

Return to Top