This is part one of a quick series of instructables that will take you from basic codes such as how to make bold text to advanced CSS and dynamic code.

The cheat sheet for the code can be found in this instructable: Basic HTML code.

Okay, lets get started on the foundation!

Table of Contents:

Basic HTML code cheat sheet
Build a professional website: Part 1
Build a professional website: Part 2
Build a professional website: Part 3 CSS

Step 1: An Idea

It all begins with an Idea! Before you can start coding, you need to plan out your strategy. Start visiting other like minded sites. Don't look at the arrangement and leave. Look at the content, simplicity and use to the viewer. What can you offer or change to that site to make it better?

Now I am not saying go and steal someone else's page. What I am saying is Research, Research and Research! If you do find a page that you really like ( let's keep it real here, it happens) and decide to use someone else's hard work then make sure you change it enough to not be a mirror web site! Hold on, hold on! I know what you are thinking ...I do not condone any type of piracy! DON'T DO IT! I do however, accept that a large percentage of the internet content is "RECYCLED" in large part with thanks to Google. If you see something you like, learn to do it yourself instead of copying code ( hopefully, that is why you are here) from another page and publishing it.

Step 2: A List

Notepad or a notebook?

Keep good notes! I can't stress that enough! Let's say you build yourself a nice logo. While using you favorite image editor, you use a neat font installed on your computer called Skesis. Some time goes by and you change your name from whatever to whatever and son. You will need to know what font you used to make that logo. The same goes for web design. Not only for record keeping but you need an outline for those ideas! I use an outline as a guideline for web design. Mine looks something like this:

Idea - What am I thinking?
Demographics - Who am I trying to reach?
Pages - Try and plan out how many pages I want and name them

you get the point...

Step 3: Lets Get Started

A web page is made up of sections of HTML Code that contain your message. You can build the best web page without spending one penny.

You can use most any text editor such as:
Windows notepad ( PC | Start > Programs > Accessories > NotePad )
Mac simple text ( MAC | Apple menu > Hard drive > Applications > Simple Text )
or my WYSIWYG Live Page Builder tool.

Step 4: The Skeleton of a Web Page

A basic page looks like this:

1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
2.<html>
3.<head>
4.<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
5.<title>Untitled Document</title>
6.</head>
7.<body>
8.</body>
9.</html>

1. Doctype: Specifies the HTML version used in the document. Browsers may display your page funny without it.
2. Html Start Tag: The creation point of the page
3. Head Tag Start: While this is not visible it gives information about the content
4. Meta Information: Gives information about the document and not the content
5. Title: Shows the title of the page at the top of browsers
6. Head Tag End: Closes the information about the content
7. Body Tag Start: This is where your page content begins
8. Body Tag End: This is where your page content ends
9. Html End Tag: This is the last line of the whole page and finishes your page

Step 5: Your First Web Page

Using Windows notepad ( PC | Start > Programs > Accessories > NotePad )
Mac simple text ( MAC | Apple menu > Hard drive > Applications > Simple Text )
or my WYSIWYG Live Page Builder tool copy/paste (highlight the text by dragging your mouse over the code below, when it is highlighted either go to edit > copy or press ctrl+c and then paste into notepad by either going to edit > paste or pressing ctrl+v) the following code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Your Title Here </title>
</head>
<body>
Your Info Here
</body>
</html>

Now change " Your Title Here " to a new title you like

Now Change " Your Info Here " to whatever you like. Try using some code from the HTML Code Page and see what you can come up with.

Here are a few examples:

I will use the text " Hello World "

Bold - Hello World - Hello World
Italicize - Hello World - Hello World
Linked to a page - Hello World - <a href="http://www.htmlinc.com">Hello World</a>
Change the Color - Hello World - Hello World
Resize The Font - Hello World - Hello World

Now save your work as anyname.html then open with the browser or your choice and voilà! You have designed a web page!

Step 6: Congratulations!

You have just completed the first lesson in building a professional website, after you build your basic page you will need to publish it. Please use the HTML Code page to broaden your knowledge and the Page Builder to put that knowledge to work!

Now, lets move on to the next phase of the instructable: Build a professional website: Part 2