Tech Briefing: Web Standards, XHTML, and CSS

1
Tech BriefingWeb Standards, XHTML, and CSS

• ?Mark Branom and Brian Young
• 10/23/2003

2
What is HTML?

• SGML
• Before HTML 4, there was SGML
• A language for describing markup languages
• HTML is an example of a language defined in SGML
• HTML
• Originally conceived for the exchange of
  scientific and other technical documents.
• Added support for hypertext and multimedia
  capabilities

3
What is XHTML?

• Extends the HTML 4 document type
• XML based
• Allows the document to work with XML based user
  agents
• Can be viewed, edited and validated with standard
  XML tools
• By migrating to XHTML today, content developers
  can enter the XML world with all of its attendant
  benefits, while ensuring their contents backward
  and future compatibility.

4
What is XML?

• Extensible Markup Language
• XML is a simple, very flexible text format
  derived from SGML.
• Originally designed to meet the challenges of
  large-scale electronic publishing, XML is also
  playing an increasingly important role in the
  exchange of a wide variety of data on the Web and
  elsewhere.

5
XHTML Syntax

• Strictly conforming XHTML example
• lt?xml version"1.0" encoding"UTF-8"?gt
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN" "http//www.w3.org/TR/xhtml1/DTD/xhtml
  1-strict.dtd"gt
• lthtml xmlns"http//www.w3.org/1999/xhtml"
  xmllang"en" lang"en"gt
• ltheadgt
• lttitlegtTech Briefing Presentationlt/titlegt
• lt/headgt
• ltbodygt
• ltpgtContentlt/pgt
• lt/bodygt
• lt/htmlgt
• Components to look out for
• xml declaration in the beginning
• doctype shows strict or transitional xhtml
• xmlns declaration

6
Differences with HTML 4

• Document must be well-formed
• CORRECT nested elements
• ltpgthere is an emphasized ltemgtparagraphlt/emgt.lt/pgt
• INCORRECT overlapping elements
• ltpgthere is an emphasized ltemgtparagraph.lt/pgtlt/emgt

7
Differences with HTML 4

• Element and attribute names must be in lower case
• XHTML documents must use lower case for all HTML
  element and attribute names. This difference is
  necessary because XML is case-sensitive e.g. ltligt
  and ltLIgt are different tags.

8
Differences with HTML 4

• For non-empty elements, end tags are required
• CORRECT terminated elements
• ltpgthere is a paragraph.lt/pgtltpgthere is another
  paragraph.lt/pgt
• INCORRECT un-terminated elements
• ltpgthere is a paragraph.ltpgthere is another
  paragraph.

9
Differences with HTML 4

• Attribute values must always be quoted
• All attribute values must be quoted, even those
  which appear to be numeric.
• CORRECT quoted attribute values
• lttd rowspan3 width10gt
• INCORRECT unquoted attribute values
• lttd rowspan3 width10gt

10
Differences with HTML 4

• Attribute Minimization
• XML does not support attribute minimization.
  Attribute-value pairs must be written in full.
  Attribute names such as compact and checked
  cannot occur in elements without their value
  being specified.
• CORRECT unminimized attributes
• ltinput typeradio checkedcheckedgt
• INCORRECT minimized attributes
• ltinput typeradio checkedgt

11
Differences with HTML 4

• Empty Elements
• Empty elements must either have an end tag or the
  start tag must end with /gt. For instance, ltbr /gt
  or lthrgtlt /hrgt.
• CORRECT terminated empty elements
• ltbr /gtlthr /gt
• INCORRECT unterminated empty elements
• ltbrgtlthrgt

12
Deprecated Tags

• applet (use object instead)
• basefont (use stylesheets instead)
• center (use stylesheets instead)
• dir (use ul instead)
• font (use stylesheets instead)
• form (use xforms instead)
• img (use object instead)
• menu (use ul instead)
• s (use stylesheets instead)
• strike (use stylesheets instead)
• table (only use tables for tabular data - use
  stylesheets for designing)
