Website Development

1
Website Development Management
MIS 3353 -- Fall 2002

• Stylesheets Forms

Instructor John Seydel, Ph.D.
2
Student Objectives

• Increase understanding of basic XHTML elements
  and attributes
• Explain what a selector and a declaration do in a
  style rule
• Specify styles
• Within document head
• Via ltstylegt tag
• Via links to external files
• Inline via the style attribute
• Explain why stylesheets are cascading
• Summarize the document object model
• Create HTML forms that include any of the typical
  controls

3
Some Administrative Items

• Note exam in 1 week
• First hour of class
• Will address material assigned from Chapters 1,
  3, 4, 5, 6, 9, and 15
• Should be able to
• Write code if given output
• Write output if given code
• Return quiz
• And now, todays plan . . .
• Stylesheets, forms, colspan/rowspan
• Cardinal presentation
• Quiz

4
Where Are We?
5
How to Set/Modify Web Page Displays

• Use display elements
• Typically inline elements
• Also, (misuse) tables, headings, etc.
• Mixes presentation and content on pages (XHTML is
  moving away from this)
• Most have been deprecated
• Provide specification in xmlns
• Incorporate style rules (CSS)

6
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

7
When Where to Specify Styles

• Ideally, specify once
• Using embedded approach (before ltbodygt tag)
• Using separate file
• When multiple documents use same styles
• Creates theme
• Same concept as server side includes
• Inline useful primarily when one-time effects
  desired

8
Specifying Styles

• Two parts
• Selector (e.g., body, h1, table, alink)
• Declaration (e.g., aligncenter, font-size 28px)
• Example body backgroundteal
• Typical format
• selector
• attributevalue
• attributevalue

9
Containers for Style Rules

• The ltstylegt . . . lt/stylegt tags
• ltstyle typetext/cssgt
• . . . declarations go here . . .
• lt/stylegt
• Separate files
• Refer to text file using ltlinkgt tag
• Within ltheadgt . . . lt/headgt tags
• Example
• ltlink
• relstylesheet
• hrefstyles1.css
• typetext/css
• gt
• Use extension of .css

10
Style Rules Example

• body backgroundcoral
• .copy
• colorBlack
• font-size11px
• line-height14px
• font-familyVerdana,Arial,Helvetica,sans-serif
• .subhead
• font-size28px
• margin-top12px
• margin-left20px
• line-height32px

11
Multiple Versions Classes

• Inventing your own styles use classes to define
  more than one version of a style
• Example declaring styles
• table.nav backgroundaqua
• table.other
• backgroundyellow
• text-aligncenter
• Example calling styles
• lttable classnav width100gt . . . lt/tablegt
• . . .
• lttable classother width400gt . . . lt/tablegt

12
Classes for Divisions and Paragraphs

• Specification
• Define as class without selector
• Call from within ltdivgt or ltpgt tag
• Example
• .subhead
• font-size28px
• margin-top12px
• margin-left20px
• line-height32px
• . . .
• ltdiv classsubheadgt

13
Some Typical Style Properties

• Set default properties for most tags
• Typical elements affected include
• Links
• Text
• Lists
• Body, paragraphs, divisions
• Margins
• Borders

14
Styles Affecting Links

• Links attributes (use pseudo-classes)
• alink
• avisited
• aactive
• ahover
• Selectors (i.e., properties) include
• background (color)
• color
• font-family
• text-decoration (underline, overline,
  strikethrough, none)

15
Styles Affecting Text

• General background, color
• Also
• Common font properties
• font-family
• font- size
• font- style
• font- weight
• line-height
• Common text properties
• text-align
• text-indent
• text-decoration
• See Appendix D for possible values

16
Styles Affecting Margins Borders

• Set for ltbodygt, ltpgt, ltdivgt
• For margins, specify
• Which margin left, right, bottom
• Use pixels (px), in, cm, points (pt)
• Examples
• body margin 100px 100px 50px
• div margin-left10margin-right5
• For borders
• Specify type (e.g., groove), width, padding
• Example
• .box
• bordergrooveborder-widththinpadding2px
• . . .
• ltdiv classboxgt . . . content . . . lt/divgt

17
Customizing Lists

• Use
• To set all properties list-style
• To set properties individually
• list-style-image
• list-style-position
• list-style-type
• Most common is the image
• Values none, inherit, url
• Example
• li list-style-imageurl(images/ball.gif)

18
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

19
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

20
Style Odds Ends

• Recall format for style rules
• Selector
• Type describes default element
• Attribute defines specific classes of elements
• Descendent what happens when two or more
  selectors are used together
• External in development (not well supported)
• Declaration
• Inheritance
• Site management issues
• Indentation

21
References for Style Specification

• Textbooks
• Boumphrey et al Appendix D
• Proffitt Zupan Chapter 15 and Appendix B
• Examples of what styles can achieve
• www.microsoft.com/typography/css/gallery/
• General overview of styles
• wdvl.internet.com/Authoring/Style/Sheets/
• Complete reference summary for style syntax
• www.w3.org/TR/REC-CSS2/propidx.html
• Materials that are no longer available (!)
• webreview.com/pub/guides/style/style.html
• webreview.com/wr/pub/guides/style/mastergrid.html

22
Forms A Review

• Main element is ltformgt
• Attributes
• name (for object references in scripts)
• action (where the form processor is, if
  server-side)
• 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

23
Intro to the Document Object Model

• Browser objects objects that provide access to
  the browser

24
Input Elements Their Attributes

• 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)

25
The value Attribute (All Controls)

• 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
• A brief demonstration

26
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

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
Tables Controlling Spans (a Correction)

• Use with lttdgt element
• Attribute for merging horizontally is colspan
• Attribute for merging vertically is rowspan
• That is, 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.

30
Summary of Objectives

• Increase understanding of basic XHTML elements
  and attributes
• Explain what a selector and a declaration do in a
  style rule
• Specify styles
• Within document head
• Via ltstylegt tag
• Via links to external files
• Inline via the style attribute
• Explain why stylesheets are cascading
• Summarize the document object model
• Create HTML forms that include any of the typical
  controls

31
Now . . .

• Presentation by Cardinal Health
• Quiz following the presentation