Website Development

1
Website Development Management
MIS 3353 -- Fall 2004

• Intermediate XHTML Concepts

Instructor John Seydel, Ph.D.
2
Student Objectives

• Strengthen understanding of basic page elements
• Hyperlinks
• Images
• Headings
• Lists
• Improve ability to specify relative references
• Work with HTML tables and forms
• Learn how to use server-side includes
• Use a ltmeta /gt tag to redirect to a new URL

3
Administrative Items

• Quiz
• Homework
• None graded recently
• Any questions?
• Upcoming events
• Exam 1 on Tuesday!
• Assignment for Thursday Chapter 3

4
Referencing Web Resources

• Involves hyperlinks, images, stylesheets,
  scripts, applets, etc.
• Basic rule
• Absolute only if at another site
• Relative use if files are on same server
• Examples
• File in same folder
• File in other folder at same level as calling
  document
• File in other folder at level above calling
  document
• Other variations

5
Markup Covered So Far

• Structural
• Organizational lthtmlgt, ltheadgt, ltbodygt
• Within body lth1gt, lth2gt, ltpgt, ltulgt, ltligt
• 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

6
Now, Some HTML Table Basics

• Used traditionally for layout
• Control placement of content
• Yielding in favor of style sheets
• Refer to Suzys GuestBook example (handout)
• 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 !

7
A Simple 2x2 Table

• lttable aligncenter border5 cellspacing2gt
• lttrgt
• ltthgt11lt/thgt
• ltthgt12lt/thgt
• lt/trgt
• lttrgt
• lttdgt11lt/tdgt
• lttdgt12lt/tdgt
• lt/trgt
• lttrgt
• lttdgt21lt/tdgt
• lttdgt22lt/tdgt
• lt/trgt
• lt/tablegt

8
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)
• Or just lttrgt elements
• Head, body, and foot contain lttrgt only
• Table row elements lttrgt contain
• ltthgt
• lttdgt
• Object model applies . . .

9
Table Objects
10
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

11
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

12
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

13
Controlling Spans

• Attributes for lttdgt or ltthgt elements
• colspan
• 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 Visual Studio, etc.

14
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 !
• Working with forms involves
• Forms page
• Forms processor, either
• Client-side or
• Server-side, or
• Both (local validation then server-side
  processing)

15
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

16
Basic Forms Example

• Suzy Student Guestbook
• Look at the tags
• Elements
• Attributes
• Note the action attribute
• This is the form processor
• Use any URL, including email
• However, email submission is very undependable

17
The HTML Document Object Model (Modified from
page 111)
Browser objects objects that provide access to
the browser
18
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

19
Text Boxes

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

20
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

21
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, lstMajor, optAgree
• See also Table 2-6

22
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

23
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

24
Select (Combo or List) 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

25
Buttons, Buttons, Everywhere

• Three kinds 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

26
A Couple of Tricks

• Server-side includes
• Inserts file contents literally from referenced
  file
• Included content can be any text file (typically
  .stm)
• Main file referencing other content must be .asp
  file
• Syntax example
• lt!-- include fileheader.stm --gt
• Redirection using ltmeta /gt tags
• Uses the Refresh feature
• Works in any XHTML document
• Example syntax
• ltmeta http-equivrefresh content0urlexerc
  ises/homepage.asp /gt

27
Summary of Todays Objectives

• Strengthen understanding of basic page elements
• Hyperlinks
• Images
• Headings
• Lists
• Improve ability to specify relative references
• Work with HTML tables and forms
• Learn how to use server-side includes
• Use a ltmeta /gt tag to redirect to a new URL