Chapter 10 Advanced Web Page Construction Web 101

Learning Objectives • Learn how basic HTML elements are used to create Web pages. • Learn how to make simple changes to HTML source code to add new feature or fix minor problems. • Understand how to use cascading style sheets (CSS) to control a Web page’s appearance. • Explore how to use image maps to create livelier Web pages. • Learn how to create simple rollover effects. Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 2

Learning Objectives • Learn how to create Javascript powered interactive HTML elements. • Learn how to find Java. Script programs on the Web and install them on your Web pages. • Find out what Web site maintenance tools and site construction kits can do for you. Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 3

Taking Charge • Web page editor tools like Mozilla’s Composer are typically used to create Web pages. • But it’s helpful to delve deeper and see the underlying structure of a Web page. • Although it’s free, Composer has limitations - a thorough knowledge of Web page structure and its implementation allows the user to add many new features and perform simple fixes. Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4

Taking Charge • Composer lacks tools to insert many sexy Web page features. • But it’s not that hard to insert them directly in the code if you know HTML - hypertext markup language. • The Web page description language now used will eventually be supplanted by e. Xtensible markup language (XML) and cascading style sheets (CSS). Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 5

Taking Charge • XML and HTML are very similar, but CSS is quite different, so will study this too. • CSS works in concert with HTML similarly to the way it works with XML. • Finally, many of the interactive features that bring Web pages alive are powered by Javascript, a Web page programming langauge. • While we won’t learn Javascript directly, we will learn how to add some Javascript-powered features to our pages. Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 6

What Is HTML? • Hyper. Text Markup Language is a type of page description language. • An HTML file is a simple ASCII text file with “markup language” inserted into it. • The “markups” provide information to the browser regarding how the associated content should be displayed. • The “markups” are formally known as elements. Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 7

What Is HTML? • There are four basic elements that should be included in every displayable Web page: – HTML – HEAD – TITLE – BODY Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 8

What Is HTML? • There are 2 general types of HTML elements: – container – empty • Elements are formed using two types of tags: – start – end • All tags are formed using a pair of left and right angle brackets and the forward slash: <this is a start tag> </this is an end tag> • Container elements use both start and end tags. • Empty elements use only the start tag. • The 4 elements define basic Web page layout: Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9

What Is HTML? Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 10

What Is HTML? • All viewable Web pages have this basic structure. • Note that relationship between start and end tags - they’re identical except for the forward slash character in the end tag. • The indention shown is not required, but it helps to distinguish one element from another. • Text placed between the start and tags of an element are the contents, hence the name container element. • Start tags may include attributes, to provide further details regarding the display of the element. • End tags never have attributes. Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 11

What Is HTML? • General form of a START tag: <TAG-NAME ATTRIBUTE 1=“value 1” ATTRIBUTE 2=“value 2” … ATTRIBUTEn=“valuen”> • General form of an END tag: </TAG-NAME> • Put no characters (like a space or return character) between an attribute, the equal sign, and its value. • A start tag can be spread across more than one line if desired, but don’t split an attribute from its value. • Each attribute/value pair must be separated by at least one space or return character. • Attribute values should be quoted unless it’s a single numerical value. (Some attributes are assigned several numbers as their value). Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 12

What Is HTML? • Attributes always have values. For example: <BODY STYLE=“color: rgb(0, 0, 0); ” ALINK=“#000099” VLINK=”#990099”> • This BODY element has 4 attributes that describe the text color (STYLE element), active link text color (ALINK), link text color (LINK), and visited link text color (VLINK). Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 13

What Is HTML? • HTML is case insensitive. • But - attribute values, are not. • Chapter 10 capitalizes all tag and attribute names to make them easier to see, BUT most Web page editors (including Composer) use lower case. • This is because HTML’s successor, XML, is case sensitive - and it uses lower case. • Use the browser “View - Page Source” selection to see the HTML (text) view of a Web page. • In Composer, select the “<HTML> Source” at the bottom of the page to see it. • You can edit to code directly in Composer when viewing the source. Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 14

