Basics of Web Technologies

Learning Outcomes The evolution of the Internet, Internet standards organizations, and the difference between the Internet, intranets, and extranets. The beginning of the World Wide Web, ethical use of information on the Web, Web Accessibility, and future Internet trends. The Client/Server Model, Internet Protocols, Networks, URLs and Domain Names.

The Internet Interconnected network of computer networks. Internet is composed of collection of networks connecting millions of computers together. Internet consists of hardware and software infrastructure that enables computers to communicate and exchange information.

The Evolution of the Internet ARPAnet Advanced Research Project Agency 1969 – four computers connected NSFnet National Science Foundation Use of the Internet was originally limited to government, research and academic use 1991 Commercial ban lifted

Intranet & Extranets Intranet A private network contained within an organization or business used to share information and resources among coworkers. Extranet A private network that securely shares part of an organization’s information or operations with external partners

The World Wide Web The World Wide Web (WWW) is a system of interlinked hypertext documents accessed via the Internet. With a web browser, one can view web pages that may contain text, images, videos, and other multimedia and navigate between them by using hyperlinks.

WWW: The World Wide Web The World Wide Web (WWW) was developed by Tim Berners-Lee and other research scientists at CERN, the European center for nuclear research, in the late 1980s and early 1990s. WWW is a client-server model and uses TCP connections to transfer information or web pages from server to client. WWW uses a Hypertext model. Hypertext allows interactive accesses to a collection of documents. Documents can hold Text (hypertext), Graphics, Sound, Animations, Video Documents are linked together Non-distributed – all documents stored locally (e.g on CD-Rom). Distributed – documents stored at remote servers on the Internet.

WWW - Hyperlinks (or links) Each document contains links (pointers) to other documents. The link represented by "active area" on screen Graphic - button Text - highlighted By selecting a particular link, the client fetches the referenced document from a server for display. Links may become invalid. Link is simply a text name for a remote document. Remote document may be moved to a new location while name in link remains in place.

WWW – Document Representation Each WWW document is called a page. Initial page for individual or organization is called a home page. Page can contain many different types of information; page must specify: Content – The actual information Type of content – The type of information, e.g. text, pictures etc Links to other documents Rather than having a fixed representation for every browser, pages are formatted with a mark up language. This allows browser to format page to fit display. Standard is called HyperText Markup Language (HTML).

Web Documents – Static Documents Fixed-content documents that are created and stored in a server. The client can get only a copy of the document. The content of the file is determined when the file is created, not when it is used. When a client accesses the document, a copy of the document is sent. The user can then use a browsing program to display the document.

Web Documents – Dynamic Documents Created by a Web server whenever a browser requests the document. When a request arrives, the Web server runs an application program or a script that creates a dynamic document. The server returns the output of the program or script as a response to the browser that requested the document.

