Foundation of Web Application Developmnet - XHTML
•
6 likes•7,711 views
My first presentation of the "Foundation of Web Application Development" series, which I used in in-house training. Hope it useful for the others.
Recommended
Recommended
More Related Content
What's hot
Viewers also liked
Similar to Foundation of Web Application Developmnet - XHTML
Similar to Foundation of Web Application Developmnet - XHTML (20)
More from Vashira Ravipanich
Recently uploaded
Recently uploaded (20)
Foundation of Web Application Developmnet - XHTML
- 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 quot;-//W3C//DTD XHTML 1.0 Transitional//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdquot;> <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