xhtml_css by bdmantra

VIEWS: 17 PAGES: 45

									XHTML and CSS
                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
         Device Independence




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




The browser is not print!
            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
The Adjustable Document
                    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
         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
              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‖
                               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
               XHTML Differences

 Case is significant
 All elements must have begin tags and end tags
  <p>Hello</p>
 Empty elements contain their own end tag
  <br />
 Attribute values must be enclosed in quotation
  marks
 More specfics available at
  http://www.w3.org/TR/xhtml1/#diffs
                   A Simple XHTML File

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>
      My Home Page
    </title>
  </head>
  <body>
    <h1>My Home Page </h1>
    <p>
     Welcome to my home page
    </p>
  </body>
</html>
     Hierarchical Structure




Well formed xhtml forms a hierarchy
                 Content Types




Documents are made up of logical types of content.
               Semantic Structure




Content of the same type usually is formatted to look the
 same.
            Semantic Markup




HTML markup is based on logical content types
     Hierarchy




The resulting hierarchy
            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
                           Strict DOCTYPE

 Enter exactly as below

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN―
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 Using Strict encourages standards based coding
     Validators will flag logical errors in your methods
     Your CSS will work better and more predictably
                        Elements

 Consist of three parts
   Begin tag, which can contain attributes

   Contents

   End tag

 Example:
<p id=―intro‖>Welcome</p>
 W3schools specifications for <p>
  http://www.w3schools.com/tags/tag_p.asp
                            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,
    xml:lang
   Event attributes: onclick, ondblclick, onmousedown,
    onmouseup, onmouseover, onmousemove, onmouseout,
    onkeypress, onkeydown, onkeyup
       Used in scripting
                  Empty Elements

 Some elements have no content and therefore also
 have no end tag
  <img src=―photo.jpg‖ />
  <br />
  <hr />
  <link rel="stylesheet" type="text/css" href=―main.css" />

 In XHTML, which requires end tags on all
 elements, a single tag represents both the begin
 and end tag
             <h1>, <h2>, <h3>, 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
                         <p>

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

 Unordered lists (bulleted lists)
  <ul>
   <li>One</li>
   <li>Two</li>
  </ul>
 Ordered lists (numbered lists)
  <ol>
   <li>One</li>
   <li>Two</li>
  </ol>
                     Text Markup

 Bolding
   <b>text</b>
   <strong>text</strong>
 Italics
   <i>text</i>
   <em>text</em>
 Other
   <sub>text</sub> subscript
   <sup>text</sup> superscript
   <del>text</del> deleted text
                                      Tables

<table border cellspacing="5" cellpadding="10">
  <caption>People on the team</caption>
  <tr>
     <th>Name</th>
     <th>Position</th>
  </tr>
  <tr>
     <td>Mary</td>
     <td>Analyst</td>
  </tr>
   <tr>
     <td>John</td>
     <td>Technician</td>
   </tr>
 </table>
                      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
<img src="picture.gif" alt="Suzzallo">
                      Anchors

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




         <a href="http://www.washington.edu/">
         University of Washington </a>
                         Divs

 Divs enclose a set of elements

 <div style=―text-align: center;‖>
  <h2> News</h2>
  <p><a href=―budget.html‖>Budget</a></p>
  <p><a href=―invest.html‖>Investment</a></p>
 </div>
                        Spans

 Spans enclose objects (text, graphics) within an
 element

 <p>Call me Ishmael. Some years ago — <span style=―font-
 style: italic;‖>never mind how long precisely</span> —
 having little or no money in my purse, and nothing
 particular to interest me on shore,
            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
                       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(;)
                    Using CSS




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

 Simple selectors
  p { color: blue }
  h1, h2, h3, h4 { font-style: italic; }
 Contextual selectors
  ul li { font-weight: bold; }
  #main img { border: solid black 5px; }
  p.intro { font-family: verdana, sans-serif;}
              The Box Model




Each element has padding, border, and margin
               Vertical Margins




The larger of the two vertical margins will
 determine the distance between elements
             Visual Formatting Model




Pages are built as a series of blocks stacked from the top down
                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;
Nav Div Float Left
Nav Div Float Right
              Nav Across Top




Items in the Nav bar are anchors within a div
                        HTML-Kit




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




Press F9 and your XHTML is validated and tidied for
  easy reading
                       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/webinfo/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.visionaustralia.org.au/info.aspx?page=628
   Stylin’ With CSS, A Designer’s Guide, Second Edition by
    Charles Wyke-Smith

								
To top