1 / 150

Dynamic HTML

Dynamic HTML. Minder Chen mchen@gmu.edu http://65.168.115.5/dhtml/. COURSE OVERVIEW. Overview This course introduces you to Dynamic HTML, extension of the traditional static HTML document, to create pages that are live and interactive on the client. Objective

max
Télécharger la présentation

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. Dynamic HTML Minder Chen mchen@gmu.edu http://65.168.115.5/dhtml/ Dynamic HTML- 1

  2. COURSE OVERVIEW • Overview This course introduces you to Dynamic HTML, extension of the traditional static HTML document, to create pages that are live and interactive on the client. • Objective Upon completion of this course, you should be able to • understand new features of Dynamic HTML • dynamically change the rendering and content of a document • create visually HTML documents that interact with the user without the burden of relying on server-side programs Dynamic HTML- 2

  3. TABLE OF CONTENTS 1. Introduction to Dynamic HTML 2. Dynamic Styles 2.1 Cascading Style Sheets 2.2 Dynamic Style and CSS 2.3 Style Sheet Properties 2.4 Dynamic Styles 3. Dynamic Position 4. Dynamic Contents 5. Data Binding 6. Dynamic HTML Object Model Dynamic HTML- 3

  4. References • Shelley Powers, Dynamic HTML, IDG Books, 1998. • Danny Goodman, Dynamic HTML: The Definitive Reference, O'Reilly, 1998. • Dynamic HMTL tutorial at: • For cross-browser compatibility by Shelley Powers: http://www.yasd.com/samples/dhtml/toc.htm • http://www.microsoft.com/workshop/ • http://msdn.microsoft.com/workshop/author/css/reference/attributes.asp • HTML 4.0 Working Draft at http://www.w3.org/TR/WD-html40/ • CSS1 Recommendation at http://www.w3.org/TR/REC-CSS1 • CSS Positioning Working Draft at http://www.w3.org/TR/WD-positioning • Preliminary version of the Document Object Model requirements document at http://www.w3.org/DOM/drafts/requirements.html Dynamic HTML- 4

  5. 1. Introduction to Dynamic HTML Dynamic HTML- 5

  6. What Is Dynamic HTML? • HTML is an application of SGML(Standard Generalized Markup Language). • Dynamic HTML provides authors with total creative control over all aspects of an HTML document. It extends traditional HTML and Cascading Style Sheets to let you access and manipulate all elements of a document—tags, attributes, styles, images, objects, and text—creating, moving, and modifying these elements when needed. • In addition to two aspects of tradition HTML: structure and contents. Cascading Style sheets add the "style" aspect of your web pages. Dynamic HTML now includes a fourth component: behavior, referring to the interaction between the HTML pages and the user implemented via client-side scripting languages. • Dynamic HTML is a set of innovative features in Microsoft Internet Explorer 4.0 or Netscape Navigator 4.0. By enabling authors to dynamically change the rendering and content of a document, to create visually outstanding HTML documents that interact with the user without the burden of relying on server-side programs or complicated sets of HTML pages to achieve special effects. Dynamic HTML- 6

  7. New Features in Dynamic HTML • HTML 4.0 and CSS (Cascading Style Sheet) support • IE 4.0 support latest HTML 4.0 standard, CSS1 and many of the new CSS enhancements. These HTML and CSS standards define what is exposed by Dynamic HTML object model • Full access to the document structure (DOM: Document Object Model) • Through the Dynamic HTML object model, all elements in the document are accessible and controllable by scripts. You can change colors, typefaces, spacing, indentation, position, and even the visibility of text. • Dynamic Styles • Use the Dynamic HTML object model to modify the document’s CSS in order to change the appearance of the document. Dynamic HTML- 7

  8. New Features • Dynamic Positioning • Use the Dynamic HTML object model to access and manipulate the positions of the elements and the layout of pages. • Dynamic Content • Use the Dynamic HTML object model to change the content of the document after loading. • Instant user response (new attributes for events) • Used the Dynamic HTML new event model to exposes all user actions to the page. Document’s contents or style can be dynamically changed based on use’s interaction. • Client/server Web page (Data binding) • Tables, forms and reports are extended in IE 4.0. Data is asynchronously downloaded and stored locally allowing client-side searching and sorting without assistance from server. • Multimedia and animation effects • Multimedia and animation effects are tightly integrated in IE 4.0. These effects include filters to simulate light sources, shadows and other effects that operate directly on text or controls. Transition effects between images and text or even pages can also be added. Dynamic HTML- 8

  9. Programming Language • A programming language is used to manipulate the Dynamic HTML Object Model. • Dynamic HTML is designed to be platform independent. Therefore, Java Script, Jscript, VBScript, C++, Java or any other programming language can be used as the language of choice. • This course uses primarily JScript to access the document object model. • Extensions for the Dynamic HTML object model are compatible with that of past version. Dynamic HTML- 9

  10. 2. Dynamic Styles Dynamic HTML- 10

  11. Structure and Style • Structure provides contexts for the information contained with a document. For example, elements H1 through H6 are meant to define various header and their relative levels. • Stylistic tags (physical tags), like <B> and <I> were introduced mark bold and italic text, were invented to create an interesting page to attract more hit or visit of the web site. • Confuse the use of Style tag and Structure tags does have consequence. • Tools become less powerful. E.g. Indexing tool • Invalidates usefulness of (logical) tags, e.g. <STRONG> tag • A properly structured page can improve accessibility to the underlying information. Dynamic HTML- 11

  12. Structure and Style • HTML defines a set of rules representing the proper structure of the document. A DTD (Document Type Definition) describes the relationship among elements. E.g. H1 can be followed by H1 or H2 but not H3. • Until mid-1996, HTML fails to be a true SGML (Standard Generalized Markup Language), in which style and structure are defined separately. A document written in SGML can have an associated style sheet that defines how the structural elements are rendered. • In mid-1996, a new language named Cascading Style Sheets was introduced for specifying style in HTML. The CSS has been adopted by the major browser implementations. Dynamic HTML- 12

  13. Structure and Style • With CSS a Strong elements (and Bold elements) is no longer presents boldface text. Instead a style sheet is used to specify how to render text enclosed in the <strong> and </strong> tags. <STYLE> STRONG {font-style:italic} </STYLE> • CSS (Cascading Style Sheets) support gives web authors word processor-like control over the text in HTML documents so you can define complex styles for things like paragraphs, documents, and collections of documents so you can create extensive and dramatic page layout settings. • To take full advantage of Dynamic HTML, document should separate the content structure from the presentation/style. Dynamic HTML- 13

  14. Sample Style Definition • H1 { font-size: x-large; color: green } • H2 { font-size: large; color: blue } • .x { color: red } • P.note { font-size: small } • #footer { font-family: serif } • H1 and H2 are selectors, which correspond to style names. • The selector's properties and values are contained within the curly braces { }. • font-size is a property, and x-large is the value of the font-size property. • You can specify multiple properties for a selector by separating each with a semi-colon ( ; ). • .x is a class selector • .note is a class selector, and #footer is an ID selector. Dynamic HTML- 14

  15. Defining and Using Styles <html><head><title>Style Sheet</title> <style type="text/css"> <!-- P {font-size:18pt; margin-left:20pt;} H1 {color: blue;} P.class1 { font-family: Comic Sans MS; font-size: 20pt; color: rgb(0,0,255); font-weight: bold; font-style: italic; margin-left: 10px} #A1 {font-size: 16pt} --> </style> </head> <body> <h1>Heading 1</h1> <p>This is a test</p> <p class="class1">This is a test. </p> <h2 style="font-weight: bold; font-style: italic; border: medium none">Heading 2 </h2> <p style="font-weight: bold; font-style: italic; border: medium none">This is a <span style="font-weight: bolder; font-style: normal; color: rgb(128,0,128)">span </span>example. </p> <p class="class1" id="A1">Using id1 ...</p> </body> </html> Dynamic HTML- 15

  16. 2.1 Cascading Style Sheets • All the styles will "cascade" into a new "virtual" Style Sheet by the following rules, where number four has the highest priority: • Browser default • External Style Sheet • Internal Style Sheet (inside the <head> tag) • Inline Style (inside HTML element) Dynamic HTML- 16

  17. Cascading Style Sheets (CSS) • CSS is a language with a set of properties for defining the appearance of a HTML document, and adding dynamic style to a page through a script. • Style sheet contains only the definition of the style of a document, so as to separate the style from either the contents or structure. • The term Cascading in CSS refers to the ability to merge multiple style sheets to form a single style definition for an element or for the entire document. • There are three techniques for adding a style sheet to document: • Inline style • Global style sheet • Linked style sheet Dynamic HTML- 17

  18. Defining Style Sheets in Web Pages • Inline styles <P STYLE="color: olive; font-size: 18pt"> • Embedded style sheet <STYLE TYPE="text/css"> BODY {background-color: white; margin-left: 1.0in} </STYLE> • Linked and imported style sheets • Linked style sheets <HEAD><TITLE>Test</TITLE> <LINK REL=STYLESHEET TYPE="text/css" HREF="style1.css"> </HEAD> • Imported style sheet <STYLE TYPE="text/css"> @import url(basic.css) </STYLE> Dynamic HTML- 18

  19. Inline Style • An inline style is simple: the style is defined directly on the element, using STYLE attribute. For example, using STYLE attribute to create a centered paragraph with a large font. inline_style1.html <html> <body> <P STYLE="font-size:120%; text-align:center"> This creates a centered paragraph with a large font. </p> <P STYLE="font-size:90%;text-align:right; background:red"> This creates a red, righted paragraph with a smaller font </p> </body> </html> Dynamic HTML- 19

  20. Inline Styles • An Inline style is basically an style sheet for a single instance of an element and is specified in element’s begin tag. • Inline style can help you learn the style sheet language or quickly change a single instance of an element. However, Inline style does not reflect true spirit of a structured document. So that it is not much different from traditional HTML. With inline styles, the appearance of the document can not be easily changed. • Better approaches: Style sheet should be specified either in the beginning of document or put it into another document to be linked when needed. Dynamic HTML- 20

  21. Global Style Sheet • A Global Style Sheet is to define the style of a document at the beginning of the document. • The <STYLE> tag in the document’s header is used to add a global style sheet to a document. • Centralizing all the document’s style in a single location makes it easy to modify how the document is rendered. • To change the rendering of all paragraphs, only this single entry in global style sheet needs to be modified. Every time a new rule is added or removed or a style is changed, the entire document is recalculated. Dynamic HTML- 21

  22. Global Style Sheet global_sheet1.html <HTML> <HEAD> <STYLE TYPE=“text/css”> P {font-size:200%; text-align:center} </STYLE> </HEAD> <BODY> <P>All paragraphs are now larger and centered.</P> <p>This paragraph is also larger and centered</p> </BODY> </HTML> Dynamic HTML- 22

  23. Defining A Style Sheet • A style sheet is created by CSS language which consists of selectors and presentation rules. • Selector specifies the elements that are associated with particular presentation rule • Presentation rules specify how elements are rendered. • There are two type of selectors • Simple selector can be • ELEMENTS, • CLASS attribute of elements, or • ID of specific style. • Contextual selector is associated with particular element containership- e.g., all <EM> tags inside <P> tags. Dynamic HTML- 23

  24. Identifying Elements • HTML exposes a set of attributes of elements objects, such as H1, P, that make them easy to identify in various ways, including tag name, and the ID,CLASS and NAME attributes: Attribute Property Case-Sensitive? Applicable Elements (None) tagName Always Uppercase All, including comments ID id Yes All, except comments CLASS className Yes All, except comments NAME name Yes Anchor,Applet, Button, Form, IMG,Input, Map, Meta,Object, Select and Text Area. Dynamic HTML- 24

  25. Simple Selector and Its Presentation Rules H1 {color:blue} /* Change all H1s to blue. */ .large {font-size:120%} /* display all elements with CLASS=“large” in large font. */ #navy {color:blue} /* Give the element with ID=“navy” a blue font. */ H1.wide {letter-spacing:2px} /* Give the H1 elements with CLASS=“wide” wider letter spacing. */ Dynamic HTML- 25

  26. Contextual Selector and Its Presentation Rules P EM {color:red} /* Change all <EM> elements contained within <P> to red. */ UL LI.large {font-size:120%} /* Make all elements with CLASS=“large” contained within the <LI> element in the <UL> have larger font. */ Dynamic HTML- 26

  27. Global Style Sheets global_sheet2.html <HTML> <HEAD> <STYLE TYPE="text/css"> .large {font-size:200%} #navy {color:blue} </STYLE> </HEAD> <BODY> <H1 CLASS="large"> Larger text. </H1> <P ID="navy"> This text is blue and with normal size. </P> </BODY> </HTML> Dynamic HTML- 27

  28. Linked Style Sheet • Linked Style Sheets is the most abstract and powerful technique to define style separately in another document/file. • A linked style sheet is created by the same syntax of global style sheet. • The advantage of using a linked style sheet is that all the rules and styles can be defined and encapsulated in a single file that can be shared across multiple documents. • A linked style sheet can improve performance because it is cached locally on the client, separate from the document, so each document is smaller and the style sheet is downloaded only once. Dynamic HTML- 28

  29. Linked Style Sheet linked_sheet1.html <HTML><HEAD> <LINK REL="stylesheet" TYPE="text/css" HREF="fancy.css"> </HEAD><BODY> <p>This document uses the styles specified in fancy.css.</p> <H1>This Header is blue. </H1> <P> Based on the definition in fancy.css, <EM>these words are turned to red</EM></P> </BODY></HTML> fancy.css P EM {color:red} /* Change all <EM> elements contained within <P> to red. */ H1 {color:blue} Dynamic HTML- 29

  30. Using FrontPage: Format / Stylesheet... Dynamic HTML- 30

  31. CSS Example <html><head> <title>Sample Page with CSS </title> <style TYPE="text/css"> <!-- BODY { background-color: white; margin-left: 0.5in; margin-right: 0.5in; font-family: Times; font-size: 12pt } H1 { color: blue; font-size: 28pt; font-weight: bolder } P { text-indent: 0.5in; font-family: Comic Sans MS; font-size: 14pt } P.extended { background-color: yellow; font-variant: small-caps } //--> </style> </head><body> <h1>Heading 1 in Blue and 28 pt font </h1> <p>This is a standard page with text indented by 0.5 in. </p> <p class="extended">Using P.extended class </p> <p STYLE="text-indent: 0in ">A paragraph without text indentation. </p> </body></html> Dynamic HTML- 31

  32. Dynamic HTML- 32

  33. More Samples of CSS Features • These samples present some of the interesting feature of CSS supported by Internet Explorer 4.0 • Example 1 : Using the list-style property, we can replace built-in bullets in lists by custom bullets, such as a GIF. This technique degrades well on down-level browser. Dynamic HTML- 33

  34. Custom Bulleted Lists: bullet.html <HTML><HEAD><TITLE>Custom Bulleted Lists</TITLE> <STYLE TYPE="text/css"> /*Display cool.gif instead of default symbol for the bullet */ UL { list-style-image: URL(cool.gif)} </STYLE> <LINK REL="stylesheet" HREF="samples.css" TYPE="text/css"> </HEAD> <BODY> <H1>Custom Bulleted List</H1> <UL> <LI>You can provide a custom bullet! <LI>The bullets are replaced with cool.gif</LI> <LI STYLE="list-style-image: none; list-style-type: square">Each bullet can be different </UL> </BODY></HTML> samples.css H1 {color:navy} /* Change H1 elements to navy*/ Dynamic HTML- 34

  35. DIV • HTML elements can be grouped or positioned within containers using <DIV> & </DIV> or <SPAN> & </SPAN>. • <DIV> and <SPAN> are neutral style tags that only apply styles to an elements or groups of elements. • <DIV> is a block-level element that may contain headings, paragraphs, tables, and other divisions. • <SPAN> is a text-level element that may be used midstream in a sentence to apply a style. Dynamic HTML- 35

  36. <DIV> • Represents different kinds of containers, for example, chapter, section, abstract, or appendix, when used with the CLASS attribute. DIV allows the enclosed group of elements to be given a distinctive style. <DIV ALIGN=LEFT|CENTER|RIGHT|JUSTIFY CLASS=container type> ... </DIV> • Parameters • ALIGN=LEFT|CENTER|RIGHT|JUSTIFY Specifies the default horizontal alignment for the contents of the DIV element, when DIV is used with an ALIGN attribute. This is needed for compatibility with deployed browsers and may be overridden by style sheets. Dynamic HTML- 36

  37. DIV • CLASS=container type Represents different kinds of containers, for example, chapter, section, abstract, or appendix. DIV allows the enclosed group of elements to be given a distinctive style. • Example <DIV> This text represents a section. </DIV> <DIV ALIGN=CENTER> This text represents another section. </DIV> Dynamic HTML- 37

  38. Sample HTML <html> <head> <title> HTML Sampler Web Page </title></head> <body> <h1>HTML Sampler</h1> <div> <p>This is paragraph 1</p> <p> We will show you how to use dynamic HTML. </p> </div> <p> This course is developed by <a href="http://www.erols.com/aitc/"> Advanced IT Consulting</a> </p> </body></html> Dynamic HTML- 38

  39. Element Containment with and without <DIV> Document Document <Head> <Head> <BODY> <BODY> <H1> Heading <H1> Heading <DIV> Division 1 <P> Paragraph 1 <P> Paragraph 1 <P> Paragraph 2 <P> Paragraph 2 <P> Paragraph 3 <P> Paragraph 3 Link Link Dynamic HTML- 39

  40. Inheritance Chains HTML HTML HEAD BODY Title HEAD BODY H1 P P P Title H1 DIV P A P P A Dynamic HTML- 40

  41. 2.2 Dynamic Style and CSS Dynamic HTML- 41

  42. Dynamic Styles and CSS • Dynamic Style is the modification of the style sheet associated with the document through a script. • Rather than define an alternative style sheet language, Dynamic Styles in IE modify the document’s CSS-defined style sheet via style property in every element, enable and disable global and linked style sheets and add rules and change rules on an existing style sheet. Dynamic HTML- 42

  43. 2.3 Style Sheet Properties Dynamic HTML- 43

  44. Style Sheet Properties • Style Sheet Properties control the appearance of an element’s contents and thereby control the style of a document. • Some properties in CSS are defined to be compound properties. For example, the CSS background attribute contains information about the background image, URL, position : body {background:red URL(cool.gif)} Dynamic HTML- 44

  45. Background Properties linked_sheet2_background.html <HTML> <HEAD> <LINK REL="stylesheet" TYPE="text/css" HREF=”compound.css"> </HEAD> <BODY> <p>This document uses the styles specified in fancy.css.</p> <H1>This Header is blue. </H1> <P> Based on the definition in fancy.css, <EM>these words are turned to red</EM></P> </BODY> </HTML> compound.css H1 {color:navy} /* Change H1 elements to navy*/ body {background:red URL(cool.gif)} Dynamic HTML- 45

  46. Referencing Style Sheet Properties in Scripts • Many CSS properties have a dash in their name (such as background-color). The dash isn't a valid character for identifiers in most scripting languages. To get around this little problem, continue to use the dashed name when specifying the CSS attribute in HTML or in a style sheet, but when accessing the attribute as a script property, remove the dash, and capitalize the next letter. For example: • background-color becomes backgroundColor • border-left becomes borderLeft • margin-bottom becomes marginBottom • The naming rule can be applied generally with one exception. The CSS float property is exposed as styleFloat. HTML: { background-color:sColor } Scripting: object.style.backgroundColor [=sColor ] Dynamic HTML- 46

  47. Example • The following examples use the background-color attribute and the backgroundColor property to specify the background color. • This example uses an inline style sheet to set the background color to beige. • <SPAN STYLE="font-size:14; background-color:beige"> . . . </SPAN> • This example uses inline scripting to set the background color to beige. • <SPAN onmouseover="this.style.backgroundColor='beige'"> . . . </SPAN> Dynamic HTML- 47

  48. Sample Code <html> <head> <title> HTML Sampler Web Page </title> <style> .x { text-indent: 0.5in; font-family: Comic Sans MS; font-size: 24pt } </style> </head> <body > <h1>HTML Sampler</h1> <div class="x" > <p>This is paragraph 1</p> <p style="font-size: 44pt"> We will <SPAN id="sp1" style="background-color:green" onmouseover="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='green'" onclick="this.innerText=' Hello World '"> show you how </SPAN> to use dynamic HTML. </p> </div> <input type="button" value="Hello there, there!" onclick="document.all.sp1.innerText='Hello 1'"> <p>This course is developed by <a href="http://www.erols.com/aitc/"> Advanced IT Consulting</a> </p> </body></html> Dynamic HTML- 48

  49. cssTEXT PROPERTY • cssTEXT contains an element’s style in the form of a string and you could retrieve the style or copy a style from one element to another. cssText.html <html> <head> <title>Sharing the cssText Property</title></head> <body> <P ID="p1" STYLE="text-indent:.5in; color:red"> This paragraph is red with a half-inch indent.</P> <P ID="p2"> This paragraph has a default appearance. Click <INPUT TYPE=BUTTON VALUE="here" ONCLICK="document.all.p2.style.cssText= document.all.p1.style.cssText;"> to make this paragraph look like the first paragraph.</P> </body> </html> Document object could be used to retrieve information about the document, to examine and modify the HTML elements and text within the document, and to process events. Dynamic HTML- 49

  50. 2.4 Dynamic Styles Dynamic HTML- 50

More Related