SlideShare a Scribd company logo

Introduction to Basic Concepts in Web

•
•
Jussi Pohjolainen
Jussi Pohjolainen

The document introduces some basic concepts of web application programming including HTTP, clients and servers, resources, requests and responses. HTTP is a stateless protocol used to transfer information on intranets and the World Wide Web. It defines request and response methods between clients and servers. Clients such as web browsers make HTTP requests to servers, which store and provide resources/files in response. Common resources are accessed via URLs. HTTP requests use methods like GET to retrieve representations of resources. A GET request involves opening a connection, sending the request, and reading the response. Responses contain header information and the requested resource. Standards like HTML, CSS, XML, and JavaScript are used to structure modern web documents and provide inter

Related slideshows

Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1
 
Introduction to Web Development
Introduction to Web DevelopmentIntroduction to Web Development
Introduction to Web Development
 
Basics of JavaScript
Basics of JavaScriptBasics of JavaScript
Basics of JavaScript
 
1 of 23
Web Application Programming Introduction to Basic Concepts Jussi Pohjolainen TAMK University of Applied Sciences
HTTP Client and Server Interaction
Intro to HTTP HTTP ( Hypertext transfer protocol ) is a stateless protocol, which is meant to transfer information on intranets and World Wide Web. RFC2616: http://www.w3.org/Protocols/rfc2616/rfc2616.html HTTP is a request / response standard between client and server
Clients and Servers Client Client makes a http request . Client can be a web browser, spider or other end-user tool Client is referred as a user agent Server Stores information and makes them available to the client Gives http response to the client
Resources Server provides resources to clients Resources can be accessed by HTTP using URLs ( Uniform Resource Locator ) Example http://www.tamk.fi/~jack/document.doc
Request and Response Client User-agent: Firefox Client Apache HTTP Server request response
Request GET HTTP defines eight methods that define a action which will be made to a resource Most typical method is GET By using the GET - method, client gets a representation of the resource. Example of getting a file URL: http://www.something.com/file.doc 1) Open connection to the server 2) Send following through the connection: GET /path/to/file.doc HTTP/1.0 3) Read the response
More on Request GET Typically HTTP client is a browser that creates the request automatically when user opens a url Browser creates the request which contains addition to the GET lot of other information.. For example, information about user agent!
Request and Response Client User-agent: Firefox Client Apache HTTP Server example request GET / HTTP/1.1 Host: www.tamk.fi User-Agent: Mozilla/5.0 (Mac..) ... response
Response When making a GET request to a certain URL, client gets a response Response consists of 1) Header information 2) Resource itself Browser makes decisions based on the header information..
Example of Response HTTP/1.1 200 OK Date: Fri, 12 Jan 2007 07:51:41 GMT Server: Apache/1.3.37 (Unix) Last-Modified: Wed, 10 Jan 2007 12:43:34 GMT ETag: &quot;479a0-16a9-45a4df76&quot; Accept-Ranges: bytes Content-Length: 5801 Connection: close Content-Type: text/html; charset=iso-8859-1 <html> <head> <title>... Header Resource
Request and Response Client User-agent: Firefox Client Apache HTTP Server example request GET / HTTP/1.1 Host: www.tamk.fi User-Agent: Mozilla/5.0 (Mac..) ... example response HTTP/1.1 200 OKDate: Fri, 12 Jan 2007 07:51:41 GMTServer: Apache/1.3.37 (Unix)... ... <html><head><title>...
Firefox and HTTP headers
WORLD WIDE WEB STANDARDS Jukka Siltanen and Jussi Pohjolainen
Why standards? The web is a very diverse environment Different computer hardware & software Different people with expectations and cultural backgrounds People with disabilities Computers as ‘users’ Lots of different kinds of media and levels of interaction The ultimate goal of standards is to ensure that the contents of Internet is universally accessible to everyone
HTML-markup language Hypertext Markup Language Hypertext means documents which can be internally linked to other documents Developed by Tim Berners-Lee in 1990 Won Millennium Technology Prize prize for his work in 2004 Originally HTML provided very little control over looks and no interaction apart from navigation
HTML-markup language World Wide Web was standardized in 1991 HTML became the standard for www-documents by mid 90’s W3C (World Wide Web Consortium) was founded in 1994 to coordinate the development of HTML and other web standards
HTML-standards HTML 2.0 v. 1996 HTML 3.2 v. 1997 First W3C recommendation Contained presentational elements HTML 4.0 v. 1997 Introduced CSS-style sheets to define presentational elements HTML 4.01 v. 1999 Included only fixes to 4.0 standard XHTML 1.x v. 2000 -> Current standard XML compatible HTML Content and presentation are separated
Problems with the HTML-standard Browser wars in the end of the 90’s Netscape and Microsoft developed non-standard features for their browsers to gain advantage over competition The visual appearance of web pages became more important than content itself Pages became overly complex to edit Slow to download and often browser dependent All of the newest browsers still do not comply to standards with causes problems in web page design Most HTML-documents on the web won’t scale to new breeds of web clients (i.e. mobile phones, PDAs, screen readers etc.)
Other www-standards CSS (Cascading Style Sheets): creates the look of a XHTML-document All presentational elements are specified in CSS file leaving only content and structure to the XHTML document W3C-recommendation from 1999 Two versions: CSS1 and CSS2 CSS3 in development Still some (minor and major) browser compatibility issues Using CSS is the best way to provide support for alternative web clients
Other www-stardards XML (Extensible Markup Language): General purpose language to provide structure for information Source of XHTML’s syntax JavaScript (officially EcmaScript) used for interaction on www-pages: One of the biggest problems in the browser wars – still significant differences in browsers Follows the DOM-model (Document Object Model), which defines the hierarchy of XHTML-elements DHTML (Dynamic HTML): Marketing term coined by Microsoft and Netscape for interactive web pages which use HTML, CSS and Javascript JavaScript was originally Netscape’s term but it has become general term for client-side HTML-scripting Is however not related to Java-programming language
Structure of a modern www-document Structure Looks Behavior HTML XHTML XML JavaScript DOM CSS1 CSS2
More information… Official standards on W3C web site: http://www.w3.org Difficult site for non-technically oriented Simple tutorials: W3Schools: http://www.w3schools.com/ Great articles: http://www.webstandards.org http://www.alistapart.com/ Search engines…

