Java script and DHTML COMPSCI 381 Class Hour: 3:45pm

1
Java script and DHTMLCOMPSCI 381Class Hour
345pm 500pm MW
2
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)

3
Contact information

• nguyenh_at_uww.edu
• (fastest way to contact me)
• Office McCutchan room 424
• Office Hours 9am 11am MW or 1-2pm W or by
  appointment
• 262 472 5170

4
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
5
Course detail - Topics
Design, implement, an interface for web
development
Understand the requirement
Apply skillfully Javascript DHTML techniques
Documentation Testing
6
Course Evaluation
GRADABLE POINTS
2 Mid term Exams 300
7 Programming assignments 400
Final Exam 200
Labs 100
Total 1000
7
Grade
 Letter Grade Percentage Letter 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
8
Getting started

• Lets overview HTML

9
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.

10
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

11
Assessment

• 3. Select the attribute in the following line of
  HTML code lttable width350gt.
• a. width
• b. width350
• c. Table
• d. None of the above

12
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

13
Assessment

• 5. Select the tag that starts all HTML documents.
• a. ltBEGINgt
• b. ltSTARTgt
• c. ltHTMLgt
• d. ltFIRSTgt
• e. None of the above

14
Assessment

• 6. A link to another page begins with lta href.
  Select the name that best describes this tag.
• a. anchor
• b. pointer
• c. address
• d. a reference
• e. None of the above

15
Assessment

• 7. Select the HTML code for the tag of a comment.
• a. lt!- your comment -gt
• b.ltyour comment ?
• c.lt -- your comment -- gt
• d. gt!your comment --lt
• e. None of the above

16
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

17
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

18
Assessment

• 10. The ltH7gt tag produces a heading with the
  largest font size.
• a. FALSE
• b. TRUE

19
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

20
URLs, Anchor Tags, and Document References
21
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/.

22
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

23
ltHTMLgt and lt/HTMLgt

• ltHTMLgt
• The ltHTMLgt 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).
• lt/HTMLgt This is the closing tag for the ltHTMLgt
  tag. This should be the last line in your HTML
  document.

24
ltHEADgt and lt/HEADgt

• ltHEADgt
• Used to contain information such as title, style
  sheets
• lt/HEADgt This is the closing ltHEADgt tag.

25
ltTITLEgt and lt/TITLEgt

• ltTITLEgt and lt/TITLEgt
• 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
• ltTITLEgt Basic HTML lt/TITLEgt

26
ltBODYgt and lt/BODYgt

• ltBODYgt and lt/BODYgt
• We put all your text, images, and links between
  the opening and closing ltBODYgt tags.

27
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.

28
Example

• lth1gtThis is a header 1 taglt/h1gt
• This is a header 1 tag
• lth2gtThis is a header 2 taglt/h2gt
• This is a header 2 tag

29
Add emphasis to your text

• Boldface
• This is a ltbgtboldfacelt/bgt tag.
• This is a boldface tag.
• Italics
• This is an ltigtitaliclt/igt tag.
• This is an italic tag.

30
Lists

• Numbered
• ltolgt
• ltligt list item 1
• ltligt list item 2
• ltligt list item 3
• lt/olgt

31
Lists

• Unumbered
• ltulgt
• ltligt list item 1
• ltligt list item 2
• ltligt list item 3
• lt/ulgt

32
Lists

• Definition lists allow you to indent without
  necessarily having to use bullets.
• ltdlgt
• ltdtgt This is a term
• ltddgt This is a definition
• ltddgt And yet another definition
• ltdtgt Another term
• ltddgt Another definition
• lt/dlgt

33
Center

• You can center text, images, and headings with
  the center tag
• ltcentergtThis is a centered sentencelt/centergt
• The center tag automatically inserts a line break
  after the closing center tag.

34
File names

• Use lowercase file names
• User proper extension
• .html or .htm

35
Designing a web site

• Determine the purpose of the web site
• Determine the target audience
• Determine numbers of pages
• Sketch the site on paper

36
Example of HTML

• lt!DOCTYPE html PUBLIC "-//W3C//DTD HTML
  4.01//EN"gt
• lthtmlgt ltheadgt lttitlegtMy first Web sitelt/titlegt
  lt/headgt
