GR0EL's Neopets HTML Tutorial

Reset Cookie

by forty42two. I hope you find your stay fun and informative. Relax, there's no quiz at the end.

Recently I received a Neomessage asking me how I had made my pets webpage. I tried to respond via Neomessage but couldn't possibly give an appropriate answer in fewer than 800 characters. After brief consideration of options I decided on dedicating this page to all those who want to customize their pets' pages without to much hassle.

So, without further ado, here we go.

Lesson #1

For those who have no idea what's going on

In order to make changes to your pet's webpage first go to pet central. Then under the "Interact" Menu select "Edit Your Homepage". I'm sure most of you knew that much but I'm trying not to assume too much. Once you're there you'll see all of your pets with the choices "Edit", "View", and "Stats" (Stats doesn't appear to work currently but maybe that's just me). Select View and your pets page should appear In a new window. That's your "Test Page". From now on, anytime you save the changes to your site, all you have to do to check them is refresh the other window to see the changed page. Next go back to the first window and select Edit. You'll be taken to a screen with a big text area in the middle. From here on out, you have to know html.

HTML stands for HyperText Markup Language it is essentially a text-based word processing language. All you have to do is type your text like normal and add "Tags" (small chunks of code) here and there to make things interesting. HTML is quite possibly THE easiest to learn programming language there is, and once you've learned you'll have a skill that you'll enjoy for life.

Go to any search engine and type in HTML tutorial. You'll get loads of great resources. One of the best I've come across is webmonkey (www.webmonkey.com) ANYWAY, pick a few of the thousands of free resources you find and decide on some that you're really comfortable with. Then, get yourself a binder and a hole-punch, print off the tutorials, and organize them into your very own desktop HTML user's manual. Now, rather than jumping back and forth between your bookmarks or favorites page and your editing page, you have something to grab when you can't quite remember how to turn your text puce.

Lesson #2

Isn't it about time we saw some code?

Ok, you've made your way to your pet's edit page. You have his actual page up in a separate window. You're absolutely certain that you can't stand having that template page up any longer. What do you do?

First decide if you want to start over completely or simply to alter the Template that's already there. From here on out, I'm going to assume that you intend to delete the old page entirely and start from scratch. If you only intend to add to the current Template page, do not despair. You'll still learn a thing or to to help you out by reading on.

Taking the Plunge

     You Stand at the edge of a great precipice staring out over a giant text area of code. Carefully you move your mouse. With exacting slowness you highlight the entire space. you extend a trembling hand, swallow the lump in your throat, and press the Delete key. In an instant it's gone.
     It's over.
     It's done.
     The field is now an empty wasteland waiting, beckoning to be refilled by your creative skill.

Will you have the strength to succeed?

Ok, ok, so it isn't all that dramatic. What can I say? I'm a hopeless romantic. Anyway, I promised to teach you HTML so teach I will Startiiiing...NOW
Ok! Now you have a big empty text area and no idea what to do with it. Here's the solution to your quandary.

The BODY Tag

Every pet page you do should start with a BODY tag (other pages actually have more at the top, but Neopets has graciously taken care of that for us). The BODY tag tells the browser what colors and images to use for the background, text, and links. It can tell the browser more but that's a little advanced. Let's just bite off what we can comfortably chew for now.
Here's an example of a simple BODY tag...

let me explain this:

the lessthan sign (<)starts the tag

BODY is the name of the tag. It tells the browser what's coming next. Everything else here is an "Attribute" of the BODY tag. In order to keep your code legible, always capitolize tag names.

bgcolor is the color of the background this one is black (I'll explain the zeros and F's in a sec.)

text is of course the color of the text, in this case white

link is the color of links to other pages (red)

vlink is the color of links that have been visited (V for Visited link) this one is blue

alink is the color of a link that was just clicked (A for Active link) this one is green

