HTML Introduction
Creating a simple web-page with HTML is very easy. Every page is a HTML file, which is read by the browser, then the content is displayed to the user. A HTML document is made up of short markup tags. A tag is simply a keyword between angle brackets. Most tags require a start and ending tag, but other “empty” tags don’t. A HTML file can be created using any simple text editor and must be saved with the extension .html.
The basic HTML structure.
<html>
<head>
<title>TItle page here..</title>
</head>
<body>
<!-- Content goes here.. -->
</body>
</html>
This is a very simple example that shows a basic HTML document structure. It is very simple, but yet it includes all the basic required elements of HTML page. You can see the html tag in the very begging and ending of the code. This tells the browser the start and ending of the document. The head tag contains the title of the page, and it may provide other meta information that is not actually displayed. Finally the body tag is where the actual content of the website is.
Notice that the html closing tag is at the very end, also, the title tag is within the head tag. Inside the body, the content can be organized and displayed in different ways using other tags like h1 for a big header, or p for a paragraph.
As you can see, a HTML document is quite simple. It is also a very forgiving language, allowing tags to be unclosed, uppercase, lowercase or the combination of both, etc. This may seem a good thing, since it makes it easier to write web pages, but it also makes it much more difficult for browsers to display pages correctly, also HTML doesn’t support XML. That is why, a replacement for HTML is taking place. The language to substitute HTML is combination of HTML and XML, which is also a markup tag-base language that makes it easy to organize simple data. A common example that uses XML technology is RSS feeds.
XHTML and HTML
To keep is simple, XHTML is a more strict and improved version of HTML. Although HTML 4.1 and XHTML are almost identical (with a few syntax differences), in some time XHTML will replace HTML. This short introduction to XHTML will explain the basic document structure, important syntax issues, attributes and events.
Complete XHTML page structure
Generally speaking XHTML is simply a more strict language. Some strict rules that make XHTMl different from HTML will be explained bellow.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>TItle page here..</title>
</head>
<body>
<!-- Content goes here.. -->
</body>
</html>
Document type declaration
Starting with DOCTYPE.. you can see this element in the very first line of the example. This is one of the most important parts of a XHTML page. This declaration tells the browser the type of document standards it conforms to. Also the URL points to a file that tells the browser how to hander specific elements for this type of document. This declaration is very important because it plays an important part on the display output of the page. Having a page missing this declaration could be rendered in a completely different way than it was meant to.
Lowercase tags and attributes
This is a simple but important difference with HTML. All tags, and attributes must be in lowercase.
All tags must be closed
As mentioned in the beginning, most elements have a starting and ending tag. Tags that don’t come in pairs are called empty tags, that is, they don’t have a closing tag. One common example is the break tag. Not closing a tag in HTML would be valid. But In XHTML all tags, even empty ones must be closed. Notice the difference in the ending of each tag.
<!-- Should not be: -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- Should be: -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Tags must be nested correctly
Having opening and closing tags for every element on the document, and some tags inside other makes it easy to have wrong nested tags.
<!-- Should not be: --> <p>This word is in<b>bold</p></b> <!-- Should be: --> <p>This word is in<b>bold</b></p>
XHTML Attributes
Tags can have certain attributes, and for some tags a specific attribute may required to have a valid document. Attributes give a tag more detailed properties that determine their behavior and/or appearance on the page or it can lso identify the tag so that it can be styled in different ways using CSS. In XHTML all attribute values must quoted, and unlike HTML in XHML attribute values cannon be minimized. The example bellow shows the wrong and correct use of attributes.
<!-- Should not be: -->
<input type=radio checked>
<!-- Should be: -->
<input type="radio" checked="checked" />
Event Handlers
HTML 4 and newer include event attributes, these event handlers allow actions to be triggered in the browser. With this, and JavaScript pages can be made much more interactive but adding a scrip to the value of the attribute. Some common event handler attributes are: onload, onclick, onreset, onselect, onblur, onsfocus, etc.
Putting it all together
XHTML is not a difficult language, especially if you have some basic HTML knowledge, but as anything practice is the best way to learn. Understanding this basic concepts you should be able to put together simple but functional websites. After getting familiar with tags, attributes and HTML in general, it is a good idea to look into CSS. Go to CSS and click on CSS basics to learn more.
