CS381Week1

Download Report

Transcript CS381Week1 

Java script and DHTML
COMPSCI 381
Class Hour: 3:45pm – 5:00pm MW
A little bit about the instructor
Assistant professor at UWW since August 2005
• Graduated from the University of
Connecticut (05 Class), Ph.D in
Computer Science and Engineering
• Master of Computer Science from
UW-Milwaukee (96-99)
• Bachelor of Science from Hanoi
University of Technology (86-91)
Contact information
[email protected]
(fastest way to contact me)
Office: McCutchan room 424
Office Hours: 9am – 11am MW or
1-2pm W or by appointment
262 472 5170
Course Objectives
Design a web interface for
an web application. It needs
to show samples, have links
to description, price, warrant
info, and shopping cart. It
should allow users to pay by
credit card….
Implement and test
the interface
Course detail - Topics
Design, implement,
an interface for web
development
Understand the
requirement
Apply skillfully
Javascript
& DHTML techniques
Documentation
Testing
Course Evaluation
GRADABLE
POINTS
2 Mid term Exams
300
7 Programming
assignments
400
Final Exam
200
Labs
100
Total
1000
Grade
Letter
Grade
Letter
Percentage Grade
Percentage
A
94 to 100%
A-
90 to 93%
B+
87 to 89%
B
84 to 86%
B-
80 to 83%
C+
77 to 79%
C
74 to 76%
C-
70 to 73%
D+
67 to 69%
D
64 to 66%
D-
60 to 63%
F
Less than 60%
Getting started
• Let’s overview HTML
Assessment
1. The home page for a Web site is usually
contained in a file named ___________ .
a. index.html
b. homepage.html
c. default.html
d. homepage.asp.
Assessment
2. You are given an URL =
http://www.awl.com/index.html. What is the
host name?
a. http://
b. www.awl.com
c. index.html
d. awl
e. None of the above
Assessment
3. Select the attribute in the following line of
HTML code <table width=”350”>.
a. width
b. width=”350”
c. Table
d. None of the above
Assessment
4. The variable bgcolor is use to set the
background color. What variable would be
used to indicate that a site had been
previously entered?
a. alink
b. elink
c. vlink
d. zlink
e. None of the above
Assessment
5. Select the tag that starts all HTML
documents.
a. <BEGIN>
b. <START>
c. <HTML>
d. <FIRST>
e. None of the above
Assessment
6. A link to another page begins with <a href.
Select the name that best describes this tag.
a. anchor
b. pointer
c. address
d. a reference
e. None of the above
Assessment
7. Select the HTML code for the tag of a
comment.
a. <!- your comment ->
b.<—your comment 
c.< -- your comment -- >
d. >!—your comment --<
e. None of the above
Assessment
8. Which part of an application formats and
displays web pages?
a. The information server
b. The web browser
c. The database server
d. None of the above
Assessment
9. The following CSS code creates a body tag
with a black background and white text.
BODY { background: black;
text: white; }
a. TRUE
b. FALSE
Assessment
10. The <H7> tag produces a heading with the
largest font size.
a. FALSE
b. TRUE
HTML overview
• An HTML document consists of lines of text
with embedded markup tags that specify
Web-page formatting and links to other pages
• Invented by Tim Berners-Lee at CERN 1989
– The birth of the World Wide Web
URLs, Anchor Tags, and Document
References
http://www.w3.org/TR/REC-html40/
Protocol
Host
Machine
Name
URLs, Anchor Tags, and Document
References
• URL (Uniform Resource Locator)
– A protocol, a mechanism used to fetch the
desired object.
• In this case: http (Hypertext Transfer Protocol).
– The host machine, the computer that contains
the requested object.
• In this case, the host computer is www.w3.org.
• Special host name for browser computer: localhost
– The object name.
• In this case, /TR/REC-html40/.
Fundamentals of HTML
•
•
•
•
•
•
•
HTML, HEAD, Title, Body
Headings and paragraphs
Add emphasis to your text
Use various kinds of lists
Add links to other pages
Add images
Add links to other pages
<HTML> and </HTML>
•
•
<HTML>
The <HTML> tag is the first tag in your
document. It tells the Internet browser that
it is reading an HTML document (without it,
the browser would think it was viewing a
text document).
</HTML> This is the closing tag for the
<HTML> tag. This should be the last line in
your HTML document.
<HEAD> and </HEAD>
• <HEAD>
Used to contain information such as title, style sheets
• </HEAD>: This is the closing <HEAD> tag.
<TITLE> and </TITLE>
• <TITLE> and </TITLE>
– It is used to make the title of the page. The title of
the page will appear in the blue bar across the top
of your active window
Example:
<TITLE> Basic HTML </TITLE>
<BODY> and </BODY>
• <BODY> and </BODY>
We put all your text, images, and links between
the opening and closing <BODY> tags.
Headings and paragraphs
• There are up to six levels of headers that can
be used in your document, H1 through H6.
Header 1 is the largest header and they get
progressively smaller through header 6.
Example
• <h1>This is a header 1 tag</h1>
This is a header 1 tag
• <h2>This is a header 2 tag</h2>
This is a header 2 tag
Add emphasis to your text
• Boldface
This is a <b>boldface</b> tag.
This is a boldface tag.
• Italics
This is an <i>italic</i> tag.
This is an italic tag.
Lists
Numbered
<ol>
<li> list item 1
<li> list item 2
<li> list item 3
</ol>
Lists
Unumbered:
<ul>
<li> list item 1
<li> list item 2
<li> list item 3
</ul>
Lists
• Definition lists allow you to indent without
necessarily having to use bullets.
• <dl>
<dt> This is a term
<dd> This is a definition
<dd> And yet another definition
<dt> Another term
<dd> Another definition
</dl>
Center
• You can center text, images, and headings
with the center tag:
<center>This is a centered sentence</center>
• The center tag automatically inserts a line
break after the closing center tag.
File names
• Use lowercase file names
• User proper extension:
– *.html or *.htm
Designing a web site
•
•
•
•
Determine the purpose of the web site
Determine the target audience
Determine numbers of pages
Sketch the site on paper
Example of HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html> <head> <title>My first Web site</title> </head>
<body>
<!-- Site navigation menu -->
<ul>
<li><a href="index.html">Home page</a>
<li><a href="musings.html">Musings</a>
<li><a href="town.html">My town</a>
<li><a href="links.html">Links</a>
</ul>
<!-- Main content -->
<h1>My first styled page</h1>
<p>Welcome to my first page!
</body>
</html>
Result
Adding color
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My first web page</title>
<style type="text/css">
body {
color: purple;
background-color: #d8da3d }
</style>
</head>
……
<body>
Result
Style sheet
• Style sheets in CSS are made up of rules.
Each rule has three parts:
– the selector (in the example: “body”), which tells
the browser which part of the document is affected
by the rule;
– the property (in the example, 'color' and
'background-color' are both properties), which
specifies what aspect of the layout is being set;
– and the value ('purple' and '#d8da3d'), which
gives the value for the style property.
Style sheet
• Style sheets in CSS are made up of rules.
Each rule has three parts:
– the selector (in the example: “body”), which tells
the browser which part of the document is affected
by the rule;
– the property (in the example, 'color' and
'background-color' are both properties), which
specifies what aspect of the layout is being set;
– and the value ('purple' and '#d8da3d'), which
gives the value for the style property.
Style sheet
• Style sheets in CSS are made up of rules.
Each rule has three parts:
– the selector (in the example: “body”), which tells
the browser which part of the document is affected
by the rule;
– the property (in the example, 'color' and
'background-color' are both properties), which
specifies what aspect of the layout is being set;
– and the value ('purple' and '#d8da3d'), which
gives the value for the style property.
Result
Adding color
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My first web page</title>
<style type="text/css">
body {
color: purple;
background-color: #d8da3d }
</style>
</head>
……
<body>
Result
Style sheet
• Style sheets in CSS are made up of rules.
Each rule has three parts:
– the selector (in the example: “body”), which tells
the browser which part of the document is affected
by the rule;
– the property (in the example, 'color' and
'background-color' are both properties), which
specifies what aspect of the layout is being set;
– and the value ('purple' and '#d8da3d'), which
gives the value for the style property.
Look at the example again
SELECTOR
<style type="text/css">
value
body {
color: purple;
property
background-color: #d8da3d }
</style>
Creating a Style rule
• Step 1: Determine Selector (which identifies the elements you
wish to format). Put { next to it
Example: h1{
• Step 2: Determine property: value in which property is the name
of CSS property that applies this format and value is one of valid
options for that property
Example: color:red
• Step 3: Combine the results of step 1 and step 2 and put } at
the end.
If you have more than one property: value pairs, use semicolon (;)
to separate them.
Example: h1{color:red}
Creating a selector
• The type or name of elements
For instance: body, paragraph
• The context in which the element is found
For instance: paragraphs in the middle of the web
page
• The class or id of an element
For instance: the name of a paragraph in a web page.
Examples
• For the type or name of elements
h2 {color:red}
h1 {color: purple}
• The context in which the element is found
div#gaudi p {color:red}
• The class or id of an element
div#gaudi {color:red}
DIV tag
• The <div> tag: defines logical divisions in a Web
page.
– determines the alignment of that section of the page.
– defines the style of whole sections of HTML.
– names certain sections of your documents so that you can
affect them with style sheets or Dynamic HTML
• Syntax:
<div [align=“<left><center><right><justify>”]
[id =name]>
<!–- this is a body of the div tag -->
</div>
Example for DIV tag
<div id="gaudi" align="center">
<p>Many tourists are drawn to Barcelona to
see Antoni Gaud’'s incredible architecture.
</p>
<p>Barcelona <a
href="http://www.gaudi2002.bcn.es/english/fl
ash/home/GO.htm">celebrates</a> the
150th anniversary of Gaud’'s birth in
2002.</p>
</div>
Putting style sheet in HTML files
<style type="text/css">
<!-- This is where you put Style sheet
information -->
</style>
Example
<html> <head>
<title>Antoni Gaud’ - Introduction</title>
<style>
h1 {color: purple}
</style>
</head>
<body>
<h1>Antoni Gaud’</h1>
Style sheet in
HTML file
Style affects
this h1 tag
<div id="gaudi" align="justify">
<p>Many tourists are drawn to Barcelona to see Antoni Gaud’'s
incredible architecture. </p>
</div>
</body> </html>
Result
Putting the style sheet in a separate file
• Step 1: Open a new text file
• Step 2: Cut and paste the content inside
<style> </style> tags (except the tag)
• Step 3: Save in the same folder with HTML file
with the extension *.css (e.g mystyle.css)
• Step 4:Replace <style> and </style> tag
with:
<link rel="stylesheet“ ref="mystyle.css">
Example
<html> <head>
<title>Antoni Gaud’ - Introduction</title>
<link rel="stylesheet" type="text/css" media="screen" href="descendant.css" />
</head>
<body>
<h1>Antoni Gaud’</h1>
<div id="gaudi" align="justify">
<p>Many tourists are drawn to Barcelona to see Antoni Gaud’'s
incredible architecture. </p>
</div>
</body>
</html>
Example of descendant.css
• h1 {color:purple}
Adding fonts
body {
font-family: Georgia, Times New Roman,
Times, serif;
color: purple;
background-color: #d8da3d }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
Adding fonts
More about fonts
Font family:
font-family: Georgia, Times New Roman,
Times, serif;
Font size:
font-size:20px
Font type: bold, italic
font-style: italic
Font color: color:#cc00ff
Lab 1
• Creating a web page using HTML