Web Sites 101 For Beginners: It is sometimes hard for a person to know where to start when studying a new subject. Web page design is simple, yet complex which makes it especially hard to find the starting point. The simple part is that the basics are just that, very simple and basic. The hard part is that there are so many branches off of the basics that it is easy to get side tracked following winding roads that are confusing and baffling to a beginner. The most important thing to know, as a beginner, is to stay focused and stick to the basics. In all likely hood, in the beginning, it won't matter to you if a hosting service is Linux, Apache, or whatever or whether or not the service has a cgi bin - at this point you wouldn't even know what to put in a cgi bin - so just learn the basics right now.

Here are the basics:

Free Web Site Hosting: For a beginner, free web site hosting is a wonderful service. These free hosting sites have expenses to cover and therefore many of them add advertising banners to people's free web sites, but that is a very small price to pay for the help they offer. Not only do you get free web hosting, but these free hosting services are often chocked full of free help. If you hope to someday have a web site without advertising banners, don't worry a second, some of the free hosting services will let you upgrade to a banner-free web site for a normal hosting fee. Also, once you know how to up load a web site, it only takes a few minutes to move a web site from one hosting service to another.

Some free hosting sites that have been around for a while.

Tripod
http://www.tripod.lycos.com/

We b Site Hosting: There are thousands of web hosting services. It is not necessary that these companies be physically located anywhere near you - across the street or across the country, it doesn't matter. Hosting companies come in all shapes and sizes, but when you learn about them you will find out that expensive is not better, just more expensive. This site is hosted on GoDaddy it is a reliable and inexpensive hosting and domain name service. They have a great telephone support service if you need help.

http://www.theinfopond.info

GoDaddy also allows people to resell their services and they, GoDaddy, do all the work and customer support, you just provide the referral.

http://www.theinfopond.biz

Web Site Add Ons: There is a ton of information and services that can be added to a web site to give it interest. Plenty of these add-ons are free services and range from things such as word-of-the-day type services to functional services such as hit counters to tell you how many people have visited your web site.

Web Scripts: The text and formulas that perform functions or produce effects on a web site such as hit counters, log-ins, flashing text, changing pictures, shopping carts and so on are the result of scripts. Scripts are bits of words and/or formulas that basically say "if this then that" (that is really over-simplified, of course).

HTML For Beginners: There are many HTML editor programs available; two of the most popular are Dreamweaver and FrontPage. This web site was created with Dreamweaver. However, I would recommend that a beginner learn the basics of HTML before attempting these great, but advanced software programs. These advanced HTML software programs allow for some very handy features such as template areas that allow you to make changes to a template page and then update that change to all of the pages linked as a site unit to that template. It also enables the webpage master to use a CCS (cascading style sheet) to make text style changes to an entire site with a simple change to the CCS sheet.