• u (use stylesheets instead)

13
Cascading Style Sheets

• Style sheets add design control to your web pages
  by allowing you to pre-define how various classes
  of HTML tags are going to look on a web page.
• This adds a level of flexibility and control
  previously only imagined by web designers.
• You can customize the look of your pages by
  creating a style for those pages and then change
  the look of the entire site by making one change
  in one document. Style Sheets are well known to
  "power-users" of MSWord and Adobe Pagemaker. This
  same level of ease and control works on the web.

14
CSS Basics

• Style sheets work by allowing you to define
  properties for how HTML elements (tags) appear
  when viewed in a Web browser. For example, you
  can set it up so that every ltH1gt on your page
  appears in green, Arial, 18 points, and italics
  -- automatically (instead of big and bold, which
  is the default state of H1).
• H1 Example
• If in the future you decide they should all be
  blue, then you just change it in one place and
  they can be updated throughout your site.
• H1 Example

15
More basics

• The W3C (World Wide Web Consortium) created the
  standards for CSS. Their page shows some of the
  potential for using CSS.
• W3C Web Style Sheets Home Page
  http//www.w3.org/Style/CSS/
• Microsofts MSDN bulletin on CSShttp//msdn.micr
  osoft.com/workshop/author/css/reference/attribute
  s.asp

16
How does it work?

• Suppose you want to create that page where every
  ltH2gt tag is green, italicized, and in Arial font.
  Before CSS came along, you would have to write
  the following every time the ltH2gt tag was used.
• ltH2gtltIgtltFONT face"Arial" color"green"gtThis is a
  green, italicized, Arial H2lt/FONTgtlt/Igtlt/H2gt
• Now, you can simply specify this in a single step
  by typing something like this
• h2 font-family Arial font-style italic
  color green
• Then in the body of the document, you simply use
  the lth2gt tag as usual. When the page is viewed,
  all the lth2gt tags will appear as you wished them
  to automatically.
• If later you do decide you want the lth2gts to
  suddenly be blue instead of green, you simply
  change the style sheet command to be blue instead
  of green.
• You can set up styles for every HTML tag

17
Defining styles head

• You can set a style sheet for a single document
  by putting the style information in the head of
  the document. For example
• The actual style information is included in an
  HTML comment tag (lt!-- commented text --gt) in
  order to hide it from browsers that don't
  understand CSS. The TYPE attribute of the
  ltstylegt tag defines the type of style sheet being
  used -- in this case CSS, Cascading Style Sheets.

18
Defining Styles inline

• You can also simply include the style information
  in a particular tag right in the document by
  adding the STYLE attribute to the tag directly.
• This particular method is most useful if you want
  to change a single instance of a tag in a
  document that already has a style associated with
  it. When there are multiple styles affecting a
  document, the style closest to the tag in
  question takes precedence. In other words, if I
  have put a style in HEAD of the document but also
  included an INLINE style, that INLINE style will
  override the document style for that one instance
  of the tag.

19
Using an external .css file

• If you want to set a style for an entire site of
  documents, you create a standalone text file
  (named something like basic.css) that contains
  the necessary style information. Then each
  document in that site will point to the style
  document. Here's how it might look.
• (Text that appears in the basic.css document)
• h2 font-family Arial font-style italic
  color green
• p font-family Courier font-style bold color
  red
• (HTML document using basic.css style sheet)
• lt?xml version"1.0" encoding"iso-8859-1"?gt
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Transitional//EN" "http//www.w3.org/TR/xhtml1/DTD
  /xhtml1-transitional.dtd"gt
• lthtml xmlns"http//www.w3.org/1999/xhtml"gt
• ltheadgt
• ltlink rel"stylesheet" type"text/css"
  href"basic.css" style"style1"gt
• lttitlegtThis is the titlelt/titlegt
• lt/headgt

20
Classes and IDs

