I will continue to add to this Guide as I see fit. Remember this guide is just here to teach you the bare basics of HTML editing and how to market your site with a no-modest budget. Also I’d like to note that you already use some of these codes when you are using Instablogs. For example, I’m sure you all know the bold and italics commands. But I will show you many, many more. Again, sorry for all the images and possibly longer loading time. There was no other way around it.

To download the full text file, or all the images and files used in this tutorial just visit the tutorial site. Or you could just scroll to the bottom of this page and download them there.

What you Need

This step is simple. All you need to code HTML is notepad, some time, and knowledge of what you want the site to look like. Also one of the most important skills, Googling skills.

Introduction to Coding

If you have read this far, then you must be at least partially interested in learning basic HTML coding. Well to start off and make your first ever web page you need to start with the essential and most basic of all tags. Now it is time to make a folder on your desktop named “MyFirst” and that is where you will save everything in. So open up Notepad and see the code below.

Now you will use those codes to start most of the time. When I say most of the time I mean always when you are programming HTML. Now to help describe what those tags mean and do I’ll give you a short list below.

Since you now know what those codes mean I would like to now stress something. You MUST close ALL tags so that they don’t run down the page. So for example if you were to type (See Below) in your body tags;

Notice that all the words are italics, not just the words I want.

As you can see I’ve bolded the code that I used. Also I’m sure you’ve noticed that I didn’t type in “em” into the code to stop/end the tag. So if you were to copy this code into your notepad, save it as first.htm then go to the internet and File > Open File > Location of your “First.htm” and view this webpage then you will notice that all of the text I typed is Italic and not just “This is my first Webpage”. To make sure only that part of the text is italic then you must type this code in;

You should come up with something like

That tag would end the code and thus stop the italic command. So now we only have “This is my first webpage” in italic.

Body of your Site

At this point I bet you’re asking me to explain all these darn codes to you. Well here’s a short list of codes you will most likely use all the time.

Those are the basic codes and I’m sure if I forgot one I’ll add it later. Let’s move onto some harder stuff like inserting images, tables, and attributes to tags.

Images

First let’s learn to insert an image to your website. Now go into that folder I had you make. Don’t forget you must save everything in this folder that you want on your website. The reason for this is because if you are trying to insert an image and you type in and dog.gif isn’t in that folder and is on your desktop, it isn’t going to search your computer for it but only look in the source folder. (Which in this case is called “MyFirst”). So always be sure to save all your .htm files and images in the same folder.

Now you should open up notepad again and insert the code below this a ways. Then save that as index.htm.

(Note: Your home page must always be named index.htm. This is the first page that any server will look for. If you don’t have it, you won’t have a “Home page”.)

Next you need right click the image right about the code below this text and save the image in your myfirst folder for the reason above.

