Site hosted by Angelfire.com: Build your free website today!

html Help


Name

URL or Email

Messages(smilies)


~Link to us!~



Email
buttercool@ppgworld.com
-or-
qtpihelper@ppgworld.com

AIM
tough green chic
-or-
askbottercup
(Don't have AIM? Sign up here!)

Neomail
guild_qtpi_helper


Are you clueless about html? I used to be. I'd go to pages that would say "html help" and say how to display an image, and I didn't even know how on earth to make an image! Since I was once clueless, I know how it needs to be explained. I can help you there. Make sure that you read the instructions carefully and thouroughly, and you can test and play around with the codes until you get what you want! Also, you can visit neopet's html help page here! Enjoy!

Let's begin with the basics. Almost everything will start with the following characters:


Then it ends with:

These characters help the computer to identify which pieces of information are which. If you didn't have these or whichever characters you need, whatever you put would come out in a jumble!

One of the most important rules of html: copy & paste. I am most certain you have probably heard of it before. In case if you haven't, it's to "copy" everything you want; e.g. a picture, a passage, some content, etc. Once you have copied it, you can "paste" it. This means that whatever you had copied, you can now put where you want. It'll save you a lot of typing! You can use this for codes, what makes up html.
There are two ways to copy: right-click, then select "copy", or
hold down the "Ctrl" key and at the same time, press the "C" key.
There are two ways to paste: right-click, then select "paste", or
hold down the "Ctrl" key and at the same time, press the "V" key.
A common question is: How come the right click won't work? Well, there are several reasons: Some programs or systems may not allow you to do this. Other websites have the option by decreed of owner whether or not to "freeze" right-clicking. Right-clicking can access to certain information about a website. So, you may need to use the "Ctrl" button instead. If you need anything else on this page, just copy & paste! You can paste your stuff in your shop description, your guild, or anywhere you want!

Now, let's learn about text change. Just replace "TEXT HERE" with what you want to say!
Bold Text


Result: TEXT HERE
Italic Text


Result: TEXT HERE
Underlined Text


Result: TEXT HERE

You can do more than one at a time!


Result: TEXT HERE

Changing the size of text has a different code.


Result: TEXT HERE

There are 7 different font sizes. Each number will be placed here: size=number here
The bigger the number, the bigger the font. The smaller the number, the smaller the font.



Result: TEXT HERE





Result: TEXT HERE





Result: TEXT HERE





Result: TEXT HERE





Result: TEXT HERE





Result: TEXT HERE

You can also make text so that it get's smaller than normal. All you have to do is put the - sign in front of the number, like it's negative. The bigger the number, the smaller the font.


Result: TEXT HERE

I bet almost all of us can agree that the standard typewriter auto-font is nothing special. You can change your font to almost anything. There's a great choice of selections that you can pick out on Microsoft Word. Here's the code. Comic Sans Ms is the font, so if you wish to change it, just delete that and replace it with your choice.


Result: TEXT HERE

You can change the color of your font too. You will have to find out which color you want though. There is a number for each color. Find out which number at the color table! Use the code below and replace the number with the number of your choice.


Result: TEXT HERE



If you want to break text (like when you press the enter key), here's the code:


Result: 1st part
2nd part

Bullets- they can be complicated.


Result:
  • bullet one
  • bullet two
  • bullet three

Understand that "li" represents each bullet and they must have the brackets (< and >) surrounding them. When you use them, you must surround them with "ul" and the bracket pattern (< and > at the beginning and <, /, and > at the end).

You can also create a list of numbers. This is the same as bullets, only you use "ol" instead of "ul".


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


Let's learn how to position words on the pages...

Maybe you want your text on the left side:


Result: TEXT HERE

Maybe you want your text centered:


Result:
TEXT HERE


Maybe you want your text on the right side:


Result:
TEXT HERE


You may wish to make a link. This is a word or image that when you click on, it takes you to another page. Links aren't as complicated as they look. Below, is the code for the link we have created. Test the link. It really works! When you make your link, just remove our url (address to the website), then put what you want the page to link to. You will put this in between " and " after 'href='. Then, remove 'Jazzie.QTpi', and put what you want the words to say. NOTE: Most times on neopets, if you do not include 'http://www.' before the url, the link will NOT work!


Result: Jazzie.QTpi

Displaying an image really isn't as complicated as it sounds. First, you need to have an image. You could have made it on a program, most likely paint, that comes with almost every computer, or you could have saved it of the internet by right-clicking, and selecting "Save Picture As". Save it as what you want, and then sign up for an account at an image-uploader. The most commonly used is boomspeed. You can get a free 1-meg account, or get a 100-meg account for a price. First, sign up with your account and follow all instructions. Once your account is ready and you have activated it according to the directions, then you can login. Now, look around at your page. See where it says 'browse' next to each little text box? Click on that. Choose the picture that you wish to upload, and click "Open". Now, upload it! See your new file now? There will now be a link that is named after your image. Click on it! Now look at the web address you are at. Continue below.


Result:

Result: Look at this image. It is a linking image. When you click on it, it takes you to a webpage. Use the code above to make a linking image. Replace all in the " and " after 'src=' with the url to your image, and replace all in " and " after 'href=' with the url to link to, to complete a linking image.


Result: Look at this image. It is a bordered image. Use the code above to make a bordered image. Don't forget that you can also make a linking, bordered-image. Replace all in the " and " with the url to your image, and replace the number 1 with the number of pixels wide that you want your border to be to complete a bordered image.

Now, let's learn about Scroll Bars
Look at the scrollbar to the left. It shows you each part of the scrollbar. below is a code to get a scrollbar. It should effect the colors of all the scrollbars on you page unless you used I-Frames. After each ":" OR the "#" sign, place the number of your color for that position. For example, say you wanted your arrow color to be purple. You would look where it says "scrollbar-arrow-color:". Well there are several shades of purple, so you could go to the html color table to pick out your color. You have picked out your color. Now, you have two choices to choose from. If you choose to use the css code (which usually doesn't work in shops), you would put after the : sign, the word "Plum". If you chose to you the html code, you would put after the # sign, DDA0DD. This is because the word plum and the code DDA0DD are the same color. Make sure you don't mix anything up or things will not turn out right.

CSS CODE:




HTML CODE:


Result: View the scrollbar on this page.

Backgrounds~ They use the SAME EXACT PROCEDURE as making images EXCEPT they use a different code. Replace our background url found between " and " and place yours instead~ of course, your could always use ours!



Result: Try for yourself! :)

If you wish to make your background a solid color, find the color's number or your color's name that you wish to use with the html color table! Then replace "YOUR NUMBER/COLOR HERE" with your number/color!

NUMBER CODE:




COLOR CODE:


Result: Notice the background color of this page.

html color table



What are you guys talking about? What's neopets? Not a Neopian? Sign up below! It's fast, fun, and free!