• Classes and IDs are ways for you to pre-define
  particular features. You define them by giving
  them names. For example, what if you wanted to
  use the color periwinkle for some, but not all,
  of the text in your document.
• The code for this color is "6699ff"
• Rather putting in a ltfont color6699ffgt every
  time you want it to appear, you can set it up as
  a class and then just reference the class when
  you want to use the color. Classes are preceded
  by a "." (dot). IDs are similar. They are
  preceded by a ""

21
Span and div

• You can also use classes and ids with ltSPANgt and
  ltDIVgt tags. These are container tags with no
  formatting associated with them. You can set up a
  ltSPAN class"whatever"gt to define just part of a
  paragraph. The ltDIVgt tag will start on the next
  line and start a new line after itself.

22
Positioning

• This is the most fun but also the most difficult
  part of CSS.
• Here's how it works when the browser draws the
  object on the page, it places it into an
  invisible, rectangular box called a bounding box.
  You can set the box's exact location on the page
  (absolute positioning) or you can offset the box
  from other elements on the page (relative
  positioning). You can also specify the size of
  the box. You can layer objects on top of each
  other. And, you can use clipping to allow certain
  sections to show through from lower levels. You
  can make objects invisible as well.

23
Defining positions

• To define the position, you must first decide if
  its position will be absolute or relative. If you
  want to absolutely define exactly where an object
  is, you must use position absolute.
• h2 position absolute top 150px width
  200px height 200px font-family Arial
  font-style italic color green
• Since you probably don't want all your ltH2gt tags
  to appear stacked up on top of each other in the
  same spot, you will want to use in-line styles
  and the DIV tag to specify the differences.
• ltDIV style"position absolute top 150px
  width 200px height 200px background-color
  pink"gtThis is text in a pink 200-by-200 pixel
  box that is 150 pixels from the top of the
  window.lt/DIVgt

24
Position example
25
Positioning

• Relative positioning places elements into the
  flow of the document . . . offsetting them from
  the previous element in the HTML code. This lets
  you place objects in relation to each other.
• On the next slide, the first line of text flows
  normally across the page. The ltSPANgt line uses
  positioning to place it 50 pixels below and 25
  pixels to the right of the first line.

26
Position example 2
27
Layering

• Once you know how to set the horizontal and
  vertical positioning -- or X and Y axes, you now
  need to learn about the Z axis. This allows
  webmasters to layer objects. Normally, if you put
  multiple objects at the same spot, each object
  will cover the earlier ones. Using the z-axis,
  you can specify which layer an object resides on.
  By setting the z-index higher or lower, you can
  move an object up or down the stack.

28
Layering Example 1
29
Layering Example 2
30
Browsers

• Opera 7 - Supports XHTML, most of CSS1, most of
  CSS2
• MS IE 5.5 for Macintosh - Supports XHTML, all of
  CSS1, most of CSS2
• Netscape 6 - Supports XHTML, all of CSS1, most of
  CSS2
• Netscape 7- Supports XHTML, all of CSS1, all of
  CSS2
• Mozilla - Supports XHTML - Supports all of CSS1,
  most of CSS2
• Safari - Supports XHTML - Supports CSS1 CSS 2
  (somewhat flaky)
• MS IE 6 for Windows - Supports XHTML - Supports
  CSS1, some CSS2
• MSIE 5.5 for Windows - Mostly supports XHTML -
  Mostly supports CSS1
• Netscape 4 - Barely supports XHTML - Barely
  supports CSS
• MSIE 4 - Barely supports XHTML - Barely supports
  CSS

31
XHTML in Action

• Examples
• XHTML Page with CSS Style Sheet
• http//www.stanford.edu/group/itss-customer/ip/tec
  hbriefings/web_standards/example1.html
• XHTML Page without CSS Style Sheet
• http//www.stanford.edu/group/itss-customer/ip/tec
  hbriefings/web_standards/example2.html
• CSS Stylesheet
• http//www.stanford.edu/group/itss-customer/ip/tec
  hbriefings/web_standards/example.css