Website Development

1
Website Development Management
MIS 3353 -- Fall 2002

• Tables, Forms, Style Rules

Instructor John Seydel, Ph.D.
2
Student Objectives

• Increase understanding of basic XHTML elements
  and attributes
• Strengthen capability to specify inline styles
• Create basic HTML tables and modify attributes to
  customize them
• Use XHTML markup to generate more complex tables
• Create simple, non-functional HTML forms
• Become more efficient in working in a web
  development environment
• Summarize the document object model

3
Some Administrative Items

• Note server outage 300-700 am
• Phantom students . . . ?
• Note exam in 2 weeks
• Return quiz
• And now, todays quiz . . .
• Put away all reference materials
• Put name at upper right portion of quiz
• You have 5 minutes
• This time, complete both sides!

4
Where Are We Going?
5
Where Are We?
6
Review XHTML Document Structure

• lt? xml version1.0 encodingUTF-8 ?gt
• lt! DOCTYPE . . . !gt
• lthtml xmlns . . . xmllangen langengt
• ltheadgt
• lttitlegt . . . lt/titlegt
• Other stuff . . .
• lt/headgt
• ltbodygt
• Body stuff . . .
• lt/bodygt
• lt/htmlgt

7
Review of Markup Covered So Far

• Structural
• Organizational lthtmlgt, ltheadgt, ltbodygt
• Within body
• Basic lth1gt, lth2gt, ltpgt, ltulgt, ltligt
• Beyond lttablegt
• Descriptive
• Referring to other files ltimg /gt, ltagt
• Organizational lttitlegt
• Other ltemgt, ltstronggt
• Stylistic (i.e., presentational)
• Appearance ltigt, ltbgt
• Other lthr /gt, ltbr /gt, ltspangt

8
Demo Working in a Web Development Environment

• Software
• IE running HTTP (two instances)
• Server
• Local
• IE running FTP (view server files)
• Windows Explorer (view local files)
• Arachnophilia
• Why does my computer crash . . . ?
• Local file space needs to mirror server space
• Project Create pay report table
• Process
• Develop/test locally
• Upload and then test on server

9
Recall Table Basics

• Used traditionally for layout
• Control placement of content
• Yielding in favor of style sheets
• Minimal element hierarchy
• Table lttablegt
• Row lttrgt
• Column lttdgt or ltthgt
• Common attributes (apply to most elements)
• bgcolor (also background ?!)
• align (table vs. row)
• width (default is pixels, unless )
• height (default is pixels, unless )
• Together with XHTML forms, tables are essential
  components of eCommerce sites
• Note Prior planning is a must !

10
Tables A More Complete Discussion

• Table element lttablegt contains
• ltcaptiongt (must be first, if used)
• lttheadgt (no more than 1 per table)
• lttbodygt (can avoid need for nested tables)
• lttfootgt (no more than 1 per table)
• Head, body, and foot contain lttrgt only
• Table row elements lttrgt contain
• ltthgt
• lttdgt
• Note major correction for major error last class!

11
Table Objects
12
Width Height

• These are important attributes for
• Table lttablegt
• Row lttrgt
• Cell lttdgt or ltthgt
• Specify either
• Pixels (default)
• Percent (preferred gt why ?)
• Not absolute defines minimum size

13
Cell Spacing Padding

• Attributes for the lttablegt element
• Spacing (cellspacing) is space between cells
• Padding (cellpadding)
• Space between contents and cell divider
• Applies to all 4 directions
• Both apply to entire table
• Experiment with example

14
Borders

• Attributes for the lttablegt element
• border (more common)
• Also (provides more control)
• frame -- around outside
• rules -- between cells
• Defaults
• Shadow effect (if gt 1 pixel)
• Completely around table
• Experiment with example

15
Controlling Spans

• Attribute for row element is colspan
• Attribute for column element is rowspan
• Either one essentially merges cells
• Do NOT even attempt until after table layout has
  been completely developed
• Draw table initially with no spanning rows or
  columns
• Then created overlay of merged cells
• One of the main reasons to use FrontPage, etc.

16
A Note on Groups

• Include
• Rows lttheadgt and lttbodygt
• Columns ltcolgroupgt
• Netscape
• Doesnt supported well (at all?)
• Also doesnt support style attribute well

17
Now, an Intro to Forms

• Forms are what made eCommerce feasible
• Get info from user
• Display info back to user
• That is, they add interactivity !
• Involves
• Forms page
• Forms processor, either
• Client-side or
• Server-side

18
Getting Started with Forms

• Main element is ltformgt
• Attributes
• name (for object references in scripts)
• action (where the form processor is)
• method (usually POST but sometimes GET)
• Should be only one per page (for our purposes)
• All controls must be within ltformgt ... lt/formgt
• Form controls
• input (many types)
• button
• select
• textarea
• Forms also typically contain standard inline
  (e.g., ltemgt) and block (e.g., lttablegt) elements

19
Forms Example

• Suzy Student Guestbook (handout)
• Source code
• Browser printout
• Look at the tags
• Elements
• Attributes
• Modify action
• Use something other than email submission
• eMail submission is very undependable

20
Intro to the Document Object Model

• Browser objects objects that provide access to
  the browser

21
Input Elements

• Empty element with many controls (per the type
  attribute)
• One line text box (text)
• Check boxes (checkbox)
• Option buttons (radio)
• Submit/reset button (submit or reset)
• Other buttons (button)
• Other common attributes
• name (always specify)
• size (also maxlength, but not same)
• value
• Event handlers (e.g., onChange, onSelect,
  onFocus, onClick)

22
Text Boxes

• Format ltinput typetext ... /gt
• Simplest type of input
• Disadvantage cant control whats typed except
  through
• Using maxlength
• JavaScript validation
• Fonts
• Cant be controlled, except with style sheets
• Size is different in Netscape

23
The value Attribute

• Can be preassigned to a control
• Shows up in text controls and on buttons
• With other controls, values are hidden and are
  assigned to variables associated with controls
• When form is processed value is whatever is
  entered into control
• If text box or text area, then text string
• Otherwise its a preassigned value
• Check boxes
• Buttons submit, reset, option, button
• Select (combo) boxes

24
Naming Controls

• 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

25
Check Boxes

• Format ltinput typecheckbox... /gt
• Each box has a different name and set of
  attributes
• Notes about attributes
• Value submitted for value attribute
• If checked then whatever value is specified
• Else
• The checked attribute is binary (0 or 1)
• Dont confuse with option buttons

26
Option Buttons

• Format ltinput typeradio ... /gt
• Must define an option group
• That is, multiple controls all with same name
• Each control within group has different value
• Only one of any group can be checked at a time
• When form is submitted, only the value of the
  checked control will be sent
• Like multiple choice question
• Option button mark the best answer
• Check box mark all that apply

27
Select (Combo) Box

• Involves two elements
• ltselectgt (main element container)
• ltoptiongt (contained in select element)
• Main select attributes
• name
• size
• Event handlers (e.g., onChange)
• Primary option attributes
• value
• selected

28
Buttons, Buttons, Everywhere

• Three kind of buttons (not including reset)
• ltinput /gt element (empty element)
• Server-side processing ltinput typesubmit ...
  /gt
• Client-side processing ltinput typebutton ...
  /gt
• ltbuttongt 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
• Button requires the onClick attribute
• Invokes the JavaScript function specified

29
Stylesheets Revisited

• Recall three ways to specify style rules
• In document ltheadgt element
• External file (use ltlinkgt element)
• Use the ltstylegt element
• Inline rules i.e., using the style attribute
• All three modify the same display properties
• Typical properties modified
• font-family
• font-size
• text-align
• margin-left
• Others . . .
• Syntax
• Always property1valueproperty2value . . .
• Example font-size10pttext-aligncenter

30
Working with Inline Style Rules

• Uses style attribute
• Works with most standard elements
• Syntax
• ltelement styleproperty1value . . . gt
• Customize text, colors, placement, lists
• For properties that can be modified, see CSS
  appendix in text
• If using often, generally better to use external
  file or ltstylegt element

31
Using the ltspangt Element

• Overcomes problems with lack of support for
  pseudo elements
• Use style attribute within opening tag
• Applies style info to all content between opening
  and closing tag
• For limited occurrences of desired display
  characteristics
• Typically ltspan style . . . gt

32
Summary of Objectives

• Increase understanding of basic XHTML elements
  and attributes
• Strengthen capability to specify inline styles
• Create basic HTML tables and modify attributes to
  customize them
• Use XHTML markup to generate more complex tables
• Create simple, non-functional HTML forms
• Become more efficient in working in a web
  development environment
• Summarize the document object model