Tech Briefing: Web Standards, XHTML, and CSS - PowerPoint PPT Presentation

1 / 31
About This Presentation
Title:

Tech Briefing: Web Standards, XHTML, and CSS

Description:

Tech Briefing: Web Standards, XHTML, and CSS Mark Branom and Brian Young 10/23/2003 – PowerPoint PPT presentation

Number of Views:100
Avg rating:3.0/5.0
Slides: 32
Provided by: JimK75
Learn more at: https://uit.stanford.edu
Category:

less

Transcript and Presenter's Notes

Title: 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
Write a Comment
User Comments (0)
About PowerShow.com