1 / 16

DHTML: Dynamic HTML

DHTML: Dynamic HTML. What is DHTML?. A collection of enhancements to HTML To create dynamic and interactive websites Combination of Static Markup language (e.g., HTML) Client-side Scripting language (e.g., JavaScript) Presentation Definition Language (e.g., CSS) Document Object Model

quincy-ayers
Download Presentation

DHTML: Dynamic HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. DHTML:Dynamic HTML Internet Technology

  2. What is DHTML? • A collection of enhancements to HTML • To create dynamic and interactive websites • Combination of • Static Markup language (e.g., HTML) • Client-side Scripting language (e.g., JavaScript) • Presentation Definition Language (e.g., CSS) • Document Object Model • To allow programs to manipulate content/structure/style of documents  Example Internet Technology

  3. Cascading Style Sheets • CSS defines how to display HTML documents • Specifies document’s font, color, margin, background image, etc. • Enables separation of document content from presentation • Change one external CSS file to change the display of an entire website • A webpage can have multiple display formats • CSS Types • External CSS → in an external file Example • Save CSS in an external .css file • Reference the CSS file with <link> tag in the HEAD section • <head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head> • Document-level CSS → embedded in the HEAD section Example • Define CSS in the HEAD section • Inline CSS → within an element tag Example • Use the style attribute in an HTML tag Internet Technology

  4. Why “Cascading”? • Styles defined in many different documents can be used together. The “cascading” refers to the fact that styles defined later on have a higher preference than those defined earlier Corporate level styles (corporate logo and colors) Department level styles Styles defined for a group of documents, such as a report Styles defined directly in the HTML page Internet Technology

  5. CSS: Basic Syntax • Selector HTML element to style/format • e.g., body, h1, p, hr, ul, ol, etc. • Declaration  Consists of Property & Value • Declarations are separated by semicolon • Property and value are separated by colon • Property Style attribute to change • e.g., color, font-size, font-family, etc. Internet Technology

  6. CSS: ID & Class Selectors • ID Selector • Specifies a style for a single HTML element • ID Selector name starts with ‘#’ #para1 { text-align:center; color:red; } • Uses the ‘id’ attribute of HTML element to apply the style <p id=“para1’>CSS ID selector applied</p> • Class Selector • Specifies a style for a group of HTML element • Useful for setting a same style for several elements • Class Selector name starts with ‘.’ .center { text-align:center; color:red; } • Uses the ‘class’ attribute of HTML element to apply the style <h1 class="center">Center-aligned heading</h1> <p class="center">Center-aligned paragraph.</p>  Example Internet Technology

  7. External CSS • Style document is defined in an external .css file • HTML document calls style sheet through <link> element <HEAD><LINK REL=“stylesheet” TYPE="text/css" href="style1.css“ ></HEAD> • One CSS can be applied to multiple HTML • Multiple CSS can be used by one HTML  Example Internet Technology

  8. Document-Level CSS • Style is defined within a document’s HEAD section <head> <title>CSS Examples</title> <style type=“text/css”> <!-- use the HTML comment to hide the style definitions from older browsers H1 { font-family: Verdana; font-size: 24px; } --> </style> </head>  Example Internet Technology

  9. Inline CSS • Style is defined within an HTML element <P STYLE="text-indent:1in; text-align:center”> • Takes precedence over other styles • Override styles for a specific element • Tips • use external CSS to apply to a group of pages • use document-level CSS to override external for a given page • use inline CSS to override for a given element (use sparingly)  Example Internet Technology

  10. CSS: DIV & SPAN • DIV Tag • Apply a style to a group of tags • Group any number of HTML elements • Block-level (i.e. includes a paragraph break) <div style=“text-align: center;”> <h1>Using DIV to group tags</h1> <p>Using DIV to group tags</p> </div> • SPAN Tag • Change the style of an element at a non-block level • Enclose text • No implied paragraph break <h3>Using <span style=“color:red;”>SPAN</span> to change color</h3>  Example Internet Technology

  11. CSS: Box Model • CSS can control the layout of elements as boxes • Box Model = a box (padding, border, margin) around HTML elements • Margin – transparent area around border • Border – colored area around padding & content • Padding – area around content • Content – area where text and images appear div.ex{width:220px;padding:10px;border:5px solid green;margin:10px;}  Example Internet Technology

  12. CSS: Positioning • Position Properties • top, bottom, left, right • Positioning Method • Static Positioning (default) • Element is placed according to the normal flow of the page • Fixed Positioning • Element is placed in a fixed location relative to browser window • Relative Positioning • Element is placed relative to its normal position • Can create overlapping elements • Absolute Positioning • Element can be placed anywhere on a page • Absolutely positioned elements do not affect other elements’ positions • Can create overlapping elements • Use “z-index” to set the stack order of elements  Example Internet Technology

  13. JavaScript • A light-weight, client-side programming language • Designed to add interactivity to HTML • Create dynamic content • generate HTML codes on the fly • React to events (e.g., user action) • Popup message, display status, open & close windows • Validate data • do simple calculations on the fly, manipulate forms • Embedded in the HTML code • Easy to learn & use • Every HTML element, Document and browser Window are Objects • Objects have properties that can be manipulated to control document appearance, content and browser behavior • Event handlers can provide interaction • e.g., onClick, onFocus, onBlur, onMouseOver Internet Technology

  14. How to write JavaScript • In an external file • Add a link to the external javascript file in the head section • <script type=“text/javascript” src=“myjslib.js”></script> • Inside <head></head> • Starts with <script type=“text/javaScript"> • Ends with </script> • // starts a comment till the end of line • /* and */ for multi-line comments • In Body text • Starts with <script type=“text/javascript”> • Ends with </script>  Example Internet Technology

  15. How to write JavaScript • JavaScript is Case-Sensitive • JavaScript Statements • Tell browser what to do • End with semicolon (optional) OR end-of line. • e.g. document.write(“Hello, World!”); • Use var to declare variables • Use operators(e.g., =, +, -, *, /) to manipulate values. • Use function to declare functions function message(txt) { var label = “Warning”; alert = label + “: “ + txt;} <a href=“#” onMouseOver=“message(‘Hello’);”>  Example Internet Technology

  16. JavaScript: Events & Objects • Events • User actions that trigger JavaScript • OnClick: A mouse click • OnMouseOver: A mouse over an HTML element • OnLoad: Page loading • Objects • Things that have properties and methods • Properties • Values associated with an object • e.g., String object has “length” property • Methods • Values associated with an object • e.g., String object has “toLowercase” property • Example: Mouse events & String object • Example: JavaScript & CSS • Example: iframe navigation Internet Technology

More Related