Tag Basic <!DOCTYPE> <html> <body> <h1> to <h6> <p> <br /> <hr /> <!--...

--> Formatting <acronym> <abbr> <address> <b> <bdo> <big> <blockquote> <center> <cite> <code> <del> <dfn> <em> <font> <i> <ins> <kbd> <pre> <q> <s> <samp> <small> <strike> <strong> <sub> <sup> <tt> <u> <var> <xmp> Forms <form> <input /> <textarea> <button> <select>

Description Defines the document type Defines an HTML document Defines the document's body Defines HTML headings Defines a paragraph Inserts a single line break Defines a horizontal line Defines a comment Defines an acronym Defines an abbreviation Defines contact information for the author/owner of a document Defines bold text Overrides the current text direction Defines big text Defines a long quotation Deprecated. Defines centered text Defines a citation Defines a piece of computer code Defines text that has been deleted from a document Defines a definition term Defines emphasized text Deprecated. Defines font, color, and size for text Defines italic text Defines text that has been inserted into a document Defines keyboard input Defines preformatted text Defines a short quotation Deprecated. Defines strikethrough text Defines sample output from a computer program Defines smaller text Deprecated. Defines strikethrough text Defines strong text Defines subscripted text Defines superscripted text Defines teletype text Deprecated. Defines underlined text Defines a variable Deprecated. Defines preformatted text Defines an HTML form for user input Defines an input control Defines a multiline input control (text area) Defines a clickable button Defines a drop-down list

DTD STF STF STF STF STF STF STF STF STF STF STF STF STF STF STF TF STF STF STF STF STF TF STF STF STF STF STF TF STF STF TF STF STF STF STF TF STF

STF STF STF STF STF

or font for all the text in a document Defines a client-side script STF STF STF STF STF F F TF TF STF STF STF STF STF STF STF STF TF STF STF STF TF STF STF STF STF STF STF STF STF STF STF STF STF STF STF STF STF STF TF STF Defines an alternate content for users that do not support client-side scripts STF .<optgroup> <option> <label> <fieldset> <legend> Frames <frame /> <frameset> <noframes> <iframe> Images <img /> <map> <area /> Links <a> <link /> Lists <ul> <ol> <li> <dir> <dl> <dt> <dd> <menu> Tables <table> <caption> <th> <tr> <td> <thead> <tbody> <tfoot> <col /> <colgroup> Styles <style> <div> <span> Meta Info <head> <title> <meta> <base /> <basefont /> Programming <script> <noscript> Defines a group of related options in a drop-down list Defines an option in a drop-down list Defines a label for an <input> element Groups related elements in a form Defines a caption for a <fieldset> element Defines a window (a frame) in a frameset Defines a set of frames Defines an alternate content for users that do not support frames Defines an inline frame Defines an image Defines an image-map Defines an area inside an image-map Defines an anchor Defines the relationship between a document and an external resource Defines an unordered list Defines an ordered list Defines a list item Deprecated. Specifies a default color. size. Defines a menu list Defines a table Defines a table caption Defines a header cell in a table Defines a row in a table Defines a cell in a table Groups the header content in a table Groups the body content in a table Groups the footer content in a table Defines attribute values for one or more columns in a table Defines a group of columns in a table for formatting Defines style information for a document Defines a section in a document Defines a section in a document Defines information about the document Defines the document title Defines metadata about an HTML document Specifies the base URL/target for all relative URLs in a document Deprecated. Defines a directory list Defines a definition list Defines an item in a definition list Defines a description of an item in a definition list Deprecated.