Basic Internet Protocols TCP/IP is fundamental to the Internet Email, web browsing, file downloads, accessing database are built on top of TCP and IP protocols TCP is the Transmission Control Protocol TCP extends IP to provide added functionality However, only IP is fundamental to the definition of Internet IP address: Each device connected to the Internet has a unique numeric IP address. 32 bit number (sequence of 4 decimal numbers separated by dots, for example: http://74.125.224.72) Other protocols: UDP, FTP, SMTP etc.

UDP- User Datagram Protocol An alternative protocol to TCP It builds on IP Does not provide two-way connection Does not provide guaranteed delivery unlike TCP Faster than TCP for simple tasks Used for tasks like downloading video, short message etc.

FTP: File Transfer Protocol People required a protocol to reliably transfer files between any two computers connected to the Internet. FTP is a client/server program An FTP client program enables the user to interact with an ftp server in order to access files on the ftp server computer. FTP provides similar services to those available on most filesystems: list directories, create new files, download files, delete files. FTP uses TCP connections and the default server port for FTP is 21.

Web Standards and the W3C Consortium W3C – World Wide Web Consortium Develops recommendations and prototype technologies related to the Web Produces specifications, called Recommendations, in an effort to standardize web technologies

Web Accessibility WAI – Web Accessibility Initiative Develops recommendations for Web content developers, Web authoring tool developers, Developers of web browsers, and Developers of other user agents to facilitate use of the web by those with special needs. WCAG Web Content Accessibility Guidelines http://www.w3.org/WAI/WCAG20/quickref/

Web Architecture Resources are identified by URIs. URIs identify any resource (e.g., multimedia, databases and publications). Resources have different representations (e.g., HTML and PDF).

Uniform Resource Locator (URL) A client that wants to access a Web page needs the address to that page. The Uniform Resource Locator (URL) is a standard for specifying any kind of information on the Internet. The URL defines four things: protocol, host computer, port and path. :// : / Protocol Host Port Path

Domain Name What is “Domain Name”? It is a unique name for your website. To get a domain name you have to register the name from domain name registration companies like eHost.com. Example: www.google.com What is “Domain Name System”? It is a hierarchical decentralized naming system for computers, services, or any resource connected to the Internet or a private network. It associates various information with domain names , including IP addresses.

Top-Level Domain Name (TLD) A top-level domain (TLD) identifies the right-most label of the domain name. Current generic TLDs: .com, .org, .net, .mil, .gov, .edu, .int, .aero, .asia, .cat, .jobs, .name, .biz, .mobi, .museum, .info, .coop, .post, .pro, .tel, .travel.

WWW – Identifying a web page A web page is identified by: The protocol used to access the web page. The host is the computer on which the web page is stored. The TCP port that the server is listening on to allow a client to access the web page. The path is the directory pathname of web page on server (the file where the information is located). Specific syntax for Uniform Resource Locator (URL): protocol://computer_name:port/document_name Protocol can be http, UDP, SMTP, FTP, mailto.

WWW – Identifying a web page Computer name can be DNS name or IP address. TCP port is optional (http uses port 80 as its default port). document_name is path on server to web page (file). E.g. http://www.yahoo.com/Recreation/Sports/Soccer/index.html Protocol is http Computer name or DNS name is www.yahoo.com Port number is the default port for http, i.e. port 80. Document name is /Recreation/Sports/Soccer/index.html

Checkpoint 1.1 1. Describe the difference between the Internet and an intranet. 2. Describe the difference between the Internet and the Web.

The Web Experience A user clicks on a link in a browser The browser communicates with a web server using HTTP. The server sends an HTML document back. The browser displays the document. The user clicks on another link and activates another URL. Web client (browser) Request Reponse Web server

WWW – Client Server Model The browser is the client, WWW (or web) server is the server. Browser: The browser makes TCP connection to the web server. The browser sends request for the particular web page that it wishes to display. The browser reads the contents of the web page from the TCP connection and displays it in the browsers window. The browser closes the TCP connection used to transfer the web page. Each separate item in a web page (e.g., pictures, audio) require a separate TCP connection. HyperText Transport Protocol (HTTP) specifies commands that the client (browser) issues to the server (web server) and the responses that the server sends back to the client.

Figure 1-1: Web client/server architecture WWW – Client Server Model Figure 1-1: Web client/server architecture

Web Server Basics Web servers are continually connected to the Internet All communications between browsers and servers use Hypertext Transfer Protocol (HTTP). Web servers provide responses to browser requests, either existing documents or dynamically built documents. When a client is connected. The server reads the HTTP request, performs some lookup function and sends HTTP response and the requested data.

Serving a Page User of client machine types in a URL

Serving a Page Server name is translated to an IP address via DNS client server (Netscape) (Apache) http:// www.smallco.com /index.html 192.22.107.5

Serving a Page Client connects to server using IP address and port number

Serving a Page Client determines path and file to request

Serving a Page Client sends HTTP request to server

Serving a Page Server determines which file to send

Serving a Page Server sends response code and the document

Serving a Page Connection is broken

The basic client/server request/response sequence

A dynamic client/server request/response sequence

HTTP Protocol The Hypertext Transfer Protocol (HTTP) is: A protocol used mainly to access data on the World Wide Web. Designed for document transfer Specifies how a server and client communicate Most HTTP messages are sent using TCP Stateless no persistent client/server connection

WWW – HTTP Protocol When a user types in http://www.yahoo.com/Recreation/Sports/Soccer/index.html, the broswer creates a HTTP GET Request message and sends it over a TCP connection to the web server. In the above case, the HTTP GET Request message would be GET /Recreation/Sports/Soccer/index.html HTTP/1.0 User-Agent: InternetExplorer/5.0 Accept: text/html, text/plain, image/gif, audio/au “\r\n”

Message body (Optional Data) WWW – HTTP Request messages HTTP Request messages are sent from client to server. A blank line Request Line Message body (Optional Data) HTTP Headers Additional information such as brower being used, media types accepted Delimiter Carriage return Line feed User data e.g. contents of completed form Type of Request (e.g. GET)

WWW – HTTP Request messages – Request line Request type URL HTTP version Space Space Request type: This field is used in request messages. In version 1.1 of HTTP, several request types as defined. The request type is categorized into methods as follows: Get – Used to request a web page from a web server Post – Used to send data (e.g. results of registration form) to a web server Head – Requests information about a document but not the document itself. Used by search engines to test the validity of hyperlinks Put / Delete – Not typically implemented by browsers.

Message body (Optional Data) WWW – HTTP Response messages HTTP Response messages are sent from server to client. A blank line Status Line Message body (Optional Data) HTTP Headers Success/Failure Indication Number between 200 and 599 Type of content returned e.g. text/html or image/gif Requested Data e.g. web page Delimiter

WWW – HTTP response messages – Status line HTTP version Status code Status phrase Space Space The Status Line gives information about the success of the previous HTTP Request Status code: this field is used in the response message. It consists of three digits, as follows: The codes in the 200 range indicate a successful request (200 – 299). The codes in the 300 range redirect the client to another URL; meaning that the document has been moved (300 – 399). The codes in the 400 range indicate an error at the client side– Bad Request, Unauthorised, Not found (400 – 499) The codes in the 500 range indicate an error at the server side– Internal Error, Service Overloaded (500 – 599). Status phrase: this field explains the status code in text form (e.g., OK for 200 and Bad request for 400)

Example: HTTP request and response messages Request message Server Client POST /cgi-bin/doc.pl HTTP/1.1 Accept: */* Accept: image/gif Accept: image/jpeg Content-length: 50 (Input information) Response message HTTP/1.1 200 OK Date: Mon, 07-Jan-02 13:15:14 GMT Server: Challenger MIME-version: 1.0 Content-length: 2000 (Body of the document)

MIME MIME Multipurpose Internet Mail Extensions Standards for encoding different media types in a message Originally developed for emailing files and messages in different languages

WWW – Caching Web pages Downloading HTML documents from servers can be slow due to a number of conditions: Parts of the Internet can be congested Dialup connection is typically very slow, 33Kbps or 56Kbps Web server can have a lot of clients connecting to it at the same time, causing it to be overloaded. If a user returns to previous HTML document, then this could require downloading the document from the server again. A browser can hold copies of recently visited pages. This avoids having to download pages again. An organization can use a HTTP proxy that caches documents for multiple users. Thus improving the speed at which pages can be displayed on each users computer.

WWW – Browser Architecture D i s p l a y r v e Input from keyboard and mouse Controller html interpreter Output sent to display … optional plugins HTTP client Other client … Network Interface Communication with remote server

WWW – Browser Architecture Browser has more components than a server: Display driver for painting screen. HTML interpreter for formatting HTML documents. Plugins to display different content (e.g., Shockwave or Real Audio content) HTTP client to fetch HTML documents from WWW server. Other clients for other protocols (e.g., ftp, mail) Controller also must accept input from the computer user through the mouse or keyboard.