SlideShare a Scribd company logo
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

PPT
Web Development using HTML & CSS
PPTX
Introduction to Web Development
PPTX
HTML (Web) basics for a beginner
PPT
JavaScript Basics
PPTX
HTTP request and response
PPTX
HTML frames and HTML forms
PPTX
Web Development
PPTX
Introduction to ajax
Web Development using HTML & CSS
Introduction to Web Development
HTML (Web) basics for a beginner
JavaScript Basics
HTTP request and response
HTML frames and HTML forms
Web Development
Introduction to ajax

What's hot (20)

PPTX
PPT
Js ppt
PDF
Web Development Presentation
PPTX
Html forms
PPTX
Html5
PPT
Advanced Web Development
PPTX
Asp.NET Validation controls
PPTX
WWW, Website & Webpage
PPTX
Web Development
PPTX
Java script
PPT
Web Servers (ppt)
PDF
Intro to html 5
PPT
Introduction to JavaScript
PDF
IT2255 Web Essentials - Unit IV Server-Side Processing and Scripting - PHP.pdf
PPT
Ppt of web development
PPTX
Javascript
PPTX
Front End Development | Introduction
PPTX
Ajax
PPT
Introduction to JavaScript (1).ppt
PPTX
Web services
Js ppt
Web Development Presentation
Html forms
Html5
Advanced Web Development
Asp.NET Validation controls
WWW, Website & Webpage
Web Development
Java script
Web Servers (ppt)
Intro to html 5
Introduction to JavaScript
IT2255 Web Essentials - Unit IV Server-Side Processing and Scripting - PHP.pdf
Ppt of web development
Javascript
Front End Development | Introduction
Ajax
Introduction to JavaScript (1).ppt
Web services
Ad

Viewers also liked (20)

PPT
Basic Web Concepts
PPT
Web Application Development Fundamentals
PPTX
Introduction to Web Architecture
PDF
Fundamentals of Web Development For Non-Developers
PDF
AIGA: Designing for CMS
PDF
Introduction to Web Terminology
PPTX
Web Terminologies
PPT
Introduction to Social Media
ODP
Introduction to Web Programming with Perl
PDF
Introduction to Web Programming
PPTX
Advantages & Disadvantages of Email
PDF
Web Programming Intro
PPT
Introduction to Web Programming - first course
PPTX
Web Application Development
PPTX
Introduction to Email
PPTX
Web application architecture
PPT
hosting.ppt
PPTX
Web page concept final ppt
PDF
Intro to WordPress theme development
PDF
social networking sites
Basic Web Concepts
Web Application Development Fundamentals
Introduction to Web Architecture
Fundamentals of Web Development For Non-Developers
AIGA: Designing for CMS
Introduction to Web Terminology
Web Terminologies
Introduction to Social Media
Introduction to Web Programming with Perl
Introduction to Web Programming
Advantages & Disadvantages of Email
Web Programming Intro
Introduction to Web Programming - first course
Web Application Development
Introduction to Email
Web application architecture
hosting.ppt
Web page concept final ppt
Intro to WordPress theme development
social networking sites
Ad

Similar to Introduction to Basic Concepts in Web (20)

PDF
Introduction to Web Standards
PDF
Intro to Web Standards
PPTX
Www and http
PPT
A detailed presentation on the World Wide Web
PPT
www | HTTP | HTML - Tutorial
PPT
PDF
Web Programming introduction
PPTX
Web technology Unit-II Part A
PDF
Introduction to the World Wide Web
PPTX
UNIT 1 (8).pptx
PPTX
Www(alyssa) (2)
PPTX
Web technology introduction to the web and its history
PPT
WebEssentials- lecture 3.ppt
PPTX
MADS4007_Fall2022-Intro to Web Technologies.docx.pptx
PDF
Web Introduction
PPTX
Basics of the Web Platform
PDF
WT_TOTAL.pdf
PDF
Unit 4 - HTTP and the Web Services - IT
Introduction to Web Standards
Intro to Web Standards
Www and http
A detailed presentation on the World Wide Web
www | HTTP | HTML - Tutorial
Web Programming introduction
Web technology Unit-II Part A
Introduction to the World Wide Web
UNIT 1 (8).pptx
Www(alyssa) (2)
Web technology introduction to the web and its history
WebEssentials- lecture 3.ppt
MADS4007_Fall2022-Intro to Web Technologies.docx.pptx
Web Introduction
Basics of the Web Platform
WT_TOTAL.pdf
Unit 4 - HTTP and the Web Services - IT

