Join the largest affiliate network. It's free, it's easy.

Introduction

If you remain mystified at just how HTML works and want to see that, in all honesty, it is a very simple concept ... read on!

This is not to say or even imply that all web designers and web programmers are full of BS. Only some are! The level of expectation for how complex the imagery and coding for a web site today needs to be is growing constantly. A good site requires a large amount of skilled effort in many disciplines and a great site can definitely be considered a work of art. Design, writing, image production, coding, scripting and server technologies are all needed to bring us a rich and diverse WWW that we often take for granted. But, at it heart lies a very simple and elegant core concept.

How HTML Works

All HTML files are simple text files and can be created with the most basic text editors such as TextEdit (Macintosh) or Notepad (Windows). HTML has evolved to include more complex and useful page layout elements such as Tables, Frames, Layers and Cascading Style Sheets but the underlying structure remains as simple as the original HTML specifications. These specifications allowed documents to be transmitted quickly across the Internet and provided cross platform compatibility.

The basic HTML structure consists of "Tags" that are understood by a web browser which renders the HTML text file into the desired format of its author. For the sake of basic understanding, it is fair to say that HTML Tags have an open and a close. All text between the Open and the Closing tag is given the prescribed format by the browser.

An HTML tag simply consists of a predefined command surrounded by the characters < and >. Perhaps the simplest tag creates bold text and is formed as follows:

The text within <B>the bold tags</B> becomes bold!

A web browser understands that everything between <B> and </B> should be bold text and renders the sentence like this:

The text within the bold tags becomes bold!

Within the simple construction of using "tags", the meaning of Hyper Text Markup Language (HTML) can be seen. Documents that include such tags are "marked up" and will be understood accordingly by any well written browser program.

If you want to try this out, you should start your text file with the following:

<HTML>
<BODY>

Then type anything you like to test out the tag for Bold and use some other common tags like "I" for italic and "P" to start a new paragraph (within the < and > of course).

To make a link to another file, try this:

<A HREF="http://www.notamall.com">Link to NotAMall</A>

viewed in a browser that will be:

Link to NotAMall

Thus, the "A" tag is the linking tag and the HREF= part is the property of the link that tells it where to go. The URL is written between simple quotes (not curly quotes though " or ' will work) with whatever text you like in between the tags.

To make your text display in a particular font and size, try this:

<FONT FACE="Courier, Courier New" SIZE="3">Some <B>text</B> between.</FONT>

This will look like this:

Some text between.

I have indicated Courier because this page uses Verdana and it might be hard to see the result but any font on your system can be called this way. Just note that a font that is ONLY on your system will not display on someone else's computer if the page were actually posted to a web server. The second font indication for Courier New shows that you can specify an alternate font (or several fonts) that will show if the first font is not available on a particular computer. You'll also note that I made the word "text" bold to show how tags can be "nested" to create a wide variety of formatting options ... all with very simply tags!

Last, be sure to close your page with ... surprise:

</BODY>
</HTML>

And there you have a simple HTML file that you can drag and drop onto a browser window or open from the browser's File menu.

Please note that this is a very basic explanation using conventions that are now being superseded with other tags that are intended to function better in a more complex XML compliant world that is fast upon us. But, the principles remain the same and the tags still work just fine.

Here is a completed sample of the code just described ... all in one place:

<HTML>
<BODY>
<FONT FACE="Courier, Courier New" SIZE="3">
<P>Thanks <A HREF="http://www.notamall.com">NotAMall</A>.</P>
<P>This <B>web business</B> isn't <i>very</i> hard!</P>
</FONT>
</BODY>
</HTML>

Which should look like this:

Thanks NotAMall.

This web business isn't very hard!

The Role of the Web Browser

So an HTML file is actually a very simple document, at least in concept. Regardless of how simple or complex a particular HTML file is, a web browser is required to view it properly and interpret all of the tags correctly. The HTML protocol and code standards for the Internet was developed with the idea that such standards needed to be agreed upon to keep the Internet open to improvements by all interested developers as well as to keep it from becoming the proprietary property of any one company.

The open nature of the Internet has allowed tremendous development and innovation by untold numbers, individuals and companies alike. However producing and improving web browser software has been a huge struggle. Every time someone seems to have won the "browser war" they also seem to lose just a quickly. Upon the release of the version 3 Netscape browser, (this was a number of years ago now) the company decided to start charging what they considered a modest fee for the right to use their software. Microsoft seized upon this opportunity and quickly released their Internet Explorer software without charge. In fact it was also bundled into the system software with new sales of the Windows operating system. The first "IE" release was truly a terrible product compared to the well developed Netscape browser at the time but free is free. Netscape started to quickly lose its share of the market (albeit a market of free products) and never recovered.

At the moment, the Netscape browser (despite all of its' contributions to the development of the Internet, is fundamentally dead. You can still use the last released version for your platform but shortly after purchasing the Netscape company, AOL terminated development of its browser software. For the Windows and even the Mac platforms, Microsoft's Internet Explorer had apparently won the war. Opera has produced a decent browser for some time but, as with Netscape before, the company charges for their software (a version with a banner ad space at the top is free but obnoxious) and free is free. Also, the newest users and most businesses simply use what comes out of the box. And IE was coming out of the boxes whether you bought a Mac or a PC.

But no! Like the battles in a military war, nothing remains static for long. Apple's development of the OS X operating system and subsequent entry to the Browser Wars with the Safari browser (a very capable first version for the Mac platform) prompted a petulant tone from Microsoft and the closing down of their Mac IE division. And, Mozilla has now released their version 1.0 of the Firefox browser for both Mac and Windows platforms. It too is a very solid piece of software and, based upon website logs, is getting considerable use, much to the detriment of Internet Explorer.

For developers and web authors, small and large, the work of making sites that are compatible with so many browsers can be tedious and costly. But Mozilla and Apple have paid good attention to the standards enough that they are not as difficult to adapt to as IE has been on occasion. For general coding, what works in IE tends to be OK in the others ... as long as it isn't prepared by a Microsoft editor. Then, all bets are off and only IE may render everything well.

 

Home | Store | About | Privacy | Newsletter | Contact | all content ©2004-2006 NightShade Media, Inc.