Hello people of Neopia or otherwise who just happened to stumble onto this page. Wow, that is one long starting sentence. But if you can't understand it, that's fine. I wrote it, and it confuses me.

Ok, the reason your here. This is not a guide on how to fly, or how to play soccer. Just so your aware of that. This is my guide to HTML. I made it very simple (I hope) and I hope you can learn something from it.

Now for those of you who are looking at the scrollbar and thinking, "How long is this guide????", don't worry. I put in a lot of examples and pictures. Its really a lot shorter than it seems. Trust me. Or don't, if you don't I suggest leaving or else....*evil music plays*

And for those of you who are thinking, "Why did she spell "sky" wrong in the name???", well you people just need to stop being so critical. I did it on purpose, no need to panic. Skye is my name, so I spelled it wrong so it had a part of me in it. Happy? Good. Sheesh, people are so....so....annoying. You can't even spell something differently without them bothering you.

So have fun with my guide!!!!!

Before we get into the more difficult stuff, we need to learn the basic things. Some things about HTML.

• HTML stands for Hyper Text Markup Language
• HTML is a markup language, not a programming language (this is just a fact, and not all that important)
• HTML describes web pages by using markup tags

That is just general information. Now for something more important. This is really important. PAY ATTENTION!!!!

• Keywords surrounded by angle brackets, , are called HTML tags, or just tags. They are used to define what you want to do
• Tags usually come in pairs; if you start with a bold tag, you must have another bold tag at the end to finish it.(Don't worry if you don't understand, more on that later)
• The first tag in a pair is called the start tag, or the opening tag. The second tag is called the end tag, or the closing tag. For the sake of simplicity, I will always use opening and closing.
• Tags are not case sensitive. You can use upper or lower case, although in different coding languages(XHTML, XML,...)you need to use lower case. So I suggest you use lower case, so just in case you decide to move on to a different coding language, you are prepared.

That is the basics of HTML. Isn't it simple?

Elements

Now some terms. And element is the opening and closing tags, along with everything in between. Here is an example of an element:

<p>This is a paragraph</p>

The paragraph tags, when put at the start and end of a group of words, form a paragraph, meaning there is a blank line before and after said group of words. The above code would form this:

This is a paragraph

Nested elements

There are also nested elements. Nested elements are elements that are included inside of each other. Take the paragraph element:

<p>This is a paragraph</p>

The paragraph tags when put before and after a group of words or sentences, create a paragraph. (surprising, right?) This mean a blank line before and after the group of words. The above code would give you this:

This is a paragraph

Then take the body element.

Now nest the paragraph element in the body element.

<p>This is a paragraph</p>

That was all there was to it. The paragraph and the body element are nested. You have the paragraph element, which is by itself a complete element, but you also have the body element. And now the paragraph element is part of the body element by being in between the opening and closing tags.

Empty elements

In addition to nested elements there are empty elements. This is when an element is started and ended all in the opening tag, such as the line break tag. Which is as such:

<br>

That is all there is to the line break tag. You may have noticed by now that the closing tag is almost always like the opening tag, except for the forward slash at the beginning following the first angle bracket. Well, if you don't have a closing tag, like in an empty element, you close it by putting a space after the "br" then adding the forward slash, finished by the last angle bracket.

Some other elements that are empty are: the tag for adding a horizontal line, the tag for inserting an image, and the tag with the meta information.

Attributes

Now for attributes. Lets say you have the paragraph element.

<p>This is a paragraph</p>

But you don't want it to be left aligned (left aligned is the default). You could change how its aligned by adding an attribute to the opening paragraph tag. The closing tag stays the same though. Attribute are not mentioned in the closing tags, just the opening ones.

<p class="example">This is a center aligned paragraph</p>

You see what I did? Let me explain. Attributes most often are followed by a value(the value in this case being "example"). Values are most often in quotation marks and come after the equals sign following the attribute name.

The class attribute is not something you really need to know. It basically puts it in a class with other elements like it, but it pretty much doesn't do much unless you learn CSS. I only used it in this example because it nicely showed the relationship between name and value.

