top button
Flag Notify
    Connect to us
      Facebook Login
      Site Registration Why to Join

    Get Free Article Updates

Facebook Login
Site Registration

Introduction to DHTML (Dynamic Hyper Text Markup Language)

0 votes
116 views

DHTML (Dynamic Hyper Text Markup Language)

DHTML provides an easy way for creating dynamic and interactive web pages. It allows you to create web pages that evaluates and responds to user inputs. In addition, you can add animation effects to web pages and generate a link to the database to store and retrieve data.

The HTML elements are automatically reformatted to display the visual affects and other dynamic changes. For every change that is carries out the changes at the user’s computer. Thus, the user does not have to wait to view the modifications. In addition, DHTML does not require any third-party software to carry out the changes.

DHTML is a combination of various web technologies that can be used together to generate ore interactive web pages. The different web technologies are DOM, JavaScript, CSS and HTML.

Note: CSS + JavaScript + DOM + HTML = DHTML

Need for DHTML

Static pages that are created using HTML and CSS concentrate more on the presentation layout of the web page. These pages are not dynamic by nature. This means that the interaction of user with the web is limited. In addition, these static web pages are not updated. This degrades the web site quality giving an impression that the web page is not updated from a long time. This results in greater cost for updating and maintaining the web site. To overcome these problems, dynamic web pages were created.

Dynamic web pages are more interactive and sophisticated web pages. They provide the user with the updated content. In addition you can create a use interface that allows you to display new content without downloading additional document from web server. This can be achieved using Dynamic Hypertext Markup Language (DHTML).

DHTML Features

DHTML allows you to create interactive web pages without having to compromise on its presentation. DHTML provides various features for effective development of dynamic web pages. Some of the features of DHTML are:

  • Dynamic Styles: DHTML allows you to apply different styles to your content. You can format the appearance of the content without having to alter the existing elements. This can be done by using CSS.
  • Dynamic Content: DHTML allows you to dynamically change the content of the web page. It allows you to generate values based on mathematical calculations and add and retrieve data from the database on the occurrence of certain events.
  • Real-time positioning: DHTML allows you place the elements on specific locations on the web page. This can be done by using the different positioning techniques defined by CSS. The three different positioning techniques are absolute, relative, and fixed positioning.

 

Other Features

DHTML allows you to modify the desired content at the user’s computer with results in very few requests made to the server. This means that it improves the performance of the server by reducing the number of requests.

Apart from this, there are some more features of DHTML, which are:

  • Font Download: DTHML supports different types of fonts that can be downloaded. These fonts can be used in your web page.
  • Dynamic Binding: DHTML allows you to dynamically access data from the database. You can display this data in HTML controls such as text boxes, labels, and so on.
  • Scripting: DHTML allows you to embed scripts within an HTML document to develop user interactive and innovative web pages.

 

 

 

DOM

DHTML provides an object model that represents a collection of elements that are used by the scripts to programmatically access and manipulate the web page. This object model is referred as Document Object Model (DOM). DHTML DOM refers the different elements contained within the web page as objects. It is a platform independent object model that allows the scripts to access the HTML and CSS elements.

DHTML DOM provides full support to events triggered by the user. This allows responding to user’s input and to generate better interactivity with much ease.

 DHTML Objects

Every element contained within a web page is referred as an object. The DHTML objects allow you to access and manipulate the element by using the different properties and methods. The table lists some of the DHTML objects.

ObjectDescription 

a

Specifies the beginning and end of a hypertext link.

body

Specifies the start and end of the body of the document.

div

Divides a web page into multiple sections, where each section can render other HTML elements.

document

Represents the entire HTML document.

form

Specifies a container for other controls, which accepts input from user.

frame

Specifies a frame with a frameset.

frameset                                                

 

Specifies a frameset that can hold multiple frames.

htmlSpecifies that the elements within the document are HTML elements.

 

Other DHTML objects

There are other DHTML objects that refer to the other HTML elements contained within the web page. The table lists some of the other DHTML objects.

