Erik Clarizio

1
Erik Clarizio Chris Hall CS 162 (The XML
presentation should have gone first)
2

• XHTML Content
• CSS Presentation
• Not procedural languages

3

• A Markup Language
• Convention of using tags to label data
• Hyper Text
• A specific set of tags (web page oriented)

4
XHTML1.0 is XML compliant HTML4.0

• Are Markup Languages
• Convention of using tags to label data
• Angle brackets, / slash to close
• eXtensible ML
• Strict syntax for structuring data with tags
• No specific tag names (meant to be extended)
• Hyper Text ML
• A specific set of tags (that browsers understand)
• For building web pages

5
What is a tag?

• lttag1gt
• This text is inside tag1
• lttag2gt
• This is inside tag1 and tag2
• lt/tag2gt
• This is inside tag1
• lt/tag1gt
• This is outside both tags

Kinda like blocks in C while() Inside while
block for() Inside both blocks //end of for
block //end of while block Outside blocks
6
More on tags

• Each tag declares an element (such as ltpgt for
  paragraph)
• Elements have pre-defined attributes
• All elements have id, class and style
  attributes
• XHTML Ex ltp idintrogt
• CSS Ex pintro color red / other style
  info /

7
XHTML language aspects

• 79 elements or predefined static types
• Explicitly declared by tags
• Global lifetime
• Each w/ specific attributes (member fields)
• Interpreted not compiled
• Leaves some language implementation details up to
  the application

8

• The reserve words of the language
• Tags markup data
• Tags contained by angle brackets
• / slash indicates the end of a tags scope
• lttagAgt lttagBgt data lt/tagBgt lt/tagAgt
• data is directly described by tagB and
  indirectly by tagA
• tagB is nested inside tagA
• data is nested inside tagB

9
lt!DOCTYPE Doctype goes heregt lthtmlgt ltheadgt lttitle
gtTitle goes herelt/titlegt lt/headgt ltbodygt
lt/bodygt lt/htmlgt
10

• Strict
• Fully compliant, clean markup
• Full separation of presentation info into CSS
• Transitional
• Allows for backwards compatibility to HTMLs
  presentational features
• Frameset
• Transitional frames

11
lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http//www.w3.org/TR/xhtml1/DTD/xhtm
l1-strict.dtd"gt lthtmlgt ltheadgt lttitlegtMy first
web sitelt/titlegt lt/headgt ltbodygtHello
Worldlt/bodygt lt/htmlgt
12
(No Transcript)
13
(No Transcript)
14
ltulgt ltligtCoffeelt/ligt ltligtTea ltulgt ltligtBlack
tealt/ligt ltligtGreen tealt/ligt lt/ulgt lt/ligt ltl
igtMilklt/ligt lt/ulgt
15

• HTML 3.2 Describes
• Structure of data
• How to display data
• An addition that evolved unofficially (non W3C)

16

• HTML 4.0 Describes
• Structure of data
• How to display data (optional)
• CSS (Cascading style sheets)
• How to display data
• An attempt to re-separate style and content

17

• XHTML Describes
• Structure of data only
• With strictness of XML syntax
• CSS works with XHTML to provide the way that a
  webpage should look

18

• Hierarchy of separated style information
• Describe the visual/layout/formatting of the
  various XHTML elements
• Single change in style sheet can effect a look
  throughout an entire web page
• styles cascade or override in this order
• Browser default ? External sheet ? Internal sheet
  ? Inline style

19

• selector property value property2 value2
• Selector describes an XHTML tag
• Property refers to a specific part of the
  selector, such as font-size
• Values can range from numbers to colors to styles.

20

• Attribute values can be implicitly defined, their
  naming convention indicates units/type
• Properties are much like the keywords of
  Java/C, they are predefined
• Selectors can be user-defined
• Values must match the property they are
  assigning You cannot assign 10px to a font-style
  property. (There is type checking)

21
body font-family arial, helvetica,
sans-serif font-size 80 color black
img border-style dashed border-width
2px border-color f8c3b5 li color
0f1 font-style italic
22
Internal Sheet CSS Example

• lthtmlgt
• ltheadgt
• ltstyle type"text/css"gt
• body background-color blue
• h1 background-color 0f0
• h2 background-color transparent
• p background-color rgb(250,0,255)
• lt/stylegt
• lt/headgt
• ltbodygt
• lth1gtThis is header 1lt/h1gt
• lth2gtThis is header 2lt/h2gt
• ltpgtThis is a paragraphlt/pgt
• lt/bodygt
• lt/htmlgt

23
Inline CSS Example

• lthtmlgtltbodygtltp stylebackground-colorbluegtBl
  ah ltbr/gt blah blahlt/pgtlt/bodygtlt/htmlgt

24

• Separating style from content condenses the
  amount of code written
• CSS is easier to work with for large projects
• The strictness of XHTML allows for more efficient
  parsers (mobile devices)

25
Now What?

• XHTML and CSS provide a structural framework of
  content and style data.
• Scripting languages (Javascript) can bring
  interactivity and procedural functionality to the
  mix.

26
Questions?