HTML Help

HTML HELP

HTML can be daunting to some users but in fact it is not that hard, in case you do not know it is the language that nearly all web pages are written in, to make it easier this page allows you to copy chunks of code filling in the blanks along the way. Read the introduction below first to understand how it works.

Introduction  
HTML is a tag based language so all instructions are put in two triangular brackets like these < > Some tag, such as the image tag, img, do something at one point of the page, img places an image where you put the tag. Other tags continue to affect the web page until they are stopped, an example of this is the centre tag which centres everything on the page following it until it is ended, ending a tag is done with a forward slash, like so /. A practical example of this is if I wanted to make the word Hello bold, the tag for bold is B so the HTML looks like this

<b>Hello</b>
and it will look like this in your shop

Hello

One more thing to note is that tags can have attributes, this is extra information placed within the tag to give more information, for example <font size=4> If you can understand these simple ways the language works you should not find it hard at all to build up a good looking shop or guild by simple copying the codes and filling in the blanks :) I'm not saying its plain sailing, but it's not impossible!  
 
Coloring  
Just before getting to the codes I though it was worth mentioning how colors work on a web page as some tags below will require you to enter a color, most web browsers will recognise normal colors like red, blue purple, black etc. but it is much better to use Hexadecimal Color Codes these are not as scary as they sound, it is a way of specifying an exact color in 6 digits, 2 digits for red, 2 for green and 2 for blue on a scale form 00 all the way to Ff. You can find all common color codes by clicking the link below, they only thing to remember is to prefix them with a # so <font color=white> becomes <font color=#FFFFFF> this is a good habit to get into!
  
 
Jump To Item Code  
Text  Text Hyperlink  Image Hyperlinklink  
Image  Graphical Email Link  Text Email Link  
Divider  Music  Background Color  
Background Image    
 
Text  
One of the most used and useful tags, this allows you to customise the text in your shop, you can change the font, size, alignment and color. 
Simply copy the following code into your shop or guild, and then follow the guide below
<P></i><div align=BLANK1><BLANK2><BLANK3><BLANK4>
<font color=BLANK5 size=BlANK6 face="BLANK7">
BLANK8
</font></b></i></u></p></div>

OK, now you should have the above where you want it on your page, the next step is customisation, follow the guide below to fill in all the "Blanks"

Blank1 - Alignment
Replace Blank1 with how you want your image aligned, either left, center or right

Blank2 - Bold
If you want your text to appear Bold replace Blank2 with a "B", otherwise replace it with "/B". (Exclude quotation marks)

Blank3 - Italic
If you want your text to appear Italic replace Blank3 with a "I", otherwise replace it with "/I". (Exclude quotation marks)

Blank4 - Underline
If you want your text to appear Underlined replace Blank4 with a "U", otherwise replace it with "/U". (Exclude quotation marks)

Blank5 - Font Color
Replace Blank5 with the color you want your text to be, this can be a simple color like red, purple or green alternatively, you can use a Color Code

Blank6 - Font Size
Replace Blank6 with the size you want your text to be, this is done on a scale of 1 - 7, see below for how large each of the sizes looks!
1 2 3 4 5 6 7

Blank7 - Font Typeface
Replace Blank5 with the typeface or font that you want, neopets uses verdana so if you do not want to change the font use this, it is OK to use spaces when entering the font name. Be aware that everyone may not have the same fonts as you and some are less legible than others

Blank8 - Displayed Text
Enough with customisation! replace Blank8 with the text you want to be displayed on the screen, this is the text that all the fiddling will be applied to

EXAMPLE
If you get stuck, look below for one of the ways you can fill out the blanks

<P></i><div align=CENTER><B></I><U>
<font color=#00FF00 size=3 face="ARIEL">
LOOK AT MY NICE GREEN TEXT!
</font></b></i></u></p></div>

The example above will look like this

LOOK AT MY NICE GREEN TEXT!

^Back To Top^
Text Hyperlink  
Similar to Text, however with a few extra options to customise, such as the link! 
Simply copy the following code into your shop or guild, and then follow the guide below
<P></i><div align=BLANK1><BLANK2><BLANK3>
<a href=BLANK4>
BLANK5
</font></a></b></i></u></p></div>

OK, now you should have the above where you want it on your page, the next step is customisation, follow the guide below to fill in all the "Blanks"

Blank1 - Alignment
Replace Blank1 with how you want your text aligned, either left, center or right

Blank2 - Bold
If you want your text to appear Bold replace Blank2 with a "B", otherwise replace it with "/B". (Exclude quotation marks)

