INP 170: Web Coding II

1
INP 170 Web Coding II

• Fluid Design,
• XML with CSS/XSL

2
Objectives

• Fixed-Width and Variable-Width CSS Layouts
• Float and Clear Properties
• Two-Column Layouts
• Three-Column Layouts
• Recommendations

3
Fixed-Width vs. Variable-Width Layouts

• Fixed-width layouts are usually fairly
  straightforward, especially if they are simple,
  left-aligned layouts.
• Can use absolute positioning or normal flow.
• Generally, good cross-browser support.
• Variable-width layouts are more difficult, often
  involving a combination of floating, CSS
  positioning techniques and careful attention to
  the box model
• Frequently, must use work-arounds for multiple
  browsers, including NN4 and IE5

4
Float property

• float
• Used to move an element to the left or right so
  other content can flow around it
• Values left right none
• E.g., left float left
• Uses
• Page layout
• Floating text around and image

5
Clear property

• clear
• Used to state that floating elements are not
  allowed on a particular side or both sides
• Values left right both none
• clear clear both
• Hint the order of the elements in an XHTML
  page is significant reordering the order or
  DIVs will have different effects.

6
Two-column layouts

• ltheadgt
• ltstyle type"text/css"gtlt!--
• nav position absolute top 5px left 5px
  width 75px padding 5px border 1px solid
  000
• news margin-left 100px margin-top 5px
  margin-right 5px width 75px
• body margin 0 padding 0
• --gtlt/stylegt
• lt/headgt
• ltbody onresize"window.location.hrefwindow.locati
  on.href"gt
• ltdiv id"nav"gt lt!-- Navigation links --gt lt/divgt
• ltdiv id"news"gt lt!-- Content goes here --gt lt/divgt
• lt/bodygt

7
Two column layout using float

• ltheadgt
• ltstyle type"text/css"gtlt!--
• nav float left width 75px margin-right
  10px padding 5px border 1px solid black
• body margin 0 padding 0
• --gtlt/stylegt
• lt/headgt
• ltbodygt
• ltdiv id"nav"gt lt!-- Navigation links --gt lt/divgt
• ltdivgt lt!-- Content goes here --gt lt/divgt
• lt/bodygt

8
Two-Column Layout with a Heading

• ltstyle type"text/css"gtlt!--
• header border 1px solid 000 padding 5px
• nav position absolute top 50px left 0px
  width 75px padding 5px border 1px solid
  000
• news margin-top 25px margin-left 100px
• body margin 0 padding 0 background fff
  color 000
• --gtlt/stylegt
• lt/headgt
• ltbody onresize"window.location.hrefwindow.locati
  on.href"gt
• ltdiv id"header"gt lt!-- Masthead with logo --gt
  lt/divgt
• ltdiv id"nav"gt lt!-- Navigation links --gt lt/divgt
• ltdiv id"news"gt lt!-- Content goes here --gtlt/divgt
• lt/bodygt

9
Two-Column Layout with a Heading using Float

• ltheadgt
• ltstyle type"text/css"gtlt!--
• header border 1px solid 000 padding 5px
• nav float left width 75px margin-right
  10px padding 5px border 1px solid 000
• body margin 0 padding 0 background fff
  color 000
• --gtlt/stylegt
• lt/headgt
• ltbodygt
• ltdiv id"header"gtlt!-- Masthead with logo
  --gtlt/divgt
• ltdiv id"nav"gtlt!-- Navigation links --gtlt/divgt
• ltdivgtlt!-- Content goes here --gtlt/divgt
• lt/bodygt

10
Three column layout with heading

• ltheadgt
• ltstyle type"text/css"gtlt!--
• header border 1px solid 000 padding 5px
  font-size 16px
• nav position absolute top 50px left 0px
  width 75px padding 5px border 1px solid
  000
• news position absolute top 50px left 80
  width 100px padding 5px border 1px solid
  000
