How to Code a Petpage

DEAR VALUED GUESTS: Please refrain from neomailing me on this account, Hotpink_guitar. I want you to neomail me on my MAIN account, STADIUM__X.

Welcome and About

Welcome to my newly edited and revised guide entitled "How to Code a Petpage". Petpages are relatively easy to code, if you have to proper codes. SO, I am going to give you these codes, in hopes that you will go out and de-noob many of the guilds whose webbies are horrible. This guide isn't hard, and it doesn't take a lot of time. To make it easy for you, I'm simply going to relate EVERYTHING to a plate of chicken. Chicken is easy to visualize.

THE ENTIRE CODE

I've gotten a lot of neomails asking "where does this go where doest that go" so here is the ENTIRE CODE. Please please please read the rest of the guide before asking questions on it.

STEP ONE: WHAT?

In order to make a chicken, you have to know you're making a chicken. The same goes for a computer making CSS come to life. It must KNOW what it's reading, the same as you must know the difference between a novel and a recipe book. With that stated, here's how we tell a computer that we're writing CSS:

PLEASE REMEMBER TO PUT EVERY CODE INSIDE THE STYLE TAGS UNLESS SPECIFIED NOT TO!
So, with all of that out of the way, we're moving on to REMOVERS.

STEP TWO: REMOVE

If you don't want things to be too crazy in the kitchen, you have to clean off the counters and table and such. In CSS, it's taking the stupid neopets header and text off of the page. SO, here's how we do that (in between the style tags, and at the BEGINING of them):

STEP THREE: DIVS

Before we can make a chicken, we have to have something to put it on. DIVS are the way I prefer to code things, because it's easy to memorize the codes. DIVS are like the plate. I can move a plate around, position it how I like, but it's going to be relatively useless until I put something on it. Same with CSS, I can move a DIV around, but before I put my content in it, it's a box on a page. Don't do that to someone D; it pains them. Remember that this code goes in between the style tags above (as we must know that we're putting chicken on the plate, and that we're using CSS to make the DIV appear :o): The next part goes after the style tags, it tells the computer to SHOW the DIV and all of the text in it. It MUST be outside the style tags :)

STEP FOUR: INGREDIENTS

This is just an important tidbit of information. When you use colors, it's always best to use the true HTML colors. That means #FFFF00 means yellow. You can google them to find out more colors in different shades. It's really better than typing "red" as you may not WANT bright red. That and certain browsers can't see RED but they can see #FF3333. And always use a # sign.

STEP FIVE: TITLE

Here's how you make a big header, like the one that says "How to Code a Petpage" up there. It's just a really big header. Very easy. Perfect for those who don't know graphics.

STEP SIX: HEADERS

Now that we've decided, cleaned, and found placement for our chicken (or told, removed, and placed our CSS) we're going to START making it. We're going to code a header :D. Notice the GREEN bars with GREEN letters and GREEN dashes you keep seeing? Those are called headers, and they're cool. People like creative headers. Headers consist of some things I'm going to explain below to save you some "OMG WHUTT?".

background-color: this is where you say what color the backgorund for your header is.
border: You can add a "-bottom" "-left" "-right" "-top" to any of those, changing where your border is. THEN after your colon you say the color and the type. The un-gawdy types are solid, dashed, and dotten (which are all pretty self-explanitory).
font-family: This is how your letters look. Common legible ones are Century Gothic (what I'm using), Arial, and Georgia (like in my headers ^.^).
font-size: This is how big the font is. Notice it's PT instead of PX. Point instead of Pixel.
color: Font color, need I say more?
width: how long does your header continue for. I recommend saying 100% and making it cover the span of the DIV.
line-height: how tall the header is.
text-align: center, left, or right, where is the text going?

STEP SEVEN: DECORATION

Remember when you were a little person, and you would see green flakes on the chicken and your mom would call it decoration (or at least, mind did) because she didn't want you to know that it was actually some herb/leaf that was tasteless. Well, it made the chicken not look so boring. Well, if I went around typing in black with gray sidebars, blue links, and a white background people would be like "you didn't work very hard" so we're now going to tell the computer that we want different colored things. I'll add the code now for background, sidebar, links, and text.

and as little as I think you'll need this, here's the code to manipulate text boxes (like my white boxes with green borders where all of the code is)

In case you didn't know, here's how you make text bold underline italicand

bulleted.
THESE DON'T GO IN STYLE TAGS!

EAT!

Now you need to click the 'preview changes' button. You'll notice something, when you go to save changes, the button will be covered up. This is where it gets tricky. If for some unknown reason you have links or text boxes, you need to press 'tab' until you're sure it's tabbed over every link/textbox on the ENTIRE page, then press enter. Good luck!

Credits

I took the main codes and put it all together, so here's what it looks like before you change the colors and borders: right here CSS made by: PITA (stadium__x) neomail me if you want help or something added.
Some codes from csshelp's petpage. Special thanks to Mickey for getting me started on CSS a last summer, 2007.

Banner

If you're kind enough, put my ad everywhere:

Assistant Chefs :o

Otherwise known as affies.