background is a picture to be used as a background for a page. (you must use the full address starting with http://)

lastly the greaterthan sign (>) closes the tag

Now, about those F's and Zeros

lets look more closely at our text attribute (text= "#ffffff")

text names the property telling the browser that what follows is the color of the text

The equals sign (=) means just that.

Then, the Attributes's "value" is in quotes.

Now we have to learn a little about hexadecimal numbers (not as hard as it sounds)

Each color is made up of a RGB or red green blue value.

There are fifteen levels of intensity for each color from 00 (zeros) to FF.

Hex numbers go from zero to one to two on up to nine then, after nine comes A then B then c up to F after F is ten 10. (you'll get the hang of it).

Two digits are used for each hue (red green and blue ).

So, the number #FFFFFF means white because it is all the red, all the green and all the blue together.

#000000 is black because it is none of the colors.

#FF0000 is bright red because it is all the red and nothing else.

#00FF00 is bright green .

#0000FF is bright blue .

#FFFF00 is yellow .

#FF00FF is fuchsia ...

You can find charts that explain the colors better, or better yet just play with them to find what you like, that's what I've done.

Once you've finished your body tag, you could just type what you want and it would show up in the colors specified but that would be boring. You need to make things interesting. The first way to do this is with pictures. For those you'll need the IMAGE TAG...

Lesson #3

A Picture is Worth a Thousand Words

Let's break down the tag for this picture of my buddy BL00DShot.

As always the tag begins with lessthan (<)
Then the Capitolized name of the tag: IMG for image
The width and height of the image are given in pixels, (you don't have to use the images original values here, larger or smaller values will cause the image to be scaled up or down to fit)
alt stands for alternate. It's text that will appear if the picture doesn't load or the viewer has pictures turned off. It's also what shows up when you hold your mouse over the image.
Finally SRC is the important one. It stands for source. Make sure you use the full URL of your image starting with http://
Then as always close the tag with greaterthan (>)

As a note, for your neopets pages only you can use src="#PHOTO" to get a picture of your pet.

So you've assigned some colors, inserted some images, and written a little text, but why is all of your text shown in that lame times new roman font? Read on...

Lesson #4

Back to the font!! You will look how I say you will look.
(ask a Metallica fan)

The next easiest way to make your page interesting is the FONT tag

Text between the FONT and End FONT tags will be red, larger, and in the Georgia font.

Text between the FONT and End Font tags will be red, larger, and in the Georgia font.

Put simply, the FONT tag changes the way your text looks.

face is the full name of a font installed on your computer (note: it has to be installed on the viewers computer for them to see it otherwise they'll just see the default so use common windows fonts). You can specify more than one font separated by commas the browser will look for the first font listed, and if it doesn't find that one installed, it will look for the next. I don't know of any limits to the number of fonts you can specify but most people only specify three.
color is self explanatory. You can use hex RGB values (#ff0000) or the color's name. However, not all color names are supported you can find a chart that will tell you which ones are.
size is from one to five (some browsers will keep making the text larger if the number gets larger) average is 2 or 3 (I use three usually, its easier to see on larger screens) one is very small

The FONT tag needs an "END FONT" tag which is simply any text appearing between and will be affected, after text goes back to its default values. This is useful for temporarily changing the color, size or typeface of your text for emphasis.

A few other easy ways to alter text are bold,
 This is bold 
 italic,
 This is italic 
 and center.
 <center>

Anything in here is centered on the page, even images
 </center>

 an easy way to add a little formatting is with a Horizontal Rule,
 <HR width="600"
 color="lime">

By the way, color might not work in all browsers. If a color isn't specified it shows up as contrasting your bgcolor

Lesson #5

What could I do to get from my page to you? Don't you now I got to add a Little Link to My Friends.
Aaaaad a little link to my Friends!
(Think "Wonder Years")

The last lesson for today is the anchor or "link" tag

<A href="http://home.neopets.com/~BL00DShot">
 this is the link text
 </A>
 Which shows up as: this is the link text

The name A is for anchor. There are other things you can do with Anchor tags but they're most commonly used for links.
href is short for http reference which is a fancy way of saying web address or URL. Remember always start with http://
Finally there's the End Anchor tag </A>. Anything between <A href=""> and </A> will become a link to the specified address.

>In Closing>

Get it? HTML site gag! hehehehehe look there's another one! hehehehehe

These tags should give you enough to play with for a while. The next step is to get a binder and look up tutorials. Find the tutorials you're most comfortable with and print them out. Keep them in the binder so you can look at them while you write your page.

HTML is the easiest programming language there is and there is an incredible amount of tricks you can do with it. Just keep playing with it and you'll learn in no time
The last little secret I'll leave you with will make your life ten thousand times easier.
When you see a webpage you like, and you want to know how they did something, just right-click on the page somewhere and you'll get a menu; in that menu you'll find "VIEW SOURCE"; select that and you'll be shown the code for the entire page. It might take a while to pinpoint where things are but you'll learn soon enough.

If you have any more questions about things just write me and I'll be more than happy to tell you anything I can to help. Till then have fun.