Foundation of Web Application Developmnet - XHTML

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 ﬂy! : 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 ﬂy! : JavaScript • Hook with data! : Server-Side Scripts Tuesday, February 3, 2009 3

Let’s build the web • Build web pages is not a difﬁcult 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 - , <ul>, <li>, , , <input> • and a lot more... Tuesday, February 3, 2009 9

Sample <html> <head> <title>Hello HTML</title> </head> <body> Hello World!! </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 • content 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 identiﬁer 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 thisis thisis wrong right Tuesday, February 3, 2009 21

Closed elements Bad Good paragraph1 paragraph1 paragraph2 paragraph2 <hr> <hr /> <img src=”icon.png”> <img scr=”icon.png” /> Tuesday, February 3, 2009 22

Lowercase elements Bad Good paragraph3 paragraph3 <Img Src=”icon.png”/> <img src=”icon.png”/> 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 \"-//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> Hello World!! </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

Foundation of Web Application Developmnet - XHTML

0 comments

Notes on slide 1

3 Favorites