Welcome to Autumn Skye

---

Most importantly, Autumn Skye is a basic guide to html.

This guide is meant for beginners who want to learn a bit more about html coding, and hopefully jumpstart their knowledge of the subject therefore leading them to a path that will help them to code their own pages in the future. I hope that this guide can be as helpful to you as the guides I read when I was learning were to me.

If you see any problems, or subjects you think I should cover or include, feel free to drop me a neomail. In the same vein, if there is anything you don't understand or would like assistance with, don't hesistate to neomail me, I'd love to help.

That said good reading,
and may you forever wander.

The Basics

Before we get technical, its imporant to learn some basics. First, some interesting facts about HTML:

• HTML stands for Hyper Text Markup Language
• HTML is a markup language, not a programming language
• HTML describes web pages by using markup tags

Now some more important information. Try to remember there following points, they are key.

• 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. This will be explained more 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.
• NOTE: 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, and it is easier to keep track of.

Thats the basics. There really isn't much to it, is there?

Elements

Now let's learn some terms. An 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

You can also nest elements. Nested elements are elements that are included inside of each other. Take the paragraph element:

<p>This is a paragraph</p>

Then take the bold text element.

<b></b>

Now you can nest the bold text element in the paragraph element.

<p><b>This is a paragraph</b></p>

That's all there is to it,the paragraph and the bold text are now nested. You have the paragraph element, which is by itself a complete element, but you also have the bold text element. And now the bold element is part of the paragraph element by being in between the opening and closing tags. The above code would give you a paragraph in bold font, we'll see it again later when we learn about fonts.

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 the entire element. While I did say that most elements had an opening and closing, the empty elements are the one that only have one tag. The line break tag is the HTML equivalent of pressing the "enter" key on a keyboard, and is very commonly used. An alternate way to do empty elements is:

<br>

Either way is correct, and both will work. Some additional common empty elements are the image insertion element and the horizontal line element, which we will learn later.

Attributes

Attributes are ways of changing text from the default. Say we wanted a paragraph to centered, not left aligned, which is the default for the paragraph tag. You would do this by adding an attribute to the opening tag. The closing tag does not change.

<p align="center">This is a paragraph</p>

Which would give you:

This is a paragraph

In the above example align is the attribute, and it is followed by a value which in this case is "center". The value is almost always between quotation marks, and the attribute is followed by and equals sign before the value.

Headings

Heading are a special text tag. They are all bold text, of various sizes which automatically include a line break after the tag. They are convenient if you don't want to add a bunch of attributes to the paragraph element which could give you the same result. Headings are made with these tags:

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

And so on. There are six different sizes of heading, one through six. One is the largest and six is the smallest. The relative sizes are:

Heading One

Heading Two

Heading Three

Heading Four

Heading Five

Heading Six

Horizontal lines

Horizontal lines are nice to divide up the text in a document, they provide a more concrete break than a line break but don't completely divide the text.

<hr>

The horizontal line element is an empty element so it doesn't have an closing tag. The above tag would give you:

---

Attributes most commonly used with this element, at least for me, is size and color. Color will be explained in the next section, but width will be explained here.

<hr style="width: 50%;">

As you can see, I added the style attribute. It is used for many things, only one of which is width. In the above example, the width is set at a certain percentage of the area it is in. It would look like:

---

You don't have to use persentages, you can also use a specific length, such as:

<hr style="width: 200px;">

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

---

Changing the Font

Basics of fonts

Here are the basic font tags, they are pretty self-explanatory. They can be used around one specific word, or around an entire paragraph, or even an entire document if you so choose.

This creates bold text

<b>This creates bold text</b>

This creates italic text

<i>This creates italic text</i>

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

To align text, there are two ways you can do it. The first method is to use the align attribute:

<p align="center">A centered paragraph.</p>

The second method is to use the style attribute, which is the same one that was used in changing width of lines.

<p style="text-align: center;">A centered paragraph.</p>

Both of these give you:

A centered paragraph.

Changing color

Changing color is one of the most fun parts of coding. It is done by once again using the style attribute.

<p style="color: red;">Red colored paragraph</p>

You should get this:

Red colored paragraph

In this example, I used the color name "red", but you could use the hex number for the color. 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, like using a highlighter. In the following coding we will give our text a red background.

<p style="background-color: Red;">Red background</p>

Which would give you:

Red background

Most computers now use a red, green, blue (RGB) system to make colors, and can supports millions of colors. Those codes use more than just 0369FC, but there used to be only 216 web safe colors, and those hex codes can be found in this table. When using the code instead of the color name you would use:

<p style="color: #FF0000;">Red paragraph</p>

Font and Size

Another common way you can change paragraphs is changing the font and the size of it. Once again it is done using the style attribute.

<p style="font: 20pt Broadway;">Large fancy paragraph.</p>

Large fancy paragraph.

The 20 pt part denotes how large you want the font, and is pretty much the same idea as in any other word program. The font can be the name of any font your computer recognizes as a font, although you should be careful that if someone is viewing your page whose computer doesn't recognize the font, it will default usually to Times New Roman, which can ruin the layout of a page. Try to use commonly used fonts, such as broadway.

Multiple Values in the Style Attribute

I've now taught you four different values to use with the style attribute: font, width, color, and background color. You can use more than one at once. To use to values, you put a semi-colon between the values.

<p style="color: aqua; background-color: red;">This is a colorful paragraph.</p>

This is a colorful paragraph.

Links to a different page

In this lesson, we are going to learn how to link to other webpages. We are going to use the Neopets homepage, for the sake of simplicity. This is going to be a bit confusing at the beginning, but I will explain in a moment.

<a href="http://www.neopets.com" title="Neopets home">Neopets</a>

Now for the explenation.

• Firstly, the "a" at the beginning is just the name of the tag on which you add attribued. Like the "p" at the beginning of a paragraph tag.
• href="http://www.neopets.com" is the url of the page you are linking to. It wouldn't be a link without this attribute, and it is required that you include the http:// part of the url.
• The title attribute is what will appear when you hold your cursor over a link. It will come up with a little box saying whatever you put in the quotation marks, try hovering your mouse over the links in the next bullet point, this is an example of the text that could pop up. It could be a single work, or an entire paragraph.
• The Neopets written between the opening and closing tags is the word or word that would link to the chosen destination. It could be one word. Or it could be a long list of words.

Links within a Page

You can also create links to a different section of the page. Although it is a bit more complicated.

Now linking to a different spot in the document uses pretty much the same code as linking to a different page. Except you have to create a way for the computer to know where you are linking to. You do this by giving a certain element an id. The id attribute is simple putting id="whatever_this_elements_name_is" in any tag anywhere in the body of your document, like say I wanted to create a link to the top of my page, and the header at the top of my page was this:

<h1>My Page</h1>

You could add the id attribute like this:

<h1 id="my_page">My Page</h1>

Now you can use the id to create a link to that point in your document; you would still use href="where you link to" to link to that place, but instead of adding the URL to a web page, you would add the # sign then the name of the id, like so:

<a href="#my_page">Top of the document</a>

This would cause you to link up to that heading in your page. It can be used full in making a navigation for a long webpage.

Images

Images are in a way similar to links, they have somewhat similar codes, although the image tag is an empty element and as such doesn't have a closing tag. The basic insertion of an image code is:

<img src="http://images.neopets.com/faerieland/air_faerie_icon.gif">

Which would give you this picture:

Changing the dimentions of a picture is fairly easy, and is done the same way as it was for lines.

Change the width:

<img src="http://images.neopets.com/faerieland/air_faerie_icon.gif" width="500">

Notice how just changing the width changes the height as well, so they are still in the original proportions. Height is changed the same way as width, except you use style="height: 200px". Unless you are aiming for an oddly stretch picture you should avoid changing both height and width at the same time.

Making an image a link

You can make an image a link by nesting it inside of the tags of the link element. When you put words between the tags, they became a link and the same applies to images.

<a href="http://www.neopets.com" title="Neopets home"><img src="http://images.neopets.com/faerieland/air_faerie_icon.gif"></a>

Which gets you this

Additionally you can add a border to an image using its own attribute. You can change the color with a certain value in the style tag, shown by:

<img src="http://images.neopets.com/faerieland/air_faerie_icon.gif" border="4" style="border-color: #663300;">

Lists

Lists are useful tools for organizing your thoughts. There are two main types of lists you can do: unordered lists and ordered lists.

Unordered lists

Unordered lists are bulleted 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 they use 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

Tables

Personally, tables are my favorite part of HTML. There is so much you can do with them.

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

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

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

• 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 number 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").

There are many things to do with tables, and the best advice I can give is to play with it and figure out what works where. Try using cellspacing, cellpadding, coloring some of the cells, or changing the font. Experimentation will help you understand how tables work better than any explanation I could give.

Text Areas

I should make a mention to text areas. They are the little boxes that have appeared in this entire guide that have the code in then. HTML codes inside of a text area don't count. The text area code is simply:

<textarea>

There is a corresponding closing tag, "/textarea" in angle brackets, however I didn't want to end the text area in the example. You can use the style attribute to change the size of the text area as well as the text's color and size.

Web Safe Color Codes

Return to Changing the Fonts

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