• ltbodygt
• lt!-- Site navigation menu --gt
• ltulgt
• ltligtlta href"index.html"gtHome pagelt/agt
• ltligtlta href"musings.html"gtMusingslt/agt
• ltligtlta href"town.html"gtMy townlt/agt
• ltligtlta href"links.html"gtLinkslt/agt
• lt/ulgt
• lt!-- Main content --gt
• lth1gtMy first styled pagelt/h1gt
• ltpgtWelcome to my first page!
• lt/bodygt
• lt/htmlgt

37
Result
38
Adding color

• lt!DOCTYPE html PUBLIC "-//W3C//DTD HTML
  4.01//EN"gt
• lthtmlgt
• ltheadgt
• lttitlegtMy first web pagelt/titlegt
• ltstyle type"text/css"gt
• body
• color purple
• background-color d8da3d
• lt/stylegt
• lt/headgt
• ltbodygt

39
Result
40
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.

41
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.

42
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.

43
Result
44
Adding color

• lt!DOCTYPE html PUBLIC "-//W3C//DTD HTML
  4.01//EN"gt
• lthtmlgt
• ltheadgt
• lttitlegtMy first web pagelt/titlegt
• ltstyle type"text/css"gt
• body
• color purple
• background-color d8da3d
• lt/stylegt
• lt/headgt
• ltbodygt

45
Result
46
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.

47
Look at the example again

• ltstyle type"text/css"gt
• body
• color purple
• background-color d8da3d
• lt/stylegt

SELECTOR
value
property
48
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 colorred
• 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 h1colorred

49
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.

50
Examples

• For the type or name of elements
• h2 colorred
• h1 color purple
• The context in which the element is found
• divgaudi p colorred
• The class or id of an element
• divgaudi colorred

51
DIV tag

• The ltdivgt 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
• ltdiv alignltleftgtltcentergtltrightgtltjustifygt
• id namegt
• lt!- this is a body of the div tag --gt
• lt/divgt

52
Example for DIV tag

• ltdiv id"gaudi" align"center"gt
• ltpgtMany tourists are drawn to Barcelona to see
  Antoni Gaud's incredible architecture. lt/pgt
• ltpgtBarcelona lta href"http//www.gaudi2002.bcn.es
  /english/flash/home/GO.htm"gtcelebrateslt/agt the
  150th anniversary of Gaud's birth in 2002.lt/pgt
• lt/divgt

53
Putting style sheet in HTML files

• ltstyle type"text/css"gt
• lt!-- This is where you put Style sheet
  information --gt
• lt/stylegt

54
Example

• lthtmlgt ltheadgt
• lttitlegtAntoni Gaud - Introductionlt/titlegt
• ltstylegt
• h1 color purple
• lt/stylegt
• lt/headgt
• ltbodygt
• lth1gtAntoni Gaudlt/h1gt
• ltdiv id"gaudi" align"justify"gt
• ltpgtMany tourists are drawn to Barcelona to see
  Antoni Gaud's incredible architecture. lt/pgt
• lt/divgt
• lt/bodygt lt/htmlgt

Style sheet in HTML file
Style affects this h1 tag
55
Result
56
Putting the style sheet in a separate file

• Step 1 Open a new text file
• Step 2 Cut and paste the content inside ltstylegt
  lt/stylegt tags (except the tag)
• Step 3 Save in the same folder with HTML file
  with the extension .css (e.g mystyle.css)
• Step 4Replace ltstylegt and lt/stylegt tag with
• ltlink rel"stylesheet ref"mystyle.css"gt

57
Example

• lthtmlgt ltheadgt
• lttitlegtAntoni Gaud - Introductionlt/titlegt
• ltlink rel"stylesheet" type"text/css"
  media"screen" href"descendant.css" /gt
• lt/headgt
• ltbodygt
• lth1gtAntoni Gaudlt/h1gt
• ltdiv id"gaudi" align"justify"gt
• ltpgtMany tourists are drawn to Barcelona to see
  Antoni Gaud's incredible architecture. lt/pgt
• lt/divgt
• lt/bodygt
• lt/htmlgt

58
Example of descendant.css

• h1 colorpurple

59
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

60
Adding fonts
61
More about fonts

• Font family
• font-family Georgia, Times New Roman, Times,
  serif
• Font size
• font-size20px
• Font type bold, italic
• font-style italic
• Font color colorcc00ff

62
Lab 1

• Creating a web page using HTML