welcome

Hello guest, and all other folks of Neopia. I'm Ghost, and I'm going to teach you how to code a simple, yet attractive petpage for you to put all your stuff in.

For this guide, I'm going to assume you know nothing or very little about CSS and HTML.

Why? Because I'm sort of tired of seeing everyone using premade CSS and moaning that they can't code by themselves. By the end of this guide, you will be able to code you very own petpage and have knowledge of CSS basics. The layout we will be making today looks much like this one. It has two columns and a space for a header image. Of course, it will be extremely basic, but hopefully the knowledge I prepare you with will set you well on your way to creating the petpage you've always wanted! Teach a man to fish, hm?

Anyway, there are a few guides like this around, but none of them worked for me. They are either too confusing, too basic or don't work with the filters. So I created this one.

I hope it isn't super confusing, and if you have any questions, feel free to drop me a quick neomail, and I'll sort out any problems you may have.

Ghost

KEEP TRACK OF UPDATES TO THE RIGHT

Covering CSS/HTML concepts and basics

step one

IF YOU ALREADY HAVE A GOOD UNDERSTANDING OF CSS AND HTML, SKIP THIS SECTION

HTML

HTML stands for Hyper-Text Markup Language
HTML is, if you like, the language of the computer. It was devised to create web sites.
It is fairly easy to learn and powerful in what it can do.

HTML consists of a series of short codes, known as tags. Each command is inside a tag. Tags seperate regular text from codes. For example, if I write the letter b like this...:

...nothing happens. But if I write it in tags:

...it makes my text bold.

But what are tags, and how do you write them? Tags don't show up on the actual web site, only in the coding area. However if I use a text box like this:

Hello

I can make the tags show up, and show you what a tag looks like, like so:

The angular brackets, , are tags and we put codes inside them

Go to your petpage coding area and copy all the text in the box below into the area. Do this by right clicking, pressing select all, then pasting using right click, paste. Then press the 'preview changes' button at the bottom and read...

Tags allow us to do lots of things, for example, make a sentence in bold type. To do this, we use the letter b. The letter means 'bold', and the computer knows this. Of course, we also need tags, because ALL HTML codes go in tags. We use the letter b with tags to make text bold like this: <b> See? To stop text being bold, we have to put the same tag, with a / before the command, like so... </b> And no more bold text! Clever, huh?

This is all the HTML you need to know for now! Wasn't that easy? Of course, the HTML we are going to use for a petpage will be more complicated, but first we must move on to...

welcome

Covering CSS/HTML concepts and basics

step one

+ button bases (nnr)

+ icon bases (nr)

nav

updates

Link back

thanks