These are a few general notes on XHTML and CSS for my Macromedia presentation today.

My presentation today really confirmed my belief that before attempting to use Dreamweaver or any other HTML editor it’s important to have a basic knowledge of HTML/XHTML and CSS.

Before the invention of Dreamweaver, FrontPage, GoLive and the other popular web page creation tools, most developers used NotePad or some other plain text editor to create their web pages. Now that we have all of these wonderful HTML editors at our disposal many people feel that it’s not necessary to learn how the underlying code works. In all honesty, I have yet to create a web page in Dreamweaver or any other program without having to manually make changes to the code.

HTML

HTML or HyperText Markup Language is the foundation of the web. HTML pages are actually plain text files that have code or tags that tell the browser how to handle and display the content. These tags specify what kind text is to be displayed in the web browser. Tags are used in pairs; opening tag, the content, and a closing tag. For example, if you want to display a plain paragraph in the web browser the paragraph tag is used like this:

[code lang="xml"]

this is the text that is displayed in the web browser

[/code]

Now if we wanted to make the words “web browser” in the above statement bold we would add some bold formatting tags around just the words “web browser” like this:

[code lang="xml"]

this is the text that is displayed in the web browser

[/code]

If we wanted to take the formatting a step further by applying a different font to the above line of code we would add the font tag like this:

[code lang="xml"]

this is the text that is displayed in the
web browser

[/code]

and then maybe you want to add a little color and size into the mix:

[code lang="xml"]

this is the text that is displayed
in  the web browser

[/code]

Now lets add a heading to our page:

[code lang="xml"]

A Simple Explanation of HTML

this is the
text that is  displayed in the web browser


[/code]

Now the above code could be written a little simpler in HTML, but this is an actual code snippet taken from a web page created with FrontPage, and I think it illustrates the point I’m trying to make, it serves to demonstrate how structure and formatting has been traditionally controlled in an HTML document. The problem with this at the most fundamental level is that HTML documents that include formatting code like font tags become very cumbersome to edit. In order to change the font in a page you would have to open that page and edit all of the font tags in the document. If you have a very large site you may have to open hundreds of documents just to change the font on the web site.

XHTML

For simplicity sake, XHTML is the next generation of HTML. XHTML controls the content “structure” of a web page, but does not control the formatting. XHTML is essentially stricter than HTML; XHTML has certain rules, like all of the code must be in lowercase, all tags must close, and font and other formatting tags shouldn’t be used. You can learn more about XHTML in this Basic XHTML tutorial.

So instead of having all of those font tags in your document, an XHTML code snippet would look like this:

[code lang="xml"]
A Simple Explanation of HTML

this is the text that is displayed in the
web browser

[/code]