Marcy Lee

CIS 101

Mr. Peter Lloyd

December 13, 2000

The comparison of HTML, DHTML, and XHTML

HTML, DHTML and XHTML are all similar in setting up and the use of Web paging. In this report I plan to make a comparison of these three (3) markup languages. I will first explain what HTML, DHTML and XHTML are and their purposes are for making a web page. I will then explain with the use of examples and information how all three (3) are similar and how they differ; but first I feel that I should explain what a markup language is.

A markup language is text formatted to be printed (or displayed on a computer of TV), that one needs to distinguish between the text itself and the instructions for printing the text. The markup is the instructions for the text. Markup language is also used to indicate information about the text. "For example, many students in school will highlight certain phrases in their text books. This indicates that the highlighted text is more important than the surrounding text. The highlighted text is markup."

Now that we understand what a markup language is the starting point to HTML's; we can now explore the meaning and use of HTML's. HTML means Hypertext markup language. HTML is the language of the World Wide Web (WWW). HTML is an SGML DTD; in practical terms it is a collection of platform-independent styles (indicated by markup tags) that define the variou8s components of a WWW document. HTML was invented by Tim Berners-Lee while at CERN, the European Laboratory for Particle Physics in Geneva. All web pages are written in HTML. HTML defines how images, multimedia and text are displayed on the web. It also includes tags to connect your documents (hypertext) that makes your web documents interact (form) properly to web browser specification correctly.

HTML is based upon SGML (Standard Generalized Markup Language). It is the language that uses tags to define how the structure and style of your web page is defined. Tags are defined by the symbols of < and > characters.

HTML tags are written in upper case, mixed case or lower case letters. HTML documents are considered plain-text (also known as ASCII) files that can be used by any text editor (e.g., Emacs or vi on UNIX machines; Simple Text on a Macintosh; Notepad on a Windows machine). You can also use word-processing software if you remember to save the document as "text only with line breaks".

Here is an example of the use of tags used to write HTML's:

<html>

<head>

<TITLE>A Simple HTML Example</TITLE>

</head>

<body>

<H1>HTML is Easy To Learn</H1>

<P>Welcome to the world of HTML.

This is the first paragraph. While short it is

still a paragraph!</P>

<P>And this is the second paragraph.</P>

</body>

</html>

HTML has two types of styles for individual words or sentences; logical and physical. Logical styles are tag text according to their meaning, while physical styles indicate the specific appearance of a section. The big power of HTML is its ability to link text or and image to another document easily. A browser will indicate the identified text or image with use of a color and/or underlines to indicate that it is a hypertext link often labeled as a link or hypertext.

Just keep in mind that not all browsers read or understand HTML elements. Not all codes used in HTML files are interpreted by all browsers. Any code that is not understood by a certain browser is usually ignored. Just keep in mind that you could and can spend thousands of hours designing and developing the perfect file using your web browser. Just remember that if you was to check your page in a different browser it is likely that your file will appear different. A few words of advice use correct HTML and leave the interpreting to the browsers and hope for the best.

DHTML (Dynamic Hypertext Markup Language) is where javaScript and HTML meet. With DHMTL, JavaScript can refer to HTML elements on a web page and change them. The change over or cross over as it is referred to is done by the use of DOM (Document Objet Model). DOM gives useful names to HTML elements and allows JavaScript to refer to them.

As you know HTML presents data in a browser window in a multitude of shapes, sizes and colors, and provides extra features, such as forms and hyperlinks. But most computer programming languages have more functions than HTML. These languages have a much higher and more powerful range of commands, and can produce far more spectacular effects than HTML.

JavaScript is also a major language that was created with the internet in mind. JavaScript is used by our browers to to calculate tax, or add features that depend on user commands. So, this is where the language DHTML was created. DHTML can alter the HTML page while it is being displayed and can provide animated content to the viewer.

DHTML has been mostly used by Internet explorer, but Netscape has been slowly implemented a weak version of DHTML in NN4 (Netscape Navigator 4). Now NN6 (Netscape Navigator 6) supports DOM Level 1 but this means that some of the accepted codes from NN4 have become obsolete to NN6.

DHTML uses the use of DOM and BOM . DOM (Document Object Model) is nested inside the BOM (Browser Object Model). The DOM stores information about the current loaded document and the BOM behaves very similarly, but is hold information about the user's system, the browser type, the location of the current document, the screen resolution, the history of the browser, the frame hierarchy, and many other details. This means that we have a 'breakdown' of the HTML document stored in the DOM. The clever bit is that JavaScript can access and change the DOM, and that JavaScript can change the DOM during run-time.