What Is HTML? Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 15

What Is HTML? • Mozilla displays tag names in purple, attribute names in bold black, and attribute values in blue. • Regrettably, some HTML elements have the same name as an HTML attribute. • For example, the TITLE element contains text to be displayed in the Web page window title bar. • The TITLE attribute displays a textual tooltip when the cursor is placed on the element using it. Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 16

What Is HTML? • A TITLE element (the title is at the top of the window) HTML: <TITLE>A tooltip demo</TITLE> • A TITLE attribute - aka a tooltip HTML: TITLE=“A red delicious apple” inserted inside the image (IMG) start tag Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 17

What Is HTML? • The HEAD element contains the TITLE element and other elements that provide information about the page but do not affect the display of the page. • The BODY element contains all the viewable content. • Be careful to distinguish between elements and attributes! Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 18

What Is HTML? • Common HTML elements: – Horizontal lines - an empty element: <HR style =“width: 100%; height: 2 px”> – Text formatting • Bold Text: <STRONG>bold text</STRONG> • Italicized Text: <EM>italicized text</EM> • Oversized Text: <BIG>oversized text</BIG> Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 19

What Is HTML? • Some Text elements: Copyright © 2007 Pearson Education, Inc. Publishing

What Is HTML? • Unordered Lists Copyright © 2007 Pearson Education, Inc. Publishing as

What Is HTML? • Ordered Lists - the list items are links Copyright ©

What Is HTML? • Links - all are really anchor elements, including the Named Anchor. • The hypertext reference (HREF) attribute makes the anchor into a link. Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 23

What Is HTML? • Tables contain several elements: TBODY = table body CAPTION = table caption TR = table row which contains TD = table data (aka a cell) Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 24

What Is HTML? • Special HTML character codes that do not appear on the keyboard or in Composer’s “Insert -Characters and Symbols…” can be inserted directly into the HTML code. • All special characters are of the form: &#decimal character code; or &character designator; • For example, ¥ (Yen symbol): ¥ or ¥ Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 25

What Is HTML? • Inserting characters & symbols Copyright © 2007 Pearson Education, Inc.

What Is HTML? • Some special HTML character codes: Copyright © 2007 Pearson Education,

What Is HTML? • Not all characters can be inserted using the Insert menu selection - some must be inserted directly into the code. • Some special characters may not display properly in your editor, but will display properly in the browser - check. • For more exotic characters, check out http: //www. tntluoma. com/sidebars/code s/ Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 28

What Is HTML? • Be careful when editing HTML code! • Most editors attempt to fix coding errors - but usually the error gets compounded! • For example: <BODY STYLE=“color: rgb(0, 0, 0); ” ALINK=“orange” LINK=“green” VLINK=“brown”> If we accidentally omit the closing quote (in red) for the value of ALINK, Composer will “fix” it like so: <BODY STYLE=“color: rgb(0, 0, 0); ” green=“” ALINK=“#000 e 00” VLINK=“brown”> • Most editors can’t fix coding errors, so double check your insertions before you preview/save. Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 29

Style Sheets • Cascading Style Sheets (CSS) are used to specify details about the appearance of Web page elements. • Display information can be provided in three different ways: – Inline STYLE attributes – STYLE elements (usually in the HEAD) – External CSS files referenced via a LINK element (usually in the HEAD). Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 30

Style Sheets • All style information is provided by listing a style property and its associated value: property 1: value 1; property 2: value 2; …propertyn: valuen; • For example, these are inline STYLE attributes: – <H 1 STYLE=”text-align: center; ”>All About Apples</H 1> – <SPAN STYLE=”text-decoration: underline; ”>calcium</SPAN> – <IMG ALT=”apples nested in basket” SRC=”apple 2 r. png” STYLE=”width: 504 px; height: 328 px; ”> Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 31

