Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

Foundation of Web Application Developmnet - XHTML

•
•
Vashira Ravipanich
Vashira Ravipanich

My first presentation of the "Foundation of Web Application Development" series, which I used in in-house training. Hope it useful for the others.

1 of 30
Download to read offline
XHTML Foundation of Web Application Development - Part 1 Vashira Ravipanich www.vashira.com Tuesday, February 3, 2009 1
Road Map • Build it! : XHTML • Paint it! : CSS • Make it fly! : JavaScript • Hook with data! : Server Side Scripts Tuesday, February 3, 2009 2
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
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
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
Let’s build the web Any Text editor would be more than enough! Tuesday, February 3, 2009 6
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
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
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
Sample <html> <head> <title>Hello HTML</title> </head> <body> <p>Hello World!!</p> </body> </html> Tuesday, February 3, 2009 10
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
Common Attributes • Core Attributes • i18n Attributes • Event Attributes Internationalization Count characters between i and n Tuesday, February 3, 2009 12
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
i18n Attributes • dir - content direction ltr, trl • xml:lang - en, de Just forget it! Tuesday, February 3, 2009 14
Event Attributes • onclick • ondbclick • onmouseoever • onmouseout • onkeypress • etc... Tuesday, February 3, 2009 15
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
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
XHTML • eXtensible HTML • Combination of XML and HTML • Tags from HTML • Rule from XML Tuesday, February 3, 2009 18
Why XHTML? • We are living in 2009 • Industry standards • Cross browsers support • Validated Tuesday, February 3, 2009 19
XHTML structure • One root element per document • Properly nested elements • Close elements • Lowercase elements Tuesday, February 3, 2009 20
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
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
Lowercase elements Bad Good <P> <p> paragraph3 paragraph3 <Img Src=”icon.png”/> <img src=”icon.png”/> </p> </p> Tuesday, February 3, 2009 23
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
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
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
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
Need to know more? Read these useful books Tuesday, February 3, 2009 28
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
more presentations available in http://www.vashira.com Tuesday, February 3, 2009 30

More Related Content

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