Basic concepts about Internet and Web. Including TCP/IP, HTTP, DOM, DHTML, SOAP.

1. Reintroducing to Web
Technology
Isriya Paireepairit

2. Agenda
• HTTP
• XML
• HTML/XHTML
• CSS
• JavaScript
• DOM
• SVG
• Unicode

3. HTTP
• “HyperText Transfer Protocol”
• Latest version: 1.1
• Familiar terms for web developers
• GET, POST, 404
• Encrypted version called HTTPS vis SSL
(now TLS)
• Port 80

4. HTTP role in Internet
Protocol
• TCP/IP Stack pic

5. HTTP Advantage
• All browsers support HTTP 1.1
• Other protocol can be blocked via Firewall
• SMTP, POP3, IMAP, IRC, NNTP, BitTorrent
• So that all web frameworks are built on
HTTP
• We will cover this again in AJAX topic

6. Technologies on top of
HTTP
• XML-RPC
• XMLHttpRequest (used in AJAX)
• SOAP
• Web Service

7. XML
• “Extensible Markup Language”
• Latest version is 1.1
• Simplified version of SGML
• De Facto format for data exchange via web
• Simply text file, with HTML-like syntax
• Tag scheme is definable by users

8. XML schema
• The document for checking XML syntax
• There are big 3
• DTD - oldest, not in XML format
• XML Schema (or XSD) - designed to
replace DTD, XMLed but too complex
• RELAX NG - newest, reduce complication

9. XML Correctness
• 2 States
• Well-formed
• Correct in term of XML syntax rules
• Validate
• Logically correct with XML schema

10. HTML
• HyperText Markup Language
• The language that describes “Web Page”
• Simply text file, human readable
• Latest version is HTML 4.0

11. XHTML
• XHTML is XMLified HTML
• or “HTML in XML format”
• XHTML 1.0 is very similar to HTML 4.0
• XHTML has all XML properties (e.g. well-
formed, valid)

12. XHTML Version
• XHTML 1.0
• Transitional - allow deprecated elements
• <center> <u> <strike>
• Strict - deprecated are not allow
• Use CSS instead for presentation
• XHTML 1.1
• Modularized XHTML 1.0 Strict

13. CSS
• Cascading Style Sheet
• Simply text file to describe XML/HTML
presentation
• Separate “style” from “content”
• 3 levels: CSS1, CSS2, CSS3
• There is no browser support full CSS2
• IE has many problem with CSS1

14. JavaScript
• A programming language
• Formal name is “ECMA Script”
• Interpreting (or scripting) not compiling
• Not related with Java (only name)
• De Facto script for web
• Latest version is 1.5, but 1.0 is enough
• IE6 supports only JavaScript 1.0

15. DOM
• Document Object Model
• W3C Standard
• A “method”, not implementation
• Tell us how objects in page are related to
each other
• Using Tree diagram

16. DOM Demo
• Using Mozilla DOM Inspector
• Very useful for web developers

17. What is DHTML?
• “Dynamic HTML”
• Technic that makes web interactive
• Not technology itself, just set of existing
technology
• Including HTML, CSS, DOM, JavaScript

18. SVG
• Scalable Vector Graphics
• XML-based vector graphics format
• Compete with Macromedia Flash
• Can do animation
• Browser support is rapidly growing

19. SVG Demo
• Mozilla SVG Tiger

20. Unicode
• Unicode is universal character encoding
• Unicode has some mode, UTF-8 is most
popular
• Each Thai character uses 3 bytes in UTF-8
• Compare with 1 byte in TIS-620
• Anyway, Unicode is recommended for new
web

21. Canvas
• Another HTML extension from Apple
• De Facto
• Intend to render scriptable bitmap image
• Used in Mac OS X Dashboard
• Currently supported by Mozilla and KDE
• Use by <canvas>