CS 898N – Advanced World Wide Web Technologies Lecture 15: Dynamic HTML Chin-Chih Chang

Slides:



Advertisements
Similar presentations
CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.
Advertisements

Cascading Style Sheets
Cascading Style Sheets
1 Web Developer & Design Foundations with XHTML Chapter 9 Key Concepts.
Introduction to JavaScript Module 1 Client Side JS Programming M-GO Sponsored By
The Web Warrior Guide to Web Design Technologies
Project 1 Introduction to HTML.
1 Chapter 12 Working With Access 2000 on the Internet.
Introduction to Web Application Architectures Web Application Architectures 18 th March 2005 Bogdan L. Vrusias
Developing a Basic Web Page with HTML
Dreamweaver 8 Concepts and Techniques Introduction Web Site Development and Macromedia Dreamweaver 8.
1st Project Introduction to HTML.
Tutorial 3: Adding and Formatting Text. 2 Objectives Session 3.1 Type text into a page Copy text from a document and paste it into a page Check for spelling.
2440: 141 Web Site Administration Web Server-Side Programming Professor: Enoch E. Damson.
XP New Perspectives on Microsoft Access 2002 Tutorial 71 Microsoft Access 2002 Tutorial 7 – Integrating Access With the Web and With Other Programs.
HTML 1 Introduction to HTML. 2 Objectives Describe the Internet and its associated key terms Describe the World Wide Web and its associated key terms.
Chapter ONE Introduction to HTML.
Web Design Basic Concepts.
DHTML. What is DHTML?  DHTML is the combination of several built-in browser features in fourth generation browsers that enable a web page to be more.
INTRODUCTION TO DHTML. TOPICS TO BE DISCUSSED……….  Introduction Introduction  UsesUses  ComponentsComponents  Difference between HTML and DHTMLDifference.
Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document.
Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies.
XP Tutorial 7New Perspectives on Creating Web Pages with HTML, XHTML, and XML 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks.
Architecture Of ASP.NET. What is ASP?  Server-side scripting technology.  Files containing HTML and scripting code.  Access via HTTP requests.  Scripting.
Copyright © cs-tutorial.com. Introduction to Web Development In 1990 and 1991,Tim Berners-Lee created the World Wide Web at the European Laboratory for.
Using Styles and Style Sheets for Design
XP 1 CREATING AN XML DOCUMENT. XP 2 INTRODUCING XML XML stands for Extensible Markup Language. A markup language specifies the structure and content of.
Chapter 19: Adding JavaScript
Advanced Level Course. Site Extras Site Extras consist of four categories: Stationeries Site Trash Designs Components.
CNIT 133 Interactive Web Pags – JavaScript and AJAX JavaScript Environment.
SEG3210 DHTML Tutorial. DHTML DHTML is a combination of technologies used to create dynamic and interactive Web sites. –HTML - For creating text and image.
XP Dreamweaver 8.0 Tutorial 3 1 Adding Text and Formatting Text with CSS Styles.
HTML, XHTML, and CSS Sixth Edition Chapter 1 Introduction to HTML, XHTML, and CSS.
 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.