Blank3 - Italic
If you want your text to appear Italic replace Blank3 with a "I", otherwise replace it with "/I". (Exclude quotation marks)

Blank4 - Hyperlink
Replace Blank6 with the address of the hyperlink, you must include the http:// at the beginning

Blank5 - Displayed Text
Enough with customisation! replace Blank7 with the text you want to be displayed on the screen, this is the text that all the fiddling will be applied to

EXAMPLE
If you get stuck, look below for one of the ways you can fill out the blanks

<P></i><div align=CENTER><B></I>
<a href=http://www.google.com>
Click Here To Go To Google!
</font></b></i></u></p></div>

The example above will look like this

Click Here To Go To Google!

^Back To Top^
Image Hyperlink  
Makes a image appear on your page which acts as a hyperlink. 
Simply copy the following code into your shop or guild, and then follow the guide below
<P></i><div align=BLANK1>
<a href=BLANK2>
<img src=BLANK3 border=BLANK4 alt="BLANK5">
</a></b></i></u></p></div>

OK, now you should have the above where you want it on your page, the next step is customisation, follow the guide below to fill in all the "Blanks"

Blank1 - Alignment
Replace Blank1 with how you want your image aligned, either left, center or right

Blank2 - Hyperlink
Replace Blank2 with the address of the hyperlink, you must include the http:// at the beginning

Blank3 - Image Address
Replace Blank3 with the address of the image you want to add, images are not saves as part of web pages, instead your Web Browser is told where to look and it fetches the image then puts it on the page, you can put your own images on the internet by using services such as yahoo Geocities, alternatively if you know where the image you want to use is, you can Right Click on it, choose Properties and copy the Address(URL). Be aware though that some images may be copyright, only use images with permission, you are aloud to use images from the neopets site, as long as you don't claim to have made them.

Blank4 - Border
Replace Blank4 with the size of the border you want around your image, a hyperlink will by default get a border but you can get rid of this by entering 0 any other number will make a larger border around the image.

Blank5 - Alternate Text
Replace Blank5 with the text you want to be displayed if the mouse cursor hovers over the image. Move your mouse over the image below for an example.

EXAMPLE
If you get stuck, look below for one of the ways you can fill out the blanks

The example above will look like this

^Back To Top^
Image  
Makes a image appear on your page, simple as that. 
Simply copy the following code into your shop or guild, and then follow the guide below
<P></i><div align=BLANK1>
<img src=BLANK2 border=BLANK3 alt="BLANK4">
</a></b></i></u></p></div>

OK, now you should have the above where you want it on your page, the next step is customisation, follow the guide below to fill in all the "Blanks"

Blank1 - Alignment
Replace Blank1 with how you want your text aligned, either left, center or right

Blank2 - Image Address
Replace Blank2 with the address of the image you want to add, images are not saves as part of web pages, instead your Web Browser is told where to look and it fetches the image then puts it on the page, you can put your own images on the internet by using services such as yahoo Geocities, alternatively if you know where the image you want to use is, you can Right Click on it, choose Properties and copy the Address(URL). Be aware though that some images may be copyright, only use images with permission, you are aloud to use images from the neopets site, as long as you don't claim to have made them.

Blank3 - Border
Replace Blank3 with the size of the border you want around your image, to have no border enter 0 any other number will make a black border around the image.

Blank4 - Alternate Text
Replace Blank4 with the text you want to be displayed if the mouse cursor hovers over the image. Move your mouse over the image below for an example.

EXAMPLE
If you get stuck, look below for one of the ways you can fill out the blanks

The example above will look like this

^Back To Top^
Text Email Link  
Just like an hyperlink, exept this one opens up a new email to a specified address 
Simply copy the following code into your shop or guild, and then follow the guide below
<P></i><div align=BLANK1><BLANK2><BLANK3>
<a href=mailto:BLANK4>
BLANK5
</font></a></b></i></u></p></div>

OK, now you should have the above where you want it on your page, the next step is customisation, follow the guide below to fill in all the "Blanks"

Blank1 - Alignment
Replace Blank1 with how you want your image aligned, either left, center or right

Blank2 - Bold
If you want your text to appear Bold replace Blank2 with a "B", otherwise replace it with "/B". (Exclude quotation marks)

Blank3 - Italic
If you want your text to appear Italic replace Blank3 with a "I", otherwise replace it with "/I". (Exclude quotation marks)

Blank4 - Email Address
Replace Blank6 with the address of the recipients

