Quick start-up guide for HTML newcomers - Webmaster Forums UK SEO SEM Webmaster Community Forum

#1 (**permalink**) 02-03-2004, 01:01 PM

Foreword
This mini-tutorial is intended to get you started in writing HTML documents. It does not cover *all* the areas of HTML as a language, nor it's intended to do so. It contains some basic information that you will need in order to start writing your own HTML webpages. HTML is an easy to learn language, but it contains a considerably large set of language-specific elements that do not make the subject of this tutorial. I will, however, provide some helpful links at the end to make up for that.

What is HTML ?

HTML (or HyperText Markup Language) is the universal language for publishing text-based information on the World Wide Web. It is a simple, non-proprietary standard developed by the people at W3C (http://www.w3.org), that you can use to build up a webpage. Everytime you open up your web browser (Internet Explorer, Netscape, Mozilla, Opera, just to name a few) and surf the internet, you are looking at HTML files. They are associated with the .htm, .html or .shtml extensions and are text files that you can create / edit using simple text editors, like Notepad, Wordpad etc, or more sophisticated authoring tools like MS Frontpage, Macromedia Dreamweaver. The last ones are great, helpful tools for beginners but the downside there is that they do most of the job for you, so if you intend to learn HTML or are curious about what's behind a browser-viewed webpage, like the one you're looking at right now, I recommend you start writing your own HTML code using a simple text editor, like Notepad, to name probably the most popular one (between Windows platform users).

The structure of an HTML file

Like I said earlier, html files are *always* text files. HTML is a descriptive language, meaning that when you create an html file, you indicate where and how to display a certain piece of information in the context of your webpage, and then the browser will do that for you. The way you indicate these things is through the use of tags. You could consider tags as a sort of containers, that finally put together, build up your webpage. A tag is made up of an identifier enclosed in angle brackets, for example <title>. As I said earlier, tags could be considered as containers for information. That is, almost every tag consists of an opening tag, like <title> mentioned earlier, and a closing tag, which is exactly like the opening tag, except you have to insert a slash ("/") before the text identifier, e.g. </title>. The information enclosed between the two tags is known as the tag content, for example "<title>My web page</title>" would set the webpage's title to "My web page". Said "almost" because there are tags which do not have a closing tag, e.g. "<br/>" which introduces a line break.
Every html page should have the following general structure:

Code:

&lt;html>
	&lt;head>
	&lt;!-- header contents -->
	&lt;/head>

	&lt;body>
	&lt;!-- body contents -->
	&lt;/body>
&lt;/html>

The <html> tag is a general-purpose tag, indicating that the current document is an HTML document. Should always be the first tag in an HTML document, as </html> should be the last.
The <head> tag denotes the header section of the HTML document. This is usually where you put descriptive information about the current page. One of the most common tags that you can find inside the header is <title>, which sets the webpage's title.
The <body> tag represents the starting point of the actual document contents to be rendered inside the web browser.
The  tags enclose user comments. They will not be displayed when the page is rendered, but are used to place comments about various sections of code.

Tips:
1) Never forget to close an open tag! This is one of the most common mistakes found when writing HTML. To prevent this, when you begin a new tag, put down the matching closing tag right after it, then begin writing other relevant information between the two, like this:

Step 1) write the opening tag (in this case a paragraph delimiter) and its matching closing tag

Code:

&lt;p>&lt;/p>

Step 2) write paragraph contents between the two newly created tags

Code:

&lt;p>
	&lt;!-- write here paragraph contents -->
&lt;/p>

This is known as writing tidy HTML code. As a side note to this, some browsers out there are so smart (or bugged), that can interpret a bad formed HTML document and still render the contents correctly. However, this is *not* a reason to ignore this basic rule. Always check your code and make sure it's tidy. Also, tags that do not require a closing tag, should always contain a slash ("/") before the closing angle bracket, e.g.

Code:

Your name: &lt;input type="text" name="myNameInput"/>&lt;br/>

Most browsers don't mind if you omit this, however it would not be compliant with the HTML specification as defined by the WWW Consortium (http://www.w3.org).

2) When you write an HTML document, indent its contents properly. Don't worry, all browsers ignore white spaces (enter, space, tab) at rendering time. You'll find this to be invaluable if you have to edit its contents later on. It's always nicer to have a well-formed, organized code that you can easily go through and modify where needed, than a bulk text file without a clear structure.

A closer look to tags

Earlier I was defining tags as being made of a text identifier enclosed in angle brackets. But later on, I wrote an example tag like this:

Code:

&lt;input type="text" name="myNameInput"/>

So what's with the type and name thingie? Well, these are tag-specific elements known as attributes. Attributes usually consist of a name-value pair, as in the above example, type would be the attribute name and text would be its value. Said "usually", because there a few attributes that are more of a declarative type and contain only a name, e.g.

Code:

Your occupation: 
&lt;input type="radio" name="myInput2" checked/> Programmer
&lt;input type="radio" name="myInput2"/> Other

Here, the checked attribute would indicate that the radio button myInput2 is checked.
Well, ok, but what exactly is the use of attributes? An attribute is used to either define some behaviour of its parent tag or store some information about it. For example, in the above declaration, the name attribute would set the input tag's name to "myInput2", so it could be properly identified later on to have its value retrieved in a form submission scenario. Or if we wanted to define a link to a website, we would write something like this:

Code:

&lt;a href="http://forums.ukwebmasterworld.com/index.php">UK Webmaster World website&lt;/a>

In this case, a is the tag (the anchor tag) and the href attribute would ensure that when we click on the text enclosed by the tag, the browser would take us to the web address which we specified in href's value.

Well, this is all I could think of right now, hope this was helpful for someone... Of course, one important thing that's missing here is the HTML vocabulary. Now you know what to do, but you don't know how to do it. But as I said earlier, the list is pretty big, so I won't get into it here. Here's a useful link in that direction: http://www.willcam.com/cmat/html/crossname.html. Even with this at hand, you'll still be up for a slow start, so here's a tip: look over some already made HTML code and try to analyze the tags' effects on the same page, but viewed in a browser. If you can't find any .html files, just browse a regular page on your browser, and click View -> Source (in Internet Explorer).
If you have questions, please go ahead, I'll try to help anyway I can.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Quick Web Index - Open for submission	deluxdon	Directories	11	08-27-2007 01:11 PM
Quick Money In Affiliate Marketing	marketraise int	Generating revenue from your website	0	03-20-2007 07:38 AM
Quick Reply Mod	Duke	General Webmaster Talk	8	03-28-2005 02:18 AM
Quick Reply	Duke	General Webmaster Talk	0	03-24-2005 11:46 AM
Beginners Guide - Complete List of HTML Tags.	JC1o1	General Webmaster Talk	2	02-09-2005 03:19 AM