HTML Guide

Main Page | HTML Guide | CSS Guide | Scrollbar Generator

 

NOTE: Many of the specific areas explained would be much easier to code using CSS rather than HTML. However, I feel it’s important to first learn how to code these aspects in HTML in order to better grasp the concepts. In any case, check out the nBn CSS guide after reading this guide to receive the best coding education possible.)

 

 

The Basics: What is HTML?

If you’re reading this guide, you’ve probably seen countless customized lookups, pet pages, shops, and galleries on Neopets. Perhaps you’ve spent hours staring at the fine creations of Neopians and wondered how they created such masterpieces. Most importantly, with the help of this guide and the others on nBn, you will be able to make your Neopian pages unique for the low, low price of $9.99! with a bit of hard work.

First of all, how exactly do you change the way your pet page, lookup, shop, guild, or gallery looks? (NOTE: From now on, we’ll be using the term ‘page’ to refer to whatever you’re editing — that should simplify things.)

The simple answer is that you use a sort of language called HTML, or Hyper Text Markup Language. But don’t worry — this won’t be nearly as hard as learning French, Spanish, or German! All this means is that you can manipulate the page to look just the way you want it to look by using certain codes.

Just what do these codes look like, you ask? It’s pretty simple. HTML codes always begin with < (a less-than sign, otherwise known as “that arrow-ish symbol” or “that funny symbol that looks like a triangle without one side” or whatever else you’d like to call it.) and end with > (a greater-than sign)

For example:

<font color="blue">THIS TEXT WILL BE BLUE.</font>

As you can see, every tag also has a sort of closing tag. The bold part in between the beginning and closing tag is the part that will be affected by your tag.
If you used the tag above, it would look like this: THIS TEXT WILL BE BLUE.

Closing tags are pretty important and you must always remember to close your tags otherwise you might end up with some odd errors on your page. There are two exceptions to this rule however, paragraph and line break tags don’t need to be closed. Everything else, make sure you close it!

 

 

Before We Go Any Further: Some Basic Codes



STOP! Important note:
 Whoa there! Before we go into any details about changing the way your page looks, we need to cover some basic codes that you’ll definitely need.

<br> Creates a line break — in other words, starts a new line
<p> Creates a new paragraph

 

 

Beautifying Your Text

Anyone will tell you that text is possibly the most important aspect of your page. Of course, the best way to really make your page pop is to use interesting text that enhances your content.

 

A Little Bit of Style

I’m sure you’ve seen text with some emphasis: bold font, for example, or maybe text in italics. Now you can do this on your very own!
<strike>TEXT</strike> creates strikethrough text
<b>TEXT</b> creates bold text
<i>TEXT</i> creates italicized text
<u>TEXT</u> creates underlined text

 

Changing Font Color

So, let’s get to it! As we saw above, one of the ways to personalize your text is by changing its color. To do this, you use this code: 

<font color="COLOR">INSERT TEXT HERE.</font>

