Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja

Mid Term Exam March 14, 2006 All material covered till Feb 28 th is included. WWG questions will be taken from the review sheet. PTW Coding questions from debugging exercises.

Programming the Web using XHTML and JavaScript

The HTML Source Document Page content goes here Page Title

Paragraphs and Line Breaks Break tag Generates a line break Without inserting a blank line like the tag. “Empty” tag – no needed instead (space optional) / required by XHTML to indicate an empty element Ch02-Ex-05

Adding More Tags Emphasizing text - italics HTML: This word is italicized Browser: This word is italicized - bold HTML: This word is bold Browser: This word is bold Ch02-Ex-06

Adding More Tags Structure vs. Presentation: so what? In early HTML, designers used tags for both: structure and presentation Problem: Those Web pages display well only on PCs Other devices required other versions of the HTML code. Presentation does not have to be visual!

Adding More Tags By defining structure and presentation separately this problem is eliminated Structure defined by HTML code Presentation defined elsewhere: Browser Style sheet definitions (Chapter 3) This is the point of XHTML

Adding More Tags Block-level elements Define a complete section of text Preceded and followed by a blank line Body, header, paragraph tags Inline elements Apply to a sequence of characters within a block Emphasis and strong tags

Adding More Tags Blocks may contain anything: Other blocks … … … Inline elements … … … Inline elements may contain Other inline elements … … … BUT NOT BLOCKS! … … …

Internal Style Sheets Redefines the presentation rule (style) for certain elements “Internal” because contained within the HTML source document itself Styles may be defined using different style sheet languages so … … the language used must be specified

Formatting Fonts Using Styles Can compress definition p {font-style:italic; font-weight:500; font-variant:small-caps; font-size:14pt; line-height:24pt; font-family:”Lucida”,”Arial”} p {font: italic 500 small-caps 14pt/24pt ”Lucida”,”Arial”}

Tags with Multiple Styles The same type of element can have multiple definitions called “classes” p {text-align:justify; font-weight:bold} p.intro {text-align:center; color:red}

Local Styles Local styles take precedence over other style definitions The text in this paragraph will The text in this paragraph won’t be red

