Blog

Blog

15
Mar
2010

Beginners Guide to CSS, HTML and XHTML – Part I

This post is going to be the first of a series of posts on deconstructing CSS, HTML and XHTML for newbies.

HTML & CSS

HTML is a presentation language. Unlike programming languages like C# or JAVA, HTML is used to define the way content is presented in a web page. The primary tools for defining presentation characteristics of a web page are tags.

Ex:  ‘<html> <title> <br> <p>’

There are open tags such as ‘<p>’ and ‘<l1>’ etc. But compared to the number of closed tags, these tags are comparatively very limited. All the other HTML tags need to be closed to make them meaningful and add the intended formatting.

However, HTML carries some basic limitations. One of them is that, styling has to be applied to individual tags. For example, though the H1 tags may appear the same in every page in a web site with 30 pages, the formatting has to be done individually. This is a tiresome and a time consuming task that can lead to many unforeseen problems. Also, this increases the size of the web page leading to much larger websites.

Cascading Style Sheets [CSS – a Style sheet language] was introduced to address this issue. CSS is intended to be used as a substitution for individual HTML style tags pertaining to attributes of HTML tags. For example, a single CSS script can be used to apply attributes for ‘<h3>’ tags throughout a website. These scripts can be called by a hyperlink or can be entered at the head of the web page or at the intended place of formatting.

Sample CSS script

CSS gives web developers much flexibility to address formatting issues. Also, a CSS can be altered and given the circumstances, [ex. Call the CSS via a hyperlink] the changes can be automatically applied to all HTML formatting done using that particular CSS script. This is considered to be a very important development in web developing.

HTML and XHTML


The introduction of Extensible Markup Language [XML] is considered to be one of better developments. It allows users to define their own tags and use them accordingly. XML needs an Extensible Stylesheet Language Transformations (XSLT). Which is an XML-based language used for the transformation of XML documents into other XML or “human-readable” documents. The original document is not changed; rather, a new document is created based on the content of an existing one. The new document may be serialized (output) by the processor in standard XML syntax or in another format, such as HTML, .wmv, .avi or plain text.

Due to the ease of use provided by XML as well as the cohesion, orderliness and well-formedness, a new standard was adopted for web development as well. This is XHTML.

The Extensible Hyper Text Markup Language, or XHTML, is a markup language that has the same depth of expression as HTML, but also conforms to XML syntax.

Whereas HTML is an application of Standard Generalized Markup Language (SGML), a very flexible markup language, XHTML is an application of XML, a more restrictive subset of SGML. Because they need to be well-formed, true XHTML documents allow for automated processing to be performed using standard XML tools—unlike HTML, which requires a relatively complex, lenient and generally custom parser. XHTML can be thought of as the intersection of HTML and XML in many respects, since it is a reformulation of HTML in XML. XHTML 1.0 became a World Wide Web Consortium (W3C) Recommendation on January 26, 2000. XHTML 1.1 became a W3C recommendation on May 31, 2001.

This is very important because most HTML validators use XHTML by default. To override this, specific script has to be added at the head of a HTML page.

Ex: ‘<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>’

‘<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>’

Most web development tools available in the market today such as Macromedia Dreamviewer have the ability to define the way web pages are presented as XHTML or HTML. The latest versions of such tools create web pages in XHTML by default.

The failure to define the presentation medium, [I.e. XHTML, HTML] can lead to an unprecedented number of errors when HTML coding is to be validated. Web developers need to take extra care to define the medium to prevent this problem.

No comments yet.

Leave a comment

Spam Protection by WP-SpamFree