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.

Anyway, here they are:

Introduction - HTML Basics - CSS Basics - IDs & Classes - Divs & Positioning
Browser Compatibility - Off Neopets

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

Move on to HTML Basics?
Back to General Knowledge article listing

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.

Go back to the Introduction? - Move on to CSS Basics?
Back to General Knowledge article listing

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:

#boxy { height: 100px; width: 400px; background-color: purple; position: absolute; top: 100px; left: 25px; }

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.

Go back to HTML Basics? - Move on to IDs & Classes?
Back to General Knowledge article listing

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.

Go back to CSS Basics? - Move on to Divs & Positioning?
Back to General Knowledge article listing

Divs & Positioning

What's this? This section doesn't exist yet? Oh no! D= Sorry, Bess will write it eventually...

Go back to IDs & Classes? - Move on to Browser Compatibility?
Back to General Knowledge article listing

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

Go back to Divs & Positioning? - Move on to Off Neopets?
Back to General Knowledge article listing

Off Neopets

What's this? This section doesn't exist yet? Oh no! D= Sorry, Bess will write it eventually...

Go back to Browser Compatibility?
Back to General Knowledge article listing

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.

Anyway, here they are:

Tables - Images - Lists - Links - Userlookup Specific - Petpage Specific

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.

Move on to Images?
Back to In-Depth article listing

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.

This text is showing up because the image is broken.

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:

This text is showing up because the image is broken.

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.

Go back to Tables? - Move on to Lists?
Back to In-Depth article listing

Lists

What's this? This section doesn't exist yet? Oh no! D= Sorry, Bess will write it eventually...

Go back to Images? - Move on to Links?
Back to In-Depth article listing

Userlookup Specific Tutorials

What's this? This section doesn't exist yet? Oh no! D= Sorry, Bess will write it eventually...

Go back to Links? - Move on to Petpage Specific?
Back to In-Depth article listing

Petpage Specific Tutorials

What's this? This section doesn't exist yet? Oh no! D= Sorry, Bess will write it eventually...

Go back to Userlookup Specific?
Back to In-Depth article listing

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 - HTML Tags - CSS Codes

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.

Neocolors - Fishslipper's Color Codes - Bubbles Colour Charts - Chromatic - That Kills Me

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.

Move on to HTML Tags?
Back to Reference pages listing

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.

General Attributes

You can add these to pretty much every HTML tag. Versatile, eh?

Attribute Description
class Gives the element a class name.
id Gives the element an id name.
style Adds inline styles.
title Adds a tooltip (hover text).

Tags & their specific attributes

Tag Description Display Attributes Example
a Adds a link to the page. Go here for more information. Inline ferh spelled in reverse, allows you to link to a URL or page anchor
name allows you to mark a page anchor
Click me!
b Makes your text bold. Inline Bold text.
br Adds a line break (like hitting "enter" or "return" on a keyboard). No closing tag. block clear stops text wrapping (values: left, right, both) Line one
Line two
div Divides your content into sections. Go here for more information. block align changes text alignment (values: left, right, center, justify)
font Selects text to change font elements. inline color changes text color
face changes text font
size changes text size (values: 1-7)
With color attribute
h1 Adds a header. You can go up to h6 (h2, h3, etc.). They decrease in size from h1 to h6, and by default they have top and bottom margins. block The dark pink text headers in this guide
hr Creates a divider ("horizontal rule"). No closing tag. Edit with CSS for less headaches. block
i Makes text italic. inline italic text
img Adds an image. Go here for more information. inline ferh spelled in reverse, specifies a URL
alt specifies alternate text
border specifies b. width
width, height
li Adds a list item (bullet point, number, etc.). Used with the ol and ul tags. See here for info. block
ol Adds an ordered (numbered) list. Go here for more information. block type specifies the type of number (1, A, a, I, i)
start specifies what number it should start on
p Creates a new paragraph. You don't have to have a closing tag. Top and bottom margins by default. block align specifies alignment (left, right, center, justify) The paragraphs all over this guide
span Inline version of a div; gets a mention here. inline
style Enables you to add CSS styles to your page. Go here for more information.
sub Adds a subscript inline Textsubscript
sup Adds a superscript inline Textsuperscript
table Inserts a table. Go here for more information. block cellspacing specifies how much space there is between cells This reference table
td Inserts a table cell. Used with table. Go here for more information. This box in the reference table.
textarea Inserts a box for putting codes (usually for visitors to copy and paste). inline rows specifies how many rows tall it is
cols specifies how many columns wide it is
tr Inserts a table row. Used with table. Go here for more information. This row in the reference table.
ul Adds an unordered (bulleted) list. Go here for more information. block type specifies the type of bullet (disc, square, circle)

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.

Well, anyway, that's it for the HTML reference section.

Go back to Colors & Hex Codes? - Move on to CSS Codes?
Back to Reference pages listing

CSS Codes Master List

What's this? This section doesn't exist yet? Oh no! D= Sorry, Bess will write it eventually...

Go back to HTML Tags?
Back to Reference pages listing

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.

F.A.Q. - D.I.Y. Troubleshooting - Contact - Other Resources

Frequently Asked Coding Questions

As of yet, no one has asked any questions, and I can't think of any. XD

Move on to D.I.Y. Troubleshooting?
Back to the Help page

Do-it-yourself troubleshooting

What's this? This section doesn't exist yet? Oh no! D= Sorry, Bess will write it eventually...

Go back to the F.A.Q.? - Move on to Contact?
Back to the Help page

Contact Bess

What's this? This section doesn't exist yet? Oh no! D= Sorry, Bess will write it eventually...

Go back to D.I.Y. Troubleshooting? - Move on to Other Resources?
Back to the Help page

Other resources

What's this? This section doesn't exist yet? Oh no! D= Sorry, Bess will write it eventually...

Go back to Contact?
Back to the Help page

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

Please let me know if you've listed The Beginner's Guide to HTML/CSS in your link directory! Go to my userlookup and click the envelope.

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

Edit Your Userlookup - Edit Your Petpages
My Userlookup - My Premades - Nip/Design
Neopets Home



Heads Up! You're about to leave Neopia!

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 journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

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 journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

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 journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
/help/bumper/headers/log-in-to-facebook

NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2014.
® denotes Reg. US Pat. & TM Office. All rights reserved.

PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
Use of this site signifies your acceptance of the Terms and Conditions