Dhtml sohaib ch
Download as PPTX, PDF3 likes2,700 views
DHTML is a combination of technologies used to create dynamic webpages. It uses HTML, JavaScript, CSS, and the DOM to allow animation, dynamic content changes, and interactivity. Some key features of DHTML include dynamic content, dynamic positioning of elements, dynamic styles, and data binding. Events and the DOM allow scripts to access and manipulate webpage elements. Dynamic styles and data binding provide ways to quickly change appearance and bind external data sources. DHTML enables animations, drop-down menus, and other interactive elements on webpages.
Dhtml sohaib ch
- 1. DHTML Sohaib Saleem Ch 5th Semester Resp. Inam ul Haq DHTML By Sohaib- UE Okara Campus 1
- 2. Contents ■ Define what is DHTML? ■ Why DHTML ■ Features ■ Document Object Model ■ Event ■ Dynamic Style ■ Data Binding ■ Difference between HTML and DHTML ■ Uses ■ Advantage of DHTML ■ Disadvantage of DHTML DHTML By Sohaib- UE Okara Campus 2
- 3. Define what is DHTML? ■ DHTML stands for “dynamic hypertext transfer markup language”. ■ DHTML is not a language. ■ DHTML is a term describing the art of making dynamic & interactive WebPages. ■ Designed to enhance a web user’s experience. DHTML By Sohaib- UE Okara Campus 3
- 4. Define DHTML cont…. ■ DHTML is a combination of web development technologies used to create dynamically changing websites. ■ WebPages may include animation, dynamic menus & text effects. ■ The technologies used include a combination of HTML, JavaScript, or VBScript, CSS & the document object model(DOM). DHTML = CSS + JavaScript + DOM + HTML DHTML By Sohaib- UE Okara Campus 4
- 5. Why DHTML ■ With DHTML you can create: – Animation – Pop-up menus – Inclusion of Web page content from external data sources – Elements that can be dragged and dropped within the Web page DHTML By Sohaib- UE Okara Campus 5
- 6. Features ■ DHTML includes the following features:- – Dynamic content, which allows the user to dynamically change web page content. – Dynamic positioning of web page elements. – Dynamic style which allows the user to change the web page’s color, font, size or content. – Dynamic fonts (Netscape Communicator) – Data binding (Internet Explorer) DHTML By Sohaib- UE Okara Campus 6
- 7. Document Object Model ■ To allow scripts and components to access features of HTML and CSS, the contents of the document were represented as objects in a programming model known as the Document Object Model (DOM). ■ The DOM also provides access to user actions such as pressing a key and clicking the mouse. ■ 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 By Sohaib- UE Okara Campus 7
- 8. Document Object Model DHTML By Sohaib- UE Okara Campus 8
- 9. 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. ■ Some of DHTML objects: – 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. – frame: specifies a frame within a frameset. – frameset: specifies a frameset that can hold multiple frames. – html: specifies the HTML elements. DHTML By Sohaib- UE Okara Campus 9
- 10. DHTML objects ■ Some of DHTML objects: – img: specifies an image or video clip to be embedded in the document. – input: creates different form input controls. – li: specifies a list item. – link: specifies a link between the existing document and external document. – 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. – tr: specifies a table row. DHTML By Sohaib- UE Okara Campus 10
- 11. Event ■ An event occurs when the user interacts with the web page. Some of the commonly generated events are mouse clicks, key strokes, and so on. ■ The process of handling these events is known as event handling. Event handling is process of specifying actions to be performed when an event occurs. This is done by using an event handler. ■ The event handler is a scripting code or a function that defines the actions to be performed when the event triggered. ■ When an event occurs, an event handler function that is associated with the specific event is invoked. DHTML By Sohaib- UE Okara Campus 11
- 12. Life circle of an event ■ The user performs an action to raise an event. ■ The event object is updated to determine the event state. ■ The event is fired. ■ The event bubbling occurs as the event bubbles through the elements of the hierarchy. ■ The event handler is invoked that performs the specified actions. ■ Some keyboard events: ■ onKeyDown: Occurs when a key is pressed down. ■ onKeyUp: Occurs when a key is released. ■ onKeyPress: Occurs when a key is pressed and released. DHTML By Sohaib- UE Okara Campus 12
- 13. Dynamic styles ■ Dynamic styles are a key feature of DHTML. ■ Quickly change the appearance and formatting of elements in a document without adding or removing elements. ■ We can change inline styles on individual elements and change style rules using simple script-based programming. ■ Helps keep your documents small and the scripts that manipulate the document fast. DHTML By Sohaib- UE Okara Campus 13
- 14. Data binding ■ Bind individual elements in your document to data from another source, such as a database or comma-delimited text file. ■ When the document is loaded, the data is automatically retrieved from the source and formatted and displayed within the element. DHTML By Sohaib- UE Okara Campus 14
- 15. Difference between HTML and DHTML ■ HTML stands for Hyper Text Mark-up Language where DHTML stands for Dynamic Hyper Text Mark-up Language. ■ Html is a language where DHTML is a Technology. ■ HTML is a collection of tags where in DHTML, It is a collection of technology. ■ DHTML sites are dynamic in nature and HTML is static. ■ A plain page without any styles and Scripts called as HTML whereas A page with HTML, CSS, DOM and Scripts called as DHTML. ■ HTML sites will be slow upon client-side technologies while DHTML sites will be fast enough upon client-side technologies. DHTML By Sohaib- UE Okara Campus 15
- 16. Uses ■ Animate text and images in their document, independently moving each element from any starting point to any ending point, following a predetermined path or one chosen by the user. ■ Embed a ticker that automatically refreshes its content with the latest news, stock quotes, or other data. ■ Use a form to capture user input, and then process and respond to that data without having to send data back to the server. ■ Include rollover buttons or drop-down menus. DHTML By Sohaib- UE Okara Campus 16
- 17. Advantages of DHTML 1. DHTML is more efficient for content management purposes. 2. Results in faster and fresher content and visual appeal. 3. DHTML for web design is that it is easier to create good internal linking and cross linking. 4. Small file size:- DHTML files are small compared to other interactive media such as flash or shockwave. Therefore they have a shorter download time & take up less bandwidth. 5. Supported by both major browser manufactures:- both Microsoft & Netscape currently support DHTML in some shape or form. DHTML By Sohaib- UE Okara Campus 17
- 18. Advantages of DHTML 6. Fast and Zippy: - DHTML loads content on fly. Your whole page does not loads but only the content part that needs to be altered, so saving the crucial time for the users and giving the snazzy look to the website. 7. DHTML will be a standard:- the WWW consortium or the W3C is the currently implementing standards for DHTML technologies. It has already released preliminary specification for DOM & CSS. 8. No plug-ins necessary:- DHTML uses most of the features already present in the browsers, so there is no need to download any sort of plug-ins. 9. Great Utility:- The dynamic features possessed by dHTML are helping web designers to create Web pages that posses compact looks, downloads fast, have graphic effects, provides greater functionality and can hold much more text or content all at the same time. 10. Doesn’t require a java virtual machine. DHTML By Sohaib- UE Okara Campus 18
- 19. Disadvantages of DHTML 1. Costly editing tools:- DHTML provides great functionality but the editors available for that in market are pretty expensive. E.g.:- Dreamweaver & fusion 2. Only new browser support DHTML:- DHTML is only supported by Netscape 4.0 or higher & internet explolor(IE) 4.0 or higher version. 3. Long and complex coding:- DHTML coding is long and complex only the expert JavaScript & HTML programmers can write them & edit them with good degree of functionality. 4. Browser support problem:- DHTML suffer from browser support problems for different browser. 5. Unprotected source code. DHTML By Sohaib- UE Okara Campus 19
- 20. Thank you !! DHTML By Sohaib- UE Okara Campus 20