How to Create Your Own Website

Lecture 6: Dynamic Pages. How to Create Your Own Website

Today’s Lecture: • Simple Dynamic Pages: • Rollovers. • Popup menus (idea). • Translucence (“opacity”/”alpha”). • Positioning and overflow: • Static. • Absolute. • Relative. • Fixed. • Including scripts for more complex effects: • The <script> tag. • The nature of Javascript. • The DOM tree. • Events. • Including Flash movies and other objects: • The <object> tag. • Limitations of <object> and <embed>.

Rollovers • Rollovers are elements which change in appearance when the mouse is over them. • Formerly done only in Javascript, now possible to do simple rollovers in CSS. • Governed by the :hover pseudo-selector: • For example: • #elemID { background-color: blue; } • #elemID:hover { background-color: red; } • This will change the background color of the element with ID “elemID” from blue to red when the mouse is over it. • Most commonly used with hyperlinks: • For example, a:hover { font-weight: bold; }

Opacity in CSS • The current version of the CSS specification provides no means of making elements translucent. • Despite this, the “opacity” rule is well-supported in most browsers. • IE is the exception. There’s a rule called “filter: alpha” that works in some versions of IE. • The range is from 0 to 1. 0 is completely transparent (invisible), 1 is completely opaque. • Don’t use this to make elements invisible; use visibility: none and/or display: none; • #myElem { opacity: 0.7; } /* 70% opaque */ • Combining this with :hover allows you to create some interesting effects. • Particularly controls that are normally transparent but which become fully opaque when the mouse is over them.

Position • So far, we’ve left placement of our HTML elements to the browser. • By default, they were laid out from left to right, top to bottom. • Lines were typically defined by block elements. • Inside each line were many inline elements. • But CSS allows us to specify exactly where on the page elements should go! • The relevant rule is “position”, and it has four values: • static: The default: the browser positions the content. • relative: The starting position is determined by the browser, but the developer can shift it relative to that position. • absolute: The developer determines the precise placement of the content. If the user scrolls the browser window, the content scrolls with it. • fixed: Like absolute, but the content will stay exactly where it is even if with scrolling. • For values other than “static”, position works with four attributes: • left, right, top, bottom • Each of these contains a measurement (e.g. 5px, 10%, 2em). These values may be negative, 0, or positive. • For “absolute” and “fixed” positioning, left and top specify the horizontal and vertical coordinates of the left and top edges of the content, relative to the top left corner of the deepest positioned element in which it is contained. • Positioned elements are those with values other than “static”. • If an absolute or fixed element does not sit inside of any elements with positioning, the position is relative from the top left corner of the page. • For “relative” positioning, left and topare offsets to move the content by from its current position. • Right and bottom do the same thing, but on the right and bottom edges of the content. • If “left” and “right” are both specified in an absolute or fixed element, the width will be automatically set to right - left. • If “top” and “bottom” are both specified, the height will be set to bottom - top. • “Absolute” and “fixed” elements exist above static and relative content, should the content overlap. • This allows us to speak of depth, which can be set using the “z-index:” rule. Elements with higher values display on top of lower ones. • Static and relative content has a z-index of 0 by default. Set an absolute element to z-index -1 or less to place it behind this content.

Overflow • When specifying an explicit width and height of an element, it’s possible for the element’s content to occupy more space than is available. • This is referred to as overflowing, and is dealt with according to the “overflow” CSS rule applied to the element. • overflow has four values: • visible: Shows all content defined in the element, even that which falls outside of the element’s boundaries. This is the default. • auto: If the content exceeds the dimensions of the element, show scrollbars (usually only vertically) on the element. • scroll: Always show scrollbars, whether or not the content exceeds the dimensions of the element. • hidden: Don’t show any content that exceeds the dimensions of the element at all.

Position and Overflow Example

Popup menus • One way to create popup menus without using Javascript is to create a 2-level list: • Set the second level of the list (“ul > li > ul”) to display: none and visibility: hidden. • Give that level display: block and visibility: visible when hovering over its parent in the top level list (“ul > li:hover > ul”). • Since the sublist is part of its parent as well, it will remain visible when the parent list item or the current popup list are shown.

Javascript • HTML is the language that defines a page’s structure. • CSS is the language that defines a page’s appearance. • Javascript is a language that defines how a page acts. • Unlike HTML and CSS, it is a fully functional (“Turing-complete”) programming language. • It is very powerful and can control nearly any aspect of a page’s display. • It runs on the client-side; that is, in the browser. • (Compare to server-side scripts which process forms and return entirely new HTML pages). • Javascript can read and modify many properties of the page and can process events. • Events are external occurrences (usually user-driven), such as mouse movements, page loads, and clicks. • With Javascript, it’s possible to process these events and make the page respond to them in whatever manner you wish. • For example, form submission can be intercepted and form fields validated prior to submission to the server (and without having to load any new pages). If the fields don’t pass muster, the form submission can be aborted so the user can correct the mistake. • Note that potentially dangerous form input should always be checked on the server as well, as client side scripting is trivial for a malicious user to bypass. • Information such as time of day is available to Javascript and can be integrated into your website. • Javascript is also the only way to process <input type=“button”> fields, which we had talked about last week.