Style Sheets • CSS is case sensitive, unlike HTML. • Some style properties can take more than value: <SPAN STYLE=“font-family: ‘Times New Roman’, Times, serif; ”> This text will appear in Times New Roman if available</SPAN> • The font-family property specifies a choice of fonts separated by commas, listed in priority order, depending on what’s available. • The first value has 3 words, so this value must be delimited by single quotes - double quotes are already being used for the attribute value. Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 32

Style Sheets • Some CSS font properties: Copyright © 2007 Pearson Education, Inc. Publishing

Style Sheets • Some CSS text properties: Copyright © 2007 Pearson Education, Inc. Publishing

Style Sheets • Some CSS color/background properties: Copyright © 2007 Pearson Education, Inc. Publishing

Style Sheets • Some CSS list properties: Copyright © 2007 Pearson Education, Inc. Publishing

Style Sheets • The inside/outside list-style-position property: Copyright © 2007 Pearson Education, Inc. Publishing

Style Sheets • The float property can be used to have text “flow” around an image. • If an image used the “float: left; ” property, then text and other elements will flow around it on the right. • The float property moves the effected element out of the normal flow of Web page elements. Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 38

Style Sheets • Inline STYLE attributes affect only a single element. • A STYLE element can be used to affect all elements using a single style specification, or rule. • The STYLE element is usually placed into the HEAD. • Only one is needed - can specify rules for all Web page elements here. Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 39

Style Sheets • General form of a STYLE element: <STYLE TYPE=“text/css”>  this ends the HTML comment - it hides CSS from browsers that don’t recognize it </STYLE> Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 40

Style Sheets • General form of a STYLE rule: selector {property 1: value 1; property 2: value 2; … propertyn: valuen; } • Selector: name of HTML element, pseudoelement, class, pseudo-class Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 41

Style Sheets • STYLE rule examples: body { font-family: arial, helvetica, serif; background-color: white; } em, i { color: red; } table { background-color: silver; border-color: red; border-style: dotted; color: black; text-align: center; } Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 42

Style Sheets • These rules are inheritable - if no rule is specified for a particular HTML element, then rules in successive containing elements will be examined until one fits. • The search for an applicable rule is the cascading part of CSS. • The rule closest to the element takes precedence over any other potentially applicable rules defined by enclosing elements. Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 43

Style Sheets • Contextual selectors - rules applied only in certain specific situations. • For example: p strong, p b { color: navy; size: larger; } • Applies only to bold (aka strong) HTML elements that appear inside a paragraph element (the context). • Bold elements NOT in a paragraph and other paragraph elements are unaffected by this rule. • Use spaces to separate contextual element names, commas to separate different contexts. Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 44

Style Sheets • Pseudo-elements - not HTML. • CSS 1 defines two: first-line and first-letter • Usage: p: first-letter { color: purple; font-size: xx-large; } • With this rule, the first letter of every paragraph looks like so: Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 45

Style Sheets • CSS pseudo-classes - most often applied to links. • Refers to the current state of the link visited hover active • Usage: a: link {color: blue; } a: visited {color: green } a: hover { color: red; font-size: 150% } a: active {color: orange } • Must be listed in this order. • Hover rule applied to link only when cursor placed over it: Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 46

Style Sheets • CSS classes - used to create a generic set of rules that can be selectively applied to any element. • Selector used is a user-defined name. • HTML element using these rules requires a CLASS attribute. • CLASS attribute value is the selector name defined by the user, preceded by a period. • For example. hilite {background-color: green; } • To use this rule: <TD CLASS=“hilite”>This text will appear against a green background</TD> Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 47

Style Sheets • Can also associate a specific class with a specific element: p. myalign { text-align: justify; margin-left: 25 px; margin-right: 25 px } h 1. myalign { text-align: center; } • The class name is myalign, and the paragraph or h 1 heading wishing to use this class must still include a CLASS attribute set to “myalign”. • Note that the same class name has two different sets of rules. Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 48

