Lecture 1: Basics of Web Technologies and Client-side

Language

Dr. Mohammad Anwar HossainSoftware Engineering Department, KSU

Learning Outcomes

• In this chapter, you will learn about:• The evolution of the Internet, Internet

standards organizations, and the difference between the Internet, intranets, and extranets.

• The beginning of the World Wide Web, and future Internet trends.

• The Client/Server Model, Internet Protocols, Networks, URLs and Domain Names, and Markup Languages.

2

The Evolution of the Internet

Internet◦ Interconnected network of computer networks◦ ARPAnet

Advanced Research Project Agency 1969 – four computers connected

◦ 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. (wiki)

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

Checkpoint 1.1

1. Describe the difference between the Internet and an intranet.

2. Describe the difference between the Internet and the Web.

WWW– 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).

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: 32 bit number (sequence of 4 decimal numbers separated by dots)

– 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– 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.– Client programs can be:

• Simple command line interfaces. E.g. MS-Dos PromptC:\ ftp ftp.maths.tcd.ie

• Integrated with Web browsers, e.g. Netscape Navigator, Internet Explorer.

– 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.

WWW – Identifying a web page– A web page is identified by:

• The protocol used to access the web page.

• 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.

• Directory pathname of web page on server.

– 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

WWW – Hyperlinks between web pages

– Each hyperlink is specified in HTML by using a special tag.

– An item on a page is associated with another HTML document.

– Each link is passive, no action is taken until link is selected.

– HTML tags for a hyperlink are <A> and </A>

– The linked document is specified by parameter to the tag: HREF="document URL"

– <A HREF=“http://www.gcd.ie”>Click here to go to GCD web site.</A>

– Whatever is between the HTML tags, <A> and </A> is the highlighted hyperlink.

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

HTTP

• HTTP is…– Designed for document transfer– A form of communication protocol– Specifies how a server and client communicate– Most HTTP messages are sent using TCP– Generic

• not tied to web browsers exclusively

• can serve any data type

– Stateless• no persistent client/server connection

HTTP Protocol Definitions

• 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 – 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”

WWW – HTTP Request messages– HTTP Request messages are sent from client to server.

“\r\n”Request Line Optional DataOptional HTTP Header

Type of Request(e.g. GET)

Additional informationsuch as brower beingused, media types accepted

DelimiterCarriage returnLine feed

User data e.g. contents of completed form

– There are a number of valid HTTP Request messages

• 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 – Return the header of a web page, used by search engines to test the validity of hyperlinks

• Put / Delete – Not typically implemented by browsers.

• WWW – HTTP Response messages– HTTP Response messages are sent from server to client.

“\r\n”Status Line Optional DataOptional HTTP Header

Success/FailureIndicationNumber between200 and 599

Type of content returnede.g. text/html or image/gif

DelimiterRequested Data e.g. web page

– The Status Line gives information about the success of the previous HTTP Request

• 200 – 299 Success

• 300 – 399 Redirection – Document has been moved

• 400 – 499 Client Error – Bad Request, Unauthorised, Not found

• 500 – 599 Server Error – Internal Error, Service Overloaded

WWW – Browser Architecture

Network Interface

HTTPclient

Otherclient…

Controller

htmlinterpreter

optionalplugins

Display

Driver

Input fromkeyboard andmouse

Output sent todisplay

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.

WWW – HTML– HTML specifies

• Major structure of document • Formatting instructions for browsers to execute.• Hypertext links – Links to other documents• Additional information about document contents

– Two parts to document:• Head contains details about the document.• Body contains the information/content of the document.

– Each web page is represented in ASCII text with embedded HTML tags that give formatting instructions to the browser.

• Formatted section begins with tag, <TAGNAME>• End of formatted section is indicated by </TAGNAME>

WWW – HTML Example<HTML>

<HEAD>

<TITLE> Example Page for lecture</TITLE>

</HEAD>

<BODY>

Lecture notes for today go here!

<CENTER>

<TABLE BORDER=3>

<TR>

<TD><A HREF="./lecture10.html">Previous Lecture</A>

<TD><A HREF="./lecture12.html">Next Lecture</A>

<TD><A HREF="./Contents.html">Table of contents</A>

<TD><A HREF="./solutions.html">Solutions to Assignments</A>

<TD><A HREF="./index.html">Index of terms</A>

</TABLE>

</CENTER>

</BODY>

</HTML>

WWW – Other HTML Tags– Headings - <H1>, <H2>

– Lists

• <OL> - Ordered (numbered) list

• <UL> - Unordered (bulleted) list

• <LI> - List item

– Tables

• <TABLE>, </TABLE> - Define table

• <TR> - Begin row

• <TD> - Begin item in row

– Parameters

• Keyword-value pairs in HTML tags

• <TABLE BORDER=3>

WWW – Embedding Graphics– IMG tag specifies insertion of graphic

• Parameters:

• SRC="filename"

• ALIGN= - alignment relative to text

– <img SRC=“GCD.gif" height=35 width=30>

– The above line would insert the image in the file GCD.gif into any web page.

– Image must be in format known to browser, e.g., Graphics Interchange Format (GIF), Joint Photographic Experts Group (JPEG), Bitmap etc

WWW – Style

<html><head><style type="text/css">body {background-color: yellow}h1 {background-color: #00ff00}h2 {background-color: transparent}p {background-color: rgb(250,0,255)}</style></head>

<body>

<h1>This is header 1</h1><h2>This is header 2</h2><p>This is a paragraph</p>

</body></html>

The layout and format of an HTML document can be simplified by using CSS (Cascading Style Sheets)

What has been covered this week:

• Overview of applications – what’s out there• Internet basics – architecture and protocols• HTML

Next Week: JavaScript