Web Publishing III 06 May 2003

1
Web Publishing III06 May 2003

• Colleen Bellcbell_at_uoregon.edu
• UO Libraries, IT Curriculum

2
Objectives

• understand the role of web standards
• increase familiarity with style sheets
• understand the use of tables on the web
• know how to troubleshoot HTML errors and create
  valid HTML code
• reinforce good web publishing practices

3
HTML is a Web Standard

• World Wide Web Consortium (W3C) speaking a
  common language
• Evolved over time
• HTML (1992)
• HTML (1993)
• HTML 2.0 (1995)
• HTML 3.2 (1997)
• HTML 4.01 (1999)
• XHTML 1.0 (2000)
• XHTML 1.1 (2001)
• XHTML 2.0 (2003)

4
HTML is a Web Standard (contd)

• Other markup languages
• XML
• MathML
• SGML
• Other web standards
• Web Accessibility Initiative
• CSS
• Hypertext Transfer Protocol (http)

5
Standards Web Browsers

• Past browser vendors developed own HTML to keep
  market share ? fragmentation
• Browser Wars
• Now browser vendors work with standards ? common
  ground, accessibility
• Web Standards Project
• Viewable with Any Browser Campaign

6
Standards-Compliant Browsers

• Internet Explorer Windows v5.5 and higher Mac
  v5.0 and higher
• Netscape Navigator v6.1 and higher
• Opera v5.0 and higher
• Mozilla v0.9 and higher
• Others

7
Is Your HTML Up To Code?

• Exercise 1
• 15 minutes

8
CSS Refresher

• separate presentation from content
• style sheet rules

9
Four Ways to Include Styles

• linked
• embedded
• imported
• inline

10
Linked Style Sheet

• apply same style sheet to multiple pages or
  entire site
• change the style sheet once - changes are
  reflected on every page
• example

11
Embedded Style Sheet

• apply style sheet to single web page (WPII)
• example

12
Imported Style Sheet

• useful for modularity
• code must appear on first line of embedded style
  sheet
• example

13
Inline Style

• apply a style in a single instance within a web
  page
• least efficient way to apply style every
  instance must be edited to make global changes
• example

14
Class Selectors

• creates a style class that can be applied to any
  element one or more times
• example

15
ID Selectors

• defines a unique style for an element, can be
  applied only once in a document
• often used in conjunction with ltdivgt
• example

16
Inheritance

• style rules are inherited rule(s) for outer
  boxes also apply to boxes inside the boxes
• example
• Use black text on white background, with the
  Arial, Helvetica, or sans-serif font for
  everything in the body

17
The Cascade

• when there are two competing style rules for the
  same selector, which one wins?
• Style Sheets Guide The Cascade
• TIP if you test every time you add or change a
  rule, youll avoid most conflicts

18
Add Some Class to Your Style

• Exercise 2
• 45 minutes

19
Tables

• used to display tabular data
• also used frequently for page layout

20
HTML for Tables

• Elements
• lttablegt...lt/tablegt defines a table
• lttrgt...lt/trgt defines a table row
• lttdgt...lt/tdgt defines a table data cell within
  a row
• ltthgt...lt/thgt defines a table heading cell
  within a row
• Optional attributes for lttdgt and ltthgt
• colspan allows a cell to span more than one
  column (e.g., lttd colspan2gt...lt/tdgt)
• rowspan allows a cell to span more than one row
  (e.g., lttd rowspan5gt...lt/tdgt)

21
Table Example
22
Browser Differences

• Internet Explorer
• treats the 50 px as a maximum
• displays background colors of empty cells
• border takes on background color of table
• Netscape Navigator
• treats the 50 px as a minimum
• does not display the background colors of empty
  cells

23
Add a Table

• Exercise 3
• 20 minutes

24
HTML Editors

• page production tools Microsoft Word
• site production tools Dreamweaver, GoLive
• BEWARE not all editors are equal
• recommended editors

25
Editors Advantages

• more efficient for quick web page production,
  especially with graphics and tables
• can import HTML code from existing pages
• wide variety of features
• numerous free extensions and plug-ins available
• build libraries of styles and scripts that you
  can reuse

26
Editors Disadvantages

• can be cumbersome if you're used to coding by
  hand
• they're not perfect and often introduce errors
  into your code
• often dont reflect the most current standards

27
Demo HTML Tidy

• Developed and endorsed by W3C
• Cleans up generated code
• Free from W3C
• http//libweb.uoregon.edu/it/webpub/wp3/tidydemo.h
  tml

28
Guidelines for good practice

• Know your message. Figure out what you want/need
  to say and how you should say it before you start
  coding pages.
• Know your audience. Who are they? What do they
  expect/want/need from you? From the web? What
  kinds of environments are they working in? What
  hardware and software do they have available?
• Know your resources. Well-crafted web sites take
  time to both develop and maintain.

29
What We Didnt Cover

• Programming and scripting for the web (e.g.,
  Perl, Javascript, PHP)
• Dynamically generated web pages
• Cascading Style Sheets Level 2 (e.g., layers,
  positioning)
• Graphics and multimedia production
• Web usability
• Designing for accessibility