When programming DHTML it can turn out to be quite the art form. We need to keep in mind and keep track of all the elements of HTML names. Also, keep in mind of the likely scenarios that users may encounter on their web page. DHTML can be event-driven, as well as being able to be manipulated by HTML. DHTML does provide it's own features that allows for various techniques to be used to further enhance a web page.

Here's an example of a DHTML program:

<HTML>

<HEAD>

<BODY>

<INPUT TYPE="TEXT" NAME="myText"

MAXLENGTH=10>

<BUTTON onclick="alert(myText.value);">Read Text

Box</BUTTON>

</BODY>

</HTML>

DHTML is a collection of features that together, enable your web page to be dynamic. I think it is appropriate at this time to explain what the creators of DHTML meant by the word "dynamic". "Dynamic" is defined as the ability of browser to alter a web page's look and style after the document has loaded.

The last language I would like to introduce and make a comparison with is XHTML. XHTML is a long version word for XML (extensible markup language). XML is a structured set of rules for how one might define any kind of data to be shared on the Web. It's called "extensible" because anyone can invent a particular set of markup for a particular purpose and as long as everyone uses it (the writer and an application program at the receiver's end), it can be adapted and used for many purposes -including, as it happens, describing the appearance of a Web page.

XHTML is HTML 4.0 redefined to meet the XML standard. There aren't a lot of differences between HTML and XHTML:

�XHTML is written in lower case. While HTML tags can be written in UPPER case, MiXeD case or lower case, to be correct, XHTML tags must all be lower case.
�All XHTML tags must have an end tag. Tags with only one tag, such as <hr> and <img> need a closing slash (/) at the end of the tag <hr/>.
�All attributes must be quoted in in XHTML. Many editors remove the quotes around attributes, but they are required for correct XHTML.
�XHTML requires that tags are nested correctly. If you open a bold (<b>) tag and then an italics (<i>) tag, you must close the italics tag (</i>) before you close the bold (</b>) tag.
�XHTML attributes must have a make and a value. Attributes that are stand-alone in HTML must be declared with values as well, for example, the <hr> attribute noshade would be written noshade="noshade".

Here is an example of an XHTML program:

<!DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.0 Transitional//EN"

"DTD/xhtml1-transitional.dtd" >

<head>

<title>Quick Example</title>

</head>

<body>

<h1> Quick Example

</h1>

<img src = "http://validator.w3.org/images/vxhtml10"

height = "31"

width = "88"

border = "0"

hspace = "16"

align = "left"

alt = "Valid XHTML 1.0!"

/></a>

<p> Note that the layout (with tabs and alignment) is

purely for readability - XHTML doesn't require it.

</p>

</body>

</html>

Why would anyone want to use XHTML? The usual reasons for upgrading to a new language version are to be able to take advantage of new bells and whistles, and also because problems with the earlier version have been fixed. However, XHTML is a fairly faithful copy of HTML 4, as far as tag functionalities go, so do not expect any fancy new tags.

To conclude this report, I would like to just quickly sum up how all three (3) of these languages relate to one another. All three work together to better a web page. As you could see HTML was the starting point of web page making. Then JavaScript was designed to be used with HTML. As web design evolved several other languages were developed to help better web page design. Two (2) of the several languages are DHTML, and XHTML. DHTML works with HTML but it allows a designer of a web page to redesign the page while viewing the page. XHTML and HTML don't really differ except XHTML must be in lower case letters only.

As you can see all three of these languages were developed to expand the way web pages were designed from the simplest to being able to design language for the future.

Work Cited

Richmond, Alan; "Introduction to XHTML, with eXamples", http://wdvl.internet.com/Authoring/Languages/XML/XHTML/index.html

February 2, 2000

Richmond, Alan; "Introduction to XHTML: Why do we need XHTML?", http://wdvl.internet.com/Authoring/Languages/XML/XHTML/why.html

February 2, 2000.

Kyrnin, Jennifer: "What are All Those "ML"s?", http://html.about.com/compute/html/library/weekly/aa0090500a.htm

"Beginner's Guide to DHTML - What is DHTML?", http://members.tripod.com/~toolmandavid/lesson1.htm

Perry, Jon: "An Introduction to DHTML", The Web Developer's Journal.

http://www.webdevelopersjournal.com/articles/dhtml1/dhtml1.html

May 15, 2000.

NCSA: "A Beginner's Guide to HTML",

http://www.nesa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.html

June 15, 2000.