HTML, DHTML & JavaScript
Chapter 13: Introduction to DHTML
Objectives
• Introduction to DHTML
• Understanding the history of DHTML
• Enhancing User Experience
• To understand components of DHTML
HTML, DHTML & JavaScript web page's look and style after the document has loaded.
Web designers are often limited by default fonts such as Helvetica, Arial and Times Roman. DHTML allows downloadable fonts. Readers will be able to see web pages the way they are designed, with text that responds to exact font, size and style.
DHTML is a new tool for designers to create Web pages with special effects and animation such as flying headlines and news tickers. Designers can attach a simple script to any object on a page and the user can change the appearance of a Web page "on the fly." Prior to DHTML, designers were limited to writing complicated programs to achieve the same effects.
History of DHTML
During 1960’s, IBM scientists were working on a Generalized Markup Language (GML) for describing documents and their formatting. In 1986, the International Standards Organization (ISO) adopted a version of this standard called Standard Generalized Markup Language (SGML). SGML offers a highly sophisticated system for marking up documents so that their appearance is independent of specific software applications. It is big, powerful, filled with options, and well suited for large organizations that need exacting document standards. As Internet began to grow, data increase rapidly.
Unfortunately, SGML made the language unsuitable for quick easy Web publishing (Randall, 319). The straightforward text was too dull for the mass-market of the Internet. Data needs to be displayed in an interesting structure and so HTML (HyperText Markup Language) was created. HTML is a subset of SGML. SGML means Standard Generalized Mark-Up Language. A Mark-Up Language alters the presentation of the content of a document. HTML presents data in a browser window in a multitude of shapes, sizes, colors, and provides extra features, such as forms and hyperlinks (Perry). HTML is a good tool for publishing small file size documents over the Internet. However, HTML in its traditional form is not powerful enough to create the interactive and multitude-rich documents that today’s commercial web sites demand.
HTML’s limitation is the control over page layout. Web authors do not have the ability to lay out pages with the pixel-level accuracy available to the traditional desktop publishing author. In addition, a standard HTML document cannot specify that text and images are located at exact coordinates, on top of each other, or even that the text be displayed in a particular point size (Heinle). Most computer programming languages have more functionality than HTML.
The programming language is called JavaScript and it has powerful range of command. In order to combine these two programming languages together to be more powerful, Dynamic HTML emerged Enhanced User Experience
DHTML makes the Web experience faster and more interactive for end users. Live updates can be activated by user and browser-driven events. For example, text and images can be hidden in a
HTML, DHTML & JavaScript
dynamically updated or sorted through a script without redrawing the page or having to go back to the server. Data binding is supported by IE4 but not by NN4.
In a client-server environment, DHTML lets the client/browser make changes after a web page has been downloaded, without the burden of relying on server-side programs or complicated sets of HTML pages to achieve special effects. In other words, the client does not need to reload the document or load a new document, or require a remote server to generate new content. That means a user does not have to wait for text and data to complete time and bandwidth consuming round-trips to and from a server before seeing results.
Components of DHTML
DHTML requires four independent components to work: HTML, Cascading Style Sheets, Scripting and the Document Object Model. The section provides a brief description of each component.
HTML: HTML defines the structure of a Web page, using such basic elements as headings, forms, tables, paragraphs and links. On December 18, 1997, HTML 4.0 attained "recommended" status at the W3C. Changes and enhancements introduced in HTML 4.0 made DHTML possible.
Cascading Style Sheets (CSS): Similar to a template in a word-processing document, a style sheet controls the formatting of HTML elements. Like in traditional desktop publishing, one can use style sheet to specify page margins, point sizes and leading. Cascading Style Sheets is a method to determine precedence and to resolve conflicts when multiple styles are used.
Scripting: Scripting provides the mechanisms to interpret user actions and produce client-side changes to a page. For example, scripts can interpret mouse actions (such as the mouse passing over a specified area of a page through the event model) and respond to the action by using a set of predefined instructions (such as highlighting the text activated by the mouse action). Although DHTML can communicate with several scripting languages, JavaScript is the de facto standard for creating cross-browser DHTML pages.
Document Object Model (DOM): The DOM outlines Web page content in a way that makes it possible for HTML elements, style sheets and scripting languages to interact with each other. The W3C defines the DOM as "a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure, and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented stage."
HTML, DHTML & JavaScript
Review Questions
1. DHTML is extension of _______ language.
a. HTML b. SGML c. JScript d. XML
2. One of the main technologies in DHTML is ______.
a. Exception handling b. Scripting Languages c. Text Designing d. Animation
3. State True or False. Using DHTML, we can do client side form Validation.
a. True b. False
HTML, DHTML & JavaScript
Summary
Dynamic HTML is an extension of HTML. It contains a number of new tags that lets you define a user interface in terms of HTML elements and lets users interact with that interface. DHTML consists of a number of related technologies like HTML who defines the structure of the information being conveyed to the user, Cascading Style Sheets (CSS) determines the appearance of that information as it is being rendered, and the Document Object Model (DOM). Scripting languages such as VBScript and JavaScript interact with the HTML elements in the document. Netscape and Microsoft have pledged future support for a standard that is currently being decided by the World Wide Web Consortium (W3C).
HTML, DHTML & JavaScript
HTML, DHTML & JavaScript
Chapter 14: Introduction to CSS
Objectives
• Understanding basics of CSS
• To know the benefits of using CSS
• To explore syntax of CSS
• Understanding various types of CSS
• Learning various selectors in CSS like font, background