hi there.

This guide is unlike most other coding guides in that instead of giving the user already-written code and explaining it, it teaches the user to construct the code themselves, bit by bit. By the end of it, if you succeeded, you'll be able to write a completely coded page on your own, with no need for copying and pasting.

Anyway, I suppose I should get started. All coding bits are shown in the pink and orange boxes. If you think there's anything that should be added, please NM me, tintytiny909. Enjoy!

Note: As this guide aims more to give a full understanding of basic coding rather than to teach you how to make a specific type of page, it doesn't include all the extra bits that any page other than a petpage has. Of course, userlookups, petlookups, shops, galleries, guilds and so on use exactly the same type of coding, so you can use the knowledge learned here there as well- the only difference is that all the other layout types have preset things by Neo you have to code as well (lookups have the stat tables, for example, guilds have the sidebar, shops have the items and things), which adds too much complication- I can't explain every single type of layout thoroughly in just one page. Still, learning to code petpages fluently will benefit you hugely when you turn to other pages- if you have a good knowledge of petpage coding, figuring out how to do the rest from looking at premades and other layouts should be no problem.

the basics of CSS

Okay, let's be honest here. To begin with, CSS probably looks like a whole load of odd words separated by a whole load of odd bits, all of which is completely beyond your understanding. But actually, it's not that hard. The reason some nice person has put understandable words in is so you won't have to memorize a bunch of code in, say, binary or whatever. xD So, if you work with it long enough, sooner or later you'll understand it just like normal English.

Every bit of CSS you put in has to be enclosed by special CSS tags, to separate it from the HTML. The tags look like this:

<style> </style>

All your CSS bits and pieces go in between the two tags.

The actual CSS that goes inside the tags looks like this:

This is a single CSS group. As you can see, you tell the page what you want to make changes to by putting it in front, then you enclose the actual changes in fancy twirly brackets, { and }.

The 'thing' part is the selector, or the part of the page which you want to change. So say we want to change the body of the page (which is the entire page in general), we'd put:

The 'bit' part is the attribute, or the thing about the selector that you want to change. So now let's say we wanted to change the background of the body:

And the 'changes' part refers to the property, which is what you want to change it to. So if we're changing the background of the body to pink, we'd put:

If we wanted to add more attributes and properties to the same selector, we'd do it like this:

The cursor attribute changes the cursor that's used while viewing your webpage. A semi-colon has to be used after you've finished typing each attribute to separate it from the next one. ;)

Simple enough, eh? Got all that? :) Let's move on then.

all the selectors you might ever need

Note: There's different tags for all the other stuff on a regular Neo page as well, like the clock and the navigation bar and so on, but since this is the only one which shows up on a petpage, apart from the homepage banner (which doesn't have a specific selector), it's all you're going to need.

If you want to assign the same configuration to more than one selector, you put both before the same fancy bracket, separated by a comma and a space. So say you wanted both the normal links and the visited links to be blue, you'd put this:

You can also specifically configure a certain selector of another selector (or div- I'll get to divs later) rather than just one whole selector and everything under it. This is helpful to narrow down what gets changed. For example, instead of telling all headers (h1) to be red, you could tell only the headers inside tables (table) to be red, like this:

Confused yet? Don't worry, hopefully it'll start to make sense soon. :)

creating divs

These selectors you create yourself are called divs. There are two types of div- ID divs, and class divs. The CSS selector for ID divs look like this:

And class divs look like this:

You can call them any div name you want in the place of 'box'; the div name is to tell the page which div you're referring to, when you code it later on in HTML.

As I'm sure you've noticed, ID selectors are preceded by a # and class selectors are preceded by a . The difference? ID divs only configure one specific thing- for example, you might want just one box to be red with red borders, then you create an ID because you don't need the same coding for anywhere else on the page. However, class divs can configure multiple things the same way- like, say you want three boxes, and they all have to be blue with blue borders, then you can create a class that specifies a blue colour with blue borders, and assign the same class to all boxes.