(NOTE: Obviously, “COLOR” would be replaced with the color of your choice. When using a specific color, you can either use color names such as “orange“, “seagreen“, or “aqua“. Or, you can use hexadecimal codes.

Basically, hexadecimal codes are codes for colors that include numbers and letters. When you use these rather than names of colors, you can be a little bit more specific. Here are some examples:

#28CFFF #FFEF66
#9DFE9A #D79AFE

(Note that there is ALWAYS a “#” at the beginning of your color code.)

“But, how do I find these codes?” you may wonder. Well, we have a table of colors to use. Also, if you own a program such as Photoshop, Paint Shop Pro, or Paint, you can use it to choose colors.

 

Changing Fonts

In order to change the way your text looks, you can change its font. To do this, you use this simple code:

<font face="FONT">Yay, this text will show up in the specified font!</font>

This text is in Arial font.
This text is in Verdana font.
This text is in Chiller font.
This font is in Georgia font.

As you can see, this opens up a ton of new possibilities.
HOWEVER: I highly recommend staying away from less common fonts. The font will only appear correctly if the user viewing the page owns that font, so many visitors will not get the same effect if you use an uncommon font. Also, it is very important that your page be readable. It’s best to not use hard-to-read cursive fonts and other unique fonts (such as Chiller, for example.) You can even use those fonts in graphics instead — that way, everyone can see your font AND be able to read your page easily!

 

Changing Font Size

Changing the size of your font is just as easy as changing the color.

<font size="SIZE">Yay, this font is a particular size!</font>

You can mess around with the size to find one that you like the most:
This is size 1 font.
This is size 2 font.
This is size 3 font.
This is size 4 font.
This is size 5 font.

 

 

Combining Coding



STOP! Important note:
 Whoa there! Before we go any further, let’s take a look at something.


You can simplify your coding a bit when you’re using a specific tag — for example, when you’re coding font, you can combine your coding like this: 

<font size="2" face="arial" color="#00B1EF">Yay, this font is a particular size, color, and font!</font>

The coding above would result in font like this! Isn’t that much easier?

 

 

Images

Since we know all about text, let’s learn how to add some images to your page!
NOTE: Of course, to use an image on your page, you’re going to have to know the URL, or address of the image — in other words, where the image is located on the Internet. You can right-click any image and select “Properties” or “Copy Image Location” to see its address. However, although it is perfectly fine to use graphics from Neopets, using images from other sites without permission is a no-no.

If you’re wanting to create your own graphics, you’ll need to upload them to the web. You can’t link to an image that is located on your computer as other people don’t have access to your computer. So you’ll need to find an image host. Photobucket.com is a free site that you can upload your images to.

 

Images: The Basics

<img src="ADDRESS OF THE IMAGE">

As you can see, the img tag does not require a closing tag.
Let’s say we want to put an image of a Pirate Krawk on our page. We would simply use this code:

<img src="http://images.neopets.com/pets/happy/krawk_pirate_baby.gif">

Ta-da!

 

Images: Getting a Bit More Complicated

We can also manipulate our images a bit by adding to the basic img code. Let’s take a look at this code, which is a bit more complex:

<img src="ADDRESS" width="WIDTH" height="HEIGHT" border="BORDER">
WIDTH: Specifies the width of the image - sizes are measured in pixels
HEIGHT: Specifies the height of the image - sizes are measured in pixels
BORDER: Specifies the border of the image

Let’s try this out on our Pirate Krawk image.

<img src="http://images.neopets.com/pets/happy/krawk_pirate_baby.gif" border="2"
 width="120" height="120">

 

Aligning Images (and other things!)

When coding a page, it’s more than likely that you’ll want to position something so that it’s centered in the middle of the page. Or, perhaps you’ll want to add an image positioned to the left or right. This is quite simple to do.

You can use this code: 

<div align="POSITION">Everything here will be positioned to the left/right/center.</div>
(NOTE: Replace POSITION with left, right, or center.)
This is called a div layer, which we’ll learn more about below. For now, all you really need to know is that it can help you align things.

Here’s an example of an image aligned to the center:

<div align="center"><img src="http://images.neopets.com/items/faellie_pirate.gif"></div>

 

 

Links



STOP! Important note:
 Remember that off-site links (in other words, links to sites other than Neopets) are NOT allowed on Neopets. If you link to another site, you are likely to be warned. So, if you really wanted to link to nBn on your pet page, shop, etc., you should link to the nBn guild.


 

Text Links

Now that we’ve learned all about text and images, let’s use that knowledge to create hyperlinks, or links to sites.

<a href="URL">YOUR TEXT</a>

Let’s say we wanted to create a text link to the main Neopets site. We could use this code: 
<a href="http://neopets.com">Click here to visit Neopets!</a>

and we would get this: Click here to visit Neopets!

 

Image Links

Now, let’s learn how to make an image link so that when we click on an image, it links us to a website. Let’s say we want to make this image link to the nBn site.

The code is pretty similar to the code used for text links:

<a href="ADDRESS"><img src="ADDRESS OF IMAGE"></a>

(NOTE: Attach border=”0″ if you don’t want a border to appear around your image.)

So, for our linked image, we would use this code: 

<a href="http://www.nothingbutneopets.com"><img src="http://www.nothingbutneopets.com/
banners/nBn_banner02.gif" border="0"></a>

And we would get:

 

 

All About Backgrounds

Adding a Background Color

Perhaps you’re getting tired of the plain white background of your page, and you’d like to spice it up a bit. In that case, you can use this simple code to change your background to a specific color:

<body bgcolor="COLOR">
(NOTE: Don’t forget your # if you’re using hexadecimal codes!)

 

Adding a Background Image

Pretty easy, eh? Now, what about a background that’s an actual image?

<body background="ADDRESS OF BACKGROUND IMAGE" bgcolor="COLOR">

The background color you specify will show while the actual background is loading. You can leave out the bgcolor=”COLOR” part if you’d just like the page to stay white while loading.

(NOTE: If you’d like to get a bit more complex with your backgrounds — for example, if you’d like a fixed background or a background image that appears in the bottom-right corner of the screen, then check out nBn’s CSS tutorial!)

 

 

Tables

Tables are a bit tricky to work with — they take a bit of practice to get used to, and even experienced users may have trouble with them once in a while. I’d recommend that you just mess around with tables for a while to get the hang of them.

Let’s break down the basic coding of tables into parts.

  • The code for a table always begins with <table> and ends with </table>, with all the coding for the rows and columns in between.
  • <tr>: This stands for table row. This defines the shape of the table and will create a new row.
  • <td>: This stands for table data. It defines a specific cell of the table.
  • The basic coding of a table will be something like this, except a bit more complicated: <table><tr><td></td></tr></table>

Let’s take a look at a few examples.

Yay, a table! As you can see, it only has one cell.

This is pretty much the simplest table ever. You can use a simple table as part of the layout of your page. Table layouts are used often in pet pages, for example, and table layouts are a good start for a beginner. 

<table border="2">
<tr><td>
Yay, a table! As you can see, it only has one cell. 
</td></tr>
</table>

Let’s take a look at one that’s a bit more complicated:

Cell 1 Cell 2
Cell 3 Cell 4 

<table border="1">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr><tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>

 

Tables: In-Depth

Basically, you can alter different properties of your table and individual cells. These are some different properties you can change:

  • Width: You can specify the width of your table by adding width=”NUMBER” to your table code.
  • Height: You can specify the height of your table by adding height=”NUMBER” to your table code.
  • Bgcolor: You can change the background color of your table or specific cells by adding bgcolor=”COLOR” to your table code or your <td> code.
  • Border: You can add a border to your table, as shown above in the examples, by adding border=”NUMBER” to your table code. Try out different sizes to see what you like! If you don’t want a border, simply add border=”0″.
  • Bordercolor: You can also specify what color you’d like to be your border to be by simply adding bordercolor=”COLOR” to your table code.
  • Align: You can specify how the text is aligned in a table or a specific cell by adding align=”right”, align=”left”, or align=”center”.
  • Colspan: This tag allows you to make a cell that stretches over multiple columns - colspan="NUMBER", like so:
    Cell 1
    Cell 2 Cell 3
  • Rowspan: This tag, much like the colspan tag, allows you to make a cell that spans over multiple rows - rowspan="NUMBER", like so:
    Cell 1 Cell 2
    Cell 3
    Cell 4
  • Cellspacing: This affects the spacing of your cells. You simply use cellspacing=”NUMBER” to your table code.
  • Cellpadding: This adds padding inside your table cells. Basically, it changes the margins of the page. You can use cellpadding=”NUMBER” to specify the cellpadding.

Don’t get overwhelmed, though! You can master tables with some practice. Let’s look at a few more examples using these properties.

Cell 1 Cell 2
Cell 3
Cell 4

<table border="1" bgcolor="#00A4FF" bordercolor="#00A4FF" width="250" height="150"><tr>
<td rowspan="3" bgcolor="#7FF6FF">Cell 1</td>
<td bgcolor="#00ECFF">Cell 2</td>
</tr>
<tr><td bgcolor="#00ECFF">Cell 3</td>
</tr>
<tr><td bgcolor="#00ECFF">Cell 4</tr>
</table>

Cell 1
Cell 2 Cell 3 

<table border="1" width="300" height="200" bgcolor="#FF630F" bordercolor="#FF630F">
<td colspan="2" bgcolor="#FFA70F" align="center">Cell 1</td>
<tr><td bgcolor="#FFD07F">Cell 2</td>
<td bgcolor="#FFD07F">Cell 3</td>
</tr></table>

The most important thing to remember when using tables is: PRACTICE, PRACTICE, PRACTICE! You may get frustrated at first, but you’ll figure it out!

 

 

Div layers

A div layer is a bit like a table in that it is a rectangular or square block. However, divs are often much easier to work with, as you can position them wherever you want. Much like tables, they can form the basis of your entire layout.

The basic code for a div is <div id=”NAME”>Content goes here!</div>. However, there are many other parts of the div that you can edit.

 

The Basics

Let’s say you just want a very simple div. We might use one like this:

Yay, I’m a div!

The coding for this div would be:
<div id="main" style="overflow:auto; width:300; height: 150; background-color: #AAFF8F;
 border: 1px solid #6CCF4D;">Yay, I'm a div!
</div>

As you can see, we’ve specified the ID, width, height, background color, and border. Now, let’s go into the specifics of these properties.

 

Div Properties: Breaking it Down

  • Notice that after your ID, the rest of the code basically consists of style=”" with all of your div properties defining its style in between “ and “. Also, after each part of the code, you add a ;
  • ID: This basically names the div. Identifying each div with a separate name will allow you to further customize each one — we’ll get into this in the CSS guide. For now, all you need to know is that it’s important and helps to add organization. You can name your div whatever you want. If you were using a div for most of the content of your page, you might name it “content”, “main”, or even “div”. If you were creating a div of your pet’s stats, you might name it “stats”. The possibilities are endless!
  • Width: This is pretty self-explanatory — changing this specifies the width of your div.
  • Height: This is pretty simple, too — changing this specifies the height of your div.
  • Background-color: This changes the background color of the div. This works the same way as the bgcolor tag in tables.
  • Border: The border tag works a bit differently than it does when used in tables. See how our example uses “border: 1px solid #6CCF4D;”? That’s basically the format used: (NUMBER)px (STYLE) (COLOR). There are a few different border styles you can use in divs… You’ll probably just want to experiment to see which you like best. Try out dashed, dotted, double, groove, inset, outset, and ridge. However, keep in mind that some of these styles may only work in certain browsers.
  • Align: With this tag, you can position your div so that is aligned to the left, right, or center. You can include it in the beginning part of the tag. For example: <div id=”NAME” align=”center” style=”(the rest goes here)”>
  • Padding: This works the same way as in tables — you can use this tag to add ‘padding’ around the div. The code is simply padding: (NUMBER)px. For example, padding: 2px.

 

Positioning Divs

Sometimes, you may get frustrated by HTML and wish that you could just place the elements or parts of your page exactly where you want them. Well, this actually is possible! You can use absolute positioning to position your divs exactly where you want on the page. The basic code for positioning a div looks something like this:

<div id="NAME" style="position:absolute;top: ___px; left:__px;">
Your content goes here!</div>

In the blank spaces, you would enter a number of pixels. Basically, the first blank after top: specifies the number of pixels your div will be from the very top of the page. For example, if your code says top:300px;, your div will be 300 pixels from the top of the screen.

This works the same way for the other blank part, except it specifies the amount of pixels your div will be from the left. For example, if your code says left:400px;, your div will be 400 pixels to the right.

You can include anything you want in this div — a block of text, an image, multiple images, a table, etc. Because of this, you can basically position everything exactly as you’d like if each element is in its own div. (This is why it’s important to name your divs!) Just keep in mind that visitors to your page will be using different screen resolutions, so aligning things too far to the right or the bottom of the page may stretch the page or make certain sections invisible for some visitors.

 

 

Textareas

You’ve probably seen some pretty nifty things called textareas before, especially if you’ve browsed pet pages. They’re generally not used to hold content like divs, but instead are used to show a short snippet of HTML that visitors can copy and paste. The basic code is simply: 

<textarea>Your text or coding goes here.</textarea>
A basic textarea looks like this:

Pretty boring, huh? Luckily, you can make your textareas prettier by changing their background color, text color, etc. Let’s take an example of a more complex textarea and break it down.


<textarea rows="5" cols="30" style="background-color:#AFF9FF; font-family:verdana;
font-size:10px; color:#08858F; border-style:2 px solid;border-color:#00B1BF;">
Your text or coding goes here.</textarea>

Rows: Specifies the number of rows in the textarea — basically, the height of the textarea
Cols: Specifies the number of columns in the textarea — basically, the width of the textarea
Background-color: The background color of the textarea
Font-family: The font used within the textarea
Font-size: The font size used in the textarea
Color: Specifies the color of the font used in the textarea
Border-style: The style of the border — for example: solid, dotted, or dashed.
Border-color: The color of the textarea’s border

 

 

Lists

Have you ever seen a nifty list on a site that looked something like this?

  1. Blah
  2. Blah
  3. Blah
Or maybe you’ve seen one like this:

  • Blah
  • Blah
  • Blah

These are actually quite simple to make — with no numbering required! There are two types of lists: unordered lists and ordered lists.

 

Ordered Lists

Ordered lists are exactly what you’d expect: lists in which there is some sort of pattern. A numbered list would be one example of an ordered list. Ordered lists begin with <ol> and end with </ol>. (This is easy to remember, as ol stands for ordered list!) Then, before each item in the list, you add <li>. Let’s see this in action.

Here’s the coding for a normal, numbered list:

<ol>
<li> Blah #1
<li> Blah #2
<li> Blah #3
</ol>
This would appear as:
  1. Blah #1
  2. Blah #2
  3. Blah #3

Easy, huh? Now, what about a list with Roman numerals? Simply use this code instead:

<ol type="I">
<li>Blah #1
<li>Blah #2
<li>Blah #3
</ol>
This would appear as:
  1. Blah #1
  2. Blah #2
  3. Blah #3

Now, what about a lettered list rather than a numbered one? Simply use this instead:

<ol type="A">
<li>Blah #1
<li>Blah #2
<li>Blah #3
</ol>

This would appear as:
  1. Blah #1
  2. Blah #2
  3. Blah #3

Cool! Now that we’ve learned all about ordered lists, we can learn about unordered lists.

 

Unordered Lists

Unlike ordered lists, unordered lists do not follow any specific pattern. Usually, they take the form of bulleted lists. Instead of beginning with <ol>, an unordered list begins with <ul> and ends with </ul>. Again, this is easy to remember because ul stands for unordered list.

For a simple unordered list using normal bullets, use the following code:

<ul>
<li>Blah #1
<li>Blah #2
<li>Blah #3
</ul>

This would appear as:

  • Blah #1
  • Blah #2
  • Blah #3

For an unordered list using bullets that are a bit different, use this code:

<ul type="circle">
<li>Blah #1
<li>Blah #2
<li>Blah #3
</ul>

This would appear as:

  • Blah #1
  • Blah #2
  • Blah #3

And for a list with square bullets:

<ul type="square">
<li>Blah #1
<li>Blah #2
<li>Blah #3
</ul>

This would appear as:

  • Blah #1
  • Blah #2
  • Blah #3

 

 

Marquees: Whee!

What is a marquee, you ask? Well, I think the best way to explain is through a demonstration:
Whee! I’m a marquee!
…That was a marquee.
(NOTE: If you cannot see the scrolling text above, your browser does not support marquees. You can either download another browser or skip this section entirely if this is the case.)
Marquees can add some movement to your page and may be a nice touch. However, be very careful not to overuse them — you wouldn’t want visitors to your page to go blind!

The basic code for a marquee is:

<marquee>Your text goes here.</marquee>

You may also want to use this variation of a marquee in which your text goes back and forth:

<marquee behavior="alternate">Your text goes here.</marquee>

Your text goes here. You may wonder: “Ah, but does my marquee have to scroll left?” Actually, you can make a marquee that scrolls up, down, left, or right. To do this, add behavior=scroll direction=”DIRECTION” after marquee like so:
<marquee direction="up">Your text goes here!</marquee>

Your text goes here!

You can also edit your marquee even more by adding properties such as width and bgcolor. I’m sure you’re used to those codes by now, so I’ll just leave you with one example:

<marquee direction="left" bgcolor="#FFF8AF" width="300">Yay, I'm a scrolling marquee!
</marquee>
Yay, I’m a scrolling marquee!

 

 

The End

Well, you’ve completed the basic guide to HTML! Now that you (hopefully) know what you’re doing with HTML, you can proceed to the other guides on nBn! If you find any errors in this guide or think that I left something important out, please leave feedback and I’ll try to fix the problem.

Remember: Patience, practice, and experimentation are the keys to success!