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:

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:

Then take the bold text element.

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

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:

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:

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.

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:

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.

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.

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:

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

This creates italic text

This is strong text

This word is subscripted

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:

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

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.

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.

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:

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.

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.

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.

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:

You could add the id attribute like this:

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:

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:

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:

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.

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:


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:

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

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:

Lists with in lists

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

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

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:

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



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