Object

Description

img

Specifies an image or video clip to be embedded within the document.

input

Creates different from input controls.

li

Specifies a list item.

link

Specifies a link between the existing document and external documents.

span

Specifies an inline element  to apply styles to a part of the text.

table

Specifies that the content should be displayed in a table.

td

Specifies the data to be displayed in a table cell.

References

DHTML and CSS for the World Wide Web by Jason Cranford Teague
posted May 30, 2017 by Naziya Raza Khan

  Promote This Article
Facebook Share Button Twitter Share Button Google+ Share Button LinkedIn Share Button Multiple Social Share Button


Related Articles

Introduction to Cascading Style Sheets

A Cascading Style Sheet (CSS) is a rule-based language, which specifies the formatting instructions for the content specified in an HTML page. It purpose is to separate HTML content from its formatting so that web page designers would not worry about the formatting and layout. This is because they can define the layout and formatting of the content in a separate file saved as .css. In the .css file, the formatting instructions for an element are referred to as a rule set. CSS was invented in 1997.

Need of Style Sheets

A style sheet is a collection of rules that specifies the appearance of data in an HTML document. HTML is a markup language that focuses only on the layout of the content on a web page. For example, if you want to change the text in the H2 element to bold, this has to be done manually for all the H2 elements. Such a manual task might result into human errors such as missing an occurrence of the H2 element for applying the bold format. This result in format inconsistency among the H2 elements with an HTML page.

Benefits of css
Code Reusability: CSS saves time by specifying the formatting options of an element only once and applying to multiple HTML pages.

Less HTML Code: CSS helps in reducing the file size of HTML documents by specifying the formatting instructions in another file.

Device Independence: CSS is designed for different devices to provide the same look and feel of the HTML page across them.

 

Working of CSS

You can embed the CSS code within the HTML code or link the HTML file to the CSS file. The browser will locate the style sheet irrespective of its location and will apply it to the HTML page. There are certain steps involved in applying a style sheet to an HTML page. These steps are:

1. The user requests for a web page from the browser using the URL.

2. The server responds with the HTML file and related files such as image files, audio files, and external .css files, if any.

3. The browser executes the CSS code using the rendering engine and applies the styles to the HTML file.

4. Then web page is then displayed in the browser.

The rendering engine is software that applies the formatting instructions to the web page and displays the formatted content on the screen.

CSS Syntax

The general syntax of css consists of three parts namely, selector, property, and value. A selector is an HTML element for which you want to specify the style or the formatting instruction. A property is a css property that specifies the type of the style to be applied to the selector. CSS allows controlling the appearance of the content by providing various properties. These properties include text properties,, positioning properties, font properties, color properties, and so on. A value refers to the value of the CSS property. A CSS property can have multiple values. For example, the values of the color property include red, green, yellow, and so on.

The property and its value of a selector are separated with a colon (:). They are enclosed within the curly brackets ({}) that is known as the declaration block.

Multiple Properties and Selectors

You can various combinations for rules for HTML elements. First, you can specify multiple property-value pairs for a selector, which are separated by a semicolon (;) within the declaration block. Second, you can specify multiple selectors for a single property by grouping the selectors. To group the selectors, the selectors are separated by commas followed by a declaration block of properties and values. Third, you can specify properties for multiple selectors. Here, the comma-separated selectors are followed with multiple property-value pairs.

Length Measurement Units

CSS uses various units of measurements for specifying size of the font, width and height of margins, and so on. These units measure the horizontal and vertical length of the content. CSS supports two types of measurement units namely, relative and absolute.

Relative

Relative length specifies the length units related to other length property.

 em- Specifies the font size (height) of a particular font. The em unit is relative to the value of the font-size property of the selector.

 ex-  Specifies the ‘x-height’ of a particular font. The ‘x-height’ value is approximately half the font size or the height of the lowercase letter ‘x’.

 px-  Specifies the size in pixels, which is relative to the screen of the device.

 

      

