Neopets WEBWriters

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...

          <body bgcolor="#000000"
                text="#ffffff"
                link="#ff0000"
                vlink="#0000ff"
                alink="#00ff00"
                background="http://electronicjunky.tripod.com/badeekbg.GIF"
>

let me explain this:

Now, about those F's and Zeros

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

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

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

     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

This is GR0EL's friend BL00DShot, a green Techo.

         <IMG width="150"
            height="150"
            alt="This is GR0EL's friend BL00DShot, a green Techo."
            src="http://techoring.tripod.com/images/bloodshotb.gif">

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

     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.

          <FONT face="Georgia"
              color="red"
              size="6">

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

          </FONT>

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

     The FONT tag needs an "END FONT" tag which is simply </FONT> any text appearing between <FONT> and </FONT> will be affected, after </FONT> 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,
         
<B> This is bold </B>
     italic,
         
<I> This is italic </I>
     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

 

>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.

Neopets Top Five: http://www.topsitelists.com/bestsites/james_r_c/topsites.cgi?ID=4