Body element

The body element is shown with text like this:

Type type type type type type type type type type type type type type type type

The body element contains all of the visible content in your document, you would put the opening body tag at the beginning, after the head element, then you would put all of your type, including tables and paragraphs and text and images. Then you would finish with the closing body tag. Simple as that.

Head element

The head element is the opposite of the body element. The content in the head element is not visible to the browser. Contained in the head element is the information about a document, also called the meta information. So tags that define visible things, like the paragraph element and the image tag are not allowed in the head. The head tags are as follows

Everything you put in that section would go between those two tags. But only a few tags are actually allowed in the head element. I'm not going into detail, as the only one I use frequently is the title element.

The title element is shown in the head like this:

My HTML Guide

The title is what shows in the blue bar at the top of your screen. So when you go into this page, it will say My HTML Guide followed by whatever browser you are using, in my case Mozilla Firefox.

But if you really want to know head here and it will tell you all about the head element: www.w3schools.com/html/html_head.asp

Headings

Its the start of your document, and you want to declare what its about in big large letters. But you don't want to do all of the codes to make a normal paragraph like that (don't worry, I'll teach you that later). So what do you use? A heading, of course.

Headings are made using these different tags:

<h1>This is heading one</h1> <h2>This is heading two</h2> <h3>This is heading three</h3>

And so on. The difference between heading one and heading three is size. Heading one is the larges, while heading six is the smallest. Let me show you:

Heading One

Heading Two

Heading Three

Heading Four

Heading Five

Heading Six

Now really the only attributes I use with the heading tags are style, id, and class. Now, don't be worried, I will explain those later. Don't get me wrong, there are others, but I don't use them a whole lot.

Now you can head you page however you please. Although I don't recommend using headings as anything other than headings. That would take away from the heading you actually used as heading, which you probably want to use to catch peoples attention. Other than that there isn't a whole lot more I can say about headings, except that if you have a heading, you do not need to add a line break afterwords. Part of the heading code means that anything else after the heading starts on the next line. But that's about it for headings

Horizontal lines

Horizontal lines are nice to divide up the text in a document, I use a lot of them in this guide. The tag is simple this:

<hr>