Style Sheets • CSS is most powerful when rules are collected together in a separate text file. • One CSS file can be used by multiple Web pages. • Cosmetic changes to all dependent Web pages can be accomplished by editing only the CSS file. • Use a LINK element to make a CSS rule file (mystylesheet. css here) available to a Web page: <LINK HREF=“mystylesheet. css” REL=“stylesheet” TYPE=“text/css”> • Value of HREF element is name of CSS file. Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 49

Client-Side Image Maps • An image map is an easy way to create hyperlinks inside graphical elements. • A hotzone is an arbitrary region on a Web page that contains a hyperlink. • Server-side image maps run on the Web server. • Client-side image maps are run from the user’s browser. Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 50

Client-Side Image Maps • Image maps can be created manually or with an image-mapping tool. • Tools allow you to create image maps that have shapes other than rectangles. • Image-mapping tools can be found on the Web • Some Web page construction tools support the creation of image maps too Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 51

Client-Side Image Maps • Client-side image maps can also be made to respond to Java. Script events such as – mouseovers – mouseclicks • These image maps are used to create things like: – Graphical buttons – Menus containing a set of these buttons – Links to a large image from a thumbnail version of the image Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 52

Client-Side Image Maps • One way to make your own image maps – Find the image that you want to map – View the image with your Web browser using the ISMAP trick by adding this HTML to/around the IMG element: <A HREF=“#”> <IMG SRC=“text. jpg” ISMAP> </A> – This will cause the cursor coordinates to appear in the browser status bar when moved on the image. Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 53

Client-Side Image Maps Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 54

Client-Side Image Maps – Record the coordinate pairs for each rectangular hotzone you want to define. – Then remove the elements you added (the LINK element and the ISMAP attribute in the IMG element), and insert a MAP element. – Add an AREA element for each hotzone to the MAP element. – Add a USEMAP attribute to the IMG element for the image just mapped. Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 55

Client-Side Image Maps <MAP NAME=“menumap”> <AREA SHAPE=“rect” COORDS=“ 3, 3, 167, 48” HREF=“glacier. html” ALT=“link to glacier national park”> <AREA SHAPE=“rect” COORDS=“ 3, 53, 167, 98” HREF=“grandcanyon. html” ALT=“link to grand canyon national park”> <AREA SHAPE=“rect” COORDS=“ 3, 103, 167, 148” HREF=“sequoia. html” ALT=“link to sequoia national park”> <AREA SHAPE=“rect” COORDS=“ 3, 153, 167, 198” HREF=“yellowstone. html” ALT=“link to yellowstone national park”> <AREA SHAPE=“rect” COORDS=“ 3, 203, 167, 248” HREF=“zion. html” ALT=“link to zion national park”> </map> <IMG SRC=“parkmenu. png” USEMAP=“#menumap” STYLE=“width: 170 px; height: 250 px; ”> Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 56

Client-Side Image Maps • Can add mousover event attributes to image maps create rollover effects. • Mouseover: The action of sweeping the mouse over a region on a Web page that has been programmed to respond to the mouse’s presence. • Often a mouseover causes a graphic on the Web page to be swapped for another giving the illusion that the graphic is highlighted. Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 57

Client-Side Image Maps • A rollover can be added to image maps, highlighting hot

Client-Side Image Maps • In this case, the normal image is “swapped out” for the version with highlighting. • To make this work, add a NAME attribute to your IMG element - here, NAME=“mypic” • Add these attributes to your AREA elements: onmouseover=“mypic. src=‘parkmenusequoia. pn g’ ” onmouseout=“mypic. src=‘parkmenu. png’ ” • Then create a version of the original image for each selection, showing it highlighted. Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 59

Client-Side Image Maps • To avoid a delay as the browser asks for the new image, you can preload your images by adding the element only the next slide to the HEAD of your Web page. • This is a piece of Javascript code that simply fetches the desired images and make then available in the browser cache for use when needed. Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 60

