• Dynamic HTML is a combination of Hypertext Markup Language (HTML), Cascading Style
Sheets (CSS), and JavaScript.
• HTML provides document structure and context for the information contained in a Web page.
• CSS provides the details on how to present that information.
• JavaScript provides the interactivity and dynamism.
Cascading Style Sheet (CSS)
Cascading refers to a certain set of rules that browsers use, in cascading order, to determine how to use the style information. Such a set of rules is useful in the event of conflicting style information because the rules would give the browser a way to determine which style is given precedence.• CSS provides a rich selection of presentation effects that can be applied to all HTML elements, such as color, background, margins,and borders.
• With CSS, Web developers can set indents on paragraphs, specify a default font for an entire
Web site with one line of code, use small caps,assign an image as a bullet for a list item, and accomplish many more things that are impossible with HTML alone.
Types of CSS:
- Embedded or Internal Style sheet
- External or Linked Style sheet
- Inline style sheet
Benefits:
•Authors and Web site managers may share style sheets across a number of documents (and sites).•Authors may change the style sheet without requiring modifications to the document.
•User agents may load style sheets selectively (based on media descriptions).
1.Embedded or Internal Style Sheet:
•You can put style sheet rules in the head of the document by <style>.
example.html
<head>
<style>
p { color: red; font-size:120%; }
</style>
</head>
<body>
<p>This is a paragraph</p>
</body>
2. External or Linked Style Sheet
You can separate style sheets from HTML documents. Style sheet files are imported to HTML documents by <link>.
[example.html]
<head>
<link rel="stylesheet" type="text/css" href="example.css">
</head>
[example.css]
p{ color: red; foto-size: 120%; }
3.Inline Style Sheet
•The start tags can contain style sheet rules directly in HTML documents by the style attribute.
[example.html]
<p style="color: red; font-size:120%; ">
This is a paragraph</p>
CSS syntax
•This syntax has two parts, the selector and the declaration.Selector: Specifies the target of styling.
Declaration: Specifies the property and value.
•Declaration is contained between {" ... "}.
•Declaration end with a semicolon.
p{ color: red; }
HTML
•Hyper Text Markup Language (HTML) Basics
HTML is a “mark-up language”
You add the mark-up tags to your text document
HTML is a language of mark-up “tags” in angle brackets: <>
each tag has a name and may have one or more quoted attributes
eg. <p class=”thesis” style=”color: red”>
Tags usually come in pairs (with some exceptions)
<html>...</html>, <body>...</body>, <p>...</p>, <hr>, <br>
Web pages are free-form input; line breaks can be used most anywhere and don't affect the appearance of the document
Yes, your entire page could be a single line of text!
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 u.se JavaScript without purchasing a license
• JavaScript brings dynamism and interactivity to DHTML.
• Not only can it provide interactivity with event handlers, it can also modify document object properties on the fly, pop up windows, and write content dynamically.
• In the HTML arena, JavaScript is primarily used to modify stylesheet properties on the fly, after a Web page is loaded, to create animations and special effects.
What JavaScript can 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
DHTML EXAMPLE:
change background color: Develop a DHTML page to display mouse over 2 squares and background color will change according to the color of the square.
<html>
<head>
<script type="text/javascript">
function bgChange(bg) {
document.body.style.background=bg;
}
</script>
</head>
<body>
<b>Mouse over the squares and the background color will change!</b>
<table width="300" height="100">
<tr><td onmouseover="bgChange('red')“ onmouseout="bgChange('transparent')"
bgcolor="red"> </td>
<td onmouseover="bgChange('blue')“ onmouseout="bgChange('transparent')"
bgcolor="blue"> </td>
<td onmouseover="bgChange('green')“ onmouseout="bgChange('transparent')"
bgcolor="green"> </td>
</tr>
</table>
</body>
</html>
great
ReplyDelete