Scribd Logo
Upload

Welcome to Scribd!

  • Snehal XHTML

    Uploaded by

    ernestohp7
    41 views34 pages
    XHTML, CSS, and good web and database design practices were discussed. XHTML is a stricter version of HTML that is easier to migrate and supports future technologies like XML. CSS separates presentation from content, making pages lighter, easier to update, and more accessible. Good practices include commenting code, using valid markup, separating design from content, and only retrieving necessary data when querying databases. The presentation focused on transitioning to XHTML and CSS for the front-end of an enterprise database application.

    Original Description:

    Original Title

    Snehal_XHTML.ppt

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PPT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    XHTML, CSS, and good web and database design practices were discussed. XHTML is a stricter version of HTML that is easier to migrate and supports future technologies like XML. CSS separates presentation from content, making pages lighter, easier to update, and more accessible. Good practices include commenting code, using valid markup, separating design from content, and only retrieving necessary data when querying databases. The presentation focused on transitioning to XHTML and CSS for the front-end of an enterprise database application.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as ppt, pdf, or txt
    41 views34 pages

    Snehal XHTML

    Uploaded by

    ernestohp7
    XHTML, CSS, and good web and database design practices were discussed. XHTML is a stricter version of HTML that is easier to migrate and supports future technologies like XML. CSS separates presentation from content, making pages lighter, easier to update, and more accessible. Good practices include commenting code, using valid markup, separating design from content, and only retrieving necessary data when querying databases. The presentation focused on transitioning to XHTML and CSS for the front-end of an enterprise database application.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as ppt, pdf, or txt
    of 34

    XHTML, CSS , Good web and database design practices

    Snehal Monteiro
    For CIS 764

    Outline
    What Youre In For Why XHTML & CSS? XHTML CSS Making the Transition The Future Good Web and Database design practices

    What Youre In For


    This presentation focuses mainly on the front-end i.e. the web-pages of an enterprise database application XHTML and CSS are the latest trends in web design and play a major role in enhancing the usability of the application

    Why XHTML & CSS?


    Garbage code isuhgarbage! Information encoded in XHTML can be more easily migrated as technology changes XHTML is a good step forward to learning XML You can easily make global changes to how your documents display There are user benefits to separating information from presentation

    What is XHTML
    XHTML stands for eXtensible HyperText Markup Language XHTML is aimed to replace HTML XHTML is a stricter and cleaner version of HTML XHTML is HTML defined as a XML application XHTML is a W3C Recommendation

    XHTML why?
    Many pages on the WWW contain bad HTML XML is a markup language where everything has to be marked up correctly, which results in "well-formed"
    documents. Hand held devices like PDAs and mobile phones do not have resources and power to interpret bad HTML code A mark-up language for now and for the future. Future browser versions may support only XHTMLso be prepared!!!

    XHTML Benefits
    A painless transition to more advanced technology (XML) Clean, more logical markup Increased interoperability Greater accessibility

    XHTML-key ingredient in mobile browsing


    XHTML reduces the difference between wireless and web content XHTML Basic and Cascading Style Sheets separate content from presentation enabling content tailoring to different devices

    Benefits:
    Consumers more services, better user interface, easier-to-use Carriers more control over content, consistent look & feel, service loyalty Content providers presentation, functionality, consistency, familiar format Manufacturers Easier software

    maintenance, better performance, lower cost

    How can I convert to XHTML?? Very few simple rulesthats it!


    All tags must be in lowercase:
    <title></title>

    All tags must end:


    <p></p>

    Even empty tags:


    <br></br> = <br />

    All tags must properly nest:


    <p>This is an <a name=here>anchor</a>.</p>

    All attribute values must be quoted:


    <div align=center></div>

    XHTML: More Rules


    Attribute minimization is forbidden:
    <input type=radio name=stuff CHECKED> becomes <input type=radio name=stuff checked=checked />

    You must use a document type declaration:


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

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

    And add a namespace declaration to <html>:


    <html xmlns=http://www.w3.org/1999/xhtml xml:lang=en lang=en>

    Evolution of XHTML standards


    HTML 4.0 Transitional XHTML Basic XHTML Transitional XHTML Strict
    There are online validation tools available which check conformance to standards-

    Kick It Up a Notch: Enhance your web page with Cascading Style Sheets

    CSS is a standard layout language for the Web Though precise and powerful, CSS is easy to author by hand. Replace HTML table-based layouts, frames, and other presentational hacks. Separate style from content

    Benefits of CSS
    Conserve bandwidth (less markup for visitors to download) Reduce design/development time Reduce updating and maintenance time Increased accessibility (fewer, or no, HTML tables; no invalid junk markup) Adhere to W3C recommendations, improving interoperability and ensuring greater longevity Better, more professional appearance (lineheight, borders, padding, margins) Increased readability (lineheight, borders, padding, margins) More easily transition in future to more powerful standards such as XML (because page content no longer contains junk markup)

    CSS: Rule Structure


    selector declaration h1 { color: purple; } property value ends every property/ value pair

    h1 { font-family: Optima, Arial, sans-serif; } property/value separator

    begins and ends the declaration

    CSS Rule Example


    body { background: #FFFFFF; color: black; margin-left: 5%; margin-right: 5%; font-family: Tahoma, Optima, Arial, sans-serif; }

    Where do you put styles?


    In-line - add to HTML tag <H1 style="color: maroon">
    Embedded style sheets <style> </style> External style sheets <link href="style.css">

    In-line
    <H1 style="color: maroon">
    Similar to adding attributes to html tags Disadvantages
    decreased accessibility increased file size harder to update

    Embedded style sheets


    <style> <!-h1 {font-family: arial, sans-serif;} --> </style>

    Put rules between style tags Put in head section

    Add html comment tags


    Use when single document has unique style

    External style sheets


    <link rel="stylesheet" type="text/css" href="style.css">
    Save rules in external file

    Advantages
    ease of maintenance use less disk space increase accessibility

    Class selector & attribute


    To create rules that can be applied to a variety of html tags
    <style> .bar {color: maroon; font-size: smaller; background-color: yellow;} </style> <p class="bar">text</p> <p><a href="url.htm" class="bar">link</a> </p>

    CSS: Diagram of Precedence


    XHTML File 2) [call to external stylesheet] 1) [styles embedded inside the
    document]
    External Style Sheet

    Generalized order of precedence, all other things being equal

    http://jigsaw.w3.org/css-validator/

    Making the Transition: Tidy


    HTML Tidy is free software that can read your HTML and output a much better file by:
    Automatically fixing some errors Changing uppercase tags to lowercase Indenting your code to make to make it more readable Quote all attribute values And other things, depends on configuration file

    An error report may also be generated that can identify remaining problems

    Making the Transition: Migrating an Existing Site


    All at once:
    Copy entire site to another location Run Tidy; check and re-run as needed Clean up remaining problems Transfer back

    Gradual:
    Do all new things in XHTML/CSS Migrate old files as you update them for other reasons

    The Future
    Will XML replace HTML? It already has! Thats why youre here! XML will typically not be delivered to web clients; that is what XHTML will be for So, is this the last markup you have to learn? No way! Use this as a stepping-stone to XML, for which you will have many additional uses Remember Never stop learning!

    Adding hit counters to your website for free


    Just register at www.google.com/analytics Type in the url of your web-site You will get a javascript code snippet Just add the code to your index page You get daily reports about user activity on your site

    Good web-design practices:


    Comment your code! Use XHTML rules and CSS Use AJAX to enhance user interaction and increase speed Archive code before making any changes to the current web-site Re-use code: eg: Database connection code, reusable javascript subroutines Use lower-case more than upper-case, it looks more attractive and subtle

    Good database design practices


    Comment your code! Dont store big binary files in the database Correctly identify which fields require data If a column storing the same data appears or is referenced in more than one table (e.g. a foreign key), it should have the same data type throughout the database.

    Continued
    When running queries on the database, use only the column names that you need to retrieve. This can reduce network traffic and disk operations. When running an insert action query, use the columns list into which to insert instead of the table name (when you want to insert data in all the current columns). This way, if new columns are added to the table, your query will still work.

    References
    W3C-Introduction to XHTML http://www.w3schools.com/xhtml/xhtml_intro.asp NYPL Online Style Guide: XHTML and CSS http://www.nypl.org/styleguide/xhtml/index.html Better Living through XHTML By, Jeffery Zeldman http://www.alistapart.com/stories/betterliving/ Good practices in database design http://www.interaktonline.com/Support/Articles/Details

    Thank-you!
    Questions ???

    You might also like