More Related Content

Introduction to Basic Concepts in Web

  • 1. Web Application Programming Introduction to Basic Concepts Jussi Pohjolainen TAMK University of Applied Sciences
  • 2. HTTP Client and Server Interaction
  • 3. Intro to HTTP HTTP ( Hypertext transfer protocol ) is a stateless protocol, which is meant to transfer information on intranets and World Wide Web. RFC2616: http://www.w3.org/Protocols/rfc2616/rfc2616.html HTTP is a request / response standard between client and server
  • 4. Clients and Servers Client Client makes a http request . Client can be a web browser, spider or other end-user tool Client is referred as a user agent Server Stores information and makes them available to the client Gives http response to the client
  • 5. Resources Server provides resources to clients Resources can be accessed by HTTP using URLs ( Uniform Resource Locator ) Example http://www.tamk.fi/~jack/document.doc
  • 6. Request and Response Client User-agent: Firefox Client Apache HTTP Server request response
  • 7. Request GET HTTP defines eight methods that define a action which will be made to a resource Most typical method is GET By using the GET - method, client gets a representation of the resource. Example of getting a file URL: http://www.something.com/file.doc 1) Open connection to the server 2) Send following through the connection: GET /path/to/file.doc HTTP/1.0 3) Read the response
  • 8. More on Request GET Typically HTTP client is a browser that creates the request automatically when user opens a url Browser creates the request which contains addition to the GET lot of other information.. For example, information about user agent!
  • 9. Request and Response Client User-agent: Firefox Client Apache HTTP Server example request GET / HTTP/1.1 Host: www.tamk.fi User-Agent: Mozilla/5.0 (Mac..) ... response
  • 10. Response When making a GET request to a certain URL, client gets a response Response consists of 1) Header information 2) Resource itself Browser makes decisions based on the header information..
  • 11. Example of Response HTTP/1.1 200 OK Date: Fri, 12 Jan 2007 07:51:41 GMT Server: Apache/1.3.37 (Unix) Last-Modified: Wed, 10 Jan 2007 12:43:34 GMT ETag: &quot;479a0-16a9-45a4df76&quot; Accept-Ranges: bytes Content-Length: 5801 Connection: close Content-Type: text/html; charset=iso-8859-1 <html> <head> <title>... Header Resource
  • 12. Request and Response Client User-agent: Firefox Client Apache HTTP Server example request GET / HTTP/1.1 Host: www.tamk.fi User-Agent: Mozilla/5.0 (Mac..) ... example response HTTP/1.1 200 OKDate: Fri, 12 Jan 2007 07:51:41 GMTServer: Apache/1.3.37 (Unix)... ... <html><head><title>...
  • 13. Firefox and HTTP headers
  • 14. WORLD WIDE WEB STANDARDS Jukka Siltanen and Jussi Pohjolainen
  • 15. Why standards? The web is a very diverse environment Different computer hardware & software Different people with expectations and cultural backgrounds People with disabilities Computers as ‘users’ Lots of different kinds of media and levels of interaction The ultimate goal of standards is to ensure that the contents of Internet is universally accessible to everyone
  • 16. HTML-markup language Hypertext Markup Language Hypertext means documents which can be internally linked to other documents Developed by Tim Berners-Lee in 1990 Won Millennium Technology Prize prize for his work in 2004 Originally HTML provided very little control over looks and no interaction apart from navigation
  • 17. HTML-markup language World Wide Web was standardized in 1991 HTML became the standard for www-documents by mid 90’s W3C (World Wide Web Consortium) was founded in 1994 to coordinate the development of HTML and other web standards
  • 18. HTML-standards HTML 2.0 v. 1996 HTML 3.2 v. 1997 First W3C recommendation Contained presentational elements HTML 4.0 v. 1997 Introduced CSS-style sheets to define presentational elements HTML 4.01 v. 1999 Included only fixes to 4.0 standard XHTML 1.x v. 2000 -> Current standard XML compatible HTML Content and presentation are separated
  • 19. Problems with the HTML-standard Browser wars in the end of the 90’s Netscape and Microsoft developed non-standard features for their browsers to gain advantage over competition The visual appearance of web pages became more important than content itself Pages became overly complex to edit Slow to download and often browser dependent All of the newest browsers still do not comply to standards with causes problems in web page design Most HTML-documents on the web won’t scale to new breeds of web clients (i.e. mobile phones, PDAs, screen readers etc.)
  • 20. Other www-standards CSS (Cascading Style Sheets): creates the look of a XHTML-document All presentational elements are specified in CSS file leaving only content and structure to the XHTML document W3C-recommendation from 1999 Two versions: CSS1 and CSS2 CSS3 in development Still some (minor and major) browser compatibility issues Using CSS is the best way to provide support for alternative web clients
  • 21. Other www-stardards XML (Extensible Markup Language): General purpose language to provide structure for information Source of XHTML’s syntax JavaScript (officially EcmaScript) used for interaction on www-pages: One of the biggest problems in the browser wars – still significant differences in browsers Follows the DOM-model (Document Object Model), which defines the hierarchy of XHTML-elements DHTML (Dynamic HTML): Marketing term coined by Microsoft and Netscape for interactive web pages which use HTML, CSS and Javascript JavaScript was originally Netscape’s term but it has become general term for client-side HTML-scripting Is however not related to Java-programming language
  • 22. Structure of a modern www-document Structure Looks Behavior HTML XHTML XML JavaScript DOM CSS1 CSS2
  • 23. More information… Official standards on W3C web site: http://www.w3.org Difficult site for non-technically oriented Simple tutorials: W3Schools: http://www.w3schools.com/ Great articles: http://www.webstandards.org http://www.alistapart.com/ Search engines…