58
Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja
Lecture 15
ITIS 2300 Mid Term Review
February 28, 2006
Dr. Anita Raja
Mid Term Exam March 14, 2006 All material covered till Feb 28th 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<html>
</html>
Page content goes here
<title>Page Title</title><head>
</head><body>
</body>
Paragraphs and Line Breaks Break tag <br>
Generates a line break Without inserting a blank line like the <p> tag. “Empty” tag – no </br> needed <br /> instead (space optional) / required by XHTML to indicate an empty
element Ch02-Ex-05
Adding More Tags Emphasizing text
<em> - italics
HTML: This <em>word</em> is italicizedBrowser: This word is italicized
<strong> - bold HTML: This <strong>word</strong> 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<body>…<p>…</p>…</body>
Inline elements<h2>…<em>…</em>…</h2>
Inline elements may contain Other inline elements
<em>…<strong>…</strong>…</em> BUT NOT BLOCKS!
<em>…<h2>…</h2>…</em>
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
<style type=“text/css”>p {font-style:italic; font-weight:500;font-variant:small-caps; font-size:14pt;line-height:24pt; font-family:”Lucida”,”Arial”}
</style>
<style type=“text/css”>p {font: italic 500 small-caps 14pt/24pt
”Lucida”,”Arial”}</style>
Tags with Multiple Styles The same type of element can have
multiple definitions called “classes”
<style type=“text/css”>p {text-align:justify; font-weight:bold}
</style>p.intro {text-align:center; color:red}
Local Styles
Local styles take precedence over other style definitions
<p style=“color:red”>The text in this paragraph will</p>
<p>The text in this paragraph won’t be red</p>
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 <style> 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 <link> tag in <head> section
<link rel=“stylesheet” type=“text/css” href=“my_styles.css”>
Displaying Lists Ordered lists:
<ol><li> Item 1 </li><li> Item 2 </li>
</ol> Block-level element Items indented relative to other text Ch04-Ex-02
Optional in HTML, Required in XHTML
Displaying Lists Unordered lists:
<ul><li> Item 1 </li><li> Item 2 </li>
</ul> 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
<td colspan=“2”>
Cells spanning multiple rows Ch04-Ex-12
<td rowspan=“3”>
Displaying Images General Form
<img src=“URL goes here” />
Example
<img src =
“http://www.nasa.gov/multimedia/imagegallery/ image_feature_73.html” />
Creating Links External
Downloads and displays a new Web page Implemented by an anchor tag with a hypertext
reference:
<a href=“…”>some text the user sees</a>
Creating Links Pathnames
Absolutehttp://www.nasa.gov/multimedia/highlights/index.html Relativehighlights/index.html
index.html Defaults to index.html
Creating Links Internal
Location
<a id=“some_label”> Link
<a href=“#some_label”>Click here</a>
Identifies an internal link
Creating Links Combined
Form: url#id
http://www.sis.uncc.edu/~anraja/courses/2300/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 <a> tag:<a href=“…” target=“left_frame”>
Click here to …
</a> Otherwise content appears in current frame Ch06-Ex-08
Multiple Windows Just like specifying what frame in which
to display a document:
<a href=“…” target=“fred”> … </a>
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 <script> 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 grindSettinggrindSetting = 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<html> <head> <title> … </title> <script …> function someName() { … } </script> </head> <body> … <script …> someName() </script> … <body></html>
1
2
3
4
5
6
Using Functions Ch09-Ex-01.htm
Using Functions
<body>
some HTML
a function call
some more HTML
</body>
<body> some HTML function statement 1 function statement 2 … some more HTML</body>
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