[img=” http://www.news.cornell.edu/stories/Sept05/dog.jpg]

Then you need to save it as dog in your “MyFirst” folder. (The extension is .jpg)

Once you’ve done this then you should come up with something like

As you can see the “body” text appears at the top left part of your browser and your image is down a little bit from it. Now if you take out the s then the image goes right up next to the text on the same line. I will come back to images when we get to attributes.

Tables

We are on to Tables! Tables are a little more tough than images, and links. They are, in my opinion, the hardest thing for me to grasp until I broke it down and separated the tags from each other so it’s much easier to read. Here’s an example and please don’t get discouraged, you will understand it in the end I promise.

Was that hard? I don’t think it was that bad. Well now lets break this apart and look at each part and what exactly it does.

We began with the tag which tells the browser that we are starting a table and everything under it is going to be in this table. You can put around 10 other attributes into this table tag that help set it apart as a very useful code. We will touch on attributes later.

As for the “tr” tag goes it just says this is a (new) row. So as long as you don’t close the “tr” tag and keep putting “td” tags under it the table will keep creating cells across on the same row. To go to a different row just end the “tr” tag and insert another “tr” code and keep adding “td” tags to keep adding cells to the table. These as well can also have attributes but not nearly has much as the “table” tag.

Tables aren’t as hard now are they? Going through them and explaining every part should help. Now lets try it out and see if we can’t make a table.

As you can see from the example, the table is pretty simple to learn. I’m sure you also noted that there are a few things extra in some of those tags such as the (align=”right”) and the (border=”1″). What align=”right” means is it takes that image and throws it all the way to the right of the webpage. As for the border, it just added a, well, border around the table so you could see it a bit better. Since you have the table down now, we can move along to attributes.

Attributes

Attributes are basically anything that goes IN the tag itself and defines additional parameters of the code itself. So for example, if you have a table and you want to add extra spacing between the cells, some padding, a border, align it left, and v (vertical) and h (horizontal) space. Here is what that tag would look like;

That tag may seem long and bulky but if you were to put that in your code that you already have in notepad you would see some drastic changes in the way your table looks. I personally rarely use the padding or spacing for that matter. I believe it makes your table look tacky and poorly done. But of course you couldn’t really tell if you set your border to 0 (border=”0″).

Heres a list of some attributes that are commonly used.

(For all the vlink, alink, link, bgcolor you must use hexcodes)

All those codes must be inserted WITHIN a tag. If you read in the parentheses then you noticed I said “hex codes”. What I was referring to here was a color chart. If you simply use google and type in “Hex Codes” then you will be give thousands of pages that contain hex charts. But for you, I’ll try and find one and post it on here when I have the spare time.

Let’s go back to our index.htm file again and start putting these attributes to use. We are going to recreate this page. Heres the code:

Save, and then bring up in your browser

Now that you’ve made your first, full webpage its time to move onto themes, looks, and advanced code.

Themes, Colors, Optional Codes

Themes

Themes are probably one of the most important parts of a website. Its how the website will look! Themes can range from color to the layout of the site. Color is easy enough and it seems like every person has some sense of right and wrong when it comes to colors going together and such. For example you don’t really want to put a bunch of really bright of colors together because it’s like looking at the sun. Same goes with black but with all dark colors and font. The obvious reason for a site to be almost instantly turned down is the look. Is it easy to read? Is it not cluttered and all over the place? All these things go through the readers minds in seconds without them even knowing it and it can mean either them preceding into your site or clicking out and looking somewhere else. Another factor you must look at when thinking of the user are the colors. Are they bright? Are they too dark? Usually based on your content and your sites target age you will want to choose the color accordingly. If the fanbase is younger then usually you will want to go with a darker site, but if the fanbase is older than usually you would want a lighter theme. I know this is a lot to think about, but really in the long run it will only help you out.

It’s always best to have a general idea of what you want your website to look like before you start the actual coding so you don’t spend time thinking and testing out when you could be doing the coding to make it a certain way. Most websites usually have the header at the top, a side menu at one or both sides and a footer. So really you could base your website around this general template that almost every (professional) website uses.

Colors

Colors are an important factor in websites. They help differentiate between text, images, links, and other things on your page. But when colors are used in excess they can really tug down your site and bring it clutter and make the person think it wasn’t done professionally. Here are some common hex codes;

* White - #ffffff
* Black - #000000
* Gray - #999999
* Orange - #FF9900
* Red - #FF0000
* Blue - #0000FF
* Green - #00FF33

You can find more of these hex codes at these sites:

1. http://html-color-codes.com/
2. http://www.w3schools.com/Html/html_colors.asp
3. http://www.december.com/html/spec/colorcodes.html

Advanced Codes

Forms:

What you’ve made is a simple text field where you can input some text and press submit.

If you wish to learn more about Forms, then you can visit

* http://www.htmlcodetutorial.com/forms/

They give a good form tutorial. They give step by step for form creation and getting it up and running. I would include my own form tutorial in this HTML tutorial but I honestly think it’s getting too far in and I may write a whole separate tutorial on it. Plus, I hate doing forms, they are boring and annoying. And when I say getting too far in you have to really get into the server and databases and where to store and everything, that’s for another time.

Framesets

To make framesets you need to make 5 more htm files. What we are going to do is make a frame for the Navigation Bar (On the left), a header (At the Top), a Main Text area (In the middle), a footer (at the bottom) and an index to tie all those pages together.

(In order) You need to save them as:

1. index.htm
2. top.htm
3. navbar.htm
4. bottom.htm
5. body.htm

All Framesets really do is help divide your information a little easier. As a general rule of thumb, you shouldn’t use framesets as every element of your page but they can be used sometimes for navigation bars or things like that.

This is the part of the code that sets it apart from normal HTML coding. As you can see, you have a defined width and height (). That just gives the navigation bar those parameters. Now for top you have 81, 19 and then for body you have 20, 80. Then for the bottom frame which is generally your Footer you have it between the and tag. The only thing I can tell you at this point is really just mess around with it and have fun. You don’t really require tables, and you already have a navigation bar, header and body. Happy Coding.

Advertising your Site

Advertising your site isn’t as hard as it may seem. There are many ways you can do it with no-modest budget. First you can go to www.google.com and sign up for their ad program by going to the bottom of their page and clicking Ad Programs. You can also do the same thing with www.yahoo.com.

Probably the best way to spread your site is by word of mouth. You can tell all your friends and take them to the site and show them around and have them tell their friends and add it to their myspace, facebook, personal message in msn, xfire, yahoo, aim. Word of mouth, if used right can be a powerful thing.

Another way to get your name in lights is to advertise on blogs, forums and affiliations (Where allowed). You can visit blogs and post a brief description about your site and thank the administrators for letting you post and advertise at their site. Same thing goes with forums. Affiliations work just as well if you affiliate with a site that gets moderate to major traffic through their site. Affiliations can range from banners to just a text description about each other’s site.

Conclusion

If you have any suggestions, changes or things I should remove from this tutorial please e-mail me the suggestion and I will review it and decide if it’s appropriate. I will leave credits to you for your addition if I do decide to change information.

Thank you everyone for reading and I hope you have walked away knowing HTML just a little bit more. If you have questions about coding then please leave a comment and I’ll get back to you.

(Please do not copy this without my permission. Thank you)

Full File(855kb) - With all images and completed index.
Simple File(47kb) - This just has the tutorial file with nothing else included.