Learn Basic HTML

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 going to be a long winded tutorial about all the tags that make up the HTML language, but rather a consise set of simple tags to get you started. If you view the source of most pages on the internet today, you can easily get overwhelmed with the complexity. Therefore, I'm going to conform to the KISS principle in what follows.

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 bolding text, etc. To get started, lets first take a look at what a "tag" is.

A tag (HTML or XHTML) is basically a keyword wrapped in an opening and closing "angle bracket". An opening "angle bracket" is the "less than" symbol on your keyboard. The closing "angle bracket" is the "greater than" symbol on your keyboard. Therefore, to represent the HTML tag (the very first tag that should appear in your HTML document), we would compose it as:

open bracket + keyword + closing bracket = <html> (this will be the very first tag in our new HTML document which we will actually compose later)

Many people refer to these tags as "codes". Maybe it sounds more intelligent than "tag", but, they are simply "tags", nothing more, and nothing less.

HTML, then, simply consists of opening and closing tags. Most tags have both an opening version and a closing version. The opening tag denotes the start of something and the ending tag denotes the end of something (either text or another set of tags). The closing version of the <html> tag, then, is represented as </html>. Notice the "forward slash" inside the tag. The "forward slash" is an instruction to the browser that you are closing something.

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 is represented by 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>

Using the tags above, here is a description of what you are telling the browser:

<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 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> Take the text between the start title tag and the end title tag and display it in the browser window's title bar.

</title> This is the end of the text to display in the browser's title bar.

</head> This is now the end of the head tag.

<body> We are now starting the body tag. Everything that follows is to be displayed in the content window of the browser.

<p> The body contains a paragraph. Since there is no style sheet and no inline formatting for this paragraph, use the browser default formatting for a paragraph.

</p> This is the end of the text to display as a paragraph.

</body> We are now at the end of the body.

</html> That is all. You have reached the end of this html document.

Pretty simple, huh? Every HTML document consists of these tags and specific tags occur in the document in a specific order because they are structural (represent the structure of an HTML document). In the deeper levels of the body tag, tags such as paragraphs, lists, quotes, and such can occur in any order but we'll leave that for another tutorial.

Practice

Now, launch your text editor and manually key in the tags exactly as shown above in the text file example. Save the file into your local web site folder and name it index.html.

Use your FTP program to upload your new html file into your hosting account. When you are ready, launch your browser and in the URL field, enter http://mysite.orangetreeweb.com, but replace "mysite" with the name of your own account that was assigned when you registered. When you visit your site, you should see your first page with the title in the title bar of your browser and the paragraph you created in the browser window.

Note: Try nesting your html tags in your text editor so you clearly see when tags are inside of another tag. For instance, the html start tag and the html end tag should be at the very left, both the start and end head tag should be indented, the start and end title tag should be indented further than the head, etc. Indenting helps you to keep the tags straight in your mind, the document structure clear, and helps prevent you from forgetting to enter the closing tags. Also, don't be afraid to add extra line spacing between tags — browsers know how to ignore extraneous white space.

Some questions submitted:

Is the case of the tags important? The case of the tags is not important when using standard HTML. Either upper or lower case tag names are ok to use. However, eventually these tutorials will be directed more towards XHTML, which is the latest generation of HTML and the case of the tags is important. To prepare yourself for XHTML, always use lower case tag names.

Do I key the "Example Text File" characters in my HTML document? Your HTML document should consist only of everything between the start HTML tag and the closing HTML tag. In later tutorials I will shade all the text that should appear in your document.

Comments?

Back To: How To Build A Website

Want to start a work-from-home business? Make it a Successful One!