Web Development

1
Web Development Management

• Tying Things Together

2
Student Objectives

• Compare and contrast the three types of forms
  buttons
• List all XHTML elements addressed so far this
  semester
• For each XHTML element list the common attributes
• Explain what takes place when a web page is
  viewed by a client browser
• Recognize and read querystrings
• Use indentation effectively for making source
  code readable
• Realize that this is FUN STUFF!

3
And Now the Quiz

• Get out a sheet of paper
• Put away all books, notes, etc.
• Do the following
• List 5 block level XHTML elements and the primary
  attributes for each
• List 2 empty XHTML elements and their primary
  attributes
• List 2 inline XHTML elements and any associated
  attributes

4
Administrative Stuff

• Quiz 2 comments
• Looked for nested list, bold, image attributes,
  file references, centering, size, line breaks
• Noted poor indentation ../ etc., headings
  already bold, bgpropertiesfixed
• Any troubles creating a real page and posting it?
• Next meeting style sheets
• First exam approximately 9/25

5
First, Some Leftover Stuff about Forms

• Form submission method
• post (preferred) versus get
• Review
• DOM
• Names
• Values
• Another look at buttons
• Objects what are manipulated at the click of a
  button

6
The Document Object Model

• These are objects that provide access to the
  browser

7
Recall Control Names

• Use conventions from programming languages
• Java
• C
• Visual BASIC
• Typically
• First 3 characters lowercase and type of control
• Uppercase only when words joined
• Examples txtFirstName, cmbMajor, optAgree

8
Recall The value Attribute

• Can be preassigned to a control
• Shows up in text controls and on buttons
• Hidden values to be assigned to variables
  associated with other controls
• When form is processed, value is whatever is
  entered/selected
• Text string if text box or text area
• Preassigned value
• Check boxes
• Buttons submit, reset, option, button
• Select (combo) boxes

9
Buttons, Buttons, Everywhere

• Three kind of buttons (not including reset)
• input element (empty element)
• Server-side processing ltinput typesubmit ...
  gt
• Client-side processing ltinput typebutton ...
  gt
• button element contains inline block elements
• Client-side processing only
• Allows control over display (images, font, etc.)
• Format
• ltbuttongt
• . . . content . . .
• lt/buttongt
• A note on client-side processing
• Involves the onClick attribute
• Invokes JavaScript function

10
Recall Object Basics

• Objects have
• Properties (describe the object)
• Window width height
• Window toolbar, location
• Methods (what the object can do)
• Window open close
• Document write
• Can be comprised of other objects (e.g.,
  window.location, frmGuest.txtName)
• Attributes thus serve as object properties for
  forms and their controls
• Finally, objects are essential to scripting

11
Lets Summarize the Basic XHTML Elements

• html
• head
• body
• title
• h1 through h6
• div
• p
• blockquote
• What are the attributes for these?

12
And Some More . . .

• ul or ol
• li
• table
• tr
• td or th
• tbody or thead or tfoot
• What are the attributes for these?

13
And Yet Some More . . .

• a
• br
• img
• strong
• em
• small or big
• smaller or bigger
• What are the attributes for these?

14
Dont Forget the Form Elements . . .

• form
• input
• button
• textarea
• select
• option
• What are the attributes for these?

15
Any Other Tags/Elements?
16
But What About . . . ?

• xml
• DOCTYPE
• lt!-- . . . Content . . . --gt

17
Indentation of Source Code

• Makes code readable/debuggable
• Concept -- elements are containers
• Format
• ltelement1gt
• ltelement2gt . . . content1 . . . lt/element2gt
• . . . content2 . . .
• . . . content3 . . .
• ltelement3gt
• . . . content4 . . .
• lt/element3gt
• . . . content5 . . .
• lt/element1gt

18
Interpreting Indentation

• Element1 contains
• Element2 and Element3
• Content2, Content3, Content5
• Element2 contains
• Content1
• Element3 contains
• Content4
• Attribute values for any element apply to
• All content contained in element
• All elements contained within element
• Any content within a contained element

19
What Happens When You View a Web Page?

• Two ways to request resources
• Click on a link
• Type a URL into address bar
• HTTP request is then sent to server at designated
  URL
• Includes header info
• Requests file
• Server then returns HTTP response
• Includes header info
• Contains file
• Consider form processing get vs. post

20
HTTP Request Example

• Request
• GET/index.html?namejuliesmithID12234
• /HTTP/www.astate.edu
• /HTTP1.1
• Header
• Useragent IE 5.0
• Accept /
• Date 9/13/01
• Body
• (empty)

21
HTTP Response Example

• Response
• HTTP1.1/200
• Header
• Server IIS 50
• Date 9/13/01
• Body
• lthtmlgt
• . . .
• lt/htmlgt

22
Now, Lets Look at Your Work

• Browser view
• Navigability
• Correctness
• Right layout
• Links images working
• Source code view
• Server view

23
Objectives Met?

• Compare and contrast the three types of forms
  buttons
• List all XHTML elements addressed so far this
  semester
• For each XHTML element list the common attributes
• Explain what takes place when a web page is
  viewed by a client browser
• Recognize and read querystrings
• Use indentation effectively for making source
  code readable
• Realize that this is FUN STUFF!

24
Whats the Homework?

• Where?
• When?
• Other (how about turning in work)?