Absolute

Absolute lengths are specified when the web page designer is aware of the physical properties of the output device.

 in-   Specifies the size in inches, where 1 inch= 2.54 centimeters. 

cm-  Specifies the size in centimeters.

mm- Specifies the size in millimeters.

pt-    Specifies the size in points, where 1 point= 1/72th of the inch.

pc-   Specifies the size in picas, where 1 pica= 12 points.

Types of Style Sheets

There are three types of style sheets namely, inline, internal, and external style sheets. An inline style sheet uses the style attribute within an HTML element to specify the style for HTML elements.

An internal style sheet is also included within the HTML document. However, it is defined using the STYLE element with the HEAD element. The style rules appear in a declaration block for each HTML element under the STYLE element. The type attribute of the STYLE element specified the content type, which is text/css. This means that the content under the STYLE element is CSS code. You can specify any combinations of specifying style rules. The style rules specified for an element will be applied to all the sub-elements. Internal style sheets are useful when styles are to be applied to a specific web page.

READ MORE

What is ROR?

ROR stands for Ruby on Rails.ROR is a popular web development framework.It is a Popular open source framework.

What is Ruby?

Ruby is a programming language.Ruby is an interpreted scripting language for quick and easy object-oriented programming

Interpreted scripting language:

1)ability to make operating system calls directly
2)powerful string operations and regular expressions
3)immediate feedback during development

Quick and easy:

1)variable declarations are unnecessary
2)variables are not typed
3)syntax is simple and consistent
4)memory management is automatic

Object oriented programming:

1)everything is an object
2)classes, methods, inheritance, etc.
3)singleton methods
4)"mixin" functionality by module
5)iterators and closures

What is Rails?

Rails is a web framework built on Ruby, hence the name Ruby on Rails. It enables the programmer to easily create advanced database-driven websites using scaffolding and code generation.

Rail is based on MVC(Modal View Controller).

The model-view-controller pattern proposes three main components or objects to be used in software development:

A Model , which represents the underlying, logical structure of data in a software application and the high-level class associated with it. This object model does not contain any information about the user interface.
A View , which is a collection of classes representing the elements in the user interface (all of the things the user can see and respond to on the screen, such as buttons, display boxes, and so forth)
A Controller , which represents the classes connecting the model and the view, and is used to communicate between classes in the model and view.

Advantage for developing Rails :

1)a lot less code
2)a lot less configuration data
3)bringing up basic functionality quickly
4)building out new functionality incrementally
5)integrated testing

The main advantage of the Ruby programming language and the Ruby on Rails framework is considered to be the speed of development. Practice shows that the speed of project development in RoR is increased by 30 – 40 percent in relation to any other programming language or framework. Primarily the speed increase is determined by an extensive set of ready to work RoR tools, colossal set of ready-made solutions in the community, the Ruby language and ease of programming on it.

Video Tutorial For Web Development with ROR

http://www.youtube.com/watch?v=KfVrqxywEc4

READ MORE

 Extensible Markup Language (XML) is a markup language that defines a set of rules for encoding documents in a format that is both human-readable and machine readable.

The design goals of XML emphasize simplicity, generality, and usability across the Internet. It is a textual data format with strong support via Unicode for different human languages.

Although the design of XML focuses on documents, the language is widely used for the representation of arbitrary data structures such as those used in web services.

XML is mainly designed to carry (or transmit) data, not to display data. XML tags are not predefine, user can define their own tags.

Example:

<root>
         <child>
               <subchild>...........</subchild>
          </child>
</root>                               

XML Architecture :

CDATA & PCDATA :

By default, all text inside an XML document is parsed. But text inside a CDATA section will be ignored by the parser.

PCDATA - Parsed Character Data

XML parsers normally parse all the text in an XML document. When an XML element is parsed, the text between the XML tags is also parsed:

  <message>This text is also parsed</message>