External Style Sheets Text-only file Contains style definitions only h2 {color:red} h1 {font-size:24pt p {text-align:center} p.small {font-size:10pt} No tags needed

External Style Sheets Save in a file with a.css extension css = cascading style sheets Local, internal and external may be present in the same document Local overrides internal Internal overrides external

External Style Sheets How to specify external style sheets? Add tag in section

Displaying Lists Ordered lists: Item 1 Item 2 Block-level element Items indented relative to other text Ch04-Ex-02 Optional in HTML, Required in XHTML

Displaying Lists Unordered lists: Item 1 Item 2 Block-level element Items indented relative to other text Ch04-Ex-03 Optional in HTML, Required in XHTML

Tables Cells spanning multiple columns Ch04-Ex-11 Cells spanning multiple rows Ch04-Ex-12

Displaying Images General Form Example <img src = “ image_feature_73.html” />

Creating Links External Downloads and displays a new Web page Implemented by an anchor tag with a hypertext reference: some text the user sees

Creating Links Pathnames Absolute Relative highlights/index.html index.html Defaults to index.html

Creating Links Internal Location Link Click here Identifies an internal link

Creating Links Combined Form: url#id 0/assignments.htm#Lagerstrom-Ch-5

Layout with Style Ch06-Ex-03.html padding – number of pixels between border and text (padding n or padding x y) overflow – whether or not text outside the borders is visible hidden visible Ch06-Ex-03a.html

Tables Plain table Ch06-Ex-04.html Nested table Ch06-Ex-05.html

Frames Linking between frames: Click link in one frame See result in another frame Add target attribute to tag: Click here to … Otherwise content appears in current frame Ch06-Ex-08

Multiple Windows Just like specifying what frame in which to display a document: … Ch06-Ex-11

Interactivity Events An action associated with some object Types: Click Select Mouseover Ch07-Ex-03.htm

Interactivity Sequence of events: User clicks the button Browser automatically detects the click Browser generates a click event Event handler associated with the button is triggered JavaScript commands associated with that event are processed

Interactivity onclick attribute describes the action(s) to take when a click event is detected <input type=“button” … ¬ onclick=“alert(‘You clicked me’)” /> alert is JavaScript exception to rule Ch07-Ex-04.htm

Interactivity Multiple JavaScript commands are valid <input type=“button” … ¬ onclick=“alert(‘You clicked me’)”; onclick=“alert(‘Well done’)” />

Interactivity Mouse events onmouseover – when cursor is moved over an object onmouseout – when cursor over an object moves away from the object Ch07-Ex-05.htm

Variables In a variable: var grindSetting grindSetting = ultraJava.getGrind() prompt command … prompt(message, initial_value) Ch08-Ex-02

Variables confirm command … confirm(message) Ch08-Ex-03

Browser Object Structure Document Object Model (DOM) Window object (“window”) Includes various methods: alert() prompt() confirm() Technically window.alert(…), etc. although “window” usually omitted in practice

Browser Object Structure location object Stores information about the URL of the document currently being displayed in the window. Properties include: href (complete URL) hostname (only the host and domain name) Ch08-Ex-05

Using Functions … function someName() { … } … someName() …

Using Functions Ch09-Ex-01.htm

Using Functions some HTML a function call some more HTML some HTML function statement 1 function statement 2 … some more HTML

Parameters Parameter/argument: the means by which data is supplied to a method confirm(“Are you sure?”) ultraJava.changeGrind(“coarse”) Why parameters? General code is re-useable

Parameters Need a printGreeting function that uses a parameter function printGreeting(personName) { alert(“Hello,” + personName) } Call by personName=“Fred” printGreeting(personName)

Parameters Ch09-Ex-02.htm

More Parameters Can refer to a form element in a function Ch10-Ex-04 Can pass a value to a function as a parameter Ch10-Ex-05

More Parameters Can pass an object, not its value, as a parameter Ch10-Ex-06

More Parameters Can pass part of an object, as a parameter Ch10-Ex-07

More Parameters Pass both the input object (nameBox) and the output object (outputBox) as parameters Ch10-Ex-08

The Web Wizard’s Guide to Web Design

Identifying the Audience Who is more important? Designer Audience Successful design meets the needs of the audience, not the designer! Users. Who are they? Why are they here? What are they looking for? How do they think?

Identifying the Audience Possible design approaches: Organization-centered Organization’s point of view Public perception? Technology-centered If you’ve got it, flaunt it Does the technology serve the needs of the site? User-centered Target audience

Identifying the Audience Ways to define audience - demographics Age Gender Geography/Residence Income Education Race/Ethnicity Interest (Web) History

Identifying the Audience Steps to define audience: Picture them at the computer Who are they? Range of ages Gender Income Why are they here? How did they get here? Do they have a history with this organization? Are there common characteristics ?

Determining Site’s Purpose What What will visitors do at the site? Why Why do they want to do it? Why would they want to do it here and not somewhere else? Definition serves both customer and organization needs

Determining Site’s Purpose Goals (strategic view) Long-term Organization-centered (usually) Objectives (tactical view) Specific means by which goals will be accomplished User-centered (usually) Many Web sites serve a variety of purposes Understand them from the beginning

Planning the Structure “Form follows function” Design the functions first, the form will follow naturally Flow Chart How the subdivisions work or are organized Statement of functions The purpose each subdivision serves Each subdivision serves a unique purpose (What happens if this concept is violated?)

Planning the Structure Avoid meaningless generalities Be concrete Be detailed Use action verbs Consider user’s perspective

Planning the Structure Specifications Filename Text Images Links Menus