XHTML and CSS

1
XHTML and CSS

• Rick Ells
• UW Technology
• http//staff.washington.edu/rells/

2
Using HTML/XHTML

• XHTML is relatively simple. You do most of your
  work with about twenty tags.
• XHTML is orderly and structured
• Good references and tutorial sites are available
• Follow the standards and your work will be much
  simpler, more consistent, and your results more
  reliable
• Plus your co-workers will like you more

3
Device Independence

• Your audience may view your site with many
  different devices and browser types.

4
The Browser

• The browser is not print!

5
The Browser Is Not Print

• No fixed page size
• No fixed page length
• User can change the font size
• User can link to her/his own local style sheet
• Screen size can be tiny or huge

6
The Adjustable Document
7
The Birth of HTML

• Created by Tim Berners-Lee at CERN
• Open standard developed under supervision of the
  World Wide Web Consortium (www.w3.org)
• Works to ensure the full potential of the Web for
  shared, integrated functionality is realized

8
The History of HTML/XHTML

• 1992 HTML first defined
• 1994 HTML 2.0
• 1995 Netscape specific non-standard HTML
• 1996 HTML 3.2, compromise version
• 1997 HTML 4.0, separates content from
  presentation
• 1998 XML standard for writing Web languages
• 2000 XHTML 1.0, XML compliant HTML
• 2002 XHTML 2.0

9
Problems With HTML

• Competing versions of browsers introduced
  features beyond the standards
• Inconsistent implementations of display engines
  and scripting
• Content and presentation mixed together
• Layout often done with tables
• Each element had many presentation attributes,
  resulting in laborious maintenance
• The Slop Code Era

10
XHTML

• XHTML is a version of HTML modified to conform to
  the XML standard
• Designed to separate content from presentation
• Content in XHTML
• Presentation controlled by Cascading Style Sheets
  (CSS)
• Extensible Additional elements can be defined
• XML Compatible Other XML based languages can be
  embedded in XHTML documents
• Like a programming language
• Specific syntax to use
• Validators help you get it right

11
XHTML Differences

• Case is significant
• All elements must have begin tags and end tags
  ltpgtHellolt/pgt
• Empty elements contain their own end tag ltbr /gt
• Attribute values must be enclosed in quotation
  marks
• More specfics available at http//www.w3.org/TR/xh
  tml1/diffs

12
A Simple XHTML File

• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Transitional//EN" "http//www.w3.org/TR/xhtml1/DTD
  /xhtml1-transitional.dtd"gt
• lthtmlgt
• ltheadgt
• lttitlegt
• My Home Page
• lt/titlegt
• lt/headgt
• ltbodygt
• lth1gtMy Home Page lt/h1gt
• ltpgt
• Welcome to my home page
• lt/pgt
• lt/bodygt
• lt/htmlgt

13
Hierarchical Structure

• Well formed xhtml forms a hierarchy

14
Content Types

• Documents are made up of logical types of content.

15
Semantic Structure

• Content of the same type usually is formatted to
  look the same.

16
Semantic Markup

• HTML markup is based on logical content types

17
Hierarchy

• The resulting hierarchy

18
The DOCTYPE Statement

• Declares the specific version of HTML or XHTML
  being used on the page
• Used by the browser to decide how to process the
  page
• Three types
• Transitional - Forgiving
• Strict Requires adherence to standards
• Frameset Use if page has frames
• Always first in file

19
Strict DOCTYPE

• Enter exactly as below
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN
• "http//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
  "gt
• Using Strict encourages standards based coding
• Validators will flag logical errors in your
  methods
• Your CSS will work better and more predictably

20
Elements

• Consist of three parts
• Begin tag, which can contain attributes
• Contents
• End tag
• Example
• ltp idintrogtWelcomelt/pgt
• W3schools specifications for ltpgthttp//www.w3scho
  ols.com/tags/tag_p.asp

21
Attributes

• Always only used in the element begin tag
• Three types
• Optional attributes Varies with element type
• Standard attributes id, class, title, style,
  dir, lang, xmllang
• Event attributes onclick, ondblclick,
  onmousedown, onmouseup, onmouseover, onmousemove,
  onmouseout, onkeypress, onkeydown, onkeyup
• Used in scripting

22
Empty Elements

• Some elements have no content and therefore also
  have no end tag
• ltimg srcphoto.jpg /gt
• ltbr /gt
• lthr /gt
• ltlink rel"stylesheet" type"text/css"
  hrefmain.css" /gt
• In XHTML, which requires end tags on all
  elements, a single tag represents both the begin
  and end tag

23
lth1gt, lth2gt, lth3gt, etc.

• Headings on the page
• Represent the main topic, subtopics,
  subsubtopics, etc. of the page