The parser does this because XML elements can contain other elements, as in this example, where the <name> element contains two other elements (first and last):

Example:               

<name>
          <first>Bill</first>
           <last>Gates</last>
</name>

CDATA - (Unparsed) Character Data

The term CDATA is used about text data that should not be parsed by the XML parser.  Everything inside a CDATA section is ignored by the parser. To avoid errors, script code can be defined as CDATA.

A CDATA section starts with  "<![CDATA["  and ends with  "]]>"

Example:

<child>

<![CDATA[

function matchtwo(a,b)

     {

       if (a < b && a < 0 ) then

                 {

                  return 1;

               }

      else

             {

             return 0;

           }

   }

]]>

</child>

Document Type Definations :

A set of structural rules called declarations, which specify a set of elements that can appear in the document as well as how and where these elements may appear.

Purpose of DTD to provide a standard form for a collection of XML documents. Not all XML documents have or need a DTD.

Types of DTD:

There are two types of DTD. They are

Internal DTD (appears within a XML document)

External DTD (appears as a external file – can be used with more than one document)

Declaring Elements within DTD:

DTD contains declarations that define elements, attributes, etc.

Syntax:

<!ELEMENT element-name (element-content)>

Example:

<!ELEMENT person(parent, age, spouse, sibling)>         

Declaring Empty Elements within DTD:

Empty elements are declared with the keyword -  EMPTY

Syntax:

<!ELEMENT element-name EMPTY>

<!ELEMENT br EMPTY>

XML Namespaces :

XML Namespaces provide a method to avoid element name conflicts. To use XML Namespaces, elements are given qualified names.

In XML, element names are defined by the developer. This often results in a conflict when trying to mix XML documents from different XML applications.

For example, this file carries HTML table information:

<table>
     <tr>
          <td>Apples</td>
           <td>Bananas</td>
      </tr>

</table>

Whereas this XML file carries user defined tags:

<table>
              <name>African Coffee Table</name>
               <width>80</width>
              <length>120</length>

</table>

If these two files were added together, there would be a name conflict. Both contain a <table> element, but the elements have different content and meaning. An XML parser will not know how to handle these differences.

Solving the name conflict using a prefix. Name conflicts in XML can easily be avoided using a name prefix.

Example :

<h:table>
       <h:tr>
                <h:td>Apples</h:td>
               <h:td>Bananas</h:td>
      </h:tr>
</h:table>


<f:table>
             <f:name>African Coffee Table</f:name>
             <f:width>80</f:width>
            <f:length>120</f:length>
</f:table>

The xmlns Attribute:

When using prefixes in XML, a so-called namespace for the prefix must be defined. The namespace is defined by the xmlns attribute in the start tag of an element.      

Syntax :       

xmlns:prefix=“URI”

Example :

<root>

       <h:table xmlns:h="http://www.w3.org/1999/xhtml/">
             <h:tr>
                    <h:td>Apples</h:td>
                   <h:td>Bananas</h:td>
            </h:tr>
        </h:table>

    <f:table xmlns:f="http://www.myschools.com/furniture">
                <f:name>African Coffee Table</f:name>
                <f:width>80</f:width>
                <f:length>120</f:length>
    </f:table>

</root>  

Applications of XML:

Hundreds of document formats using XML syntax have been developed, including RSS, Atom, SOAP, SVG, and XHTML. XML-based formats have become the default for many office-productivity tools, including Microsoft Office (Office Open XML), OpenOffice.org and LibreOffice (OpenDocument), and Apple's iWork.

XML has come into common use for the interchange of data over the Internet. IETF RFC 7303 gives rules for the construction of Internet Media Types for use when sending XML. It also defines the media types application/xml and text/xml, which say only that the data is in XML, and nothing about its semantics.

READ MORE
Contact Us
+91 9880187415
sales@queryhome.net
support@queryhome.net
#280, 3rd floor, 5th Main
6th Sector, HSR Layout
Bangalore-560102
Karnataka INDIA.
QUERY HOME
...