by

In the previous months I guided you into some important areas in World Wide Web specially useful for Web authors and content generators. Last month we looked at how to control the presentation of elements in a Web page using Cascading Stylesheets. Although there are many ways to control the presentation of components but when the content is getting larger and larger it is very hard to manage everything on the page while maintaining the consistency. It not only helps to maintain the consistency but it greatly reduces loading time because once the necessary information is loaded into your local machine the Web browser looks after the arranging of components as specified in the CSS page.

To have a quick access to a Web site its very important to minimize the bandwidth utilization by carefully managing the high traffic content (such as high resolution images, animations, flash content, etc..) on the Web site.  Every extra second counts and it's very important keep in mind that  lesser time it take more chances you have to stay with the user for a longer time because today users don't like to wait and they want to view the content with minimum loading time and there is a higher tendency that users will select another site due to this. Keeping that in mind lets look into important aspects and usages of XHTML/HTML.  

Hypertext Markup Language

XHTML/HTML (Extensible Hypertext Markup Language/Hypertext Markup Language) is the set of markup symbols or codes inserted in a file intended for display on a World Wide Web browser page. XHTML/HTML is the code behind your Web-page and is what your browser looks for to display a Web-page, the way the Web-designer intended it to look, and is a series of tags that tells the browser where to display what. Each individual markup code is referred to as an element (but many people also refer to it as a tag). Some elements come in pairs that indicate when some display effect is to begin and when it is to end.

XHTML/HTML is an application of the Standard Generalized Markup Language (SGML) which is the International Standard (ISO 8879) for text markup. The principle is that text markup concentrates on structure rather than appearance, making the files more reusable and leaving the visual details to the end-user software (like the browser you're reading this with now).

Keep this in mind: HTML documents must be text only. When you save a XHTML/HTML document, you must save only the text, nothing else. XHTML/HTML browsers can only read text. In your keyboard you see the letters and numbers and little signs like % and @ and *? Altogether there are 128 in all. That's what the browser reads and it simply doesn't understand anything else.

What is  XHTML

During 2000, the World Wide Web consortium (W3C) recommends a new standard set of rules over existing HTML, which was based on XML specification instead of SGML. Since its based on XML specification most of its markup is almost identical to HTML, presented with a more structured manner. All the benefits of XML are now inherited by HTML which makes it easier to parse and process, and therefore to be available in more platforms with reduced processing capacities (e.g., PDAs and cell phones). 

XML is also a meta language (used to create other languages) and is also an SGML subset, designed to be simpler to parse and process. Today, XML is widely used in many ways to build documents and organize information (e.g., RSS, Atom, etc.) as it provides a standard way to do it that's easier to process than SGML.

General rules you should keep in mind   

• Non-empty tags must always be closed. There is no optional closing in XHTML
• Empty tags must be correctly closed. To achieve this you can use a normal closing or you can close the tag by putting a space and a slash at the end of the start tag
• Tags and attributes names must be lowercase to fit into the XML case-sensitivity (except for the HTML !DOCTYPE tag)
• The predefined values for some attributes must be lowercase due to the XML case-sensitivity
• The attributes' values must be properly enclosed by quotes (single or double). Quotation is not optional in XHTML
• Boolean attributes cannot be abbreviated (using only the attribute's name). As value you must specify the attribute's name
• Nested elements must obey correctly to their hierarchical order
• Block level elements can not be declared as content of in-line elements
• All ampersand symbols must be written using it's entity name (&), even in URLs

Main Components in XHTML

XML declaration

The XML declaration is a simple line and defines the XML version and the character encoding that your document uses. It must be declared before anything in your document, even before the document type declaration.

<? xml version="1.0" encoding="UTF-8" ?>

Document Type Declaration (DTD)

The Document Type Declaration is not only used for XHTML documents, but for every kind of document. In every case you should use the correct DTD via the HTML !DOCTYPE tag declaration. The DTDs for XHTML documents are four and depend on the version you'll use: The  XHTML defines three types of DTDs, namely Strict, Transitional and Frameset. Its declaration can be illustrated as follows: 

Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

Transitional

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

Frameset

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd" >

XML Namespace declaration

The XML Namespace declaration is a simple URL and can be defined as the value of the "xmlns" attribute of the html tag.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"> </html>

HTML tags and attributes

Tags

Tags are the main element in an HTML document and give special information that's used to compute the final representation of a document. This means that where a tag is defined in the HTML code, something will happen in the representation of that document, sometimes visually and sometimes hidden. Each one of the 93 standard tags produces a specific result when the document is rendered (e.g., the HTML a tag is used to make a link to an external/internal resource) allowing authors to format and/or insert information into documents. Every tag may have attributes, events and content. All this information must be declared (in a generic way) as follows:

<tag_name attribute1="value1" attribute2="value2" ... event1="function1" event2="function2" ...> Content </tag_name>

Attributes

Attributes give certain characteristics to a tag (e.g., name, type, alt, title, etc.), sometimes very important, that will finally set how the tag must be interpreted. For example, the HTML a tag inserts a link in an HTML document (a way to go from the actual document to another resource, usually with a click), but the rel attribute establish which is the relationship between the actual document and the destination resource. As we saw in the generic example every attribute must have a value and must be defined in the start tag. In this example we insert a full definition (with content and closing tag) of an HTML a tag with two attributes: "href" and "rel".

<a href="index.html" rel="home" > Main page of the site </a>

Summary

Finally we can summarize the important point so far discussed above, which will be useful to keep in mind during the Web development. 

• Flexibility
• Wider Accessibility
• Simple syntax

Have a problem in mind of what I have discussed so far or feels like need further clarification, please feel free to bug me.

Previous Article