and CSS." HTML The W3C HTML 4 standard has rich support for dynamic content: • • • • HTML supports JavaScript HTML supports the Document Object Model (DOM) HTML supports HTML Events HTML supports Cascading Style Sheets (CSS) DHTML is about using these features. access and manipulate HTML elements. the HTML DOM. JavaScript. DOM and CSS. DHTML is about using JavaScript to control. JavaScript JavaScript is the most popular scripting language on the internet. You can read more about JavaScript in the next chapter of this tutorial. DHTML combines HTML. to create dynamic and interactive web pages. Defines an embedded applet Defines an embedded object Defines a parameter for an object TF STF STF DHTML is NOT a language. DOM. DHTML is NOT a language or a web standard. JavaScript. JavaScript. DHTML is a TERM describing the art of making dynamic and interactive web pages. style sheets and scripts that allows documents to be animated. . According to the World Wide Web Consortium (W3C): "Dynamic HTML is a term used by some vendors to describe the combination of HTML.<applet> <object> <param /> Deprecated. and CSS. What you should already know Before you continue you should have a basic understanding of the following: • • • HTML CSS JavaScript DHTML is NOT a Language DHTML stands for Dynamic HTML. To most people DHTML means the combination of HTML. DHTML is the art of combining HTML. and it works in all major browsers.

DHTML is about using JavaScript and the HTML DOM to change the style and positioning of HTML elements. You can read more about events in a later chapter of this tutorial. Example The following example uses JavaScript to display the current date and time on a page: Example <html> <body> <script type="text/javascript"> document.write(Date()). JavaScript can create dynamic HTML content. HTML Events HTML events are a part of the HTML DOM.HTML DOM The HTML DOM is a W3C standard. CSS CSS defines how to display HTML elements.getElementById(id). DHTML is about creating web pages that reacts to (user)events. </script> </body> </html> JavaScript and the HTML DOM A JavaScript can also be used to change the content or attributes of HTML elements. DHTML is about using the DOM to access and manipulate HTML elements. To change the content of an HTML element: document.innerHTML=new HTML To change the attribute of an HTML element: . is used to write output to a web page. The HTML DOM defines a standard way for accessing and manipulating HTML documents.write(). It describes the Document Object Model for HTML. You can read more about the HTML DOM in a later chapter of this tutorial. JavaScript Alone In JavaScript. the statement: document.

validate forms. To change the style of an HTML element: document.getElementById(id). add. Change an HTML Element The following example changes the content of an h1 element: Example <html> <body> <h1 id="header">Old Header</h1> <script type="text/javascript"> document. or delete HTML elements.property=new style What is the HTML DOM? The HTML DOM is: • • • • A Document Object Model for HTML A standard programming interface for HTML Platform. change. What is JavaScript? • • • JavaScript was designed to add interactivity to HTML pages JavaScript is a scripting language A scripting language is a lightweight programming language . JavaScript is used in billions of Web pages to add functionality.attribute=new value JavaScript and HTML Events A JavaScript can also be executed when an event occurs. To execute code when a user clicks on an element.getElementById("header").and language-independent A W3C standard The HTML DOM defines the objects and properties of all HTML elements.getElementById(id). use the following event attribute: onclick=JavaScript JavaScript and CSS A JavaScript can also change the style of HTML elements.innerHTML="New Header".style. and much more.document. like when a user clicks on an HTML element. communicate with the server. </script> </body> </html> JavaScript is THE scripting language of the Web. In other words: The HTML DOM is a standard for how to get. and the methods(interface) to access them.

A JavaScript can read and change the content of an HTML element JavaScript can be used to validate data .HTML authors are normally not programmers. This saves the server from extra processing JavaScript can be used to detect the visitor's browser .A JavaScript can be used to detect the visitor's browser.A JavaScript can be used to store and retrieve information on the visitor's computer Writing to The HTML Document The example below writes a <p> element with current date information to the HTML document: Example <html> <body> <h1>My First Web Page</h1> <script type="text/javascript"> document. What Can JavaScript do? • • • • • • • • • • JavaScript gives HTML designers a programming tool .A JavaScript can be used to validate form data before it is submitted to a server. but JavaScript is a scripting language with a very simple syntax! Almost anyone can put small "snippets" of code into their HTML pages JavaScript can react to events .• • • JavaScript is usually embedded directly into HTML pages JavaScript is an interpreted language (means that scripts execute without preliminary compilation) Everyone can use JavaScript without purchasing a license Are Java and JavaScript the same? NO! Java and JavaScript are two completely different languages in both concept and design! Java (developed by Sun Microsystems) is a powerful and much more complex programming language . like when a page has finished loading or when a user clicks on an HTML element JavaScript can read and write HTML elements .load another page specifically designed for that browser JavaScript can be used to create cookies .A JavaScript can be set to execute when something happens. and .in the same category as C and C++.depending on the browser .write("<p>" + Date() + "</p>"). </script> </body> </html> Changing HTML Elements The example below writes the current date into an existing <p> element: Example <html> <body> <h1>My First Web Page</h1> <p id="demo"></p> .

