The majority of web pages are made up of text. If you have ever used a keyboard then you know how to type text in HTML. To type something into your webpage simply type what you want to show up. You only need to use tags if you want the text to do something special.

Some commonly used tags are:

Font Size:
You can also change the size of your font. In HTML the sizes range from 1 (very small) to 7 (very big). To change the size of your font you need to type:

<font size=1>type your text here</font>

You must end your font tag or all text typed afterwards will be that size.

These are the different size fonts that you can use:

Once you are comfortable with using the simple tags such as bold and underline, you can move onto other things that can make your text more interesting. Here you will learn how to add bullet points, make numbered lists and insert a horizontal line.

Bullet Points:
Bullet points are slightly more complicated. In HTML bullet points are called unordered lists or ul for short.
To start bullet points you need to type <ul>.
You want each bullet point to appear on a new line so you type <li> before it.
When you have finished all your bullet points type </ul>

The code would look like this:

<ul>
<li>bullet one
<li>bullet two
<li>bullet three
</ul>

This is what would actually be displayed on your web page:

• bullet one
• bullet two
• bullet three

Numbered Lists:
Creating a numbered list uses the same principle as creating bullet points except you use ordered list <ol> instead of <ul>. The code for an ordered list would look like this.

<ol>
<li>point one
<li>point two
<li>point three
</ol>

This is what would actually be displayed on your web page:

1. point one
2. point two
3. point three

Horizontal Lines:
If you want to divide the page a useful command is the horizontal rule (hr). The default rule goes all the way along the page and looks like this:

Where ever you want to add a line to divide a page simply type <hr> . You can change several things to make it look different such as its width, height and the amount of shading it has.

Width can either be measured in pixels (a web page is normally about 600 pixels wide) or by typing the percentage of the screen you want it to cover. To change the width you simply type <hr width=300> or <hr width=50%>. A horizontal rule that is 300 pixels in length looks like this:

Size refers to how large the horizontal rule is. You change it in the same way as you alter the width. If you wanted to make a 10 pixel wide line you would type <hr size=10> and it would look like this:

By default horizontal rules have shading. You can create a line without any shading by typing <hr noshade>. This will look similar to below.

You can combine as may variables as possible within the same tag. If you wanted to create a 300 pixel wide rule that was 10 pixels wide and had no shading you would type <hr noshade width=300 size=10> it would appear similar to the line below:

It doesn't matter what order they are in as long as they are all within the < and > tags.

Font Colours

You can change the colour of your font very easily. For the most frequently used colours you can use their name. e.g red, black, green, blue, gray, white. HTML uses American English spellings, if you want to change the colour of something, you need to type color. If you want a Grey colour you need to type Gray. If you want to make a word red you would type: <font color="red"> text here </font> and this would appear as text here.

For more specific colours you may need to use a hexadecimal code. This is the unique code given to each shade of colour. All colours have a combination of 6 numbers and letters that represent an exact shade. Some common codes are:
Bright red = FF0000
Purple = CC00CC
Pink = FF66FF
Light Blue = CCCCFF
Lime Green = 99FF99

To use the Hexadecimal code simply type: <font color="FF66FF">text here</font> This would make the text pink, like so text here.

If you want to change the font colour and size you can do this in the same tag eg:

<font size="1" color="red">type text here</font>
This would make the text small and red, like this type text here.

Background colour
If you want to make your page more interesting you can change the background of the page. Background colour works in much the same way as font color except it affects the whole page. Normally backgrounds are white (FFFFFF) or black (000000) but you can use any colour you wish. To change your background colour simply type this near the top of your page.

<body bgcolor="#FFFFFF"> or <body bgcolor="white">

You do not need to end this tag as it affects the whole page but it is good practice to put </body> at the bottom of your page to keep things tidy.

Background colour:

You have to do your background colour slightly differently, you can do one of two things. The first method is to use a background image. Type

at the beginning of your page's description and that image will be tiled as the background for your page. Alternatively, if you want a solid colour, or want a coloured background only in a certain area, you need to use a table. The simplest table would be to type this is your page description :

<table background="http://images.yoursitesname.com/backgrounds/imagename.gif">

or
<table bgcolor="red">
followed by
<tr><td>
Type your text here as normal and then finish your table by typing the two lines below.
</td></tr>
</table>

Don't forget to include the last two lines, or your table will be broken. Now you should be able to put a background colour, or image in your page. If you wish to position the table in the centre of your page, simply add the words align=center after <table , for example <table align=center bgcolor="red">.

