DHTML
Dynamic Hypertext Markup Language (commonly abbreviated DHTML) is in fact not a language in and of itself, but rather a combination of static presentation languages (i.e. CSS and all modern flavors of HTML including XHTML, HTML+RDFa, sHTML, etc...) plus a dynamic client-side language which executes within a web browser such as JavaScript (and its associated versions) or VBscript.
From the modern web development community's perspective, DHTML is an archaic anti-pattern, however even two decades after its initial rise in popularity, it is still possible today. Of course using well-separated JavaScript/CSS/xHTML is in fact the best practice for many good reasons, however HTML DOM element-inline CSS is still possible via the "style" attribute and the same goes for JavaScript via any combination of href="javascript:doSomething();doSomethingElse();"' and/or event inline handlers such as onclick="doMoreStuff();" or onfocus="myFocusHandler();".
Such approaches are now frowned upon because of the goals of MVC, separation of concerns, and reusability of raw xHTML data in the DOM to ensure it can easily be validated and parsed.
EXAMPLE
Back then, keep in mind, people were "shouting" when using HTML tags, so everything other than the inline CSS/JS was usually in CAPS:
<A CLASS="expandable" HREF="#toggledText" ONCLICK="document.getElementById('toggledText').style.display = 'block'; this.innerHTML = 'Collapse';" ONDBLCLICK="document.getElementById('toggledText').style.display = 'none'; this.innerHTML = 'Expand';" title="1-click to EXPAND, 2-clicks to COLLAPSE">Expand</A><DIV CLASS="content" ID="toggledText" STYLE="display: none" ONCLICK="this.style.display = 'block';">This is where the text appears.</DIV>
Tools
Resources
- W3schools - DHTML: http://www.w3schools.com/dhtml/
- DHTML Style Guide Working Group: http://dev.aol.com/dhtml_style_guide
- Microsoft DHTML Reference: http://msdn.microsoft.com/en-us/library/ms533050(v=VS.85).aspx
- DOM Object Reference - DHTML attributes: http://web.archive.org/web/20090310141033/http://www.maconstateit.net/tutorials/JSDHTML/DOM.htm
- ToolMan DHTML -- Direct HTML Manipulation Using JavaScript & CSS (most impressive DHTML use): http://tool-man.org/examples/index.html
- DHTML SiteExperts forum: http://www.siteexperts.com/forums/converse.asp?topic_id=9
- Speed test -- 'innerHTML versus DOM manipulation…redux!: https://andrew.hedges.name/experiments/innerhtml/
Tutorials
- Beginners Guide to DHTML: http://www.sitepoint.com/beginners-guide-dhtml/
- What is DHTML?: http://www.javascriptkit.com/howto/dhtmlguide.shtml
- DHTML (Dynamic HTML) the original tutorial: http://www.techiwarehouse.com/engine/94eedc1c/DHTML-Tutorial
- Ryan's DHTML Tutorial: http://www.pageresource.com/dhtml/ryan/
- DHTML Behavior Refresher: http://www.webreference.com/js/tips/010801.html
- DHTML/Layers tutorials: http://www.htmlgoodies.com/beyond/dhtml
- Background images in form elements: http://lab.artlung.com/form-image-background/
- jQuery Image Select/Dropdown: http://www.marghoobsuleman.com/jquery-image-dropdown (progressively enhances real/basic HTML SELECT option dropdowns with jQuery overlay)
- HTML DOM innerHTML Property: https://www.w3schools.com/jsref/prop_html_innerhtml.asp[1][2][3][4][5][6][7]
- HTML innerText .vs. textContent: https://kellegous.com/j/2013/02/27/innertext-vs-textcontent/
External Links
- Floating Menu Script: http://www.dynamicdrive.com/dynamicindex1/staticmenu.htm
- Floating menu not XHTML compatible (includes downloadable XHTML-compatible version): http://www.dynamicdrive.com/forums/showthread.php?t=915
- Unobtrusive slide out menu: http://www.dhtmlgoodies.com/index.html?whichScript=dhtmlgoodies_slide_out_menu
- JavaScript and the Document Object Model .vs. DHTML: http://www.ibm.com/developerworks/web/library/wa-jsdom/
- Image Marquees (pause on mouse-over): http://www.htmlmarquee.com/images.html
References
- ↑ The Problem with innerHTML: http://www.julienlecomte.net/blog/2007/12/38/comment-page-1/index.html
- ↑ Problems with innerHTML: https://stackoverflow.com/questions/27902966/problems-with-innerhtml
- ↑ IE11 Problem with createElement, innerHTML and firstChild: https://social.msdn.microsoft.com/Forums/sqlserver/en-US/28c46d85-c8a1-405b-993e-14abf5b30d30/ie11-problem-with-createelement-innerhtml-and-firstchild
- ↑ Have Your DOM and Script It Too: https://24ways.org/2005/have-your-dom-and-script-it-too
- ↑ Convert HTML string to DOM element: http://krasimirtsonev.com/blog/article/Convert-HTML-string-to-DOM-element
- ↑ Can scripts be inserted with innerHTML?: https://stackoverflow.com/questions/1197575/can-scripts-be-inserted-with-innerhtml
- ↑ Facebook SDK for JavaScript: https://developers.facebook.com/docs/javascript/quickstart/v2.2#loading (remote script loading example)