• content margin 20px 25 175px 100px
• body margin 0 padding 0 background fff
• --gtlt/stylegt
• lt/headgt
• ltbody onresize"window.location.hrefwindow.locati
  on.href"gt
• ltdiv id"header"gtCompany Logolt/divgt
• ltdiv id"nav"gtlt!-- Navigation links --gtlt/divgt
• ltdiv id"news"gtlt!-- News goes here --gtlt/divgt
• ltdiv id"content"gtlt!-- Content goes here
  --gtlt/divgt
• lt/bodygt

11
Three column layout using left right positioning

• ltheadgt
• ltstyle type"text/css"gtlt!--
• header border 1px solid 000 padding 5px
  font-size 16px
• nav position absolute top 50px left 0px
  width 75px padding 5px border 1px solid
  000
• news position absolute top 50px width
  100px padding 5px border 1px solid 000
  right 0px
• content margin 20px 125px 175px 100px
  z-index 2
• body margin 0 padding 0 background fff
  color 000
• --gtlt/stylegt
• lt/headgt
• ltbody onresize"window.location.hrefwindow.locati
  on.href"gt
• ltdiv id"header"gtlt!-- Masthead --gtlt/divgt
• ltdiv id"nav"gtlt!-- Navigation links --gtlt/divgt
• ltdiv id"news"gtlt!-- News goes here --gtlt/divgt
• ltdiv id"content"gtlt!-- Content goes here
  --gtlt/divgt
• lt/bodygt

12
3 column layout using float

• ltstyle type"text/css"gtlt!--
• header border 1px solid 000 padding 5px
  margin-bottom 20px
• nav position absolute top 50px left 0px
  width 75px padding 5px border 1px solid
  000
• news float right width 100px padding 5px
  border 1px solid 000
• content margin 0px 15px 175px 100px
• body margin 0 padding 0 background fff
  color 000
• --gtlt/stylegt
• lt/headgt
• ltbody onresize"window.location.hrefwindow.locati
  on.href"gt
• ltdiv id"header"gtlt!-- Masthead --gtlt/divgt
• ltdiv id"nav"gt lt!-- Navigation links --gt lt/divgt
• ltdiv id"news"gt lt!-- News goes here --gtlt/divgt
• ltdiv id"content"gt lt!-- Content goes here
  --gtlt/divgt
• lt/bodygt

13
Special browser notes

• NN4 does not position elements from right, so use
  a hack to position from the left
• I.e., position things in normal stylesheet from
  the left, then _at_import a stylesheet that uses
  right attribute.
• Make sure to override left you can do this
  using left auto
• Mac IE5 sometimes creates unnecessary horizontal
  scrollbar with three column layouts...

14
Special browser notes cont'

• If you have a div with margins, and a table
  within this div set to 100 width, then the table
  may actually be 100 of the page width for IE
  5.0/5.5 for PC. Test!

15
XML and CSS/XSL Objectives

• Introduction to XML
• Setting up an XML Document
• Rules for Naming XML Elements
• Attributes in XML
• XML and CSS
• XML and Data Islands
• XML and XSL

16
Introduction to XML

• XML, EXtensible Markup Language, is a technology
  using open standards
• Meant for storage and transportation of data
• Since it's a simple text file and is platform
  independent, its a great way for applications to
  share data
• Generally very readable
• Does not compete with XHTML complimentary
  functions

17
What you need to know about XML

• XML currently at version 1.0
• XML files end with .xml
• No predefined tags so hence you cannot use
  embedded stylesheet
• Must have one root node... for HTML documents,
  this is lthtmlgtlt/htmlgt
• Here are some options for XML on the web
• Store XML separate from XHTML
• Style XML using CSS
• Store XML within XHTML, known as data islands
• Use XSL to dynamically create HTML from XML

18
Well-formed XML

• An XML document with correct syntax is
  well-formed
• This has absolutely nothing to do with DTDs
• XML that is not well-formed will not display

19
Valid XML

