This is the second series of to the point lessons in web design. If you are new to web design or need to recap, please review: Build a professional website: Part 1

HTML code and color codes are in this instructable: Basic HTML code cheat sheet

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: A Few Basic Rules:

Before we begin, there are a few guidelines for building a web page. While I could go on here for pages upon pages...I won't! to the point remember - :)

Resolution - Nearly 50% of the people on the internet are still using 1024x768. So build your page to look good in any resolution.
Font Size - Just because you can't see one inch in front of you does not mean the world has bad eyes, on that same note...Not everyone has 20/20 vision either! It is best to not specify a font size, let the browser handle it. If you are targeting senior citizens then a 16 point font should be fine.
Font - Don't use fonts installed on your computer, chances are other people won't have it and your page will not look right. There are several industry accepted fonts including: Arial, Georgia, Tahoma, Times New Roman, Verdana.
This is a personal opinion...Don't make a black page with white text. I visit so many sites like that and when I navigate away and land on an average white page my eyeballs feel like popping out. Soft and subtle is the best policy...Unless your marketing crayons - :)
Never ever, ever make your page require the user to scroll right or left. Up and down is ok ( with in reason, make next pages if you have a lot of content) but NEVER left or right. If you are building your page and your own computer is in 1024x768 then go ahead and reduce your computer resolution to 800x600 and check it out. If the bottom scroll bar appears but only slightly, fine. If your content is off the screen then go back to the drawing board! I will show you later how to make your page grow or shrink to the users screen as well as make it tuck away neatly down the middle using tables or CSS.
Most importantly - Clean, simple and neat! Look at Google. What a boring looking page but oh how popular Google is! Normally people are in a rush no matter what. Get your point across first, then have some fun!

Step 2: Lets Make a Nice Page!

(preview it)

Start by pasting this code into my Live Page Builder or notepad:

<!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>My First Design</title>
</head>
<body>



</body>
</html>

Now get into the habit of saving your work religiously!

Create a folder on your desktop and call it root (or anything you want)
Inside of root create another folder and call it images
Now download these IMAGES to the folder named images
Go to the folder and double click the self extracting file named images.exe, this will extract the pictures to your images folder
Now select all (ctrl+a) the code from the page builder > Copy (ctrl+c) and paste (ctrl+v) into notepad ( PC | Start > Programs > Accessories > NotePad )
Now save as index.html inside of the folder root

Step 3: Now It Gets Fun!

Change: <body> to:
<BODY background="images/bg_grad.jpg" text="black" link="#660000" vlink="#660000" alink="red">

This sets a gradient background image (the file is in your "images" folder), uses black text, makes the links on the page a dark red, makes the visited links the same color and the active link red.

Now paste this code under the <--Start your work here --> tag:

<TABLE BORDER="0" CELLPADDING="10" CELLSPACING="0" WIDTH="640" BGCOLOR="#ffffff" align="center">
<TR>
<TD align="left" bgcolor="#6a0909" valign="middle" width="70%">
My First page 
</td>
<td align="center" valign="top" bgcolor="white" width="30%"><img src="images/palmtree.gif"></TD>
</TR>
</TABLE>

Explanation -
<TABLE> Starts a table. When you place the following inside of that tag it tells the table how to take form: BORDER: Sets width of border around table cells. CELLPADING: Sets amount of space between a cell's border and its contents. CELLSPACING: Sets amount of space between table cells. WIDTH: Sets width of table in pixels or as a percentage of document width. BGCOLOR: Sets Background color inside the table. and ALIGN: Sets alignment (left, center, or right)
<TR> Sets off each row in a table
<TD> Sets off each cell in a row, you can have several cells.
Tells the to go bold, then after your info close the tag followed by closing the tag and close the cell with </TD>
<TD> Starts a new cell in tha same row
<img src=> Inserts a picture the close the cell with </TD>
Now close the row with </TR> and finaly the table with </TABLE>

Now paste this code right under the </TABLE> tag at the end of the code you just made:

<TABLE BORDER="0" CELLPADDING="10" CELLSPACING="0" WIDTH="640" align="center">
<TR>
<TD align="left" valign="middle" width="70%">
<center>You can make a catchy tag line here...</center>
</TD></TR>
</TABLE>

Explanation - Just like aboove, we make another table to go under the first one. Notice the use of percentages for cell width.

Step 4: Now It Gets Fun! (continued)

Now paste this code right under the </TABLE> at the end of the code you just pasted:

<TABLE BORDER="0" CELLPADDING="20" CELLSPACING="0" WIDTH="640" BGCOLOR="#ffffff" align="center">
<tr><td width="70%" bgcolor="#ffffff" valign="top">
<h3>A Catchy Heading</h3>
<a href="#"><img src="images/brush.gif" border="0" width="78" height="150" align="right"></a>
 
<a href="#">Make this Link Somewhere</a> * "HTML Inc" was created with the beginning and advanced Web Designer in mind. You will find all sorts of cool html codes here. I am also working on a Myspace html codes page for all you livejournal html users. You will see it really is easy to learn html. I will have an html tutorial for most any html project. Html help is finally here without the endless pages of useless techno knowledge to filter out. Best of all, there are no pop ups or forced logins and subscriptions.
<a href="#"><img src="images/swipe.gif" border="0" width="62" height="150" align="left"></a>
<a href="#">Make this Link Somewhere</a> * "HTML Inc" was created with the beginning and advanced Web Designer in mind. You will find all sorts of cool html codes here. I am also working on a Myspace html codes page for all you livejournal html users. You will see it really is easy to learn html. I will have an html tutorial for most any html project. Html help is finally here without the endless pages of useless techno knowledge to filter out. Best of all, there are no pop ups or forced logins and subscriptions.
 
<a href="#"><img src="images/splat.gif" border="0" width="150" height="123" align="right"></a>
<a href="#">Make this Link Somewhere</a> * "HTML Inc" was created with the beginning and advanced Web Designer in mind. You will find all sorts of cool html codes here. I am also working on a Myspace html codes page for all you livejournal html users. You will see it really is easy to learn html. I will have an html tutorial for most any html project. Html help is finally here without the endless pages of useless techno knowledge to filter out. Best of all, there are no pop ups or forced logins and subscriptions.
</td>
<td width="30%" bgcolor="#6a0909" valign="top" align=left>
* <a href="#">Your Link</a> 
* <a href="#">Your Link</a> 
* <a href="#">Your Link</a> 
* <a href="#">Your Link</a> 
* <a href="#">Your Link</a> 
* <a href="#">Your Link</a> 
* <a href="#">Your Link</a> 
* <a href="#">Your Link</a> 
</td>
</tr></table>

DON'T FORGET TO SAVE YOUR WORK!

Explanation - It may look overwhelming because of all the text but it really is simple if you go over it slowly.
Most of the code just repeats itself. The <H3> tag is for a heading. The <img src="YOUR LINK TO OR LOCAL PIC LOCATION HERE"> is a an easy way to put your pictures up. The <a href=" YOUR LINK HERE"> is simply a tag for your links. tags will make the text move to the next line below.
All of the tags above are on the HTML Code Page. Spend plenty of time on the Live Page Builder using HTML Code. It may not make perfect sense now, however after you build and disassemble the practice page it will come to you. I would go into step by step instructions for each line of text but that takes away from the "To The Point" lessons. If I get enough requests I will make simplified versions of the lessons I go over. :)

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