To prevent them from doing this.getElementById("demo"). JavaScript in <body> The example below writes the current date into an existing <p> element when the page loads: Example <html> <body> <h1>My First Web Page</h1> <p id="demo"></p> <script type="text/javascript"> document.innerHTML=Date(). will display JavaScript as page content. like this: <html> <body> <script type="text/javascript"> <!-document. and as a part of the JavaScript standard. When this is the case we can put the script inside a function. This is not always what we want. such as when a user clicks a button.getElementById("demo"). //--> </script> </body> </html> The two forward slashes at the end of comment line (//) is the JavaScript comment symbol. </script> </body> </html> JavaScript Functions and Events JavaScripts in an HTML page will be executed when the page loads. and a --> (end of comment) after the last JavaScript statement.getElementById("demo"). the HTML comment tag should be used to "hide" the JavaScript. Events are normally used in combination with functions (like calling a function when an event occurs). Sometimes we want to execute a JavaScript when an event occurs. Just add an HTML comment tag <!-. This prevents JavaScript from executing the --> tag.innerHTML=Date().<script type="text/javascript"> document.before the first JavaScript statement.innerHTML=Date(). </script> </body> </html> Some Browsers do Not Support JavaScript Browsers that do not support JavaScript. JavaScript in <head> The example below calls a function when a button is clicked: .

} </script> </head> <body> <h1>My First Web Page</h1> <p id="demo"></p> <button type="button" onclick="displayDate()">Display Date</button> </body> </html> Scripts in <head> and <body> You can place an unlimited number of scripts in your document.getElementById("demo"). JavaScript is case sensitive . point to the . objects and functions. It is a common practice to put all functions in the head section. This way they are all in one place and do not interfere with page content. and you can have scripts in both the body and the head section at the same time. External JavaScript files often contain code to be used on several different web pages.Example <html> <head> <script type="text/javascript"> function displayDate() { document.js. or at the bottom of the page. Note: External script cannot contain the <script></script> tags! To use an external script.therefore watch your capitalization closely when you write JavaScript statements.js file in the "src" attribute of the <script> tag: Example <html> <head> <script type="text/javascript" src="xxx. External JavaScript files have the file extension . create or call variables.js"></script> </head> <body> </body> </html> JavaScript is Case Sensitive Unlike HTML. Using an External JavaScript JavaScript can also be placed in external files.innerHTML=Date(). JavaScript Statements .

document.write("Hello Dolly"). document. </script> JavaScript Blocks JavaScript statements can be grouped together in blocks.write("<p>This is a paragraph.write("<p>This is another paragraph.attribute=new value .</p>").</p>").</p>"). document.write("<p>This is a paragraph.</p>"). Each statement is executed by the browser in the sequence they are written.innerHTML=new HTML To change the attribute of an HTML element: document. This JavaScript statement tells the browser to write "Hello Dolly" to the web page: document.write("<p>This is another paragraph. To change the content of an HTML element: document. This example will write a heading and two paragraphs to a web page: Example <script type="text/javascript"> document.write("<h1>This is a heading</h1>"). The purpose of a block is to make the sequence of statements execute together. This example will write a heading and two paragraphs to a web page: Example <script type="text/javascript"> { document.A JavaScript statement is a command to a browser. } </script> JavaScript and the HTML DOM A JavaScript can also be used to change the content or attributes of HTML elements. document.write("<h1>This is a heading</h1>"). Blocks start with a left curly bracket {.getElementById(id).getElementById(id). The purpose of the command is to tell the browser what to do. JavaScript Code JavaScript code (or just JavaScript) is a sequence of JavaScript statements. and end with a right curly bracket }.