• If an XML file follows its DTD, and it is
  well-formed, then it is considered valid
• So to be valid, must be well-formed but not
  vice versa
• DTD not required for an XML file, and not always
  desirable

20
Browsers and XML

• IE 5 first browser to support XML, though it is
  problematic
• IE 6, Opera, Mozilla, and Netscape 6 all support
  XML
• NN 4 does not support XML

21
Validating XML

• Can use IE 6
• There is also an XML validator, but it employs
  Microsoft's XML parser, so it is equivalent to IE
  6
• http//www.w3schools.com/dom/dom_validate.asp

22
Character entities

• If you should need to use a less-than sign inside
  an XML tag, use lt and replace ampersands () with
  amp (both will generate error messages
  otherwise).
• It is also prudent, though not necessary, to
  replace
• greater-than signs with gt
• single quotes with apos
• double quotes with quot

23
Self-containing XML

• Using a Document Type Definition (DTD) or an XML
  Schema, the XML document is self-describing
• Describes available XML elements and where they
  can be used, as well as what data they can contain

24
Applications of XML

• XML is used liberally for transferring
  information over the Web
• XML used to create XHTML, Scalable Vector
  Graphics (SVG), Wireless Markup Language (WML),
  etc.

25
Setting up XML document

• XHTML uses XML rules, so this should be easy
• First, include the XML prolog
• lt?xml version"1.0" encoding"UTF-8"?gt
• Note that this is not an XML tag, else it would
  have to be closed as lt /gt
• Next you need to create a root element
• Of course, this depends on why you are creating
  an XML file...

26
Very simple, trivial XML file

• lt?xml version"1.0" encoding"UTF-8"?gt
• ltcoursegt
• lt/coursegt

27
More meaningful XML file

• lt?xml version"1.0" encoding"UTF-8"?gt
• ltcoursegt
• ltdepartmentgtINPlt/departmentgt
• ltnumbergt160lt/numbergt
• lttitlegtWeb Coding IIlt/titlegt
• ltinstructorgtBryan Smithlt/instructorgt
• ltdescriptiongtExploring technologies such as
  XHTML, CSS, XML/XSL, and WMLlt/descriptiongt
• lt/coursegt

28
Even more meaningful

• lt?xml version"1.0" encoding"UTF-8"?gt
• ltcoursegt
• ltdepartmentgtINPlt/departmentgt
• ltnumbergt150lt/numbergt
• lttitlegtWeb Coding Ilt/titlegt
• ltinstructorgtBryan Smithlt/instructorgt
• ltdescriptiongtLearn basics of web design with
  XHTML and CSS.lt/descriptiongt
• lt/coursegt
• ltcoursegt
• ltdepartmentgtINPlt/departmentgt
• ltnumbergt160lt/numbergt
• lttitlegtWeb Coding IIlt/titlegt
• ltinstructorgtJason Withrowlt/instructorgt
• ltdescriptiongtExploring technologies such as
  XHTML, CSS, XML/XSL, and WMLlt/descriptiongt
• lt/coursegt

29
Rules for Naming XML Elements

• Within names, do not use
• Minus (-), sometimes interpreted as subtract
• Space ( ), doesn't know where name ends
• Periods (.), is interpreted for various roles
• Colons (), which is reserved for name spaces
• Names cannot start with
• Number
• Punctuation mark
• xml, XML, or Xml
• Names can contain
• Characters
• Numbers
• Underscores
• Other characters

30
Attributes in XML

• Can freely create attributes
• attributevalue
• However, before you start using attributes,
  consider the consequences
• Attributes don't describe structure, hierarchy
• Difficult to read
• Difficult to change/remove, both manually and
  within DTD
• Generally, better to use in very limited scenarios

31
XML with attributes

• lt?xml version"1.0" encoding"UTF-8"?gt
• ltbookgt
• lttitle author"Eric Meyer"gtEric Meyer on
  CSSlt/titlegt