One element of the page can have both an ID and a class- so say you want two textboxes, in different places but both blue with blue borders, you'd write different IDs for each of them to tell them their different places on the page, but also a combined class for both for the blue colour and blue borders.

attributes & properties

size & position

text decoration, transform & align

Text-decoration configures whether you have lines on your text or not, and where the lines go- underneath, over, or through the text.

font

border

background

position

spacing

displaying & visibility

Note: What's the difference between visibility:hidden and display:none? Visibility merely controls whether the element is visible or invisible; an 'invisible' element will still take up the space allocated to it. Whereas, if you use display, an element set to 'display:none' will actually cease to exist.

lists

cursors

There's actually a whole load more, but this will probably be more than enough. This changes the shape of the cursor while hovering over the part of your webpage the code is assigned to.

miscellaneous

shortcuts

Certain groups of CSS attributes can be all put into one line of CSS instead of several. For example, instead of putting this:

We can just put this:

Much easier, eh? :) You can do this for fonts, backgrounds and borders. You can also use shorthand for margin and padding, but they have to be in a specific order or it won't work. Here's an example:

To convert this to shorthand, we write:

The numbers have to be in this order- top, then right, then bottom, then left. The same applies for padding shorthand. ^_^

adding HTML

divs

<div id="ID" class="CLASS" style="position: absolute;"> Your stuff goes here. </div>

The basic HTML for a div, as you probably know, is just a 'div' beginning tag and then another '/div' end tag, with your content in between. However, when you use CSS to configure a div, you have to tell the page which div you want that specific CSS to appear on, so you insert the ID name or class name (or both, if it has both a class and an ID) that you gave the div in your CSS.

You'll also see there's this part called style, and you'll probably recognize it as CSS. What's it doing among the HTML then? Well, for this particular piece of style, the position attribute, it's disallowed in the style tags, so we have to put it in the HTML instead. However, there's another use for style-in-HTML- you can tell the style to apply to that element only, whereas any CSS you put within your style tags will apply to everything. This isn't terribly useful for divs, because you can create specific selectors for specific divs, but it's very useful if you're using a table as your main text container, like this layout. Since you can't give a table a specific name, you can add the style within the HTML, and it'll apply to that table only. :) You can change the style bit as you like, the 'position:absolute;' is only an example, although it is the most common style-in-HTML I usually use, and if you assigned an absolute position to the div you'll be needing it anyway.

Once you've done that, all there is to it is to put whatever actual stuff you want to replace the 'your stuff goes here' bit, be it navigation links or text. So there we are! :)

tables

<center> <table style=""><tr><td> Your stuff here. </td></tr></table> </center>

Note that you can't position absolute a table- it has to align to either the right, the left, or the center. You can replace the 'center' tag with whatever alignment you want it to have. Also, you can't give tables specific div names, so when you have multiple tables it's a little harder to handle, and you'll have to style-in-HTML code them individually.

images

<img src="http://i54.tinypic.com/2q9zzuw.png" id="name" style="position: absolute;">

Of course, simple in-text images don't have an ID or position, you just use the 'img src' and '/img' codes, but for special images like headers, you can also assign a div to images, which you can use to position it, put a border around it etc. Like the text div, you'll just write the positioning of the image into your CSS and then use the ID where the 'name' is.

page anchors

Let's see how to make the anchor first. Let's say you want to link to some text that says AWESOMENESS, and you want your anchor to be called awesomelink. All you have to do is this:

<a name="awesomelink"></a> AWESOMENESS.

You put the 'a name' tag just before the bit you want to link to, and give it a name. Now, wherever you want to put in the link to the AWESOMENESS section of the page, you type this:

<a href="#awesomelink">link here</a>

It's just like an ordinary link, except that instead of a URL you have the name you gave the anchor with a # in front, which in this case is '#awesomelink'. Simple. :)

