HTML for Beginners

In order to get a browser to display formatted text, you must include in the text some HTML tags so that the browser knows what to do with the information you are feeding it. This isn't a long winded tutorial about all the tags that make up the HTML language or a definition of a web page. It is a concise set of simple tags to get you started building simple HTML documents.

There are only a few tags that you need to know to get a nicely formatted page with a browser. Some tags are structural while others are for formatting. Structural tags allow a browser to track where it is in a document and formatting tags are simple instructions such as bold text, etc. To get started, lets first take a look at what a "tag" is.

An HTML document, then, is a very simple concept. It consists of opening and closing tags, and some of the tags are in a very particular order. For instance, a complete HTML document can be constructed using the following set of tags:

<html>
  <head>
    <title> This Is The Title of My Document </title>
  </head>
  <body>
    <p> This is the first paragraph of my document. </p>
  </body>
</html>

Here is a description of what these tags are telling the browser as it parses through the HTML document:

<html>	This is a document that is composed of standard HTML. (Notice that the very last tag is a closing tag for the HTML element and it is letting the browser know when it is finished reading the entire document.)
<head>	Here is the start of the document header information. (Notice that the header information contains the document title, which is what the browser uses to display in the title bar of a browser window. The browser window is the very top bar of a browser. We say the head contains the title because if you notice where the end head tag is, it encloses the title tag.)
<title>	Use the content from this tag to display in the browser's title bar.
</title>	End of the title tag content.
</head>	End of the document header.
<body>	Start processing document content. Everything that follows is to be displayed in the content window of the browser.
<p>	Start of a paragraph. Since there is no style sheet defined and no inline formatting for this paragraph, use the browser default formatting for a paragraph.
</p>	End of paragraph content.
</body>	End of document body.
</html>	End of document.

Every HTML document, no matter how complex, started out with these tags shown above and occur in the document in the order shown. In the deeper levels of the body tag, tags such as paragraphs, lists, quotes, tables, etc., can occur in any order.

You don't need a hosting account or a web server to test your HTML documents. All you need is a browser and a text editor. Here are the steps for creating and testing web pages on your local PC:

Find a text editor on your PC such as Notepad. If you can't find Notepad, download and install my favorite programmer's editor.
Create a new text file and enter the codes exactly as shown above. Use indentation so you can clearly see how the tags are nested.
Save the text file with a name such as firstpage.html (the extension is important so use .html or .htm) some place where you'll be able to find it.
Open your browser (such as Internet Explorer or Firefox) and click the File menu option and then the Open File option, which will pop up a dialog box for navigating your PC. Locate the firstpage.html file, double click to load it, and you'll see that the browser will display the codes above into a nicely formatted webpage for you.

Now all you have to do is switch back and forth from the text editor and the browser to add more codes and test the page by refreshing the browser (the browser has to reload the page to show any changes you've made). Using this technique, of course, is for your eyes only. No one has access to pages on your local PC except you. To make your pages public, you will need to register a domain name, buy hosting with Orangetree Internet or your preferred hosting service, and use an FTP program to upload your pages to your hosting account. Only then will your pages be publicly accessible.