Tuesday, September 8, 2009

An HTML Primer Part 02

What Every Web Site Owner Should Know

An HTML Primer Part 02
(Part One Here)


So let’s take a more detailed look shall we? Now that you see just how simple HTML really is let’s take a look at a basic HTML page.

As you’ve just learned an HTML page is nothing more than simple text modified by various tags set in angle brackets. Although it is not always necessary, it is good form to begin any HTML page with the HTML tag and end the page with the closing HTML tag.


So it should look like this:

<html>

This would be the entire content of your page.

</html>


Obviously, a little bit more than the above code makes up your average web page. The HTML tag at the beginning of the page is important because it helps the browser to understand what language the page is written in (HTML pages can have several other languages included as well). Usually, in a simple HTML page the head tag would follow the HTML tag. Inside of that head tag you will in most cases find a title tag. The title tag is the tag that controls the text that is at the very top of the browser when you open it. There may be some other code nested in the head tag, but we won’t be concerned with that now.


Here is an example of the code:

<html>
<head>
<title> my very first web page</title>
</head>
</html>



See now, it’s easier than it looks, isn’t it? The above code will produce a blank web page titled my very first web page. I am guessing however, you already figured this out.

Before I continue, I would like to reiterate; you do not have to remember all of this. This information is just to give you an understanding of what HTML is and how web pages work. Besides I have included the handy list of common HTML tags at the end of the book...


Of course, now that you know how simple it is, you may want to experiment with it. You do not even have to buy anything. HTML can be written in any text editor. It simply has to be saved as either an .htm or an .html file.


Let’s take a further look at this. The following code will render a very simple web page. As we continue to add different elements I will explain exactly what’s happening. First we will start with the code that we used above and add to it. To actually add content, we will need to add a body tag. The body tag will contain your content (no surprises here...). It tells the browser that the following content is to be displayed.


Open Notepad (or any basic text editor) type the following:

<html>
<head>
<title>
my very first web page
</title>
</head>
<body>
This is my first web page.
<p>
<b>This text is bold.</b>
</body>
</html>


Now, in your text editor (Notepad for example) click “File” and then “save as.”

Next, Name your file: “first.HTM”. Make sure to include the quotation marks.

Before you click “Save”, click the arrow next to the "Save as Type" field and select “All Files”.


This is an important step, if you do not select “All Files” as the file type, your file will be named first.htm.txt. This is a problem because the computer uses the letters after the dot (known as the file extension) to determine which program to use to open the file. So if the computer sees a .txt at the end it knows your file is a text file and will use your default text editor to open it. However, if the file has .htm or .html as the file extension, the computer will use a browser to open it. In fact, the reason you should put the file name in quotations when you save is; just in case you forget to set the file type to “all”. If the filename is in quotes, then it will save it exactly as typed regardless.


Congratulations, you have made a working web page.


Conclusion:


HTML is much simpler than you may have thought. It is something that you can probably learn to do quite well if you put your mind to it. Even though there are many expensive programs designed for professionals, all you need is a simple free text editor to get started. There are many tools on the web as well. You can find links to many at www.EverMoreTech.com. We will take a deeper look into HTML later on in the book and you can always stop my Website if you would like a more in depth hands on tutorial.