lecture 15 itis 2300 mid term review february 28, 2006 dr. anita raja
TRANSCRIPT
![Page 1: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/1.jpg)
Lecture 15
ITIS 2300 Mid Term Review
February 28, 2006
Dr. Anita Raja
![Page 2: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/2.jpg)
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.
![Page 3: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/3.jpg)
Programming the Web using XHTML and JavaScript
![Page 4: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/4.jpg)
The HTML Source Document<html>
</html>
Page content goes here
<title>Page Title</title><head>
</head><body>
</body>
![Page 5: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/5.jpg)
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
![Page 6: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/6.jpg)
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
![Page 7: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/7.jpg)
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!
![Page 8: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/8.jpg)
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
![Page 9: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/9.jpg)
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
![Page 10: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/10.jpg)
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>
![Page 11: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/11.jpg)
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
![Page 12: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/12.jpg)
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>
![Page 13: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/13.jpg)
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}
![Page 14: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/14.jpg)
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>
![Page 15: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/15.jpg)
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
![Page 16: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/16.jpg)
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
![Page 17: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/17.jpg)
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”>
![Page 18: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/18.jpg)
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
![Page 19: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/19.jpg)
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
![Page 20: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/20.jpg)
Tables Cells spanning multiple columns
Ch04-Ex-11
<td colspan=“2”>
Cells spanning multiple rows Ch04-Ex-12
<td rowspan=“3”>
![Page 21: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/21.jpg)
Displaying Images General Form
<img src=“URL goes here” />
Example
<img src =
“http://www.nasa.gov/multimedia/imagegallery/ image_feature_73.html” />
![Page 22: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/22.jpg)
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>
![Page 23: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/23.jpg)
Creating Links Pathnames
Absolutehttp://www.nasa.gov/multimedia/highlights/index.html Relativehighlights/index.html
index.html Defaults to index.html
![Page 24: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/24.jpg)
Creating Links Internal
Location
<a id=“some_label”> Link
<a href=“#some_label”>Click here</a>
Identifies an internal link
![Page 25: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/25.jpg)
Creating Links Combined
Form: url#id
http://www.sis.uncc.edu/~anraja/courses/2300/assignments.htm#Lagerstrom-Ch-5
![Page 26: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/26.jpg)
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
![Page 27: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/27.jpg)
Tables Plain table
Ch06-Ex-04.html
Nested table Ch06-Ex-05.html
![Page 28: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/28.jpg)
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
![Page 29: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/29.jpg)
Multiple Windows Just like specifying what frame in which
to display a document:
<a href=“…” target=“fred”> … </a>
Ch06-Ex-11
![Page 30: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/30.jpg)
Interactivity Events
An action associated with some object Types:
Click Select Mouseover
Ch07-Ex-03.htm
![Page 31: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/31.jpg)
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
![Page 32: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/32.jpg)
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
![Page 33: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/33.jpg)
Interactivity Multiple JavaScript commands are valid
<input type=“button” … ¬
onclick=“alert(‘You clicked me’)”;
onclick=“alert(‘Well done’)” />
![Page 34: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/34.jpg)
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
![Page 35: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/35.jpg)
Variables In a variable:
var grindSettinggrindSetting = ultraJava.getGrind()
prompt command …prompt(message, initial_value)
Ch08-Ex-02
![Page 36: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/36.jpg)
Variables confirm command …
confirm(message) Ch08-Ex-03
![Page 37: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/37.jpg)
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
![Page 38: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/38.jpg)
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
![Page 39: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/39.jpg)
Using Functions<html> <head> <title> … </title> <script …> function someName() { … } </script> </head> <body> … <script …> someName() </script> … <body></html>
1
2
3
4
5
6
![Page 40: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/40.jpg)
Using Functions Ch09-Ex-01.htm
![Page 41: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/41.jpg)
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>
![Page 42: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/42.jpg)
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
![Page 43: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/43.jpg)
Parameters Need a printGreeting function that uses a
parameter
function printGreeting(personName) {
alert(“Hello ,” + personName) } Call by
personName=“Fred”
printGreeting(personName)
![Page 44: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/44.jpg)
Parameters Ch09-Ex-02.htm
![Page 45: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/45.jpg)
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
![Page 46: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/46.jpg)
More Parameters Can pass an object, not its value, as a
parameter Ch10-Ex-06
![Page 47: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/47.jpg)
More Parameters Can pass part of an object, as a parameter Ch10-Ex-07
![Page 48: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/48.jpg)
More Parameters Pass both the input object (nameBox) and
the output object (outputBox) as parameters Ch10-Ex-08
![Page 49: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/49.jpg)
The Web Wizard’s Guide to Web Design
![Page 50: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/50.jpg)
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?
![Page 51: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/51.jpg)
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
![Page 52: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/52.jpg)
Identifying the Audience
Ways to define audience - demographics Age Gender Geography/Residence Income Education Race/Ethnicity Interest (Web) History
![Page 53: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/53.jpg)
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?
![Page 54: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/54.jpg)
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
![Page 55: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/55.jpg)
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
![Page 56: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/56.jpg)
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?)
![Page 57: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/57.jpg)
Planning the Structure
Avoid meaningless generalities Be concrete Be detailed Use action verbs Consider user’s perspective
![Page 58: Lecture 15 ITIS 2300 Mid Term Review February 28, 2006 Dr. Anita Raja](https://reader035.vdocuments.mx/reader035/viewer/2022070412/5697bf821a28abf838c86027/html5/thumbnails/58.jpg)
Planning the Structure
Specifications Filename Text Images Links Menus