• Important to use they in a logical manner, which
  greatly helps assistive technology like voice
  browsers present the page content intelligibly

24
ltpgt

• Paragraph
• Important for presentation control to put text in
  an element. When in doubt, put text in a
  paragraph
• Blockquotes (ltblockquotegt) except they have wider
  left and right margins

25
Lists

• Unordered lists (bulleted lists)
• ltulgt
• ltligtOnelt/ligt
• ltligtTwolt/ligt
• lt/ulgt
• Ordered lists (numbered lists)
• ltolgt
• ltligtOnelt/ligt
• ltligtTwolt/ligt
• lt/olgt

26
Text Markup

• Bolding
• ltbgttextlt/bgt
• ltstronggttextlt/stronggt
• Italics
• ltigttextlt/igt
• ltemgttextlt/emgt
• Other
• ltsubgttextlt/subgt subscript
• ltsupgttextlt/supgt superscript
• ltdelgttextlt/delgt deleted text

27
Tables

• lttable border cellspacing"5" cellpadding"10"gt
• ltcaptiongtPeople on the teamlt/captiongt
• lttrgt
• ltthgtNamelt/thgt
• ltthgtPositionlt/thgt
• lt/trgt
• lttrgt
• lttdgtMarylt/tdgt
• lttdgtAnalystlt/tdgt
• lt/trgt
• lttrgt
• lttdgtJohnlt/tdgt
• lttdgtTechnicianlt/tdgt
• lt/trgt
• lt/tablegt

28
Graphics

• Graphics are placed by using an img element
• The alt attribute provides alternative text
  describing the graphic in case the graphic itself
  cannot be shown or the user cannot see the
  graphic
• ltimg src"picture.gif" alt"Suzzallo"gt

29
Anchors

• Anchors can link your page to any file on the Web

lta href"http//www.washington.edu/"gt University
of Washington lt/agt
30
Divs

• Divs enclose a set of elementsltdiv
  styletext-align centergt lth2gt Newslt/h2gt
  ltpgtlta hrefbudget.htmlgtBudgetlt/agtlt/pgt ltpgtlta
  hrefinvest.htmlgtInvestmentlt/agtlt/pgtlt/divgt

31
Spans

• Spans enclose objects (text, graphics) within an
  elementltpgtCall me Ishmael. Some years ago
  ltspan stylefont-style italicgtnever mind how
  long preciselylt/spangt having little or no money
  in my purse, and nothing particular to interest
  me on shore,

32
Cascading Style Sheets

• Are used to control how elements are presented in
  the Web page
• Use a different syntax that HTML/XHTML
• Work with the common visual browsers (Internet
  Explorer, FireFox, Opera)
• Used properly, can great simplify visual design,
  site management and content maintenance

33
A Style

• Selector  Property Value 
• p font-family times
• Note the punctuation The property is followed by
  a colon () and the value is followed by a
  semicolon()

34
Using CSS

• Styles can be set in a stylesheet, in a style
  element in the head or in a style attribute

35
Selectors

• Simple selectorsp color blue h1, h2, h3, h4
  font-style italic
• Contextual selectorsul li font-weight bold
  main img border solid black 5px p.intro
  font-family verdana, sans-serif

36
The Box Model

• Each element has padding, border, and margin

37
Vertical Margins

• The larger of the two vertical margins will
  determine the distance between elements

38
Visual Formatting Model

• Pages are built as a series of blocks stacked
  from the top down

39
Controlling Layout

• Styles can control size and placement of elements
• Example nav width 12em float left
  news width 12em float right main
  margin 1em 13em 1em 13em

40
Nav Div Float Left
41
Nav Div Float Right
42
Nav Across Top

• Items in the Nav bar are anchors within a div

43
HTML-Kit

• HTML-Kit (Windows) is free editor that makes it
  easy to make standards compliant XHTML

44
HTML-Kit Has Tidy

• Press F9 and your XHTML is validated and tidied
  for easy reading

45
Resources

• HTML-Kit editor http//chami.com/
• Amaya editor http//www.w3c.org/Amaya
• W3schools XHTML and CSS tutorials
  http//www.w3schools.com/
• Web Head Start tutorials http//www.webheadstart
  .org/
• Tidy Web Interface - http//www.washington.edu/web
  info/tidy.cgi
• CSS Validator - http//jigsaw.w3.org/css-validator
  /
• Dave Raggett XHTML and CSS tutorials -
  http//www.w3.org/MarkUp/Guide/Overview.html
• Web Accessibility in Mind (WebAIM) -
  http//www.webaim.org/
• Color contrast analyzer - http//www.visionaustral
  ia.org.au/info.aspx?page628
• Stylin With CSS, A Designers Guide, Second
  Edition by Charles Wyke-Smith