separate-page anchors

The coding is the same as the simple page anchor, but with a few more bits in the div coding. If you're going to do this, you need to code two divs in your CSS. The first div is for the position and size of the actual textbox. The second one is the class you'll use each time you want to create another separate page in your textbox. :) It'll look something like this:

You'll see I've put 'overflow:hidden' in the first div- that's so the actual box doesn't extend or scroll when you put stuff in it. You've got to retype the height in your class div, the same height you used for the box, and you also put your font and stuff in there. (Of course you can change the names of those divs how you want, but for example's sake I'll continue using those names.)

Now, moving onto the HTML needed. You have to type in the div code for the ID first, and then the ending tag. Then you put the code for your class in, and end it every time you want another separate page. And so people can actually reach the pages underneath the first page, you have to put page anchors so you can click them and get to the pages underneath. Also, remember that each div ID and class you have has to have a matching end tag. Bit confusing? No worries, it'll clear up in a moment. So say you want two separate pages, one called butter and one called bread, you put this:

<div id="box"> <a name="butter"></a> <div class="text"> Butter. </div> <a name="bread"></a> <div class="text"> Bread. </div> </div>

Easy, eh? :) Don't forget to put the link to the anchor as well, like this:

<a name="#butter">butter</a> <a name="#bread">bread</a>

Of course, you're welcome to replace the random names I've given to the divs and anchors as you like.

floating elements

The very simplest way to make a fixed element is to add 'position:fixed' inside its style-in-HTML. Yes, it's very simple, isn't it? But thanks to IE having so many weird problems (-_-), this doesn't work in IE. So we take a more roundabout route.

The basic idea of making a floating element while everything else scrolls is to have two different layers on your page- one which scrolls, and one which doesn't. The floating element would be on the not-scrolling layer, while everything else would be on the scrolling one. Sound simple enough?

We use the body layer as the not-scrolling layer. To do this, we simply put this in our CSS:

That will stop the body from scrolling. Then, on top, we create another layer. Since we can't have two bodies in the page, we create a substitute one by making a huge div that fills the entire screen and therefore is basically another body:

You see we've put 'overflow:auto' this time rather than 'overflow:hidden', which means the second 'body' will scroll.

Now, outside of your style tags, make the HTML counterpart for the second body div we just made. That's where all your other content goes; since that div is set to overflow:auto, everything inside it will scroll normally. Then, outside of the second body div, put your floating element. Since this is outside of the scrolling div, and we've set the body to not scroll, this element will remain fixed. :) Whoopee! Here's the HTML in action, just so you don't miss it:

<div id="body2" style="position: absolute;"> Scrolling content goes here. </div> Put your floating element div here.

image maps

Image mapping is done by telling a certain section of an image to become a link. There are lots of different shapes you can use, but you can manage basically anything with the simplest shape, a rectangle, so I'll just teach you how to do a rectangle area.

The image map code looks like this:

<map name="map"><area href="http://neopets.com" shape="rect" coords="129,995,235,118"></map>

As you can see, an image map also has a name, just like divs and anchors do. The 'area shape' part tells it which shape to use. The ref part is like an ordinary link- you put your link URL there. The co-ordinates tell you where your rectangle will be.

So how do you get these co-ordinates then? Well, the easiest way is to use an imaging program- if you don't have anything fancy, Paint is fine. Copy your image into the program, making sure that the canvas is exactly the same size as your image. Then, hover over where you want the top left corner of your rectangle to be, then look around the sidebars. You should see a little pixel count somewhere, telling you how far from the top and the left of the canvas your mouse is. This is exactly what you need. :) Note down the numbers, then repeat the same process with the bottom right corner of where you want your rectangle. Then you put them into the area bit, in place of the random numbers I put, in the order you noted them down, which should be the distance from the left for the top left corner, then the distance from the top for the top left corner, then the left to bottom right corner, then top to bottom right corner. Got that? :)

