the web wizard’s guide to dhtml and css chapter 1 a review of css1
TRANSCRIPT
![Page 1: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/1.jpg)
The Web Wizard’s Guide To DHTML and CSS
Chapter 1
A Review of CSS1
![Page 2: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/2.jpg)
Chapter Objectives
• To learn the history of HTML and CSS
• To learn to create style rules using CSS selectors and declarations
• To learn where to place style sheets and create basic styles in CSS1
![Page 3: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/3.jpg)
History of HTML and CSS
• Tim Berners-Lee at CERN• Mosaic and graphical browsing
• The advent of non-standard tags
• HTML 4 and CSS
• Proper Containment
• Block level versus Inline elements
![Page 4: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/4.jpg)
Creating Your Own Style Rules
• A CSS rule; Selector and Declaration
• Properties and values
• h1 {font-family : arial, sans-serif}• p {
font-family : "times new roman", serif; color : red; text-align: left}
![Page 5: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/5.jpg)
HTML Element Selectors
• Designate style for one or more HTML tags• h1, h2, h3, h4, h5, h6 {
font-family : arial, sans-serif; color : blue; text-align: center}
• Contextual Selectors• p b {color : maroon}
![Page 6: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/6.jpg)
Class Selectors• Applies rules to HTML content by class
• Create a rule in the style sheet
• .isgreen {color : green}• Reference the class name in the
HTML• <h1 class=“isgreen”>This will
appear green.<h1>
![Page 7: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/7.jpg)
ID Selectors
• Applies rules to HTML content by ID
• Create a rule in the style sheet
• #silverware {color : silver;}• Reference the ID in the HTML• <h1 id=“silverware ”>This will
appear silver.<h1>• ID must be unique
![Page 8: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/8.jpg)
Pseudo-Elements
• Typically used for drop cap effect• p.dropcap:first-letter { font-size:
300%; float: left; color: red; }
![Page 9: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/9.jpg)
Placing Style Sheets
• Inline Style Sheets• Applies to a single element• <p style="color : silver;">some
text goes here.</p>• Discouraged by the W3C
![Page 10: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/10.jpg)
Placing Style Sheets
• Internal Style Sheets• Applies to a single page<style type="text/css">
h1, h2, h3, h4, h5, h6 {font-family : arial, sans-serif;color : blue; text-align: center; }p b {color : maroon;}.isgreen {color : green;}
</style>
![Page 11: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/11.jpg)
External Style Sheets
• Store style rules in an external file• Reference the external file using link in the
<head>• <html><head>
<title>Page with external CSS</title><link rel=“stylesheet” type=“text/css” href=“somestyle.css”></head>
• Great for consistent styling on large sites
![Page 12: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/12.jpg)
The Web Wizard’s Guide To DHTML and CSS
Chapter 2
A Review of CSS2 and JavaScript
![Page 13: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/13.jpg)
Chapter Objectives
• To review how to position, hide, and show content, using CSS2
• To understand how CSS works with a scripting language to create Dynamic HTML
• To review the fundamentals of JavaScript• To learn about the Document Object Model• To create a three-dimensional animation• To examine the pros and cons of
animation with DHTML versus Flash
![Page 14: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/14.jpg)
A Review of CSS2
• The position property
• The visibility property
• The overflow property
• The clip property
• Add JavaScript to create Dynamic HTML
![Page 15: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/15.jpg)
Why Learn JavaScript?
• Broad support among web browsers
• Vast libraries of scripts available online
• Applicable to other host environments
• Allows use of reusable code libraries
• Similar syntax to C, C++, and Java
• Encourages creative problem solving
![Page 16: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/16.jpg)
A Little History
• Invented by Eich at Netscape in 1995
• Became popular with Navigator 3
• JScript: Microsoft’s competing language
• ECMA: a standard emerges
![Page 17: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/17.jpg)
Fundamental Concepts• Objects: The nouns of the language• Instances: incarnations of objects• Properties: attributes of objects• Values: content for properties• Events and Events Handlers• Variables: containers for data• Arrays: ordered collections of data• Methods: The verbs of the language• Operators: Assignment versus Comparison• Functions: groups of statements
![Page 18: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/18.jpg)
The Document Object Model
• Internal road map of objects on a web page
• Hierarchical model of web browser objects
• Old DOMs for Netscape, Microsoft
• New browsers use the standard DOM by W3C
![Page 19: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/19.jpg)
Animating with DHTML
• Create the HTML• Absolute position your objects• Be aware of z-index stacking• Call an init() function in the onload
handler• Store generic functions in an
external library
![Page 20: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/20.jpg)
Flash over Dynamic HTML
• Flash gives more control over animations.• Flash animations look the same on all
browsers and platforms.• Flash files embed any fonts needed for
display of highly stylized text.• Flash works better with sound and video.• Flash is a little easier to learn than DHTML• There are versions of the Flash plug-in for
obsolete browsers.
![Page 21: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/21.jpg)
Dynamic HTML over Flash
• Works better with the browser’s back button.
• DHTML text can be searched and selected.
• DHTML requires only a text editor.• Flash files require a plug-in.• DHTML integrates well with HTML.• DHTML is often better for navigation.• DHTML works anywhere on the page
![Page 22: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/22.jpg)
The Web Wizard’s Guide To DHTML and CSS
Chapter 3
Introducing the W3C DOM
![Page 23: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/23.jpg)
Chapter Objectives
• To discover the W3C DOM—its nature and its importance
• To learn about nodes and how to reference them
• To learn how to dynamically change the content of nodes
![Page 24: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/24.jpg)
What is the DOM?
• DOM is Document Object Model
• A standard way to refer to objects on a Web page
• The W3C DOM1 replaces proprietary DOMs from Netscape and Microsoft
• document.getElementById()
• document.getElementsByTagName()
![Page 25: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/25.jpg)
What are Nodes?
• An object in DOM1 is called a node.
• Element nodes (<p>, <h1>, etc.)
• Text nodes (text contained by element nodes)
• Attribute nodes (align=“center”)
![Page 26: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/26.jpg)
Visualizing Nodes
![Page 27: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/27.jpg)
Things to do with nodes
• Change the text of nodes
• Add and remove text nodes
• Create element nodes to dynamically style content
• Change the value of attribute nodes
![Page 28: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/28.jpg)
The Web Wizard’s Guide To DHTML and CSS
Chapter 4
Building Your Dynamic HTML Code Library
![Page 29: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/29.jpg)
Chapter Objectives
• To start creating a library of reusable code
• To include browser detection in a library
• To create library functions for 3-D positioning
• To learn about library functions used for window size manipulation
![Page 30: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/30.jpg)
Beginning Your Code Library
• What’s an API?
• A toolbox full of code
• Store in a simple text file
![Page 31: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/31.jpg)
Browser Detection Code
• Tool number 1 in your code library.• Detect browsers by feature support• var theDOM1 = (document.getElementById) ? true : false;
• Detect browsers by name• var UA = navigator.userAgent.toLowerCase();
• Detect the platform in use• var isMAC = (UA.indexOf('mac') >= 0) ? true : false;
• var isWIN = (UA.indexOf('win') >= 0) ? true : false;
![Page 32: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/32.jpg)
Using Object-Positioning Library Code
• Create a getObj() function
• Create a shiftTo() function
• Create functions to find x, y, and z
• Create a function to empty a node
![Page 33: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/33.jpg)
Library Code to Change Window Size
• A function to get the available width
• A function to get the available height
• A function to set the window size
• A function to maximize the window
![Page 34: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/34.jpg)
The Web Wizard’s Guide To DHTML and CSS
Chapter 5
Creating Dynamic Visibility Applications
![Page 35: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/35.jpg)
Chapter Objectives
• To use off-window locations to control visibility
• To create dropdowndrop-down menus with the visibility property
• To create collapsible menus with the display property
• To control how much of an image is visible
![Page 36: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/36.jpg)
Hiding Content Off-Screen:A Sliding Menu
• Create two side-by-side divs• The left div contains links• The right div opens and closes the menu• Absolute position both divs to hide left div
off-screen• Add scripting to move right div on screen• Enhance with setCursor() and
setBackground()
![Page 37: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/37.jpg)
Drop-Down Menus
• Simulate GUI Menus
• Absolute position limits placement to top
• Use relative position for topmost div
• Drop-down menu in an invisible nested div
• Enhance with color and cursor changes
![Page 38: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/38.jpg)
Collapsible Menus
• Simulate hierachical file trees
• Set display to none to hide menu
• Set display to block to show menu
• Enhance with text node substitution
• Enhance with cursor and color changes
![Page 39: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/39.jpg)
Dynamic Clipping
• Control visible portion of content
• Use the clip property of the style object
![Page 40: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/40.jpg)
The Web Wizard’s Guide To DHTML and CSS
Chapter 6
Understanding Events
![Page 41: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/41.jpg)
Chapter Objectives
• Learn the history of Web browser event models
• Discover the nature of events on the Web
• Explore event propagation and bubbling
• Discover mouse events and position
• Use visibility techniques to create hypertext
• Create drag-and-drop applications
• Use keyboard events in Web page development
![Page 42: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/42.jpg)
History of Web Browser Events
• Limited support for events in early browsers
• Expanded events in version 4.0 browsers
• Disparate event models (NN4 vs. IE4)
• New W3C event model
![Page 43: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/43.jpg)
Events on the Web
• Browser creates events in response to user action.• Event object begins life when user acts• Event object ends life when scripts stop
processing it• One event at a time• Netscape and W3C static Event object• IE4+ window.event• Every event has a target
![Page 44: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/44.jpg)
Propagation and Bubbling
![Page 45: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/45.jpg)
Tracking Mousemove Events and Mouse Position
• <body onmousemove = "showxy(event);”>function showxy(evt){if (window.event){ evt = window.event; }if (evt){
var pos = evt.clientX + ", " + evt.clientY;
window.status=pos;}
}
![Page 46: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/46.jpg)
Hypertext with Mouse Events
• Title tag for single line tool tips• Hypertext for multi-line content• Add event handlers to links• onmouseover="doHT(event,'vitry','visible');”
• onmouseout="doHT(event,'vitry',’hidden');”
• First parameter passes event• Second parameter passes ID• Third parameter passes visibility
![Page 47: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/47.jpg)
Drag-and-Drop Applications
• Place drag-and-drop code in library• Place utility functions in library• Add event handlers to div• onmousedown="setDrag(event,this);" • onmouseup="checkdroploc('1','0');”• Drag begins on mousedown• Drag ends on mouseup• Script checks new position of div
![Page 48: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/48.jpg)
Keyboard Events
• Keyboard is fasted input device
• onload="init();”
• document.onkeyup = getKeyEvent;
• Obtains keyCode
• Check for letters, numbers, or space bar
• Swap text node value to show key typed
![Page 49: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/49.jpg)
The Web Wizard’s Guide To DHTML and CSS
Chapter 7
Using Dynamic Techniques
![Page 50: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/50.jpg)
Chapter Objectives
• Modify font size and color dynamically
• Modify text border style and color dynamically
• Improve appearance and responsiveness of lists
• Work dynamically with images
• Load external content in an inline frame
![Page 51: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/51.jpg)
Modifying Font Size and Color Dynamically
• Complex text effects without Flash• Any CSS font property can be changed• Style sheet sets initial color of text to white• <button
onclick="fadeText('fadingText',255,0,0);">• Specifies final color for div with id=“fadingText”• fadeIn() function makes small changes to size and
color every 35 milliseconds
![Page 52: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/52.jpg)
Modifying Border Style and Color Dynamically
• CSS values for border color, border style, border width, and background color
• document.getElementById('myText').style.borderColor = "red green yellow blue";
• Easily create ugly effects
![Page 53: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/53.jpg)
Creating Dynamic Lists
• Replace standard bullet with custom image
• Change image on mouseover
![Page 54: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/54.jpg)
Replacing Images with Dynamic HTML
• Old way - event handlers in <a> tag• New way - event handlers in any tag• Load all images in stacked divs• Change stacking order to show desired image• Combine with Dynamic List effect
![Page 55: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/55.jpg)
Using an Inline Frame to Load External Content
• <iframe> tag creates inline frame
• Can be positioned anywhere on the page
• Works in newer browsers only
• Change src attribute of iframe to load new content
• Simple link with target attribute also works
![Page 56: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/56.jpg)
The Web Wizard’s Guide To DHTML and CSS
Chapter 8
Putting It All Togetherand Moving Forward
![Page 57: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/57.jpg)
Chapter Objectives
• Confront design questions in navigating a large site• Generate large amounts of content with a small amount
of code• Combine collapsible menus with hypertext to display
text and html HTML files in both inline frames and new windows
• Learn about XML, SMIL, SVG, and other developing technologies
![Page 58: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/58.jpg)
Designing with DHTML
• Content Organization
• Navigation Structure
• Layout
• Interactivity
![Page 59: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/59.jpg)
Scripting for Efficiency
• When presented with tedious copy paste, create scripts to do the work.
• Use loops and document.write() to create repetitive HTML
• Use variables to change content as needed
• Escape nested quotes and forward slashes
![Page 60: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/60.jpg)
Putting It All Together
• Create collapsible menu using loops and document.write()
• Include event handlers for hypertext
• Insert and <iframe> to display HTML pages
• Swap text node values to display captions
• Give the visitor the option to open a new window
![Page 61: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/61.jpg)
Putting It All Together
![Page 62: The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1](https://reader036.vdocuments.site/reader036/viewer/2022062308/56649e035503460f94aef050/html5/thumbnails/62.jpg)
Emerging Standards
• XML - Extensible Markup Language• XHTML - Extensible HyperText Markup
Language• SMIL - Synchronized Multimedia
Integration Language• SVG - Scalable Vector Graphics