About Doctypes for Web Pages

Comparing XHTML and HTML, Strict and Transitional

The difference between strict and transitional XHTML: Transitional is a forgiving form of doctype. While you must code cleanly - properly nested lowercase tags - transitional allows deprecated elements and attributes to pass validation. The strict doctype is strict: deprecated elements and attributes will fail to validate under a strict doctype and may well display incorrectly as well. For example, <p align="left"> and <center> will validate in transitional, but not in strict mode since the align attribute and the <center> element are both deprecated.

Similarities in HTML 4.01 strict and XHTML Strict

HTML 4.01 strict will also fail to validate if you include deprecated elements and attributes. HTML 4.01 will fail to validate if you include XML style closing syntax on empty elements.

Differences between HTML and XHTML

The primary benefit is that XHTML is more portable in non-computer devices like cell phones, Palm devices and other scaled down browsers. XHTML is also said to be extensible: new tags can be added. XHTML, due to it’s stricter nature, forces developers to write cleaner code. Here are the “official” differences between XHTML and HTML:

• In XHTML the elementy tags must all be in lower case as must all the attribute names. In HTML you can code willy-nilly. Nothing in the W3C states that attribute values need to be lowercase, but some, like ID, are case sensitive. Note: Even if you have declared a HTML doctype, all lowercase, while not required, is recommended.
• In XHTML all attribute values must be encased in single or double quotes. In HTML, only attribute values with spaces or special characters were required to be in quotes.
• In XHTML, every opening tag must have a closing tag. Empty elements such as img and br must be self-closing. In HTML tags can be left unclosed. So, while this reduces the number of characters on a page, it also allows for sloppy code. Note: Self closing tags, such as <br />, will cause strict HTML to not validate.
• In XHTML, all tags must be properly nested: If you start tag <a> and then start tag <strong>, you must close tag </strong> before you close the </a>.
• In XHTML, all attributes must be coded as attribute/value pairs. The default selected option in XHTML should be written selected="selected". In HTML, the same would simply be coded as selected.
• In XHTML, the elements need to be coded in a semantic manner. Tables and forms can not be included in paragraphs, but form elements, being inline elements, need to be contained within a semantic block level element, such as a paragraph or table cell.

Image Rollovers vs CSS Links States

The only way to ensure a particular font is available for your page is to embed the text into an image. This is commonly done for titles and logos, to make sure that the critical type elements appear in the proper font. By creating an alternate version of such an image, you can create the illusion of a button lighting up as you hover over it. The advantage of an image-based (via Javascript) rollover over a CSS-based rollover is that using images allows you to embed any font you want, therefore not requiring that the viewer have the same font on their systems. This frees you to use an esoteric or silly font with confidence that the viewer will see it the way you want. It does require more images be present for the page to work, which marginally increases the size and load time. Button-sized graphics are pretty small, though, so it's rarely an issue when so many people have high-speed Internet connections. Another reason to avoid graphics over text for buttons is that search engines don't understand images.

CSS-based rollovers use properties of links that allow you to specify different appearances and behaviors for the various link states: link, visited, hover, and active. While you can only specify a list of fonts to try with this method, this approach requires no images, and can easily adapt to varying sizes.

PHP and MySQL

PHP is a programming language that runs along with the Web server. The Web developer can embed PHP commands in an HTML file, and rename the file's extension to be .php. When the user's Web browser requests a page with a .php extension, then it first allows the PHP preprocessor to process the PHP code embedded in the HTML file. Typically, PHP is used to create HTML to display data that is extracted from a database. The MySQL database system is normally used, since both it and PHP are free software. PHP provides the easiest way to create dynamic Web pages, where some or all of the HTML code is created on-the-fly by the PHP program running in the same environment as the Web server. An excellent example of this is WordPress, the blogging system. Through a combination of HTML, PHP, and MySQL, WordPress creates pages dynamically whenever a browser requests a page.

How can you dig deeper?

• Keep doing it! Practice, practice, practice.
• Really learn CSS.
• Learn a good backend technology like PHP.
• Find working code and adapt it to your needs. After all, there has only been one program ever written -- everything else is just adapted from that!
• Get decent tools. FireBug or Venkman (Javascript debuggers). Browser Web toolbars. Validators. Text editors.
• Learn to program.
• Study design.