foundation of web application developmnet - xhtml
DESCRIPTION
My first presentation of the "Foundation of Web Application Development" series, which I used in in-house training. Hope it useful for the others.TRANSCRIPT
XHTMLFoundation of Web Application Development - Part 1
Vashira Ravipanichwww.vashira.com
1Tuesday, February 3, 2009
Road Map
• Build it! : XHTML
• Paint it! : CSS
• Make it fly! : JavaScript
• Hook with data! : Server Side Scripts
2Tuesday, February 3, 2009
Road Map
• Build it! : XHTML
• Paint it! : CSS
• Make it fly! : JavaScript
• Hook with data! : Server-Side Scripts
We are here
3Tuesday, February 3, 2009
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...
4Tuesday, February 3, 2009
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!
5Tuesday, February 3, 2009
Let’s build the web
Any Text editor would be more than enough!
6Tuesday, February 3, 2009
Web Taxonomy
• Hyperlinks
• URL = Uniform Resource Locator
• HTTP = HyperText Transfer Protocol
• Browser = HTML reader/interpreter
where is it?
How to get it?
Display it
7Tuesday, February 3, 2009
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
8Tuesday, February 3, 2009
HTML markup
• Elements
• Attributes
• <element-name attribute=”value”>content</element-name>
• Tags - <p>, <ul>, <li>, <b>, <i>, <input>
• and a lot more...
9Tuesday, February 3, 2009
Sample<html>
<head> <title>Hello HTML</title>
</head> <body>
<p>Hello World!!</p> </body>
</html>
10Tuesday, February 3, 2009
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>
11Tuesday, February 3, 2009
Common Attributes
• Core Attributes
• i18n Attributes
• Event AttributesInternationalization
Count characters between i and n
12Tuesday, February 3, 2009
Core Attributes
• id - unique identifier
• class - assign type
• title - add more information, show tooltip
• style - inject inline style
Used by screen reader
13Tuesday, February 3, 2009
i18n Attributes
• dir - content direction ltr, trl
• xml:lang - en, de
Just forget it!
14Tuesday, February 3, 2009
Event Attributes
• onclick
• ondbclick
• onmouseoever
• onmouseout
• onkeypress
• etc...
15Tuesday, February 3, 2009
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
16Tuesday, February 3, 2009
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
17Tuesday, February 3, 2009
XHTML
• eXtensible HTML
• Combination of XML and HTML
• Tags from HTML
• Rule from XML
18Tuesday, February 3, 2009
Why XHTML?
• We are living in 2009
• Industry standards
• Cross browsers support
• Validated
19Tuesday, February 3, 2009
XHTML structure
• One root element per document
• Properly nested elements
• Close elements
• Lowercase elements
20Tuesday, February 3, 2009
Properly nested elements
<p>this<strong>is<em></strong>wrong</em></p>
<p>this<strong>is<strong><em>right</em></p>
Bad Good
21Tuesday, February 3, 2009
Closed elements
<p>paragraph1<p>paragraph2<br><hr><img src=”icon.png”>
<p>paragraph1</p><p>paragraph2</p><br /><hr /><img scr=”icon.png” />
Bad Good
22Tuesday, February 3, 2009
Lowercase elements
<P> paragraph3 <Img Src=”icon.png”/></p>
<p> paragraph3 <img src=”icon.png”/></p>
Bad Good
23Tuesday, February 3, 2009
More Syntax
<table WIDTH=100%> <tr> <td>col1</td> </tr></table>
<input checked><option selected></option>
<table width=”100%”> <tr> <td>col1</td> </tr></table>
<input checked=”checked”><option selected=”selected”></option>
Bad Good
24Tuesday, February 3, 2009
Sample<!DOCTYPE - html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head> <title>Hello HTML</title>
</head> <body>
<p>Hello World!!</p> </body>
</html>
What does it means?
25Tuesday, February 3, 2009
Document Type Declaration
• Drive how browser render this document
• Beware - if not declare your document may run in Quirks mode
• XHTML 1.0 Transitionaland your life will be in
trouble!
26Tuesday, February 3, 2009
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 :)
27Tuesday, February 3, 2009
Need to know more?Read these useful books
28Tuesday, February 3, 2009
Foundation of Web Application Development Series
• Part 1 - XHTML
• Part 2 - CSS
• Part 3 - JavaScript
• Part 4 - Server-Side Scripts
Others are coming soon!
29Tuesday, February 3, 2009
http://www.vashira.commore presentations available in
30Tuesday, February 3, 2009