Blank5 - Displayed Text
Enough with customisation! replace Blank7 with the text you want to be displayed on the screen, this is the text that all the fiddling will be applied to

EXAMPLE
If you get stuck, look below for one of the ways you can fill out the blanks

<P></i><div align=CENTER><B></I>
<a href=mailto:neopia@connect.to>
Email Me
</font></b></i></u></p></div>

The example above will look like this

Email Me

^Back To Top^
Graphical Email link  
Makes a image appear on your page which will open a addressed blank email when clicked on. 
Simply copy the following code into your shop or guild, and then follow the guide below
<P></i><div align=BLANK1>
<a href=mailto:BLANK2>
<img src=BLANK3 border=BLANK4 alt="BLANK5">
</a></b></i></u></p></div>

OK, now you should have the above where you want it on your page, the next step is customisation, follow the guide below to fill in all the "Blanks"

Blank1 - Alignment
Replace Blank1 with how you want your image aligned, either left, center or right

Blank2 - Recipient
The recipient of the email, set to a email address

Blank5 - Alternate Text
Replace Blank5 with the text you want to be displayed if the mouse cursor hovers over the image. Move your mouse over the image below for an example.

EXAMPLE
If you get stuck, look below for one of the ways you can fill out the blanks

The example above will look like this

^Back To Top^
Divider (Horizontal Ruler)  
A divider is a colord line which you can use to split different parts of the page. 
Simply copy the following code into your shop or guild, and then follow the guide below
<hr color=BLANK1 size=BLANK2 width=BLANK3 align=center>

OK, now you should have the above where you want it on your page, the next step is customisation, follow the guide below to fill in all the "Blanks"

Blank1 - Color
Replace Blank1 with the color you want the divider to be, this can be a simple color like red, purple or green alternatively, you can use a Color Code

Blank2 - Height
How tall do you want the divider to be? set to a number between 1 and 10 for best results

Blank3 - Width
Now choose how much of the available space your divider should cover and replace Blank3 with a percentage, so if you set it to 50% the divider will go across half the display, setting it to 100% will make it go as far as it can etc...

EXAMPLE
If you get stuck, look below for one of the ways you can fill out the blanks

The example above will look like this

--------------------------------------------------------------------------------

^Back To Top^
Music  
I have a separate page for dealing with music, along with over 150 tracks to choose from, CLICK HERE to go there :)

^Back To Top^
Background Color  
Use this to set the background color of the page, this can be preferable to a image as it does not need to download anything. (This can also be used on your pet description and user lookup) 
Simply copy the following code into your shop or guild, and then follow the guide below
<style type=text/css>
td,p,body {background-color: BLANK1}
</style>

OK, now you should have the above where you want it on your page, the next step is customisation, follow the guide below to fill in all the "Blanks"

Blank1 - Background Color
Replace Blank1 with the color you want the background to be, this can be a simple color like red, purple or green alternatively, you can use a Color Code

EXAMPLE
If you get stuck, look below for one of the ways you can fill out the blanks

The example above will set the background a lime green color, try to use pale colors so visitors can read the text on the page!

^Back To Top^
Background Image  
Use this to set the background image of the page, using animated images can slow down weaker computers, it will also slow loading time, be warned. (This can also be used on your pet description and user lookup) 
Simply copy the following code into your shop or guild, and then follow the guide below
<style type="text/css">
body {background-image: url("BLANK1"); background-attachment: BLANK2;}
</style>

OK, now you should have the above where you want it on your page, the next step is customisation, follow the guide below to fill in all the "Blanks"

Blank1 - Background Image
Replace Blank1 with address of the image you want the background to be, images are not saves as part of web pages, instead your Web Browser is told where to look and it fetches the image then puts it on the page, you can put your own images on the internet by using services such as yahoo Geocities, alternatively if you know where the image you want to use is, you can Right Click on it, choose Properties and copy the Address(URL). Be aware though that some images may be copyright, only use images with permission, you are aloud to use images from the neopets site, as long as you don't claim to have made them.

Blank2 - Background Position
You have 2 choices to replace Blank2 with, if you want the background to scroll down with the web page, like it does normally, replace Blank2 with none. alternatively, the background can stay fixed and the page scrolls on top of it, to do this, set Blank2 to fixed

EXAMPLE
If you get stuck, look below for one of the ways you can fill out the blanks

The example above will set the background as my Neopia banner (top of this page), experiment with different images so that visitors can read the text on the page!

All Credit for this information goes to NEOPIA go to the Links page to see the site!

COLOR CODES