Introduction to HTML Tutorial 1 eXtensible Markup Language (XML)
Designing a Web Page with Tables. A text table: contains only text, evenly spaced on the Web page in rows and columns uses only standard word processing.
XML 2nd EDITION Tutorial 1 Creating An Xml Document.
Active Server Pages  In this chapter, you will learn:  How browsers and servers interacted on the Internet when the Internet first became popular 
Copyright (c) 2004 Prentice-Hall. All rights reserved. 1 Committed to Shaping the Next Generation of IT Experts. Creating XHTML Documents Essentials for.
Cs332a_chapt10.ppt CS332A Advanced HTML Programming DHTML Dynamic Hypertext Markup Language A term describing a series of technologies Not a stand-a-lone.
Tutorial 3 Adding and Formatting Text with CSS Styles.
Cascading Style Sheets CSS. Source W3Schools
By Tharith Sriv. To write a web page you use: HHTML (HyperText Markup Language), AASP (Active Server Page), PPHP (HyperText Preprocessor), JJavaScript,
COS 125 DAY 20. Agenda Assignment 8 not corrected yet Assignment 9 posted  Due April 16 New course time line Discussion on Scripts 
HTML Concepts and Techniques Fifth Edition Chapter 1 Introduction to HTML.
Microsoft Expression Web 3 – Illustrated Unit D: Structuring and Styling Text.
CSS Hadas Kahsay. Overview  What is CSS  Basic syntax of CSS Rules  How to link CSS style to html documents  Browsers and CSS  Advantages of CSS.
Objective: To describe the evolution of the Internet and the Web. Explain the need for web standards. Describe universal design. Identify benefits of accessible.
Chapter 1 Introduction to HTML, XHTML, and CSS HTML5 & CSS 7 th Edition.
 XML derives its strength from a variety of supporting technologies.  Structure and data types: When using XML to exchange data among clients, partners,
JavaScript and Ajax (JavaScript Environment) Week 6 Web site:
Introduction. Internet Worldwide collection of computers and computer networks that link people to businesses, governmental agencies, educational institutions,
Web Programming Java Script-Introduction. What is Javascript? JavaScript is a scripting language using for the Web. JavaScript is a programming language.
HTML PROJECT #1 Project 1 Introduction to HTML. HTML Project 1: Introduction to HTML 2 Project Objectives 1.Describe the Internet and its associated key.
DHTML.
Project 1 Introduction to HTML.
Objective % Select and utilize tools to design and develop websites.
Chapter 1 Introduction to HTML.
Madam Hazwani binti Rahmat
Project 1 Introduction to HTML.
Using Cascading Style Sheets Module B: CSS Structure
Introduction to XHTML.
Objective % Select and utilize tools to design and develop websites.
JavaScript Introduction
DHTML Javascript Internet Technology.
DHTML Javascript Internet Technology.
Objective Understand web-based digital media production methods, software, and hardware. Course Weight : 10%
Introduction to Cascading Style Sheets (CSS)
Teaching slides Chapter 6.
Presentation transcript:

CS 898N – Advanced World Wide Web Technologies Lecture 15: Dynamic HTML Chin-Chih Chang

Dynamic HTML Dynamic HTML is a collective term for a combination of new Hypertext Markup Language (HTML) tags and options, that will let you create Web pages more animated and more responsive to user interaction than previous versions of HTML. Much of dynamic HTML is specified in HTML 4.0.

Dynamic HTML Simple examples of dynamic HTML pages would include: – having the color of a text heading change when a user passes a mouse over it or –allowing a user to "drag and drop" an image to another place on a Web page. Dynamic HTML can allow Web documents to look and act like desktop applications or multimedia productions.

Dynamic HTML The features that constitute dynamic HTML are included in Netscape’s Navigator and by Microsoft's Internet Explorer. While HTML 4.0 is supported by both Netscape and Microsoft browsers, some additional capabilities are supported by only one of the browsers. Document Object Model (DOM) defines how HTML objects are exposed to the scripting language

The Concepts and Features in Dynamic HTML Dynamic HTML is a combination of HTML, style sheets, and a scripting language under the umbrella of DOM. Both Netscape and Microsoft support: –An object-oriented view of a Web page and its elements –Cascading style sheets and the layering of content –Programming that can address all or most page elements –Dynamic fonts

Style Sheets A term extended from print publishing to online media, a style sheet is a definition of a document's appearance in terms of such elements as: –The default typeface, size, and color for headings and body text –How front matter (preface, figure list, title page, and so forth) should look

Style Sheets –How all or individual sections should be laid out in terms of space (for example, two newspaper columns, one column with headings having hanging heads, and so forth). –Line spacing, margin widths on all sides, spacing between headings, and so forth –How many heading levels should be included in any automatically generated Table of Contents –Any reusable content that is to be included on certain pages (for example, copyright statements)

