Welcome

Why hello there, eager Neopian! So you're here to learn how to code, aren't you? Well, you've come to the right place. Here at The Beginner's Guide to HTML & CSS, I (that is, Bess) have endeavored to compile a master guide of all the coding I've learned over the years. It's an ambitious project, and it's... erm... not quite finished yet. (But hopefully you'll find what I do have up helpful!)

I start at the very beginning, for people who have absolutely no coding experience whatsoever. Read the General articles first (the Introduction, HTML Basics, and CSS Basics sections are especially important). The In-Depth articles aren't really in a particular order, so feel free to skip around depending on what you'd like to learn more about.

Even if you consider yourself a more seasoned coder, check out the Reference and Help sections, you might find them useful. As you'll see when you go to the help section, I would love to help you with your specific coding woes, and if you think I'm missing something from the guide (as in, coding help that applies to the general public, not just you) then I'll be sure to work on adding it in.

So, just use the nifty navigation bar over on the left there to make your way through the site, and happy coding! =)

Updates

Monday March 19th, 2012
Oh hey I still exist! The likelyhood of this page getting updated/added to anytime soon = slim to none, but hopefully what's up so far is helpful to someone, somewhere. Oh and also, listed at Masked.

Saturday September 24th, 2011
Added some information on nesting to the CSS Basics section that correlates to the stuff I added to the HTML Basics section... wow, was that really almost 2 weeks ago?

Monday September 5th, 2011
I added some information on nesting to the HTML Basics section. (Bess: Improving her unfinished guide a leeeetle teeeny bit at a time. XD)