Client-Side Image Maps <script> var pic 1 = new Image; pic 1. src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src=’parkmenuglacier. png’;

Client-Side Image Maps <script> var pic 1 = new Image; pic 1. src=’parkmenuglacier. png’; var pic 2 = new Image; pic 2. src=’parkmenucanyon. png’; var pic 3 = new Image; pic 3. src=’parkmenusequoia. png’; var pic 4 = new Image; pic 4. src=’parkmenuyellowstone. png’; var pic 5 = new Image; pic 5. src=’parkmenuzion. png’; </script> Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 61

Client-Side Image Maps • Simply change the names of the image files to those you are using. • Add or delete statement pairs as needed for the number of selections in your menu: var picx = new Image; picx. src=‘your image file name here’; • Change the value of x for each new picture file. • The images are usually swapped so fast that you would not know there are separate files. Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 62

Introduction to Interactive Web Pages • The mouseovers we saw in previously are examples of interactivity - the Web pages actively responds in some fashion to user-initiated actions. • The actions can include: – – – changing the value of a text box clicking the mouse button loading a new Web page moving the cursor onto an element selecting an option from a list Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 63

Introduction to Interactive Web Pages • These events are used to trigger Javascript code - a scripting language designed specifically to work with Web pages. • Some common Javascript events associated with user actions: – – – on. Click ( mousedown immediately followed by mouseup) on. Db. Click (a fast double-click) on. Mouse. Move (the mouse moves in the hotzone) on. Key. Down (a key is pressed on the keyboard) on. Key. Up (a key is released) on. Key. Press (a key is hit and immediately released) Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 64

Introduction to Interactive Web Pages • For example, a Javascript alert box can be created like so: <IMG SRC=“apple 2 r. png” HEIGHT=504 WIDTH=328 ONMOUSEOVER=“alert(‘See the Red and Golden Delicious, and Gala Apples. ’)”> • When the cursor moves over this image, a Javascript alert box will appear, displaying the message in single quotes above: Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 65

Introduction to Interactive Web Pages Copyright © 2007 Pearson Education, Inc. Publishing as Pearson

Introduction to Interactive Web Pages • In order to use Javascript effects, Web pages often include FORMs and form control elements. • FORM elements are not visible in browser view, but they are required to make form control elements work properly. • Form control elements do display - some common ones: – – Buttons Radio buttons Text boxes Checkboxes Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 67

Introduction to Interactive Web Pages • In order for these form control elements to respond to user actions, at least one these elements must include an event attribute. • An event attribute is used to link a user action to some Web page element (often a form control element, but not restricted to them) and some desired code-mediated response when the action occurs. • The code can be Javascript, or some other programming language. Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 68

Introduction to Interactive Web Pages • A SELECT element Copyright © 2007 Pearson Education,

Introduction to Interactive Web Pages • A TEXTAREA element Copyright © 2007 Pearson Education,

Introduction to Interactive Web Pages • These form control elements, with an appropriate EVENT attribute inserted, can provide some degree of interactivity to your Web pages. • Example - writing to a TEXTAREA element. • Uses a Javascript assignment statement - a command that can be used to change the value displayed by some HTML element. Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 73

Introduction to Interactive Web Pages • This set of code insert a string (a sequence of characters) into a TEXTAREA element. • The first button INPUT element writes a simple string, delimited by single quotes, into the TEXTAREA: myarea. value=’Pressing the button below caused this message to appear here’ • This string has no breaks (return characters) in it, even though it appears to, only because it doesn’t fit on one line. • myarea. value refers to the value attribute of the TEXTAREA named myarea. • The string on right side of the equal sign (the assignment statement operator) is assigned to the element on the left side. Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 75

Introduction to Interactive Web Pages • This action is triggered when the user clicks on the button because this assignment statement is the value of button’s ONCLICK event attribute: ONCLICK=“myarea. value=‘Pressing the button below caused this message to appear here’ ” • The net result is that the TEXTAREA contents are replaced with the string in single quotes when the button is clicked. • Note the placement of the single (delimits the string) and double quotes (delimits the attribute value). Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 76

