Consider yourself counted!

We now have an HTML Guide!  The guide is basically the Neopets HTML Guide, and some things we have added.  If you need help, Email us....

HTML Guide

lesson 1: Introduction

lesson 2: Basic text

lesson 3: More Text

lesson 4: Horizontal Lines

lesson 5: Font Colours 

lesson 6: Pictures

lesson 7:Positioning Pictures

lesson 8:Links

lesson 9:Email

lesson 10:Tables

lesson 11:Music

lesson 12:Making Your Design

lesson 13:Extra Help

Many people ask how to make look-ups and cool layouts or how to make their web page look better. The answer is HTML. HTML is a language that is used to create web pages. It is very simple to learn and anyone can do it. You don't need to be a programmer or to have really used a computer before. We have created a step by step guide to HTML which will take you right through from the very basics to pretty advanced HTML like we use around the web.

Lesson 2

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:

<b>	this bolds text	</b>	(you need to end this)
<br>	inserts a line break		(like pressing enter on a keyboard)
<p>	This starts a new paragraph		this is very useful for splitting up your text
<i>	This makes text in italics	</i>	(you need to end this)
<u>	underlines text	</u>	(you need to end this)

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:

• Size 1 text
• Size 2 text
• Size 3 text
• Size 4 text
• Size 5 text
• Size 6 text
• Size 7 text

Now you know how to change text sizes and add special effects you are ready to progress onto more complicated HTML. Click the next button to move onto the third lesson.  

Lesson 3

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

For horizontal lines please go to the next lesson...

Lesson 4

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.

Lesson 5

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 in shops
You have to do your background colour slightly differently in your webbie, you can do one of two things. The first method is to use a background image. Type

at the beginning of your web's description and that image will be tiled as the background for your shop. 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 shop description :

<table background="http://images.neopets.com/ur_file/Ur_pic.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 shop :) 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">.

Lesson 6

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. You can use any images already on the Neopets site or an image that is on your website (required!) 

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.neopets.com/mypicture.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.neopets.com/mypicture.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.neopets.com/mypicture.gif" border="2">

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

For details how to arrange your image on your page and how to add background images go to the next lesson...

Lesson 7

Positioning the image: 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.neopets.com/mypicture.gif">

This will now display your image in the background.

Lesson 8

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.neopets.com so I typed:

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 Neopets 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:

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.neopets.com">
<img src="http://www.neopets.com/mypicture.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 lesson 5 - inserting pictures). 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.neopets.com/mypicture.gif" border="0">

Lesson 9

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.

***Beware*** - If you post your email address on your web page that means that absolutely anybody can contact you via email. Only do this if you are sure this is something that you want to do. If you are 13 or under please check this is OK with your parents first.

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 info@neopets.com I would type:
<a href="mailto:info@neopets.com">info@neopets.com</a>

This would display the text info@neopets.com and when you click on it it will open up a blank email addressed to info@neopets.com. (exactly like this info@neopets.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 your username:
If you are editing your pet's homepage there is a very simple way to get your username to appear. Just type in #OWNERLOOKUP all in capitals and it will display as your username. This is only something you can do on your pet's home page though, it won't work on another web page.

Lesson 10

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:

<table>
<tr> - start table row
<td> - start table data cell
type your text or image tags here
</td>
<td> - start the second table data cell
type your text or image here
</td>
</tr>
</table>

This will now look like this:

This is the first data cell

and this is the second. Woo hoo I have created my first table!

You can have any number of table rows and data cells as long as you remember to end each tag. The main thing to remember is to start with a <tr>. Adding extra <tr>'s will add extra rows and adding extra <td>'s will create an extra cell. If you want to add an extra cell or row make sure you end the one before it before starting a new one.

Lesson 11

This is a very easy thing to do and can really brighten up your webpage. There are several ways you can add music. It can play in the background, play once only, play continuously, or you can let the person viewing the webpage decide what they want to do. First you need to have your music file saved somewhere on the internet. Simply replace the text http://images.neopets.com/help/beep.wav with the URL of your music file. You can embed src files with the extensions of: