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.
Before we get technical, its imporant to learn some basics. First, some interesting facts about HTML:
Now some more important information. Try to remember there following points, they are key.
Thats the basics. There really isn't much to it, is there?
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
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.
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 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.
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:
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:
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
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 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:
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:
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.
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.
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.
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 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.
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 are useful tools for organizing your thoughts. There are two main types of lists you can do: unordered lists and ordered lists.
Unordered lists are bulleted like this
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 are almost the same as unordered list, except that instead of bullet points they use numbers.
And it uses pretty much the same code, except that it uses ol instead of ul, like this:
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:
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.
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.
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:
NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2013.
® denotes Reg. US Pat. & TM Office. All rights reserved.
Use of this site signifies your acceptance of the Terms and Conditions