Scribd Logo
Importer

Bienvenue sur Scribd !

  • XHTML and CSS: Rick Ells UW Technology

    Transféré par

    db619
    37 vues45 pages
    xhtml

    Titre original

    xhtml_css

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formats disponibles

    PPT, PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document
    xhtml

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PPT, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    37 vues45 pages

    XHTML and CSS: Rick Ells UW Technology

    Transféré par

    db619
    xhtml

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PPT, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 45

    XHTML and CSS

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

    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 ropPerty p { font-family: Value 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 Designers Guide, Second Edition by Charles Wyke-Smith

    Vous aimerez peut-être aussi