Introduction to Interactive Web Pages • The code for the second button also inserts a string into a TEXTAREA element, but it retains previously entered text by adding myarea. value (the current contents) to the text string. • The string is built using string concatenation (represented by +) to combine smaller strings together to form a larger string. • It also includes a string equivalent to the “Enter” or “Return” key - “n” myarea. value=’This button preserves the textarea contents’ + ’nn’ + myarea. value Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 77

Introduction to Interactive Web Pages • Text appearing between the single quotes is a formally known as a literal string. • myarea. value (without the quotes) refers to the value attribute of myarea, in this case, the current contents of the TEXTAREA element. • So myarea. value is a symbolic representation of the value contained in the TEXTAREA. • myarea. value is actually a type of variable, meaning something with a value that is changeable. • This also works for text INPUT elements, and any other object that has a VALUE attribute. Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 78

Introduction to Interactive Web Pages • Example - an interactive quiz • Uses radio buttons for each possible response to a question. • All the radio buttons have the same name. • Radio buttons with the same name are mutually exclusive - only one button in the group can be selected at a time. • Radio buttons are the only exception to the requirement that all Web page elements have a different name. • When clicked, a message is written into a TEXTAREA about the correctness of the response. Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 79

Introduction to Interactive Web Pages • Can use events to write to the window status bar at the bottom of the Web page. • The status bar may be hidden - use the View menu to make it visible. • Referred to as window. status in the code. • Messages written to the status bar can be “erased” by assigning it the empty string - two single quotes with no characters in between. • This example uses mouseover events to trigger status bar updates. Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 81

Introduction to Interactive Web Pages • The HTML of interest: ONMOUSEOVER=“window. status=‘The South Wing’ ” ONMOUSEOUT=“window. status=‘ ’ ” ONCLICK=“alert(‘The second floor of the south wing holds the Chambers of the House of Representatives. ’)” • Note that window. status is assigned the empty string, represented by two single quotes, to erase its contents when the ONMOUSEOUT event occurs. • Notice the message “The South Wing” in the status bar of the Web page (Next slide). Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 83

Introduction to Interactive Web Pages • Clicking on one of the hot spots also

Introduction to Interactive Web Pages • The ONLOAD event attribute, when placed in the BODY start tag, can be used to perform Javascript too. • One way it’s often used is to open a simple window encouraging the user to wait while the main (and longer loading) Web page loads. • Add this event attribute to the BODY: ONLOAD=“window. open(‘wait_page. html’, ‘_blank’, ‘height=300, width=300’)” Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 86

Introduction to Interactive Web Pages – There are three parameters, delimited by single quotes, for the window. open action: window. open(‘wait_page. html’, ‘_blank’, ‘height=300, width=300’) – wait_page. html - the file to display – _blank - where to put it; _blank indicates a new window (the underscore is important) – height=300, width=300 - how large to make this new window – Only the first parameter is required (it would work without the second two parameters). Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 87

Introduction to Interactive Web Pages – Using ONBLUR & ONFOCUS - when an element loses focus, by clicking elsewhere on the Web page for example or gains focus my clicking on it. – This program computes a dog’s age in “dog years” by multiplying the value in a text box and writing the computed value in it’s place. – These event attributes are added to the text INPUT element start tag. ONFOCUS=“age. value=‘Replace this text with your dog’s age’ ” ONBLUR=“age. value=‘Your dog is ’ + age. value*7 + ‘ years old in dog years. ’ ” Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 89

Introduction to Interactive Web Pages – The value is computed by the section in red. – The value typed by the user into the text box is captured, multiplied by 7, then inserted into a string and placed back into the same text box when it loses focus. – Note the use of the escape character (the ) to add a single quote to the message triggered by ONFOCUS - otherwise the apostrophe would be interpreted as the end of the string. Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 90