Saturday September 3rd, 2011
Inconceivable! I make a new layout for this page and move over all the content in just two days? (Granted, I pretty much haven't been doing anything else for the past two days.) Anyway, now it'll be easier for me to add just a little bit at a time to this guide over the course of the school year. It starts this Wednesday, and I don't see much free time in my future with my courseload this year. =/

General Knowledge Articles

Hey there. In this section of the guide, you'll find articles with general coding information. You'll learn what coding is exactly, the basics of HTML and CSS, how to combine the two coding "languages" with ids and classes, how to do some basic layout positioning, and even some stuff about coding for different browsers and coding offsite.

I recommend that you read Introduction - Divs & Positioning in order, before you move on to the In-Depth articles. The Browser Compatibility and Off Neopets guides are helpful and general, to be sure, but they're more... afterthoughts, after you've gotten used to coding.

Code as a Language

So... what is coding, anyway? If you've never attempted to figure it out, you just know it as that incomprehensible block of text you copy and paste to add something pretty to your web page. I know, it's difficult to decipher, but trust me - by the end of this guide, you'll understand exactly what it is that you copy and paste.

I think I'll start off my explanation by saying that coding is the language of the web. It ties everything together; without it, there would be nothing. Scary, right?

Let me explain in more detail: When you type something into the editing box and save it, you're inputting information. When you use a browser (like Firefox or Internet Explorer) to view that information, before it's displayed to you, the browser has to read it (which is why things will change on a page as it's loading; the browser keeps reading new stuff). If you put in just text, the browser will show that plain text without changing it; it doesn't understand what you wrote, just that it should be displayed.

All right, so I guess the web can exist without coding, technically. But how boring would it be if everything was just plain text? That's why we have coding.

If you were to type in: Make this text purple, the browser would just parrot it back to you (it doesn't understand English, after all). If you type that out in the language of code, however, the browser will understand you, and make the text purple accordingly.

If code is browser language, then I suppose HTML and CSS are dialects of that language, along with some other stuff (like PHP and Java). We'll only be learning HTML and CSS in this guide, however (because those are the only two allowed through the Neopets filters).

HTML - The Foundation

The first dialect we're going to learn is HTML. The header above says that HTML is the foundation. The extended metaphor I'm using here is a house: its foundation is the very basic part of the entire thing. Without a foundation, a house will topple over, and all its fancy detailing will become obsolete. Without HTML, you have nowhere to start when you begin coding your web page.

The HTML codes themselves are basically like name tags - they tell the browser what a certain element is. In fact, HTML codes are generally referred to as tags.

Let's say you want to put on your web page, "Hi, my name is Bob." You would like the phrase "Hi, my name is Bob" to be the color red. The code below will tell the browser just that.

So, font is the tag; color="red is the attribute. Or, in English if you prefer, font tells the browser that the text contained inside is labeled as a font, and color="red tells the browser that the color should be red.

You can add as many different attributes to a single tag as you want. For example, if you wanted "Hi, my name is Bob" to be red, Times New Roman, and size 3, you would use the following code:

So, the basic idea is to enclose whatever you want to change between two tags - the opening one (font) and the closing one (/font). Then, you can add attributes to the opening tag (color="red", face="Times New Roman", size="3).

However, some HTML tags require no closing tag. The most common of this exception is the image tag.

Usually HTML surrounds something that's already on the page (like text), which is why it needs an opening and closing tag. But because the img tag is putting something on the page that wasn't already there, it doesn't need a closing tag.

By the same token, the br tag doesn't need a closing tag. Putting "br" in your coding is like pressing "enter" or "return" on your keyboard.

You can put HTML tags within other HTML tags if you want - that's called nesting. It's almost impossible not to nest if you're coding a complex page - I'm doing it right now. I used p and /p to make this a paragraph, and I used b and /b several times to make bolded text.

When you have tags within tags, you need to be careful of how you set it up. I like to think of the rainbow rule. It's a bit silly, but hey, it's how my preschool teacher taught us negative numbers. When making a number line, you have to make sure the numbers form a rainbow, not a weird cross-y...thing. Like this:

The same goes for nested HTML. You want to make sure your tags make pretty rainbows.

So, now (hopefully) you know the basic idea of HTML. If you'd like to reference a listing of commonly used HTML tags and attributes, just go to the HTML Tags part of the Reference section.

CSS - The Fancy

To begin the CSS section, I'd like to refer back to my extended metaphor. Like a house, a web page isn't very pretty if all you have is the foundation. Sure, you can change colors and fonts and sizes of text, and you can even add borders and other neat effects to images, but where does that get you? To make a layout, to give your web page structure, you need much more than HTML. You need the other (major) language of the Internet - CSS. You need to wow your visitors with the fancy.

Say you want a box (labeled "boxy" - more on that later) 100 pixels tall and 400 pixels wide, with a purple background. And you want that box to be exactly 100 pixels from the top of the screen and 25 pixels from the left of the screen.

Well, you certainly can't do that with just HTML. Those HTML codes don't exist! So, you use CSS.

See what I did there? I named the element I wanted to change, put in the opening brace ({), added all my commands, then put in the closing brace (}). The following is a simple template:

You can add as many ATTRIBUTE: PROPERTY;s as you want. You always have to make sure that a colon (:) follows the attribute, and that a semicolon (;) follows the property.

You may have noticed that CSS is formatted in a particular way, with those particular line breaks and spaces and tabs in front of every attribute. This is because, on Neopets, the filters automatically organize your CSS for you, so even if you typed that all out in one line with no spaces anywhere, after you hit "save changes" it'll revert to that. You should probably type out your CSS like that from the get-go, though, to make it easier on yourself.

So, where do you put all of this? With HTML, all you had to do was stick the code in anywhere. But if you just stick the CSS code in, it won't do anything - your web page will literally have:

on it, wherever you stuck the code. You need to tell the browser that it should read the text as CSS, not just text.

One way of doing that is adding inline styles to your HTML. Let's say our #boxy is a div. (I'm kind of skipping ahead here, so don't worry if you're confused - I'll explain in the IDs & Classes and Divs & Positioning sections.)

Within #boxy's HTML tag, we're going to add some CSS styles.

This might seem like the most straightforward way to add CSS to your page, but in reality, it should be used only where completely necessary. For instance, on Neopets petpages, because the filters are messed up, you have to include any positioning (like the position: absolute; used on #boxy) in inline styles.

A much easier way to add CSS to your page is to put it in between style tags. This enables you to quickly edit your CSS without having to scroll though miles of HTML coding to find it. Observe:

Notice that the HTML is outside the style tags (or, more accurately, below the closing style tag).

One of the common misconceptions among beginners is that you have to have opening and closing style tags for each element you want to change. If you did that, the coding would look like:

It would work, but look how messy that is! You really only need one set of style tags. This is a much better way to do it:

Also, if you find that multiple selectors have the same attributes and properties... combine them, using commas (,). It saves loads of character space. For example - say #boxy and #boxish both have a with of 400 pixels and a height of 100 pixels. Your coding looks like this:

After you combine it, it should look like this:

That's cutting down the character space used by almost half. Not only that, but now your coding is cleaner and more efficient, making it easier to go back and edit later.

Now, what happens if you don't put that comma in between your two selectors? It's one little character, but it changes the entire meaning behind that section of coding. Instead of selecting #boxy and #boxish, the browser finds #boxy, then looks within at #boxish. Sounds confusing, right? Well, let me explain what I mean.

Remember that nesting stuff I talked about in the HTML Basics section? You know, an element within an element? Well, you can limit which elements you affect by only selecting the nested versions in the CSS. For instance, say you want most bold text on a page to have one style, but you want bold text whenever it occurs in a paragraph to have a different style. You would do the following:

This method of selecting elements within elements is very useful when you're working with lots of nesting - for instance, editing elements within the modules of a userlookup. Remember, when selecting elements within elements in the CSS, browsers read from the outside in. P B selects bold text within paragraphs; B P selects whole paragraphs that have been enclosed in bold tags.

Also remember that browsers read code top to bottom. Lets say you have two lines of code that contradict one another, like in the example below.

Your browser will go with the last thing it reads, and #boxy will have a width of 200 pixels instead of 100 pixels. You can tell your browser to give higher priority to the first thing, however, by using !important.

Add !important with no spaces on either side between the property and ending semicolon to give it precedence over anything written below. Now #boxy has a width of 100 pixels.

So, now you know how CSS works, as well as HTML. But to design a nice-looking web page, you need to make them work together. You know how I said HTML was like a name tag? And throughout this section I've been labeling things #boxy and such? Labeling is very important, otherwise your browser doesn't know where to look in the HTML when it reads the CSS. That's where IDs and classes come into play.

Ids & Classes - The Glue

You now know about the two different components of coding: HTML and CSS, the foundation and the fancy. I'm going to stray a bit from my house metaphor to tell you that ids and classes are like glue: they stick HTML and CSS together. They are absolutely necessary... most of the time.

There are some elements of your page you can change without ever using an id or a class. For instance, even before you add any HTML, you can change the way body looks. Body is the background of your web page. All the content you add to your page will go on top of body. Think of it as a built-in canvas; even before you've started "painting," it's there.

By default, body is white. What if you want the background of your entire page to be blue, though? You can change that with CSS.

You can also be more specific. Lets say you wanted to target all of the text on your page. You could make it 12 pixels (tall), the font Verdana, and the color white.

You can also change added elements to your page without using ids or classes. For instance, say you added a header (h1) and a paragraph (p) to your page. You've already specified that your page's background should be blue, and what all the text should look like. But what if you just want the header - not the regular text - to have a dotted lower border, the color green? And what if you wanted to give the paragraph justified alignment and an indent of 15 pixels? You would use the following code:

Voila! Now, every h1 and p on your page will have specific styles. Nifty, eh?

So, then, if we're doing just fine so far without ids and classes, what's all this labeling and name-tagging about, anyway? Why do we need them? For simplicity's sake, we'll start with ids.

The name itself is pretty self-explanatory: an HTML id is equivalent to the real-world meaning of "ID," meaning identification. If you give an element an id, it's like assigning it a specific name. Nothing else on the page can be that id; it's unique.

Making certain HTML elements unique is very useful. Continuing with the sample code we've been using, let's say I added another paragraph to my page. I want this particular paragraph to have an indent of 20 pixels, however. If I want this new paragraph to have different characteristics than the existing paragraph, I have to differentiate between the two.

As shown, you add id="namehere to the HTML and #namehere to the CSS. You can add an id to basically any HTML element: paragraphs, headers, divs, tables, images, etc.

Classes are basically the same thing, only they can be used to describe multiple things. In the HTML, you'd put class="namehere and in the CSS you'd put .namehere. For example:

Now every paragraph has an indent of 15 pixels, except for the two .special_paragraphs, which both have an indent of 20 pixels.

You can also use classes and ids together to save character space. Let's move away from the whole paragraph thing (because it's getting a bit confusing) and say that you want all of the .boxes to have a width of 100 pixels, a height of 200 pixels, and a green background - but you want the last one to have a black border as well, 1 pixel wide. You would put:

That takes up less space than adding width: 100px;, height: 200px;, and background: green; to #bordered - and sometimes, every character counts.

Although CSS can be used without either, classes and ids are a crucial part of merging HTML and CSS - and, subsequently, designing your web page. Classes and ids are absolutely essential when you position elements to give your page that structure I was talking about earlier. Also essential to making a structured layout: knowledge of divs.

Divs & Positioning

Browser Compatibility

Let's start this section by talking about web browsers.

A browser is a computer program - like Notepad, or Photoshop. Like Notepad (a text editor) and Photoshop (an image editor), a browser has a special purpose. Its purpose is to interperet Internet pages.

Think of the Internet as a selection of files, like you would have on your computer, only the Internet's files are available to every computer (with an Internet connection). When you go to a web page, you're calling up a specific file somewhere on the web. The browser that you use enables you to see that file.

If you think of a simple Word document, for example, it's not very aesthetically pleasing - just text. On the Internet, to make the information look "good," HTML and CSS are used. They speak the browser's language, and they tell the browser to show the viewer (you) things in a certain way. So even though all you do is input lines of text when you create a web page, when you view it, the browser will display it according to the HTML and CSS commands.

There are many, many different browsers available to view the web. In theory, they should all interpret HTML and CSS the same way. In practice, however, there are tons of discrepancies - some trivial, others huge. If you're designing a web page, you want it to look nice to everyone, so you should try and get your layout to work in as many browsers as you can.

But multitude of browsers out there, how can you possibly edit your page and make it work in all of them? Quite simply, you can't. But the only ones you really have to worry about are Internet Explorer and Firefox.

Internet Explorer, as most coders would agree, is the most troublesome of browsers. Consistently, IE disregards HTML/CSS standards, displaying things differently than it should. But IE is also the most popular web browser used today - simply because it is the default browser for Windows, and most people use Windows. And of the billions of people who use the Internet, only a small percentage know that there are other options besides Internet Explorer.

Firefox is the browser that you should be using. It's available for both Windows and Mac, and it can be downloaded for FREE off of the official Mozilla website. It's a lot more secure than Internet Explorer, and it also displays coding correctly (every browser has it's little quirks, but, comparatively, Firefox is incredibly accurate). Firefox is the second most used browser on the Internet. If it works in Firefox, it probably works in most other widely used browsers (which is why its IE and FF you have to worry about).

Some other browsers of note are Chrome, Safari, and Opera. Safari is the default browser for Mac users, like IE is the default for Windows users. Chrome interprets coding exactly like Safari (I think; in my experience I've never seen any differences between the two). I personally think Opera is somewhere in between IE and FF - in some ways it acts like one, in other ways it acts like the other. That can get annoying at times, but of the five browsers I've mentioned, it's the least popular, so a lot of the time I kind of just... give up, and accept that I can't make things look right in Opera. XD

Now that we've learned a bit about browsers, lets explore some of the major IE/FF discrepancies.

I guess you'll be doing that sometime in the future, because unfortunately this section is unfinished... Sorry. =(

Off Neopets

In-Depth Articles

Hey there. In this section of the guide, you'll find articles that explore in more detail some elements of coding I (may have) touched on in the General Knowledge section. You can learn about tables, images, lists, and links (and boy, is that a packed section), plus there are some "userlookup specific" and "petpage specific" tips and tricks as well. You can read these in any order, really.

Two Types of Tables

As far as this guide is concerned, there are two types of tables: actual tables - as in HTML tables that are officially known as tables, the tags being "table" and "/table" - and what I like to call floating or "fake" tables, which use divs and CSS floating. (Want to read up on that? Go to the Divs & Positioning section.)

Let's look at actual tables first.

Actual Tables

An HTML table looks something like this:

Td 1

Td 2

Td 3

Td 4

The basic code for a table is as follows:

The whole code is enclosed in the table and /table tags; on each line inside you see tr and /tr ("tr" stands for "table row"), and inside each table row you see td and /td ("td" stands for "table data") enclosing the text that will show up.

Now, if you just stick that code onto a web page, it won't look very nice.

Box #1

Box #2

Box #3

Box #4

You can't even see where one td ends and the next begins! To fix this, you can add things like backgrounds (bgcolor), borders (border, bordercolor), etc., in your HTML. But as demonstrated in the first table I showed you, which I gave a border to... HTML table styles don't look super nice. You should control borders, coloring, and really most things in your CSS, by giving your tables, table rows, and/or table data boxes IDs and classes.

However, there are three HTML codes that you can't include in your CSS: colspan, rowspan, and cellspacing. Let's look at colspan first:

In this example, I want Box #1 to be the width of Box #3 and Box #4 combined. I've added borders to the following table to show you the boxes:

Box #1

Box #2

Box #3

Box #4

Box #5

Rowspan works very similarly:

Box #1

Box #2

Box #3

Box #4

Box #5

Notice how there are spaces in between the boxes. That's just the table trying to be helpful (things are easier to read when spaced out, right?). Unfortunately, those little spaces can be very annoying when you add CSS styles. You can't get rid of them in your CSS, so you have to use cellspacing.

Box #1

Box #2

Box #3

Box #4

Some other things you should know before moving on to styling your table with CSS: Text inside a table does not follow the text styles already specified on your page. For example, even if you have body {color: white;} in your CSS, turning all of body's text white, any text inside a table will be the default black.

Text inside a table will also be aligned a certain way; it's horizontal alignment will be left, and it's vertical alignment will be middle.

Floating/"Fake" Tables

I guess you'll be learning about those sometime in the future...

In summary

It's important to know how to deal with actual tables, as they still feature prominently in the official Neopets layout. Just look at the source code for your userlookup - all the modules are made up of tables within tables. And even if you're not structuring your layout with tables (you shouldn't, it's deprecated and just annoying), they're helpful for... tabular things. XD

In my personal experience, I almost never use tables in layouts. The one exception is probably this here guide - I used HTML tables for the HTML Tags and CSS Codes sections. But in cases where you don't need defined rows and columns (check out how I display my layout screenshots and codes on my premades page), definitely use the floating method instead.

Images

Seeing as this is a coding guide, I'm not going to go into image-making. Let's just assume that you know how to make graphics in an image editor (such as GIMP or Paint or Photoshop; check under Other Resources for guides). This section is all about how to get that image file saved on your computer onto the internet and into your coding.

Once you've created your image, your first step is to upload it to the Internet. To do this, you have to find an image host - I recommend tinypic(dot)com, imageshack(dot)us, or photobucket(dot)com. Make sure you grab the direct link (for layouts) from the selection of URLs they give you.

Now, for the code; the HTML for the following image will be shown underneath it.

So the image code model would be:

Img is the tag, and src is a NECESSARY attribute. Without "src='url'", there would be no image. That line of code tells the browser to go look up the image from a certain online directory (in this case, tinypic's).

As you may have experienced, however, sometimes the browser takes a long time to look up the image. In the image's place, sometimes you're left with the broken image icon (different for every browser) or just a blank space. If your page is image-heavy, or a specific image is large and may take some time to load, you can add alternate text - text that will show up in place of the image. Alternate text will also show up if your image is broken, or the browser simply can't find it anywhere on the Internet (check for URL mistypings).

Anyways, here's my broken image with its alternate text, and the code is underneath it.

If you're using IE (Internet Explorer), when you hover over an image, you see the alternate text in a little bubble - go ahead, try it. That isn't supposed to happen; in most other browsers, to achieve that effect, you need to use title. Observe:

You see the alternate text right away, but you see the hover text, or title, when you hover over the broken image (works for non-broken images, too). Notice, IE users, how the title takes precedence over the alternate text (a fancy way of saying that the title shows up instead of the alternate text, if there is one).

But that's not all you can do with images in HTML.

You can also set the height and width for images. This is useful if you have an image-heavy page; the page grows in length as each image loads. If you set the height and width, the page's size won't change (to the delight of viewers with slow Internet connections).

If you just put a number, like 50, the browser reads it as "50 pixels". You can add a % sign, changing it to 50% of the container's width/height.

Hyperlinked images automatically have an ugly blue border (or a different color, depending on your page's link styles). To prevent any of your hyperlinked images from having a border, use this code in your page's CSS

However... Let's say you have a link back button, like I do for this page. It's a hyperlinked image - the idea is that somebody will copy the linked image code and put it on their page. But what if they don't have that code in their CSS? Your link will have an ugly border on their page (which is just the kind of thing that bothers neurotic people like me). You can remedy that by changing the border width in the HTML of your image. Watch:

to

There are some other things you can do in the HTML of images, but they're what we call deprecated, meaning they've been rendered obsolete by the introduction of CSS (you're supposed to use CSS instead now).

You can give images classes and ids, so that you can control them in your CSS. From your CSS, you can position them absolutely, give them fancy borders, give them hover effects, etc., etc. I won't go into detail now - there are so many CSS codes - but you get the idea.

You can also set images as backgrounds in your CSS by using the code background-image.

Learn more about what you can do with backgrounds in the CSS codes section.

Aaaand... that's about it, really. Now you know all you'll ever need to know (probably) about how to involve images in your coding.

Lists

So many links, so little space...

I have a lot of information to offer you on links, so I've divided this section into several smaller sections: link basics, external vs. internal, block links, and image rollover navigation. List navigation also kind of falls under this category (the lovely popup menus I have over on the left there), but I figured I'd put that in the Lists section just to even things out.

So, let's begin!

Link Basics

Most, if not all, pages on the web have links in some form. On all of the editable Neopets pages except for petpages, you have to keep the topbar links, and on petpages it's technically required to keep the referral bar at the top and the copyright information and links at the bottom somewhere on your page. It's not required to have linkage on pages outside of Neopets, but sites do because - let's face it - the average Internetgoer is simply too lazy to type in a new URL or hit the back button to get to a different page.

Links are essential to... well... link sites together. Having pretty, stylized links can help make your page look polished and sophisticated, two of my favorite words when it comes to web design.

The basic HTML tag for links is simple enough.

Notice the opening a, href="URL", the hyperlinked text, and the closing /a. The hyperlinked text is a fancy way of referring to the words (or image) that the viewer clicks on.

Now you paste that code onto whatever page you want to add the link to. If the link style hasn't yet been specified, this is what you'll get:

So, as you can see: a:link is how the link will look just as it is on the page; a:visited is how the link will look if your browser recognizes it (meaning you've visited the page recently); a:active is how the link will look if you're in the process of clicking it or if the browser is in the process of moving to the new page; and a:hover is how the link will look when your mouse hovers over it.

As you can probably see, these are garish colors. Generally you'd change the colors to match your layout theme. Usually, people make a:link, a:visited, and a:active all the same color (or style) - or very close colors (or styles). Hover effects are at their most effective when there's a big difference between a:link (etc.) and a:hover.

So, the coding for those better-looking links would look like this (using the spiffy combining demonstrated in the CSS basics section)... right?

Yes, this coding would have the desired effect: a:link, a:visited, and a:active would all have one color and a:hover would have a different one. But there's a much quicker and cleaner way to do this, and this other method saves character space.

You know how I keep saying pseudoclasses? Well, a pseudoclass is like... an extra, an add-on. Like... a sub-selector. The official selector for links is simply a. All the pseudoclasses define more specific things inside the selector (in this case, a). That's why they all start with colons (:).

You'll notice that the majority of pseudoclasses all have the same styles, so we'll replace the line a:link, a:visited, a:active with just a.

This makes all of the links a uniform blue, regardless of if they're just sitting there, they've been clicked on, you've visited the pages recently, or you have your mouse hovering over them.

Since we've specified a:hover, all of the links will be blue all the time, except when you hover over them.

Now that we've learned how to code links, let's focus on where they're linked to.

External vs. Internal

There are two kinds of links: external and internal. An external link is what you see most often. It links you to a totally different page, like this link.

Anyway, let's brush up on the anatomy of a URL, shall we?

The http is what's known as the protocol, and www.neopets.com is the domain name. You need that whole thing if the domain name of the site you're putting the link on is different from the domain name of the site you're linking to. (You don't have to worry about that, though, because on Neopets, you can only link to Neopets pages.)

In general on the web, if the two pages are part of the same site (so have the same domain names), you can take out http://www.neopets.com, leaving the rest. For instance, this page has the Neopets domain. If I wanted to link to my premades page, another page on the Neopets domain:

You can also link internally, directing your viewer to different parts of your page - without any scrolling on their part - with just the click of a button.

There are two different ways to link internally. My preferred method involves ids. Let's say you already have a header on your petpage, with the creative id of #header. It's towards the bottom of your page, and you'd have to scroll down a looong way to get to it. So, you decide to put an internal link at the top of your page. It looks like:

You can shorten that even further, however; because the URL of the page you put the link on is exactly the same as where you're linking to (it's part of the same page), not only can you erase the "www.neopets.com," you can erase the part that has your pet's name as well, leaving you with:

So, just to recap, the finished product looks like:

Now, when the viewer clicks the link at the top, it'll take them all the way down the page to the header.

Pretty neat, huh?

Unfortunately, I've found that this method doesn't always work. Why? I really have no idea. I find it a lot easier, but the more traditional method - that is, the method that I believe most sites with internal navigation use - involves naming things.

Basically, instead of id'ing the header, you insert the following code right before it:

Make sure you don't put any text in between the opening and closing "a" tags! Now the finished product looks like:

This next part is going to be a bit hard to explain, but I'll try, anyway. Think of the a name code as a little invisible dot on your page. If you inserted the code just as I showed you, the dot will become part of the natural flow of the page. If your header has no top margin, than the dot will be right above it, so when you click on the link it'll take you right to the header.

If your header has a top margin of 100 pixels or something, though, than that little dot will be pushed 100 pixels above the header. Then when you click the link, you'll find yourself with 100 pixels of space above the header that you were trying to get to.

Anyway, my point is that if you want that little dot to be in a specific place, you may need to put it inside a div and position it accordingly.

So, now you have your pretty internal links! You're all set to put your site's navigation in a neat little sidebar, like I have here. But what's this? Your internal links link somewhere special, but look the same as ordinary links? If you want a fancy sidebar, you're going to have to check out the block navigation section below.

Block Links

Customizing your links gives your page a polished, sophisticated feel (as I mentioned in the above section). However... most good-looking sites have a navigation bar, or navigation that stands out. Basic link styles are great for casual links that you slip into your text, but having some form of stand-out navigation adds a note of professionalism to your web page that regular links alone just can't.

To make these block links, you need to first set up the HTML before we can add pretty styles. The obvious way to do so (so that the links are on top of one another) would be this:

But that's actually not how we're going to do it. Instead, we'll try the following.

It doesn't look too special now - in fact, the links are even all on the same line. It literally looks like this once you plug that code onto your page:

First and foremost, we have to add the line display: block;. By default, links are inline elements, so we need to tell our browser otherwise and make it a block element; they are called block links, after all. (The difference between block and inline is explained back in Divs & Positioning.)

But where do we add this, you ask? Well, to select the links inside the div (id'ed blocklinks), we use #blocklinks a in the CSS. Observe:

Now, you have to add all of the other styles you want your block links to have. You can set a width if you want, like I did in the example below, but if you don't set a width, the links will automatically be the same width as the container or parent element - just like ordinary block elements, such as divs.

Although I find that the easiest way to do it, there is another one that I know of. The HTML is different - it uses classes.

There isn't a containing div this time, so we have to select the links differently in the CSS. Instead of using #blocklinks a, we'll use a.nav:link, a.nav:visited, a.nav:active (that whole phrase). We SHOULD only have to put a.nav, but for some reason it doesn't always work... You can try it, maybe the filters have changed since I originally wrote this section of the guide. XD

I highly recommend the first method; it takes up a lot less character space, and it's a lot neater (especially if your urls are long; by taking "class='nav'" out, there's less of a chance your link code will spill over onto a second line). I very rarely use the second method, but it does come in handy occasionally.

In case you hadn't noticed, the colors I used for the above example are garish again - I'm sure you can come up with better. XD For an explanation of colors and hex codes, go to the correspondingly titled section, and for a full list of styles you can use, check the CSS codes section.

Next (and last!) up we have image rollover navigation, which is kind of an extension of block link coding.

Image Rollover Navigation

In Summary

So there you go, a whole lotta information on a whole lotta different kinds of links. Again, the list navigation section is placed under Lists for balancing purposes; this section is already full enough. XD So... go off and make links!

Petpage Specific Tutorials

Reference Pages

Whether or not you've found the General Articles and/or In-Depth Articles helpful, there's still some great stuff in these reference pages. Learn some things about colors and hex codes, and maybe find a site with color schemes for you to use. Brush up on all the HTML tags you can use and CSS attributes you can play with.

Colors & Hex Codes

Colors make your pages fantabulous. It isn't enough to just be able to code - to make it really look pretty, you have to utilize all the wonderful colors the visible light spectrum has to offer.

Sometimes, you can just write out the name of a color for it to show up. For instance, "red" makes red, "blue" makes blue, etc. There are tons and tons of color words, but all but the most basic are kind of hard to memorize.

Every color also has a hex code. A hex code is six characters long, and is preceded in the coding by a #. Those six characters can be traditional number digits (0-9), certain letters (A-F), or - most often - a combination of the two.

Why the letters? Well, hex codes operate on a base 16 system. You should all be familiar with the the base 10 system we use for numbers; the digits go up from 0 to 9 until we hit 10, meaning we move over to the left and start numbering again. Hex codes do the same thing, only the letters A-F count as extra numbers. It's a bit confusing to count using the base 16 system, but there's really no need to do that.

The first two digits in a hex code define how many parts red the color is (FF being the most, equaling 255; 00 being the least, equaling, well, 0). The second two digits define how many parts green the color is, and the third two digits define how many parts blue the color is.

Because computer coloring works like colors from light (as opposed to colors from paint), #FFFFFF ends up being white, a combination of the most of every color. #000000 is black, an absence of any color at all. #FF0000 is the brightest red, #00FF00 is the brightest green, and #0000FF is the brightest blue.

Confused? Well, don't worry about it. Though it's theoretically possible, very few people (if any) make all their hex codes from scratch. You can look at a hex color chart, like the ones that can be found on the pages below, to find your colors.

You could also use a color picker, a really cool interactive thing that allows you to find the exact shade of a color you want. You can search for one of those online if your image editor doesn't have one (like Photoshop does).

In most of my demonstrations, I refer to the color choices I make as garish. That's because I tend to choose widely contrasting colors so you can easily see what code corresponds to what. Here's a tip: don't do that when actually coding something. It looks... bad. Choose colors that actually work well together.

If you're using an image for a layout (or even if you're not, but you're modeling your CSS off an image), and you have a nifty color picker in your image editing program, find colors from your image and turn them into a color scheme. If you don't have one of those, look at the pages listed above - some of them are up there because they offer premade color schemes instead of (or in addition to) color charts.

HTML Tags Master list

Here you go, a master list of all the HTML tags that can be used on Neopets. Several important attributes are included as well, but only those that make sense (for instance, if it can be added more efficiently with CSS, it's not included). Remember, an HTML code looks like this:

font and img are tags; face, color, and border are attributes; Verdana, red, and 0 are values.

To learn more about HTML coding in general, go to the HTML Basics section.

In Summary

There you go. Some things that were formally on that list no longer work on Neopets pages: u, for underlining; del, for making strikethrough text; marquee, for making a scrolling marquee; and bgsound, for adding background music (but that only ever worked in IE anyway, so no real loss XD).

Why do the new filters hate these codes? I have no idea. The only one that really bothers me is the loss of u; like i and b, I used it to make special styles, in order to make certain key words or phrases stand out in a sea of text (as did other coders). A way to get around the loss of u is to make a class, .u, instead, and then instead of enclosing text in u, enclose it in span class="u.

CSS Codes Master List

Help!

This is the part of the guide you go to if you've read through all the articles and you're still having problems. The issue isn't that you don't grasp the basic concepts; you have a specific problem that needs fixing, and you're just stumped. It happens to the best of us.

There are three steps I'd like you to take when you're experiencing coding difficulties. First, look under the F.A.Q., where I list some of the general coding inquiries that come my way. If your question isn't answered, it might be a bit more complex than the simple issues I address in the F.A.Q., in which case check out the Do-It-Yourself Troubleshooting section, where I explain a few methods and tricks to discovering a bothersome coding error by yourself.

If nothing ends up working, then please, by all means contact me - I'll be happy to help. Sometimes it just takes a second pair of eyes to spot something.

Also in this part of the guide I have a section entitled other resources. There, I'll list all the coding/web design sites I can find. Some of them may offer things my guide doesn't, or simply a different perspective.

Other resources

Link Back

Buttons are linked back to their creators. If you were to make me a pretty button I'd love you forever and ever, as you can see I'm in need of a lot more nice, high-quality options.

Affiliates

Requirements: You must have a high-quality site that either helps people (a guide of some sort) or is in some way related to coding or design (this includes premade layouts). Coding guides get highest priority listing because they fit both requirements (which makes sense; this site is a coding guide, after all).

To apply, just go to my userlookup and click the envelope to send me a message. Make sure to include the URL of your site, and let me know that you're affiliating with my coding guide, NOT my premades site.

Listers

Credits

All content, unless stated otherwise, was created by Bess (seegensays). Obviously pick up some coding tips and tidbits from this guide, but you absolutely cannot redistribute the content as your own "coding help" or use parts of the site layout for yourself.

As far as crediting this guide: if you feel it helped you out significantly, please link back so this page can help other people, too. =)

Textures used on the main banner (and all the little section header and footer images) are from Nienke's Resources, a wonderful repository of graphic resources.

In any section where I lists other sites (i.e. the Colors & Hex Codes section where I list color charts), I came by that list of sites by combing through Soroptimist Directory - another wonderful resource.

As for how I came by my coding knowledge, I am forever indebted to Elizabeth Castro's HTML, XHTML & CSS (Sixth Edition). None of this guide is copied from it, obviously, but reading it through (several times) when I first got it back in 2007 helped me tremendously. I still look back to it for reference on occasion.

Go out into the world, my pupils!

So I know that that header up there's kind of condescending; whatever. Really, though, now that you've learned a lot (hopefully...) from this guide, forge your way into Neopia's layout-making and/or site-making community. Code, design, create - enjoy it. I suppose coding is a practical skill, if you want to set up a guide on say, Kougras, and you just need to make a decent, functional page to put your content in.

But - at the risk of sounding unbearably corny - coding is so much more than that. For me, it's one of the few things that relaxes me. It's a creative outlet, brain teaser, and confidence booster all in one; nothing (at least on Neopets) compares to the satisfaction I get from working through a difficult coding problem, or from stretching myself and making a layout nicer than the last.

People ask me how I make layouts (not that often, but it does happen sometimes). My answer is always - and now I'm really pouring on the cheese - practice makes perfect. I know it's a tired old saying, but it's survived the years for a reason: it's so, so true. As with anything in life, you get better through practice. I've been coding for four years. Every so often I dig up an old layout and say, "Wow, I've improved quite a bit." And I know I'll keep doing that for as long as I make layouts.

...So anyway, deep messages aside, here are some links to take you elsewhere. Some of them are shameless self-advertising. I apologize. (But seriously, go visit my pages.)

You've clicked on a link that will take you outside of Neopets.com. We do not control your destination's website, so its rules, regulations, and Meepit defense systems will be different! Are you sure you'd like to continue?

It is a journeyI must face...alone.*dramatic music*

I want to stay on Neopets,where the dangers ofMeepit invasion are taken seriously.

You've clicked on a link that will take you outside of Neopets.com. We do not control your destination's website, so its rules, regulations, and Meepit defense systems will be different! Are you sure you'd like to continue?

It is a journeyI must face...alone.*dramatic music*

I want to stay on Neopets,where the dangers ofMeepit invasion are taken seriously.

You've clicked on a link that will take you outside of Neopets.com. We do not control your destination's website, so its rules, regulations, and Meepit defense systems will be different! Are you sure you'd like to continue?

It is a journeyI must face...alone.*dramatic music*

I want to stay on Neopets,where the dangers ofMeepit invasion are taken seriously.