More from Jussi Pohjolainen (20)

PDF
Moved to Speakerdeck
PDF
Java Web Services
PDF
Box2D and libGDX
PDF
libGDX: Screens, Fonts and Preferences
PDF
libGDX: Tiled Maps
PDF
libGDX: User Input and Frame by Frame Animation
PDF
Intro to Building Android Games using libGDX
PDF
Advanced JavaScript Development
PDF
Introduction to JavaScript
PDF
Introduction to AngularJS
PDF
libGDX: Scene2D
PDF
libGDX: Simple Frame Animation
PDF
libGDX: Simple Frame Animation
PDF
libGDX: User Input
PDF
Implementing a Simple Game using libGDX
PDF
Building Android games using LibGDX
PDF
Android Threading
PDF
Creating Asha Games: Game Pausing, Orientation, Sensors and Gestures
PDF
Creating Games for Asha - platform
PDF
Intro to Asha UI
Moved to Speakerdeck
Java Web Services
Box2D and libGDX
libGDX: Screens, Fonts and Preferences
libGDX: Tiled Maps
libGDX: User Input and Frame by Frame Animation
Intro to Building Android Games using libGDX
Advanced JavaScript Development
Introduction to JavaScript
Introduction to AngularJS
libGDX: Scene2D
libGDX: Simple Frame Animation
libGDX: Simple Frame Animation
libGDX: User Input
Implementing a Simple Game using libGDX
Building Android games using LibGDX
Android Threading
Creating Asha Games: Game Pausing, Orientation, Sensors and Gestures
Creating Games for Asha - platform
Intro to Asha UI

Recently uploaded (20)

PDF
Classroom Observation Tools for Teachers
PPTX
PPT- ENG7_QUARTER1_LESSON1_WEEK1. IMAGERY -DESCRIPTIONS pptx.pptx
PDF
Black Hat USA 2025 - Micro ICS Summit - ICS/OT Threat Landscape
PDF
Module 4: Burden of Disease Tutorial Slides S2 2025
PPTX
Lesson notes of climatology university.
PPTX
GDM (1) (1).pptx small presentation for students
PPTX
human mycosis Human fungal infections are called human mycosis..pptx
PDF
O5-L3 Freight Transport Ops (International) V1.pdf
PDF
Basic Mud Logging Guide for educational purpose
PPTX
Pharmacology of Heart Failure /Pharmacotherapy of CHF
PDF
RMMM.pdf make it easy to upload and study
PDF
Abdominal Access Techniques with Prof. Dr. R K Mishra
PPTX
Pharma ospi slides which help in ospi learning
PDF
VCE English Exam - Section C Student Revision Booklet
PDF
Pre independence Education in Inndia.pdf
PDF
Supply Chain Operations Speaking Notes -ICLT Program
PDF
Microbial disease of the cardiovascular and lymphatic systems
PPTX
1st Inaugural Professorial Lecture held on 19th February 2020 (Governance and...
PPTX
PPH.pptx obstetrics and gynecology in nursing
PPTX
school management -TNTEU- B.Ed., Semester II Unit 1.pptx
Classroom Observation Tools for Teachers
PPT- ENG7_QUARTER1_LESSON1_WEEK1. IMAGERY -DESCRIPTIONS pptx.pptx
Black Hat USA 2025 - Micro ICS Summit - ICS/OT Threat Landscape
Module 4: Burden of Disease Tutorial Slides S2 2025
Lesson notes of climatology university.
GDM (1) (1).pptx small presentation for students
human mycosis Human fungal infections are called human mycosis..pptx
O5-L3 Freight Transport Ops (International) V1.pdf
Basic Mud Logging Guide for educational purpose
Pharmacology of Heart Failure /Pharmacotherapy of CHF
RMMM.pdf make it easy to upload and study
Abdominal Access Techniques with Prof. Dr. R K Mishra
Pharma ospi slides which help in ospi learning
VCE English Exam - Section C Student Revision Booklet
Pre independence Education in Inndia.pdf
Supply Chain Operations Speaking Notes -ICLT Program
Microbial disease of the cardiovascular and lymphatic systems
1st Inaugural Professorial Lecture held on 19th February 2020 (Governance and...
PPH.pptx obstetrics and gynecology in nursing
school management -TNTEU- B.Ed., Semester II Unit 1.pptx

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…