Software programs that let you pretty much see what a page will look like as you work on it, rather than seeing the code, are WYSIWYG (what-you-see-is-what-you-get) HTML editors (software program that writes the code for you as you type and select colors, etc. The better programs will let you switch to code view for hand editing as needed,

In my humble opinion the greatest, simple HTML editor for beginners was Claris Home Page, but it is no longer being produced. It is still being sold used on sites like eBay, but it requires an older operating system, for a Macintosh is requires OS9 or lower. If you have MS Office, the "Word" program has a basic HTML editor.

The outline or skeleton for a HTML page is this simple.

<html>
<head>
<title>Untitled Document</title>
</head>
<body>Your Page Content </body>
</html>

Between <title> and </title> is where the title of each page goes, the title is what appears at the top of a page when is shows up in a web browser window. In the code above, "Untitled Document" would be changed to whatever the page title would be.

For the beginner, everything you want to say (words and pictures) goes between the <body> and </body> tags.

In a more advanced page, in the head section would be Meta tags (some people still use them), some CSS, Java, or perl instructions and more, but none of that is required for a basic, functional web page. Just what is above will create a web page, but to give a web page color and design requires some additional simple coding that we will get to in a moment.

Almost every tag requires an on <?> and an off </?> set of brackets (the question mark is where the HTML code words go); notice the slash mark in the second set of brackets, that is the off signal. For beginners, just use on and off tags for everything. While you can use capitals in HTML, get used to using lower case only as some things are case sensitive.

Each area of your content is separated with a <p> paragraph marker (leaves a blank line before the next section). If you do not want a whole empty line, use a <br> break marker (starts the next section right under the previous section). While these markers will work without an off bracket, just get in the habit of closing all code tags.

For simplicity, in the first few examples below not everything is coded such as font face and size so they would just default to the browsers default settings.

<html>
<head>
<title>Untitled Document</title>
</head>
<body><p>Your page content.</p><p> The next section.</p> </body>
</html>

Would look like:

<html>
<head>
<title>Untitled Document</title>
</head>
<body><p>Your page content.<br> The next section.</br> </p> </body>
</html>

Would look like:

Text Coding:

<b>bold</b>
<i>italic</i>
<u>underline</u>
font size="18pixels" (can also be in points, picas, etc.)
font size="2" (+1,+2,+3,+4,-1,-2,-3)
<font color="#ff0000">red</font>
<font color="red">red<font/>

Basic colors can be spelled out such as red, blue, green, yellow, white, black, purple, orange. All colors can be written as a set of six digit numbers and/or letters with quotation marks and a # sign before the digits. "#ffffff" would be white and "#000000" would be black and so on.

This is what the above code would look like in a browser window.

<html>
<head>
<title>Untitled Document</title>
</head>
<body><p><font color=blue>Your page content.</font><br>
<font size=24pixels> The next section.</font></p></body>
</html>

(The </font> turns off any and all font attributes.)

Would look like:

Your page content.
The next section.

The background color of a page or table (tables will be discussed later) is similar to a font color. Note that a page background color is added to the body tag.

<bg color="#ff9900">

<bg color=orange>

<html>
<head>
<title>Untitled Document</title>
</head>
<body bgcolor="#ff9900"><font color="#003300"><p>Your page content.</p>
<p> The next section.</p></font></body>
</html>

Notice how the code is nested inside each other:

<bg color><font color><p> then in reverse </p></font></bg color>

Would create a page with an orange background.

HTML coding is a bit confusing as to the breaks between the code.

It is not necessary to put a space between the bracket sets or the brackets and the content text as it starts or ends.

example: <p><i>The text.</i></p>

It is necessary to use spaces between separate code words such as:

font color or bg color
also the normal spaces you would use in the words of your content.

But colors and font info are a combination of spaces and no spaces.

bg color="#ff0000" (There is a space between "bg" and "color" only.)

font color=red (There is a space between "font" and "color" only.)

One of the most important aspects of designing a web page with HTML is the use of tables. It doesn't sound very important, but it this page is made up of around ten tables and close to a hundred cell within these tables. You see, unlike a page layout program, the only way to "put" pictures or groups of text in specific places on a page is to create a tables. For instance, if you want three columns, such as this page, you need to create a table, but a table must have at least on row, and each row must have at least on cell.

To make a simply table with three columns, you would make a table with one row and three cells (columns). HTML requires that you have a "tr" row for every group of "td's" cells.

<table>
<tr>
<td>&nbsp; </td>
<td>&nbsp; </td>
<td>&nbsp;</td>
</tr>
</table>

Remember to turn-off each action.

Table is - table
Row is - tr
Cell is - td

Note the   in each cell content area, this is the special character notation for a none-breaking/empty space. If there is nothing in a cell it will tend to collapse. To place text or pictures in these cells, you would replace the   with your content.

The code for a simple table at 100% width, with a 5 pixel border, each cell at 33%, and with centered text in the middle cell:

<table width="100%" border="5">
<tr>
<td width="33%">&nbsp;</td>
<td width="33%"><p align="center">Simple Table</td>
<td width="33%">&nbsp;</td>
</tr>
</table>

To put together what has been covered, here is a simple web page.

Here is the code for the sample web page above table.

The blank lines between code lines below are not necessary, they are used here to make it easier to spot the different code groups. Also notice in the case of the copyright symbol that special characters require special code.

<html>
<head>
<title>Untitled Document</title>
</head>

<body>

<p>&nbsp;</p>
<p align="center"><font face="times new roman" size="+1" font color="#003300">Web Page Sample!</font></p>

<p><font face="times new roman" size="+1" font color="#003300"> Here is a very simple web page.<br>Complete with a table.</br></font></p>

<table width="100%" border="2" bgcolor="#ff9900">

<tr>
<td width="33%">&nbsp;</td>
<td width="33%" bgcolor="#FFCC66"><p align="center"> <font face="times new roman" size="+1" font color="#ff0000">Simple Table</font></p></td>
<td width="33%">&nbsp;</td>
</tr>

<tr>
<td width="33%"><font face="Verdana" size="+2" font color="#ffffff">Different Type Style</font>
</p></font></td>
<td width="33%">&nbsp;</td>
<td width="33%">&nbsp;</td>
</tr>

<tr>
<td width="33%">&nbsp;</td>
<td width="33%" colspan="2"><font face="times new roman size="+1" font color="0000ff">Notice that with the span code you can merge cells.</span></font></td></tr>

</table>

<p><font face="times new roman" size="+1" font color="#ff0000">&copy;TheInfoPond.com</font></p>

</body>
</html>

This HTML information is only meant to be a starting point, to show that it can be learned if you have an interest. There is much to learn about tables, it takes some practice to understand how to effectively use them. There are also codes for creating lists, for indenting text and more. If this article has sparked your interest, there are tons of articles and books on the subject. Bigger is not necessarily better; a small, easy-to-read book or article might be best to start.

The main reason to know a little HTML is that if you use a HTML editor and you are having a problem with something not working properly, with HTML knowledge you can switch from design view (WYSIWYG) to the code view (the HTML code) and maybe figure out the problem.

Some helpful web design web sites:

Web Source has a very helpful list of HTML Code.
Click Here! "Your Guide to Professional Web Site Design and Development."
In the small links click on "HTML Code" and it will take you to a long page of HTML.

Webmonkey
http://build.tripod.lycos.com/tools/script_library/index.html

Many web hosting sites also sport on line WYSIWYG HTML editors included free with their web hosting packages.

GoDaddy Web Hosting with HTML editor.