<script> • Javascript files may be included in your pages using the <script> tag. • The type attribute specifies the type of code to be entered, usually type=“text/javascript”. • The src attribute specifies the address of the file to load into the page. It is optional. • If a src is specified, the space between the opening and closing tag is blank (but must have a separate closing tag; don’t use the shorthand here!) • e.g.: <script type=“text/javascript” src=“myscript.js”></script> • If src is not specified, Javascript code can be typed in between the opening and closing tags: • e.g. <script type=“text/javascript”>alert(“Test”);</script>

Demonstration

The DOM Tree • Because tags can be nested, they take the structure of a tree, just like files and directories on your hard drive. • Browsers use this structure internally to determine how the pages should be rendered, particularly when they encounter invalid HTML. • Thus they have an internal representation of the tree, which can be explored directly through Javascript or using a development toolbar. • We’ll demonstrate how to browse the nodes of this tree in Firefox and IE using the Firebug application and using the IE Developer Toolbar. • For HTML pages, these trees have a standard set of capabilities known collectively as the Document Object Model (DOM). • An opening tag delves one level deeper into the tree, while a closing tag moves one level up. • <html> is the outermost element, but not where the tree begins. • There is an object known as “document” above it. • And one called “window” above that.

Exploring the Tree with Firebug

And in IE’s developer toolbar…

IDs and Javascript. • The “ID” attribute doesn’t only define a reference to an element for use in CSS. • It also defines a reference usable in Javascript. • Thus “ID” uniquely identifies nodes you consider important in the DOM tree. • When we begin writing our own scripts, we’ll see how to make use of this: • The document object has a function called getElementById(“elemid”) which can retrieve DOM node references from IDs you assigned. • But we won’t discuss Javascript in that level of detail until next time. • You can also identify nodes in the tree by tag name. (node.getElementsByTagName()).

Including Flash and Other Objects • The HTML <object> tag is used to insert resources such as videos, Flash movies, and Java applets into a page. • Usage is similar to <img>. Content inside of the <object> tag will only be displayed if the object doesn’t load (for example, if the user doesn’t have the Flash player installed). • The most important attributes are: • “type”, containing the type of document being inserted (“e.g. application/x-shockwave-flash”). • “data”, containing the URL to the document. • “codebase” (optional): if the resource requires a plugin to view (i.e. the Flash plugin), this specifies the location of the plugin. • Other parameters (which are interpreted by the Flash movie / video player) can be passed using <param> tags between the opening and closing <object> tag. These have name and value attributes. • For example: <object type="application/x-shockwave-flash" data="ethereallamentations.swf" id="TitleMovie"> <paramname="movie" value="ethereallamentations.swf" /> <param name="quality" value="high" /> <param name="scale" value="noscale" /> <!– No Flash player? Fall back to an image.--> <div class="StaticTitle"> <imgsrc="images/title.png" alt="Ethereal Lamentations" /> </div> </object>

<object> Capabilities • The following objects can be included using an <object> tag: • Flash movies. • Java applets. • Other HTML pages (similar to an <iframe>). • Images (but use the <img> tag instead). • Sounds or video. • PDFs or other documents that load with plugins. • <objects> can be styled using CSS. • <objects> containing Flash movies or other plugins may appear layered on top of all other content within the browser. • Even content with a higher z-index, depending on the plugin. • This can occasionally be a very challenging issue to resolve.

<object> Limitations • The more useful objects tend to require plugins to display properly. • Thus they appear differently or not at all on certain systems. • Patent wars have resulted in strange behaviors. • Certain browsers require you to click objects to “activate” them, due to a patent on objects that run automatically. • Objects often require an explicit width and height (specified using CSS or the width and height attributes). • Some objects don’t play well with the rest of the elements on the page, particularly those partially overlapping them. • It may not be possible to use “overflow” (or various other CSS rules, such as “opacity”) with certain types of objects.

Next Time • Introduction to Javascript. • Element references and getting them. • Functions (do something with specific input and return a result). • Conditionals (“if A, then do B”). • Loops (“do C five times”). • This course is about to venture into the realm of web programming.

A Nonprofit Organization of New Jersey, USA http://www.projectpolymath.org

How to Create Your Own Website