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.

Thursday, September 3, 2009

HTML Primer Part One

What Every Web Site Owner Should Know

OK, SO WHAT THE HECK IS HTML ANYWAY?

The basic language of the web is something known as HTML. It is the format in which instructions are sent over the Internet. HTML provides us with a light, flexible language that allows us to transmit large amounts of information effectively and efficiently.

It is due to HTML that different types of computers and operating systems can all read the same Web pages and communicate with each other effectively well actually, there is a lot more to it all then just plain HTML, but for the average Web site owner, you will not be expected to know about the nuts and bolts of Web development. For your purposes suffice to say; HTML allows any computer with an appropriate browser to surf the net.

It is not imperative that you know HTML, but it can help you communicate with your Webmaster. For this purpose, you should probably read this chapter. However, if techno speak makes your hands sweat, or you already know HTML, then it is safe to skip this chapter...

HTML stands for Hypertext Markup Language. Although similar, HTML is not actually a programming language. It is much, much simpler. Comparing HTML to a programming language is like comparing a soap box racer to a Porsche... A fully fledged programming language is capable of doing much, much more than basic HTML.

HTML is a set of tags that modifies text. In simpler terms, HTML is basically a set of instructions that tells browsers how to assemble the Web page.

An HTML file is simply a plain text file that is saved with an .htm or .html file extension. In addition to the plain text, the .htm file contains the HTML tags I mentioned earlier. When your browser receives the .htm page it interprets the tags and formats the text accordingly.

This is accomplished by enclosing HTML tags in angle brackets. This way the browser “knows” that anything enclosed in angle brackets is an HTML tag. For example <b> is the HTML tag that instructs the browser to bold the text that follows it. An angle bracket followed by a slash would signify the end of a tag. Therefore the text that is in between becomes a modified by that particular tag.

Clear as mud? OK here’s an example:


You see this:

The quick brown fox jumped over the lazy dog.

If this text were displayed formatted as it is above in a browser, the source code would look like this:

The quick brown fox jumped over the lazy dog.

Easy right?


There are tags that format text, others that allow you to add images, tables, lists and structural elements and still more that allow you to add more powerful scripting language and other elements to your website. Even so, it all boils down to using tags to markup text.

So you see it’s really quite easy. Fortunately, you are a website owner and not a website developer. So you don’t have to know everything there is to know about the HTML, just the basics. In other words; you don’t have to know HTML, you just have to know about HTML. If you take the time to learn a little bitmore than you need to know, then you are really ahead of the game.

This chapter will explore basic HTML and I will provide an appendix at the end of this book of basic HTML tags. Most of them are relatively self explanatory and you will know what they mean right when see them, but a good “Short List” of common HTML tags can really come in handy.

Continued in Part Two...