Finally, you just need to add a bit of code to the image which you want the map to be used for, telling it to use a map. This is what it should look like:

<img src="http://i54.tinypic.com/sfaw6q.png" usemap="map" style="position: absolute;">

putting it all together

Well, not quite. I expect you're still feeling a little lost, and probably not quite sure how to start, how to create your page. Well, I'm still here to help. Below are some step-by-step guides to create actual petpages, and hopefully that'll help you get started!

Note: Obviously, these methods aren't the only ways you can make petpages. There are myriads of different methods people use. In fact, these three ways are merely examples, to show you how you can use the coding; I strongly encourage you to experiment and come up with your own style after you get the hang of it.

style 1: continuous text with image

Note: Of course, it's perfectly possible to code a continuous text layout without images too, and same with the textbox style a little later on; however, I suggest you practice with images first, it will give you more confidence. :) If you can't make images, you can use mine for practice, as long as they are actually only used for practice and never saved. If you want to show some other people what you've done to ask for help, you have to leave credit somewhere, and you cannot use them for an actual webpage.

Images needed:
1. Header image like directly below. You'll see that the textbox has no border at the bottom, and that it doesn't have to continue for as long as you want your text to be- the background image will make sure that the textbox continues, so this first image actually only needs to be as long as your header. (Of course, you can also have a sidebar, or more than one if you wish. If you want a sidebar with an end, you have to make the full length of the sidebar visible in your header image- see second image example. If your sidebar is also continuous, then just put an extra no-border textbox.)

2. Background image, repeatable vertically, like directly below. The text space needs to line up perfectly with that in your header image and the background has to match that on the header image to make it look like you just had one long textbox, so I usually get the background image from the header image by copying the part with the textbox, then extend it to 1500-2000px wide and fill in the remaining space on the right with the background pattern also.

Why so wide? Well, it is possible to have two repeating backgrounds, but that's a lot more complicated, so to avoid having two I just make one background image fill all the space horizontally as well as vertically. So I make it a bit wider than what I think the widest screen would be, in order to make sure nobody sees plain background behind it, even if they have a monster screen. xD However, if you just want a plain colour as background, you don't have to make it so wide- as wide as your header image is enough.

Drag them into your browser to view full-size and get an idea of what they need to look like. :)

How to code it:

1. Write in the style tags. Duh.

2. I usually start off my coding the body. Don't worry if this feels a bit alien, you'll get used to the coding soon. :) Just for a helper, here's the actual coding I usually put:

Replace the 'YOUR IMAGE URL' with the URL of the repeatable background image you uploaded. (You have to save your images onto your computer, find an image hosting site and upload them, then copy and paste the direct link.) Then, replace the COLOUR part with your own background hexcolour, in case somebody does have a monster screen- seeing plain colour is better than seeing plain white, right? xD If you're just using a plain colour as a background, remove the URL and the repeat bit and just have your hexcolour.

You should be recognizing this CSS from the previous sections. The URL bit is the background image, repeat-y tells it to repeat vertically, and the colour is the background colour, all written in shorthand, right? Starting to click together now? :)

3. Now I put in the removal code. I found that with this way of coding the page, the credits the Neo filters automatically put in- the homepage banner and the copyright stuff- end up in awkward places and mess up the layout, so I usually just to remove them. (You can't see it when you press preview changes, but it'll show up when you save changes if you didn't remove them.) See if you can code it right by yourself now. ;) Remember, I told you how .sf is the class name of the copyright bits? And the homepage banner is in a table, and the display:none code stops things from showing up. So with those clues, try writing in the code. :) Shouldn't be too hard. And just to help you get the hang of it, check your answers here:

Did you get it right? If you did, well done, and move on to the next part. :) (I feel like a schoolteacher now.)

