Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
131 views

HTML and Js

DHTML is not a language but rather a term used to describe dynamic and interactive web pages created using HTML, JavaScript, the HTML DOM, and CSS. JavaScript is the most common scripting language used for DHTML as it allows manipulation of HTML elements and reaction to user events. The HTML DOM defines a standard interface for accessing and modifying HTML documents.

Uploaded by

Mylsamy Shanmugam
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
131 views

HTML and Js

DHTML is not a language but rather a term used to describe dynamic and interactive web pages created using HTML, JavaScript, the HTML DOM, and CSS. JavaScript is the most common scripting language used for DHTML as it allows manipulation of HTML elements and reaction to user events. The HTML DOM defines a standard interface for accessing and modifying HTML documents.

Uploaded by

Mylsamy Shanmugam
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 9

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

<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. 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. 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. Specifies a default color, size, 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

<applet> <object> <param />

Deprecated. Defines an embedded applet Defines an embedded object Defines a parameter for an object

TF STF STF

DHTML is NOT a language. DHTML is a TERM describing the art of making dynamic and interactive web pages. DHTML combines HTML, JavaScript, the HTML DOM, and CSS.
DHTML is the art of combining HTML, JavaScript, DOM, 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. DHTML is NOT a language or a web standard. To most people DHTML means the combination of HTML, JavaScript, DOM and CSS. According to the World Wide Web Consortium (W3C): "Dynamic HTML is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated."

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, to create dynamic and interactive web pages.

JavaScript
JavaScript is the most popular scripting language on the internet, and it works in all major browsers. DHTML is about using JavaScript to control, access and manipulate HTML elements. You can read more about JavaScript in the next chapter of this tutorial.

HTML DOM
The HTML DOM is a W3C standard. It describes the Document Object Model for HTML. The HTML DOM defines a standard way for accessing and manipulating HTML documents. DHTML is about using the DOM to access and manipulate HTML elements. You can read more about the HTML DOM in a later chapter of this tutorial.

HTML Events
HTML events are a part of the HTML DOM. DHTML is about creating web pages that reacts to (user)events. You can read more about events in a later chapter of this tutorial.

CSS
CSS defines how to display HTML elements. DHTML is about using JavaScript and the HTML DOM to change the style and positioning of HTML elements.

JavaScript can create dynamic HTML content.

JavaScript Alone
In JavaScript, the statement: document.write(), is used to write output to a web page.

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()); </script> </body> </html>

JavaScript and the HTML DOM


A JavaScript can also be used to change the content or attributes of HTML elements. To change the content of an HTML element:

document.getElementById(id).innerHTML=new HTML
To change the attribute of an HTML element:

document.getElementById(id).attribute=new value

JavaScript and HTML Events


A JavaScript can also be executed when an event occurs, like when a user clicks on an HTML element. To execute code when a user clicks on an element, use the following event attribute:

onclick=JavaScript

JavaScript and CSS


A JavaScript can also change the style of HTML elements. To change the style of an HTML element:

document.getElementById(id).style.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- and language-independent A W3C standard

The HTML DOM defines the objects and properties of all HTML elements, and the methods(interface) to access them. In other words: The HTML DOM is a standard for how to get, change, add, or delete HTML elements.

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.getElementById("header").innerHTML="New Header"; </script> </body> </html>

JavaScript is THE scripting language of the Web. JavaScript is used in billions of Web pages to add functionality, validate forms, communicate with the server, and much more.

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 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 - in the same category as C and C++.

What Can JavaScript do?



JavaScript gives HTML designers a programming tool - HTML authors are normally not programmers, 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 - A JavaScript can be set to execute when something happens, like when a page has finished loading or when a user clicks on an HTML element JavaScript can read and write HTML elements - A JavaScript can read and change the content of an HTML element JavaScript can be used to validate data - A JavaScript can be used to validate form data before it is submitted to a server. 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, and - depending on the browser - load another page specifically designed for that browser JavaScript can be used to create cookies - 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.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>

<script type="text/javascript"> document.getElementById("demo").innerHTML=Date(); </script> </body> </html>

Some Browsers do Not Support JavaScript


Browsers that do not support JavaScript, will display JavaScript as page content. To prevent them from doing this, and as a part of the JavaScript standard, the HTML comment tag should be used to "hide" the JavaScript. Just add an HTML comment tag <!-- before the first JavaScript statement, and a --> (end of comment) after the last JavaScript statement, like this:

<html> <body> <script type="text/javascript"> <!-document.getElementById("demo").innerHTML=Date(); //--> </script> </body> </html>


The two forward slashes at the end of comment line (//) is the JavaScript comment symbol. This prevents JavaScript from executing the --> tag.

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.getElementById("demo").innerHTML=Date(); </script> </body> </html>

JavaScript Functions and Events


JavaScripts in an HTML page will be executed when the page loads. This is not always what we want. Sometimes we want to execute a JavaScript when an event occurs, such as when a user clicks a button. When this is the case we can put the script inside a function. Events are normally used in combination with functions (like calling a function when an event occurs).

JavaScript in <head>
The example below calls a function when a button is clicked:

Example
<html> <head> <script type="text/javascript"> function displayDate() { document.getElementById("demo").innerHTML=Date(); } </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, and you can have scripts in both the body and the head section at the same time. It is a common practice to put all functions in the head section, or at the bottom of the page. This way they are all in one place and do not interfere with page content.

Using an External JavaScript


JavaScript can also be placed in external files. External JavaScript files often contain code to be used on several different web pages. External JavaScript files have the file extension .js. Note: External script cannot contain the <script></script> tags! To use an external script, point to the .js file in the "src" attribute of the <script> tag:

Example
<html> <head> <script type="text/javascript" src="xxx.js"></script> </head> <body> </body> </html>

JavaScript is Case Sensitive


Unlike HTML, JavaScript is case sensitive - therefore watch your capitalization closely when you write JavaScript statements, create or call variables, objects and functions.

JavaScript Statements

A JavaScript statement is a command to a browser. The purpose of the command is to tell the browser what to do. This JavaScript statement tells the browser to write "Hello Dolly" to the web page:

document.write("Hello Dolly");

JavaScript Code
JavaScript code (or just JavaScript) is a sequence of JavaScript statements. Each statement is executed by the browser in the sequence they are written. 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>"); document.write("<p>This is a paragraph.</p>"); document.write("<p>This is another paragraph.</p>"); </script>

JavaScript Blocks
JavaScript statements can be grouped together in blocks. Blocks start with a left curly bracket {, and end with a right curly bracket }. 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.write("<h1>This is a heading</h1>"); document.write("<p>This is a paragraph.</p>"); document.write("<p>This is another paragraph.</p>"); } </script>

JavaScript and the HTML DOM


A JavaScript can also be used to change the content or attributes of HTML elements. To change the content of an HTML element:

document.getElementById(id).innerHTML=new HTML
To change the attribute of an HTML element:

document.getElementById(id).attribute=new value

You might also like