You may have noticed that the horizontal line is indeed an empty element. Kudos to you for noticing.(If you didn't notice, pretend you did, it will make you look smarter) The code above will give you this:

---

Amazing, isn't it? Ok, attribute you can use with the horizontal line tag. Most often, I use size, color and width. Color will be explained in a moment, so just hang on. But width I will explain here.

<hr>

Notice how I added the width attribute? And I still finished off with the forward slash followed by the angle bracket. Now the 50% means that it will only go across 50% of your screen, like this:

---

But you don't have to do 50%, obviously. You could do 60% or 40% or 2%. But you don't have to use percents either. You could use pixels. If you wanted to use pixels, you would code it this way:

<hr>

Which would give you a line 300 pixels in length, like this:

---

Which is pretty much all I can say to the width of lines. So now we go over size.

Size is pretty much how thick the line is. This is how you do it:

<hr>

Now, you don't have to use 4 as the size. You can you use all different numbers, here are some on the different sizes.

Size one

---

Size two

---

Size three

---

Size four

---

Size five

---

Size ten

---

And on up. Now you know the ins and outs of making all kind of horizontal lines.

And now, the moment you have been waiting for. Not really, but font changes are pretty easy, and they end up looking really cool. If you change it in the right way...

Basics of fonts

This is the simpler things:

This creates bold text

<b>This creates bold text</b>

This creates italic text

<i>This creates italic text</i>

This is big text

This is big text

This is small text

This is small text

This is strong text

<strong>This is strong text</strong>

This word is _subscripted

This word is _subscripted

This word is ^{superscripted}

This word is ^{superscripted}

Aligning your text

Now there a couple different ways to align your text. Although, I only like one, so I'm only going to teach you one. Here it is:

This is the newer way to align. It works in both HTML and the other coding languages.

We have the paragraph code(and I'm not going to keep writing it down from now on, you'll just have to remember what I mean). And we use the style attribute to align. Like this:

<p style="text-align: right;">A right aligned paragraph.</p>

Which would still give you this:

A right aligned paragraph.

Changing color

This is what I consider the fun part. There is so much you can do with colors. You can make your document the most colorful document in the history of documents. Which is just a lot of fun.

Once again there are two different ways to color. But I'm only going to teach you one of them, so just live with it.

If you take the paragraph code and add they style attribute as such:

<p style="color: aqua;">Aqua colored paragraph</p>

You should get this:

Aqua colored paragraph

**Note**Yes, you are using the same attribute to align as you are to color. Don't worry, its supposed to be that way.

**Note**I used the color name aqua, but you should use the hex number for the color, because there are only 16 valid color names you can use; those colors being aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. All other colors need a code.

There is distinct difference if you say background-color or color. Color is the color your text turns out to be, and background-color is the color behind your text. In the following coding we will give our text a aqua background.

<p style="background-color: aqua;">Aqua backgrounds</p>

Which would give you:

Aqua backgrounds

Most computers now use a red, green, blue (RGB) system to make colors, and can supports millions of colors. But way back when computers supported 256 colors, and 40 of them were for just the computers. So they made a list of 216 web safe colors. I could have told you how to make colors using the RGB values, but I think its easier just to use the list of 216 web safe colors. To make it easier for you, I made a beautiful table full of the colors and their corresponding values.

000000	000033	000066	000099	0000CC	0000FF
003300	003333	003366	003399	0033CC	0033FF
006600	006633	006666	006699	0066CC	0066FF
009900	009933	009966	009999	0099CC	0099FF
00CC00	00CC33	00CC66	00CC99	00CCCC	00CCFF
00FF00	00FF33	00FF66	00FF99	00FFCC	00FFFF
330000	330033	330066	330099	3300CC	3300FF
333300	333333	333366	333399	3333CC	3333FF
336600	336633	336666	336699	3366CC	3366FF
339900	339933	339966	339999	3399CC	3399FF
33CC00	33CC33	33CC66	33CC99	33CCCC	33CCFF
33FF00	33FF33	33FF66	33FF99	33FFCC	33FFFF
660000	660033	660066	660099	6600CC	6600FF
663300	663333	663366	663399	6633CC	6633FF
666600	666633	666666	666699	6666CC	6666FF
669900	669933	669966	669999	6699CC	6699FF
66CC00	66CC33	66CC66	66CC99	66CCCC	66CCFF
66FF00	66FF33	66FF66	66FF99	66FFCC	66FFFF
990000	990033	990066	990099	9900CC	9900FF
993300	993333	993366	993399	9933CC	9933FF
996600	996633	996666	996699	9966CC	9966FF
999900	999933	999966	999999	9999CC	9999FF
99CC00	99CC33	99CC66	99CC99	99CCCC	99CCFF
99FF00	99FF33	99FF66	99FF99	99FFCC	99FFFF
CC0000	CC0033	CC0066	CC0099	CC00CC	CC00FF
CC3300	CC3333	CC3366	CC3399	CC33CC	CC33FF
CC6600	CC6633	CC6666	CC6699	CC66CC	CC66FF
CC9900	CC9933	CC9966	CC9999	CC99CC	CC99FF
CCCC00	CCCC33	CCCC66	CCCC99	CCCCCC	CCCCFF
CCFF00	CCFF33	CCFF66	CCFF99	CCFFCC	CCFFFF
FF0000	FF0033	FF0066	FF0099	FF00CC	FF00FF
FF3300	FF3333	FF3366	FF3399	FF33CC	FF33FF
FF6600	FF6633	FF6666	FF6699	FF66CC	FF66FF
FF9900	FF9933	FF9966	FF9999	FF99CC	FF99FF
FFCC00	FFCC33	FFCC66	FFCC99	FFCCCC	FFCCFF
FFFF00	FFFF33	FFFF66	FFFF99	FFFFCC	FFFFFF

In the above example you just did style="color:aqua as the attribute, but if you want to use any of the colors in the table you have to use style="color:#FF6699. Notice how I added the "# sign before the color value.

Aligning and coloring

I just mentioned (before the table) that you use the same attribue for both aligning and coloring. So how would you do both at the same time? You can't add the same attribute twice, that just doesn't work. So what you do is put both the values with the same style attribute, just put a semi-colin imbetween. like so style="align:right;color:greenWhich would give you text that was aligned right and green. Simple as that.

Changing size and faces

I bet you were just wondering how much more I could tell you about changing fonts. But don't worry these are the last ones I have.

Changing the size and face of a font is done pretty much at the same time. Or at least it is the way I do it. There may be other ways to do it, but we're only going to learn this one.

<p style="font: 20pt Jolt;">Big and Jolt paragraph.</p>

I'm sorry if you don't have the jolt font on your computer, and if you don't I'm not really sure what will come up. But if you do, you will get this:

Big and jolt paragraph

Just for the fun of it now, I'm going to put all of that stuff together and show you how to make a really cool text for your page.

Really cool text!!

<p style="background-color: yellow; color: lime; text-align: right;">Really cool text!!</p>

List are useful tools for organizing your thoughts. There are two main types of list you can do: unordered lists and ordered lists. There are also definition lists, but I'm not going to teach you that.

Unordered lists

Unordered list are bulleted lists like this

• Bullet point one
• Bullet point two
• Bullet point three

Now the basic tags for an unordered list is:

<ul></ul>

But that is just the opening and closing tags of the overall list. Adding a list item is like this

<ul> <li>Bullet point one</li> <li>Bullet point two</li> </ul>

Li stands for list item. So when you start a bullet point you begin with li in angle brackets, then you close with /li in angle brackets. Then you can start you next point with li again. You can have as many bullet points as you want as long as you open and close each one properly. If you mess it up, you can get some odd things.

Ordered lists

Ordered lists are almost the same as unordered list, except that instead of bullet points it uses numbers.

1. Point one
2. Point two
3. Point three

And it uses pretty much the same code, except that it uses ol instead of ul, like this:

<ol> <li>Point one</li> <li>Point two</li> </ol>

Lists with in lists

You can put lists in lists, its easier to show in coding than it is to explaing.

<ul> <li>First bullet point</li> <li>Second bullet point <ul> <li>First bullet point of the second list</li> <li>Second bullet point of the second list</li> </ul> </li> <li>Third bullet point</li> </ul>

As seen above, the list inside the list, is part of the second list item. So after you ended the list inside the list, you had to finish the list item before moving on to a new one. And just so you can see, the above codes would give you this:

• First bullet point
• Second bullet point
  • First bullet point of the second list
  • Second bullet point of the second list
• Third bullet point

Personally, tables are my favorite part of HTML. They are just so much fun, and there is so much you can do with them.

<table border="1"> <tr> <td>This is the top left box</td> <td>This is the top right box</td> </tr> <tr> <td>This is the lower left box</td> <td> this is the lower right box</td> </tr> </table>

This is the top left box	This is the top right box
This is the lower left box	this is the lower right box

Above is a basic table, and what it would turn out to be in coding.

Now, the awaited explanation of what I did.

• The opening tag, table, is simple. As well as the closing tag /table.
• You don't have to add the border attribute to the table tag, but its easier to find the different cells in a table if you have a border. I just used a thin border, but you could change that one and use all different kinds of thicknesses.
• Tr in angle brackets starts a new row. And when you finish, /tr in angle brackets will finish the row, allowing you to start a new one.
• Td in angle brackets is the start of a cell in a row. You can have as many cells in a row as you want, as long as you finish the previous cell by using /td in angle brackets.

Some common attribues to tables, are cellspacing and cellpadding. Cell spacing is how far apart the different cells are (and would be put in a table as cellspacing="2"). Cell padding is how far the text is away from the borders of the cell (and would be put in a table as cellpadding="3").

Thats really all I can tell you about tables. You mostly have to just play with it yourself, to figure out how different things work. Good luck with that!

The almighty textarea. It is one of the most useful commands if you are writting a guide to HTML. This is because when you put a code in a textarea, it ignores it!!! Which is so useful. Cause what use would it be if I tried to teach you the commands if I didn't actually show you the commands.

But textarea's are really simple like this:

<textarea> Text here.

Now, you don't have to capitalize it, and you really shouldn't, but for the sake of example I did. And you aren't supposed to put a space between the forward slash and text_are in the closing tag, but I did because if I didn't it would have ended the textarea to early for you to see the whole example.

Ok, so you have a text area, but you want it to have more rows, or want it to be wider. This is easy. Watch closely!

This text box is BIG!!!! this is the code. <textarea rows="10" cols="60">This text box is BIG!!!!This text box is skinny. <textarea rows="3" cols="50">This text box is skinny.

Plain text in a text box is fine, but its a whole lot more fun if you do colors and font sizes and font faces. I'm going to creat a text area, with olive font, aqua background, 16pt font, and broadway font face

Isn't this fun!!!! Ok here's how you do it. <textarea style="color: olive; background-color: aqua; font: 16pt Broadway;">Isn't this fun!!!!!!

That's that. Now you can play with text boxes you your hearts content.

The scrollbar colors that are set as a defaut on your computer are boring. Admit it. It's true. But you can change the color of it. Which adds so much to a site.

<style></style> body { scrollbar-face-color:#FF0099; scrollbar-darkshadow-color:black; scrollbar-shadow-color:black; scrollbar-arrow-color:#FF6600; scrollbar-highlight-color:black; scrollbar-3dlight-color:black; scrollbar-track-color:#FFCC00; } />

These are the colors I have set as the scrollbars on this page.

• Scrollbar face-This is the color of the little thing you move up and down.
• Scrollbar track-This is the color of the track you move the little thingey on
• Scrollbar arrow-This is the color of the tiny little arrows you push to make the little thingey go up and down
• The rest are various shadows and highlights. You should just play with changing each to see what it does, because they're hard to explain

This is a little weird, because I'm doing a HTML page, but this is actually CSS. So I'm not actually going to explain why I put what I did. If you really want to know, you'll have to learn CSS. You just need to know that you would put all of the stuff in the textarea between the closing tag of the head and the opening tag of the body at the beginning of a page.

If you are just so curious you can't wait to learn why you did this stuff, try these different pages: Css guide, and Riddle's CSS tutorial.

That's pretty much all I'm going to teach you. I hope you got enough of this that you can experiment on your own with what I've taught you. And remember, some attributes can fit in just about any tag, such as the style attribute. You could put it in the rows of tables, or the cells of tables, or around the images as borders. There is no limit to what you can do with what I hopefully managed to teach you here.

You know, if there was anything that wasn't on this page, that you think should have been or if you have any questions. Please don't hesitate to neomail me. I would love to help and would appreciate any critisism you have.

And I'd be more than happy to help you with any layouts you are making. I love be of assistance, and I love HTML. So its like hitting two birds with one stone.

On the point of copying my layout, don't. I put a supreme amount of work into writing this page, and I don't want anyone to steal it. Got it? Good.

You must be thinking that I just had the conclusion and I am continuing to talk. Well, you'll just have to bear with me. So in my search to do this page, I found a bunch of websites, both on and off neopets, which I am going to call the best website to help people with other HTML things.

Sandshaven's Glitters

I really liked this site, cause it have some really cool backgrounds. And a lot of random other cool glitters. You should visit here for all of your glittery needs

Basic HTML Help

This page isn't the best at describing why you are doing the things they tell you to do, but it has a lot of codes, and if you know a little of HTML you can figure the codes out and apply them in other places. Mostly I like the variety of different things they have to teach you

Lots of Colors

I gave you a list of 216 colors, but if you are just a color fanatic and you need more than that, head to this website. There is like a zillion different colors and their codes. You have to admire their dedication to all colors that can go on the web. Absolutely amazing.

Screenie Help

I didn't even know what a screenie was (totally not kidding) before I read this website, now I could probably make some pretty good ones. So probably a good place to go for screenie help

Soroptimist Directory

This is the best directory I ever found. It has links to literally ANY kind of site you could possibly want.