Foundation of Web Application Developmnet - XHTML

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    3 Favorites

    Foundation of Web Application Developmnet - XHTML - Presentation Transcript

    1. XHTML Foundation of Web Application Development - Part 1 Vashira Ravipanich www.vashira.com Tuesday, February 3, 2009 1
    2. Road Map • Build it! : XHTML • Paint it! : CSS • Make it fly! : JavaScript • Hook with data! : Server Side Scripts Tuesday, February 3, 2009 2
    3. Road Map • Build it! : XHTML We are here • Paint it! : CSS • Make it fly! : JavaScript • Hook with data! : Server-Side Scripts Tuesday, February 3, 2009 3
    4. Let’s build the web • Build web pages is not a difficult thing • Just HTML and some styles • Plenty of tools around • Dreamweaver • Even Visual Studio • The problem is... Tuesday, February 3, 2009 4
    5. Let’s build the web • You can’t master what you don’t really know • Most WYSIWYG editors produce JUNK tags in your works • Even worst • They usually insert massive in-line styles • They mess up with structure layout • They help, but not teach • Back to basic - be Zen! Tuesday, February 3, 2009 5
    6. Let’s build the web Any Text editor would be more than enough! Tuesday, February 3, 2009 6
    7. Web Taxonomy • Hyperlinks where is it? • URL = Uniform Resource Locator • HTTP = HyperText Transfer Protocol How to get it? • Browser = HTML reader/interpreter Display it Tuesday, February 3, 2009 7
    8. HTML • What is HTML? • Stands for HyperText Markup Language • If you ever write a blog post, you probably familiar with HTML already • Current stable version is HTML 4 Tuesday, February 3, 2009 8
    9. HTML markup • Elements • Attributes • <element-name attribute=”value”>content</element-name> • Tags - <p>, <ul>, <li>, <b>, <i>, <input> • and a lot more... Tuesday, February 3, 2009 9
    10. Sample <html> <head> <title>Hello HTML</title> </head> <body> <p>Hello World!!</p> </body> </html> Tuesday, February 3, 2009 10
    11. Block or Inline? • All elements belongs to either Block or Inline • Block - p, div, table • Inline - span, b/strong, i/em, u, img, a • Block CANNOT be inside Inline • <em><p>content</p></em> Tuesday, February 3, 2009 11
    12. Common Attributes • Core Attributes • i18n Attributes • Event Attributes Internationalization Count characters between i and n Tuesday, February 3, 2009 12
    13. Core Attributes • id - unique identifier Used by screen reader • class - assign type • title - add more information, show tooltip • style - inject inline style Tuesday, February 3, 2009 13
    14. i18n Attributes • dir - content direction ltr, trl • xml:lang - en, de Just forget it! Tuesday, February 3, 2009 14
    15. Event Attributes • onclick • ondbclick • onmouseoever • onmouseout • onkeypress • etc... Tuesday, February 3, 2009 15
    16. Text Elements • paragraph - p • line break - br • emphasis - i/em • head - h • Two br IS NOT p • Avoid i and b - using em and strong Tuesday, February 3, 2009 16
    17. Semantic HTML Please... • Two br IS NOT p • Look like start a new paragraph • What about the meaning? • Avoid i and b - using em and strong • Look similar • What about the meaning? • The problem is accessibility Tuesday, February 3, 2009 17
    18. XHTML • eXtensible HTML • Combination of XML and HTML • Tags from HTML • Rule from XML Tuesday, February 3, 2009 18
    19. Why XHTML? • We are living in 2009 • Industry standards • Cross browsers support • Validated Tuesday, February 3, 2009 19
    20. XHTML structure • One root element per document • Properly nested elements • Close elements • Lowercase elements Tuesday, February 3, 2009 20
    21. Properly nested elements Bad Good <p> <p> this<strong>is<em> this<strong>is<strong> </strong>wrong</em> <em>right</em> </p> </p> Tuesday, February 3, 2009 21
    22. Closed elements Bad Good <p>paragraph1 <p>paragraph1</p> <p>paragraph2 <p>paragraph2</p> <br> <br /> <hr> <hr /> <img src=”icon.png”> <img scr=”icon.png” /> Tuesday, February 3, 2009 22
    23. Lowercase elements Bad Good <P> <p> paragraph3 paragraph3 <Img Src=”icon.png”/> <img src=”icon.png”/> </p> </p> Tuesday, February 3, 2009 23
    24. More Syntax Bad Good <table WIDTH=100%> <table width=”100%”> <tr> <tr> <td>col1</td> <td>col1</td> </tr> </tr> </table> </table> <input checked> <input checked=”checked”> <option selected> <option selected=”selected”> </option> </option> Tuesday, February 3, 2009 24
    25. Sample <!DOCTYPE - html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"> <html> <head> What does it means? <title>Hello HTML</title> </head> <body> <p>Hello World!!</p> </body> </html> Tuesday, February 3, 2009 25
    26. Document Type Declaration • Drive how browser render this document • Beware - if not declare your document may run in Quirks mode and your life will be in • XHTML 1.0 Transitional trouble! Tuesday, February 3, 2009 26
    27. Need to know more? • There are plenty of (X)HTML tutorials over the internet. Go and read some! • Just Googling “XHTML” • For me, wikipedia is a good place to get started • W3Schools is a good reference when you forget some tags as I always do :) Tuesday, February 3, 2009 27
    28. Need to know more? Read these useful books Tuesday, February 3, 2009 28
    29. Foundation of Web Application Development Series • Part 1 - XHTML • Part 2 - CSS Others are coming soon! • Part 3 - JavaScript • Part 4 - Server-Side Scripts Tuesday, February 3, 2009 29
    30. more presentations available in http://www.vashira.com Tuesday, February 3, 2009 30

    + Vashira RavipanichVashira Ravipanich, 9 months ago

    custom

    865 views, 3 favs, 1 embeds more stats

    My first presentation of the "Foundation of Web App more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 865
      • 854 on SlideShare
      • 11 from embeds
    • Comments 0
    • Favorites 3
    • Downloads 47
    Most viewed embeds
    • 11 views on http://www.vashira.com

    more

    All embeds
    • 11 views on http://www.vashira.com

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories