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=http://www.geocities.com/ryan2flyn/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=http://www.geocities.com/ryan2flyn/BLANK2> <img src=http://www.geocities.com/ryan2flyn/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 <P></i><div align=CENTER> <a href=http://connect.to/neopia> <img src=http://homepage.ntlworld.com/maartin/siteadd.gif border=2 alt="Come Along To Neopia"> </a></b></i></u></p></div> 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=http://www.geocities.com/ryan2flyn/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 <P></i><div align=CENTER> <img src=http://homepage.ntlworld.com/maartin/neopets/neopets.gif border=0 alt="Neopets"> </a></b></i></u></p></div> 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=http://www.geocities.com/ryan2flyn/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 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 <P></i><div align=CENTER> <a href=mailto:neopia@connec.to> <img src=http://homepage.ntlworld.com/maartin/neopets/email.gif border=0 alt="Email ME!"> </a></b></i></u></p></div> 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 <hr color=#FF00FF size=6 width=75% align=center> 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 <style type=text/css> td,p,body {background-color: #C0FF00} </style> 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("http://www.geocities.com/ryan2flyn/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 <style type="text/css"> body {background-image: url("http://homepage.ntlworld.com/maartin/neopets/neopia.gif"); background-attachment: none;} </style> 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