• ltpublisher year"2002" edition"1st"gtNew
  Riderslt/publishergt
• lt/bookgt

32
Same XML, but without attributes

• lt?xml version"1.0" encoding"UTF-8"?gt
• ltbookgt
• lttitlegtEric Meyer on CSSlt/titlegt
• ltauthorgtEric Meyerlt/authorgt
• ltpublishergtNew Riderslt/publishergt
• ltyeargt2002lt/yeargt
• lteditiongt1stlt/editiongt
• lt/bookgt

33
(No Transcript)
34

• Which of the following two were more readible?

35
Can still use id and class

• You can still use id and class in XML, to make
  XML elements easier to style

36
XML and CSS

• XML does not contain any information about
  presentation, and different browsers display it
  very differently
• Mozilla shows a hierarchy of tags, similar to
  actual XML code
• Safari just spits out the data on the screen, as
  if all XML tags were negligible inline tags!
• Can link to separate CSS file

37
View example

• Go to links section of our web site for an example

38
XML and data islands

• Note this is only currently supported by IE 5
  and IE 6 PC
• Uses non-standard ltxml id...gtlt/xmlgt tags
• Can contain XML code
• Can link to external XML file using ltxml id...
  src...gtlt/xmlgt
• Must use id, or else you won't be able to access
  the XML values

39
Data islands

• ltbodygt
• ltxml id"bookdata" src"books.xml"gtlt/xmlgt
• lttable datasrc"bookdata" width"100"
  cellpadding"5" cellspacing"0" border"1"
  summary"Book data set"gt
• ltcaptiongtBook Data Setlt/captiongt
• lttrgt
• lttdgtltspan datafld"title"gtlt/spangtlt/tdgt
• lttdgtltspan datafld"author"gtlt/spangtlt/tdgt
• lttdgtltspan datafld"publisher"gtlt/spangtlt/tdgt
• lttdgtltspan datafld"first_edition"gtlt/spangtlt/tdgt
• lttdgtltspan datafld"second_edition"gtlt/spangtlt/tdgt
• lt/trgt
• lt/tablegt
• lt/bodygt

40
XML and XSL

• Though CSS can be used to style XML, XSL can be
  used to convert it to XHTML

41

• lt?xml version"1.0" encoding"UTF-8"?gt
• ltxslstylesheet version"1.0" xmlnsxsl"http//ww
  w.w3.org/1999/XSL/Transform"gt
• ltxsltemplate match"/"gt
• lthtmlgt
• ltheadgtlttitlegtXSL Examplelt/titlegtlt/headgt
• ltbodygt
• lttable width"100" cellpadding"5"
  cellspacing"0" border"1" summary"Book data
  set"gt
• ltcaptiongtBook Data Setlt/captiongt
• lt!-- Make sure to include headers --gt
• ltxslfor-each select"books/book"gt
• lttrgt
• lttdgtltxslvalue-of select"title"/gtlt/tdgt
• lttdgtltxslvalue-of select"author"/gtlt/tdgt
• lttdgtltxslvalue-of select"publisher"/gtlt/tdgt
• lttdgtltxslvalue-of select"editions/first_edition"/
  gtlt/tdgt
• lttdgtltxslvalue-of select"editions/second_edition"
  /gtlt/tdgt
• lt/trgt

42
Another example

• See links page of course web site for XML file
  with XSL

43
Final comments

• http//www.w3schools.com/xsl/xsl_w3celementref.asp
  
• XSL Elements
• http//www.w3schools.com/xsl/xsl_functions.asp
• XSL Functions
• Within the XHTML template any of the CSS
  approaches can be used.
• If embedded styles are chosen do not enclose the
  rules with XHTML comments lt!-- --gt, because those
  are treated as literal comments by the XSL parser
  and all the CSS will be ignored.
• The XHTML comments were only necessary to protect
  the CSS from very old browsers (browsers created
  long before XML), so there is no need for the
  comments now.