4. Here's the exciting part, and you get to do it on your own! ;D (Because I actually can't do it for you, unless I use my occult powers read your mind. Muahahaha!) At this point, I put in coding for the divs I'll need. (I usually have three to four- one for main text, one for navigation, one for my header image, and sometimes one for a sidebar.)

Refer to the sections above if you need to, and have fun customizing the divs. ;) Put in the positioning and size first. My header image is usually left:0px top:0px, because the background has to be left:0px and top:0px (you can't position the background) and it has to line up. Then, I put in an absolute position and size for my other divs- textboxes, navigation etc. (Most imaging programs, even Paint, have a pixel count somewhere that tells you how far from the left and top your mouse pointer is, so all you need to do is paste in your header image, hover over where you want the div to start and note the pixel number.) Your text div needs an absolute position and a width, but not a height, because it's just going to continue as long as your page is.

After that, don't forget the fonts and things. Since this might be your first page, it might be tempting to skip the scarier bits like navigation, but I encourage you to code a nav as well as a textbox, it'll give you experience with the fonts and colours and borders. :)

5. Now I write in code for any other selectors I want to configure- h1, a, textarea, b, i, u, and anything else I might want to change.

6. You're done with CSS! ;) Move outside the style tags, and start on the HTML. Remember, every div in your CSS has to have a corresponding div in HTML- so an image with the ID you gave your image code, a textbox with the textbox div name etc. I usually stick some sample text in the div to check all my CSS worked. Press 'preview changes' when you want to see what it looks like, and whether you did it right- adjust z-indexes, overflows etc. etc. accordingly. Once it's all in the right place and everything looks like it should, move on to the next step.

7. Now put in your actual text, navigation links and so on inside your divs. Keep pressing preview changes to check it looks all good.

8. Once you're happy with how it looks, press the 'save changes' button. (In this layout style, it should be somewhere on your header image.) Then, go to the actual URL of your petpage, and see if everything still works. ;) (Sometimes a problem doesn't show up in Preview Changes but it does on the actual page.) If it does, yippee, you just coded a perfect petpage!

style 2: continuous text with table

Images needed:

1. Header image. This is optional, but your table will look much nicer with one- it doesn't need a border, a textbox, or anything, the only thing it has to be is the same size as what you want your table to be. For example, say you want a table 600px wide, your image has to be 600px wide as well.

2. Background image. This is also optional. However, again it looks nice with a background image. :) The background image has to be a tileable image to go in your background (if you look at this layout, it would replace the plain dark grey I've got).

How to code it:

1. Put in style tags and write your body code again. (If you skipped straight to here, I recommend you read the previous layout style guide first, just to get an idea.) This time, remember that the background image is going to tile across the whole page, not only vertically, so you can just put 'repeat' instead of 'repeat-y'. :)

2. I said removal tags cause some complication this time. Here's why: although you can still make the .sf not show up in the same way, since this time the table's going to contain the text, you can't just put 'table {display:none;}', or your text would disappear. The homepage banner is an image within a table which links, so the best you can do is use 'table a img {display:none;}' instead- remember we did combining selectors earlier? Table a img tells the computer to apply the display:none only to images that link and are inside tables, so if you only have text or non-linked images in your table they will be safe. If you're planning to have images that link inside your table, like buttons or banners, it gets even more complex; we'll deal with that soon.

3. Now you write in the actual text table's CSS. Put in what font and colour you want to use, padding, margin and the table width etc., but don't put in the background colour or border code yet- instead, just put background:transparent and border:none. Why? Because in the removal code in step 2, we got rid of the homepage banner, which is an image that links inside a table, but not the actual table. Therefore, if you assign a colour and border now, it'll also apply to the homepage banner table. You can put the colour and border in the HTML later, with style-in-HTML, so it only applies to your text table and not the homepage banner. :)

4. If you are going to use buttons, they won't show up because of the code we added earlier. However, you can fix that by adding another class for your buttons. Call it button or something, and write this:

Or, if you want them to display:block, put that instead. Why this code then? Well, we put display:none earlier, so now if we put display:inline or display:block now, with the !important override, it'll tell any link-images you have within this 'button' div to show up. ;D So wherever you have buttons, all you need to do is put the HTML for the button class and it'll make whatever link-images you put inside show up.

6. Customize the h1, b, i, u, a:link etc.

7. Now it's time to write in the table HTML- I showed you this in the adding HTML section. :) It works much like div HTML, except that you have to remember to put a td and tr tag as well.

Remember when we put background:transparent in the table background CSS earlier, to hide the top banner table? Well, you can put your own background colour and border here instead, by putting it in the style-in-HTML.

8. Put in HTML for all the rest of the divs, like navigation and images. You know the drill. (In this layout, if you used a header image, you don't need any CSS for it- you just put it inside the table before your text as a normal image, using the img src and /img tags.)

9. Put your actual stuff in, navigation links, text etc. Save changes and check it's working, and you're done. :)

style 3: textbox with image

Images needed:

1. Textbox image. It has to have a textbox, as I'm sure you figured, since this style of layout is called 'textbox with image'. -_- (This one has two, but obviously you can have however many or little you want.)

2. Tileable background image, like the table. This is optional, again, you can just have a plain colour, but a background image always looks nicer. Use a tileable image that matches the background you have in the textbox image.

How to code it:

This is very similar to the continuous text with image style, as I said- the only difference is that the text div needs a height as well, since it doesn't go down the page infinitely, only in the textbox. Therefore, I won't bother re-iterating every single step. Just remember to add a height for your textbox. :) (Also, remember that because there's no continuous text, and you'll only have a background image for tiling the background, you just put 'repeat' instead of 'repeat-y', just like the table.)

tips

• Remember that there are lots of different sizes computer screens can be, and also that there are lots of different browsers and computer systems which sometimes display things differently. That just means that if it looks fine on your computer, it might not on somebody else's. ;) Try to avoid that as much as possible by considering smaller and bigger screens and testing it in different browsers- IE, Chrome, FF, Opera and Safari are the main ones.

• When you're learning, actually type the codes out, rather than just pasting what I've written here. You learn them much faster. ;) You can also become independent of copying and pasting the codes quicker- I didn't give a whole page code on purpose. When I learnt this, I could only copy and paste premades and edit them, but then I figured out what all the different bits mean and suddenly had a much better grasp of coding, and also how to fix any issues I had.

• Putting together a layout, I think, is a bit like solving a maths problem. That sounds ominous, but what I mean is, like, once you know what all the bits do, the thing is to fit them in together, like a jigsaw, so they all work. If something goes wrong, there's probably ways to fix it- use your knowledge of what the bits do to think around problems.

• Choose a way to create pages that suit you. I've given you three examples of ways you can do it, but how I do it might not necessarily be how you want to do it. Look at premades and other sites to give you ideas. Once you've got the hang of it, I really really encourage you to type it all out yourself, rather than always using this guide. It's only a crutch, sooner or later you can do without. ;)

• If you can't already, learn to make graphics. Just CSS alone is fine, but graphics make it look so much more attractive, in my opinion. I would write a tutorial for graphics as well, if it was possible- but there are so many millions of little things about making graphics, and everyone does it differently, it's so hard to teach someone how to make them in just a petpage. The only way to really learn is just to get an imaging program and experiment- all the images on this page with the exception of the textbox one was made in Gimp, which I used to use and which is free, but Photoshop is even better if you can get it.

• A great place to find ideas and learn stuff is premades, and if you like the layout of some random page you find have a good browse in the source code and examine the image. Don't steal, of course, but I used to look over stuff I liked for ages and improve my own skills in the process.

thanks!

<img src="http://i51.tinypic.com/346b1jr.gif">

And if you want to read more of my rambling for some reason, my other guide, Everything Habitarium, can be found here. :)