1Dynamic HTMLCS 640, Lecture 8What is Dynamic HTML?z Generally defined as web pages reacting to user actions without server interactionz There is no single standardz Cascading Style Sheets (CSS) allow fine control over how html elements are positioned on pagez JavaScript code runs inside the browserz Triggered by events generated by the browserz Document Object Model (DOM) describes how the document object should be manipulatedz Widespread support, incompatibilities remainOverview of lecturez CSSz DOMz Dynamic web pages2How stylesheets workz A style sheet is a collection of rulesz Rules consist of two partsz References to one or more HTML elements (selectors)z Rules also apply to elements inside those referencedz One or more style sheet attributes applied to themz For each attribute, the value assigned to itz Multiple rules can refer to the same element, the cascading preference gives their priorityp {color:#0000ff;font-size:14pt}a,h3 {color:green}Further CSS selectorsName HTML CSSClass selector<p class=”big”><h2 class=”hot”>p.big{font-size:large}.hot{color:red}ID selector<p id=”special”> #special{border:ridge red}or p#special{…}Descendant sel.<p><em>This</em> p em{background-color:blue}Pseudoclassesa:link,a:active,a:visited:hoverz Many HTML elements can use the same class, but the value of the id attribute must be uniquez Pseudoclasses identify various states of elements: visited links, the mouse hovering over a paragraphAdding style sheets to pagesz Rules inside the <style></style> tagz Place it inside <head></head>z For safety use <!-- -->z Can read external filesz @import url(”coolstyle.css”);z Must precede other rulesz The style attribute of HTML tagsz Selectors not needed, applies to HTML elementz <p style=”color:yellow”>z Don’t use it, mixes content and presentation3Some CSS attributesz font-color specifies the color of textz Six digit hexadecimal RGB representationz Names such as red, green, yellow, darkred, etcz font-size specifies absolute or relative font sizez In various units, percentages, symbolicalyz 12pt, x-small, medium, larger, 150%z font can specify font size, color and other characteristics with a single attributez Other attributes: text-align, vertical-align, background-color, background-imageSize units used in CSSUnit Descriptionem Element’s font’s heightex The height of a lower case xpx Pixel (exact size depends on display)in Inchcm Centimetermm Millimeterpt Point = inch/72pc Pica = 12 pointsborder spacepadding spacecontent spaceBorders, margins, paddingmargin space (transparent)The content of the HTML element goes inside the content space. For, say a <p> tag, the content is the actual text of the paragraph.4More CSS attributesz height and width can specify the absolute or relative size for element (only content space)z border-style can be solid, dashed, dotted, double, groove, ridge, inset, outset, nonez border-width, border-colorz border gives width, style, and color (in this order)z margin and padding specify width onlyz Other attributes: margin-bottom, border-top, border-right-color, border-left-styleTwo useful HTML tagsz <div></div> and <span></span> can enclose other HTML elementsz Used as containers that pass on their CSS attributes to elements insidez <div> defines a paragraph-like rectangular areaz <span> can apply to any small piece of textAn example<head><title>A CSS Binge</title><style type="text/css"><!--p{color:#0000ff;font-size:14pt}a,h2{color:green}p.big{font-size:x-large}.halfpage{width:50%;border:double}#special{border:ridge red;width:40%}p em{background-color:red}p:hover{background-color:yellow}--></style></head><body><h1>Style Sheet Binge</h1>Normal text with a <a href="bucky.gif">link</a>.<h2>Going crazy with <em>colors and fonts</em></h2><p>Text within a paragraph that includes a <a href="buckys.gif">link</a>.</p><p class="big">This text is <em>big</em> !</p><div class="halfpage"><p id="special">This is a special paragraph.</p><p>Another paragraph with a lot of text that shows us where text wraps.</p></div></body>5Some CSS positioningz position identifies rule as giving positionz absolute – position is absolute z fixed – similar but ignores scrollingz Other values possiblez top, left, right, bottom specify offset distance between element’s positioning context and element’s box (includes margins)Overview of lecturez CSSz DOMz Dynamic web pagesDocument Object Modelz Describes how the document object can be traversed and modifiedz Represented as tree structurez Two approaches in usez IE-specific more convenient for HTMLz W3C more verbose, but also applies to XMLz DOM has levels 0-3 and many sub-standardsz The DOM interface used in other contexts with other languages (C++, Java, python, etc.)6The document as a tree<html><head><title>A Document</title></head><body><h1>A web page</h1><p>A <i>simple</i> paragraph</p></body></html>document<html><head> <body><title>“A document”<h1><p>“A web page”“A ”“simple”“ paragraph”<i>Manipulating nodesz Traversing the element treez Each node has childNodes arrayz Can use properties firstChild, lastChild, nextSibling, previousSiblingz Firefox’s DOMInspector visualizes the DOM treez nodeType property can be 1 (element), 2 (attribute), 3 (text), 8 (comment), 9 (document)z Can change structure using appendChild(), removeChild(), replaceChild(), insertBefore()Tag attributesz Attribute nodes are ignored during traversalz Elements have properties for attributesz Words capitalized – e.g. the body element has a bgColor property corresponding to the HTML attribute bgcolorz Can assign strings to these propertiesz Can also treat style attribute as an object with properties of its ownz Elements have methods getAttribute(), setAttribute(), removeAttribute()7More DOM manipulationz The document object (and element objects) have methods for finding specific elementsz getElementsByTagName() returns an array with all elements with the given tag namez getElementsByName() returns an array with all elements with given namez getElementById() returns element with given ID z To build new nodes, use the document object’s methods createElement(tagName) and createTextNode(text)z Text node have appendData(), insertData(), deleteData(), replaceData() methodsOverview of lecturez CSSz DOMz Dynamic web pagesJavaScript timersz Used extensively in dynamic pagesz setTimeout(code,delay) tells browser to execute code in delay millisecondsz If you save the return value, you
View Full Document
Unlocking...