Style Sheets Typically, a style sheet is specified at the beginning of an electronic document, either by embedding it or linking to it. This style sheet applies to the entire document. As necessary, specific elements of the overall style sheet can be overridden by special coding that applies to a given section of the document.

Style Sheets For Web pages, a style sheet performs a similar function, allowing the designer to ensure an underlying consistency across a site's pages. The style elements can be specified once for the entire document by either imbedding the style rules in the document heading or cross-referring (linking to or importing) a separate style sheet.

Cascading Style Sheets In the case of cascading style sheets, the cascade involves multiple sets of style tags set up in a succession of stages accumulates from one to the next. The term cascading refers to the hierarchy of style attributes that are applied to an HTML tag. This provides the designer the advantage of being able to rely on the basic style sheet when desired and overriding it when desired.

Cascading Style Sheets The filling in or overriding can occur on a succession of "cascading" levels of style sheets. One style sheet could be created and linked to from every Web page of a Web site as the overall style sheet. For any portion of a page that included a certain kind of content such as a catalog of products, another style sheet that amends the basic style sheet could be linked to.

Cascading Style Sheets And within the span of a style sheet, yet another style sheet could be specified as applying to a particular type of product display. When creating Web pages, the use of style sheets is now recommended by the World Wide Web Consortium.

Cascading Style Sheets The latest version of the Hypertext Markup Language, HTML 4.0, while continuing to support older tags, indicates which ones should be replaced by the use of style sheet specifications. The Web's Cascading Style Sheets, level 1 (CSSL1) is a recommendation for cascading style sheets that has been developed by a working group of the World Wide Web Consortium (W3C).

Cascading Style Sheets CSS gives more control over the appearance of a Web page to the page creator than to the browser designer or the viewer. With CSS, the sources of style definition for a given document element are in this order of precedence: inline styles, embedded styles sheet, and linked style sheet.

Cascading Style Sheets Style definitions can actually be placed in three locations: inline styles, embedded styles sheet, and linked style sheet. Inline styles can be applied to individual tags in the body section of the page by using the style = attribute within the tags themselves. Most HTML tags now accept this attribute. For example:

Cascading Style Sheets Designed by An embedded style sheet is a set of styles enclosed by a set of style tags. For example: style sheet attributes A linked style sheet can enclose a style list in a separate style sheet file which we link to in the head section. For example:

Cascading Style Sheets You can have all three types of style sheet markup in the same document. The linked style sheet can be used to declare a base format for an entire Web site, the embedded style sheets can override certain styles in the individual page, and the inline styles have the last word.

Using JavaScript to Make HTML Dynamic JavaScript brings the capability to write an interactive program to HTML. This is done by applying the features of the JavaScript language to the content of the HTML document. This comes in the form of dynamic positioning, dynamic content, and events. Dynamic positioning allows you to tell the browser exactly where to put a block of content without using tables.

Using JavaScript to Make HTML Dynamic Dynamic content lets you take a single block of content anywhere in a page and link an event to JavaScript that can update, replace, or remodel it at any time. When we’re running JavaScript in a Web browser, we receive information on what the user is doing with the mouse and keyboard. This is called monitoring events.

Using JavaScript to Make HTML Dynamic Some useful events are: onmousemove, onmouseover, onmouseout, onclick, and onchange. Some functions we can perform are: –Calculating the total amount of an order and displaying the results for the buyer’s approval. –Changing the display characteristics of elements defined in a style sheet. –Allowing the user to move things around on the page.

Using JavaScript to Make HTML Dynamic –Moving elements around on the page without asking the user. –Triggering changes on page content based on a timer. Events are linked together through what is called the Document Object Model (DOM). The DOM was originally created by Netscape for the purpose of using JavaScript, also invented by Netscape.

Using JavaScript to Make HTML Dynamic To cause an event to trigger a JavaScript function to access a CSS element, the following steps need to occur: 1.A style sheet is written 2.The target HTML element is given a name attribute. 3.The activating HTML element is given an event attribute that calls a JavaScript function.

Using JavaScript to Make HTML Dynamic 4.The JavaScript function is written to modify the DOM element with the name attribute. Embedded style sheets begin with the tag. The type attribute should be declared but the default type is “ text/css ”, giving us

DOM Document Object Model (DOM) binds JavaScript to HTML, XML, and images in a Web page. This means that we are developing a model in which the document or Web page contains objects (elements, links, etc.) that can be manipulated.

DOM So you will be able to delete, add, or change an element (as long as the document is still valid, of course!), change its content or add, delete or change an attribute. The DOM API provides a standardized, versatile view of a document's contents.

DOM By supporting the DOM API, a program not only allows its data to be manipulated by other routines, but does so in a way that allows those manipulations to be reused with other DOMs, or to take advantage of solutions already written for those DOMs.. The intent is that -- if you stick with the standardized APIs -- any DOM implementation can be plugged together with any DOM-based application.

DOM The intent is that -- if you stick with the standardized APIs -- any DOM implementation can be plugged together with any DOM-based application. The original example of this was dynamic- HTML scripts; by agreeing on the DOM as their standard representation of the document, scripts can be be written that will work properly on all browsers.

DOM But this applies to larger-scale programming as well; for example, a server- side solution might be built out of the following reusable components, which may or may not all share a single DOM implementation: –A database which presents its contents as a DOM tree. –An XML parser which generates a DOM tree, used to read a style sheet.

DOM –An XSLT processor which combines these, producing a new DOM tree. –A routine which writes a DOM's contents out to the network in the desired syntax (XML, HTML, or other). If a better implementation of one of these modules becomes available (a faster XML parser, for example), you should be able to unplug the existing connections and plug in the new component with minimal recoding.

DOM The DOM Level 1 and Level 2 specifications are W3C Recommendations. This means that the specification is final and can be implemented without fear of things changing. Level 1 allows navigation around an HTML or XML document, and manipulation of the content in that document. Level 2 extends Level 1 with a number of features: XML Namespace support, filtered views, ranges, events, etc.

DOM A DOM implementation (also called a host implementation) is that piece of software which takes the parsed XML or HTML document and makes it available for processing via the DOM interfaces. A DOM application (also called a client application) is that piece of software which takes the document made available by the implementation, and does something to it.

DOM A script which runs in a browser is an example of an application. Your favorite browser might implement a JavaScript or VBScript interface, so you can use those scripting languages within the page itself to manipulate the page or change the CSS style sheet. Your favorite editor might implement a Scheme or Java interface so you can write an executable in those languages that talks to your editor to manipulate the page.

DOM The Object Management Group Interface Definition Language (OMG IDL) was chosen as it was designed for specifying language and implementation-neutral interfaces. It is expected that the DOM can be implemented using CORBA, COM, or Java Virtual Machine runtime bindings.

DOM We expect that many implementations of the DOM will use bindings to various programming languages. The DOM specifies bindings for Java and ECMAScript (the standardization of JavaScript/Jscript; Other language bindings (for example, ANSI C++, Perl, or VBScript) may be supplied by other interested parties.

CSS Style Attributes The common useful CSS attributes are fonts, backgrounds, text, and events. Fonts has these elements: font family, font size, font style, font weight, font variant, line height, font. Backgrounds have these elements: background color, background repeat, background attachment, background position, and background.

CSS Style Attributes Texts have these elements: word spacing, letter spacing, text align, and text indent. Events has these elements: onload, onfocus, onblur, onchange, onmouseover, onmouseout, onmousedown, onmouseup, onmousemove, onclick, onkeypress, onkeydown, onkeyup, onsubmit, and onrest.