Step 3

In Building a Good Website

Learn HTML the Easy Way

Use html editors and resources without having to learn code!

"HTML" is the computer code language which is used to build web pages. There is an easy way to learn how to use HTML. And yes, you do have to become comfortable with it. Don't believe anyone who tells you otherwise, but also, don't be intimidated by it!

There are great resources available now for understanding and using html. You just have to know how to use them effectively.

First of all. Take a look at what HTML looks like. Set your mouse cursor onto the middle of this page. Then "right click" it and choose the "source" or "view source" option ( depending on the browser you are using). If Internet Explorer asks you what program to open to view your selection, just use the "notepad" option. That bunch of gobbledygook is mostly HTML code.

HTML Code is just a way for the website to tell your computer what to place where. And what everything should look like. There are only a few little rules you need to be aware of. Everything else can be done using a free html editor which will take what you have typed and add the appropriate code instructions.

Warning!  Do not skip reading the rest of this article. You may be thinking " Yeah yeah, I got it...time to move on.". Read the rest of this article, even though it sounds like I'm making things so simple you are bored to death. This will prevent some head butting in the future.

You need to know how to read, edit and manipulate html, even if you are using an HTML Code Editor. There are several reasons for this:

• HTML Editors are programs designed by computer geeks. Each one has its own little quirks. Even though they all claim to be WYSIWYG ( what you see is what you get), you will eventually find that what looks great in one browser looks like a dogs breakfast in another.
• You will eventually want to insert something on your web page, like a banner, or a special link. The instructions will just tell you to " insert this code" onto your website. They won't tell you how!
• Sometimes you will be given some code which has been sloppily written. You cut and paste it carefully but it fails over and over again. The reason can be something as simple as an extra space in the code, or a bracket that got cut off in the pasting. Easy to see, if you know what to look for.

A list of the common tags you will find is located at

http://www.w3schools.com/tags/default.asp

Notice that things seem to be quite common sense. For instance a paragraph is coded using a "p". The individual code instructions begin with a "<" symbol, and end with a ">" symbol. That's it! sort of....

Obviously there are a bunch of little technicalities. You can go to www.w3.org to eavesdrop on the evolution of html, if you are inclined.

I'll just point out one of the biggest trouble html tags I have found.

 It is the(& nbsp )  No Breaking Space. 

If you use the space bar instead of the enter key to move to a new line, you may have a web page looking like a Picasso painting.  If you are having problems with your page, look at your html source for a bunch of that code all stringed together.

OK Now it is time to practice.

Download a free html editor.

Here are two free HTML editors:

• Komposer is the most popular free html editor. It is an evolution of the NVU open source program and built using the W3 standard. It also has the advantage of being able to publish your pages to your web server.
• Open Office is a great way to create html documents. This way you have the advantage of using a whole office suite and creating web content. Here are the instructions from the manualSaving Text Documents in HTML Format:

"You can save a OpenOffice.org Writer document in HTML format, so that you can view it in a web browser. If you want, you can associate a page break with a specific heading paragraph style to generate a separate HTML page each time the style appears in the document. OpenOffice.org Writer automatically creates a page containing hyperlinks to each of these pages.

• When you save a text document in HTML format, any graphics in the document are saved in JPEG format. The name of the HTML document is added as a prefix to the name of the graphic file. The JPEG images are saved in the same folder as the HTML document and are referenced with tags in the HTML code.

  1. Apply one of the default OpenOffice.org heading paragraph styles, for example, "Heading 1", to the paragraphs where you want to generate a new HTML page.

  2. Choose File - Send - Create HTML Document.

  3. In the Styles box, select the paragraph style that you want to use to generate a new HTML page.

  4. Enter a path and a name for the HTML document, and then click Save."

Note: You will notice that I don't recommend MS Word. Microsoft has extra code in Word which makes it a pain in the rear to put on the web. At least this has been my experience, and you will notice that most html programs have little warnings about using MS Word to produce content.

Now fool around and add some text in the editor. 

Try adding a picture you have hanging around your computer. Then check out the html conversion. This is a better way to get used to html than by trying to read some code written by someone else. You have fresh memories of what you did when you put in the data. ( don't get lazy and cut and paste)

Notice that you can figure out just where you want to add content in the html version of your content. All you have to do is read the text, and then add more text before the "p>" tag. And if you want to add a picture or some other code, you can add it anywhere after the "p>" tags.

Simple EH?

Now you can start building a way to earn money with your websites, by turning code like this:

( Don't bother clicking on any part of this code. I've disabled the link.)
 <a href=link disabledL ksynergy.com/fs-bin/stat?id=cKwlNKo&offerid=7097.10000054&subid=0&type=4"><IMG border="0"   alt="LinkShare  Referral  Prg" src=" http:/ad.linksynergy.com/fs-bin/show?id=&bids=link disabled&subid=0&type=4&gridnum=1"></a>

 Into banners like this:

 (You can click on the banner)

It is just a matter of signing up for an account and then pasting code into the right place on your web page.  See those arrows? "< & >"?  All I did was find the right spot between the <p>'s. 

 A big part of working with html is just getting used to it and not to be intimidated by it.  Now that you are familiar with how the code works, you are ready to build web pages and upload them to a host.

That will be the next step.......