Adding Pictures
Pictures can brighten up a web page and they are a great way to show others your work. If you have created a picture that you want to use on your site you need to save it somewhere on the web. Once you know where you image is stored it is very easy to add an image to your web site.

Once you know where your images are saved you are ready to write the code. The code to insert a picture is made up of three things:

1. <img src = " (this command tells the computer to look for an image)
2. "http://www.yoursitesname.com/imagename.gif" (this tells the computer where to find your picture)
3. "> closes the tag

When you put the code together it looks like this:
<img src="http://www.yoursitesname.com/imagename.gif">

The image tag is special as you don't have to end it, that is all you need to type to display an image. Now when you look at your web page you should see your picture.

There are several other things you can add into the code to make the image look better including the border tag. Using this you can choose what thickness border, if any you want around your image. Some basic borders are:

• Border="0" no border
• Border="1" thin border
• Border="2" thicker border

You simply type in border="2" inside the tag after you have typed the location of your image, like so:
<img src="http://www.yoursitesname.com/imagename.gif" border="2">

This will now display your picture with a thick border around it.

Placing an image on your page:

You can also change where you want your image to be positioned on the page. The most frequently used ones are left, right and center. To make an image centered type this before the image tag:
<div align=center>

Everything typed after this will be centered so now you need to type your image tags. When you have finished your image tag and no longer want everything centered you simply end the center tag like so:
</div>

To make something aligned to the left or right you use the same code just replace the word center with left or right.

Background Images:
You can also make an image display as a background image instead of just having a solid color. This works well with light colored, simple images. It livens up the page, yet you can still read the text clearly. To display an image as the background you need to type:
<body background="http://www.yoursitesname.com/imagename.gif">

This will now display your image in the background.

You can turn anything on your site into a link to something else. If your favorite game on NeoPets is Dice-a-Roo, you can make a text or image link to the Dice-a-Roo page. You already know how to insert images or text into your web page, turning that into a link is very simple. First you need to have a URL to link to, in this example I have used the NeoPets url. I wanted to make the text click here link to www.wintersteel.com so I typed:

<a href="http://www.wintersteel.com">click here</a>

<a href= (means you wish to create a link)

"http://www.wintersteel.com" (type the URL you wish to be linked to in quote marks "_")

> (closes the link)

click here (type here what text you wish to be clickable)

</a> (ending of tag)

The only thing that will be displayed on the web page is the text click here. This would now be click-able. When you click on it with your mouse it will take you to the Winter Steel URL. You can make the text a different size, different color, bold, italic whatever but you need to start and finish the tags either side of the text. e.g to make that link bold I would put:

<a href="http://www.wintersteel.com"><b>click here</b></a>

<b> (start bold tag)

</b> (end bold tag)

To make an image click-able you use the same idea but instead of typing the text you put the image tag. E.g:
<a href="http://www.yoursitesname.com">
<img src="http://www.yoursitesname.com/imagename.gif"></a>

It will automatically put a thin border around your image. To make this thicker or remove it you need to use the border tag (see Placing an image on your page) Using this you can choose what thickness border of any you want to have around your image.

Some basic borders are:

• Border="0" no border
• Border="1" thin border
• Border="2" thicker border

If you don't want to have a border around your picture you simply type border="0" inside the tag after you have typed the location of your image, like so:
<img src="http://www.yoursitesname.com/imagename.gif" border="0">

Adding your email address:

If you have your own email address you may want other people be able to contact you. A great way to do this is to post your email address on your web site.

If under-aged (13) PLEASE ASK YOUR PARENTS FOR PERMISSION!

The code is much the same as creating a link only instead of typing in the url of the page you want to link to you type in the email address you want to pop up. For example if I wanted to post my email address as youre-mailname@youre-mail.com I would type:
<a href="mailto:youre-mailname@your-mail.com">youre-mailname@yourmail.com</a>

This would display the text youre-mailname@youre-mail.com and when you click on it it will open up a blank email addressed to youre-mailname@youre-mail.com. (exactly like this youre-mailname@youre-mail.com  ) You may want to make the font a different size, make it bold or change the color. To do this just type the relevant tag either side of the linking text.

Adding Tables:

Tables are a great way to divide a page and organise how your page looks. A table is basically a grid made up of columns and rows. Each little box is called a cell. Your text, pictures, whatever goes inside the cells.

To create a table you need to start and end it. To start a table you need to type <table> and to end the table type </table>. What goes between the start and end table depends on what type of table you want. Every table has at least one row. A table row is one horizontal row made up of x number of table data cells. It is completely up to you what you put into each cell, it can be text, images, links, anything. If you want to create a table with two columns and one row. You need to type: