Chicago

Denver

CNY

NYC

LA

SF

Seattle

Houston

Boston

ARPANET ‘60sCSNETNSFNETANSNET

WAN (Wide Area Network ) , but not really

Local Area Network Emerged, 1970’s

Chicago

Denver

NYC

LA

SF

Seattle

Houston

Boston

WAN Backbone Network (early ‘80s)

Chicago

Denver

CNY

NYC

LA

SF

Seattle

Houston

Boston

ARPANETCSNETNSFNETANSNET

Internet and Routers

Chicago

Denver

CNY

NYC

LA

SF

Seattle

Houston

Boston

UCLA

Colgate

SU

Yale

ISU

UCB

Address for a postal mail to Taiwan

李中志 先生收永和市 福和路 152 號 11 樓 之 1Taipei, 23438Taiwan

Chung-Chih LiBox 5150Illinois State UniversityNormal, IL 61790USA

Post Office as the Router

MailmanLocal

Post Office

Air Port

Regional Post Office

Air Port

RegionalPost Office

LocalPost Office

Mailman

Mailman

USA

Taiwan

Internet and Routers

Chicago

Denver

CNY

NYC

LA

SF

Seattle

Houston

Boston

UCLA

SU

Yale

ISU

ITK

Lab

XYZ

ISU

TCP/IP Transmission Control Protocol/Internet Protocol

IP Address: (4 bytes) 0 0 0

255

0

255 255255

256 256 256 256 = 4,294,967,296

128.10.2.1128.230.208.46128.230.18.55149.43.80.141149.43.3.23

DNS Domain Name System

128.10.2.1128.230.208.46128.230.18.55138.87.246.1149.43.3.23149.43.1.7…………..

( some IP may not have a domain name)

Arthur.cs.purdue.eduapollo.syr.edurodan.syr.eduilstu.educs.colgate.edu colgate.edu…………..………….

Domain Name Server : • A computer that provides DNS services.• One can let his/her computer uses a specific DNS or let it arbitrarily use an available one.

The table is huge, we don’t want to maintain this table in every computer.

Routers and IP Address

Chicago

Denver

CNY

NYC

LA

SF

Seattle

Houston

Boston

UCLA

128.230

Yale

………..cs.colgate.edu = 149.43.3.23

………..

………..cs.colgate.edu = 149.43.3.23

………..

DNS

DNS149.43.1.7149.43.3.23149.43.2.1………….

………….131.179.128.25………….

cs.ucla.edu/~xxx http://cs.colgate.edu/~chungli

131.179.128.25/~xxx http://cs.colgate.edu/~chungli

1

2

3

Traveling trough the Internet

Chicago

Denver

CNY

NYC

LA

SF

Seattle

Houston

Boston

UCLA

128.230

Yale

………..cs.colgate.edu = 149.43.3.23

………..

DNS149.43.1.7149.43.3.23149.43.2.1………….

………….131.179.128.25………….

131.179.128.25/~xxx http://cs.colgate.edu/~chungli

131.179.128.25/~xxx http://149.43.3.23/~chungli

45 6

7

8

1

2

3

Traveling trough the Internet (2)

Chicago

Denver

CNY

NYC

LA

SF

Seattle

Houston

Boston

UCLA

128.230

Yale

149.43.1.7149.43.3.23149.43.2.1………….

………….131.179.128.25………….

131.179.128.25/~xxx (index.html)

45 6

7

8

1

2

3

9

10

11

12

13

14

Dynamic IP addresses

CNY

twcny.rr.com24.24.1.140

home.twcny.rr.com207.211.212.39.

………………………dennisliattwcny………………………………………………

………………………….dli : (dli@twcny.rr.com)seanyboy : (seanyboy@twcny.rr.com)gbush : (gbush@twcny.rr.com)…………………………..…………………………..

66.24.3.190

66.24.2.170

66.24.3.180

192.168.0.188 192.168.0.190192.168.0.196

How do computer talk to each other?

At what level?

OSI Model

International Organization for Standardization (1984):

Open Systems Interconnection reference model.

The model modulizes a sequence of tasks for inter-exchanged information between computers into 7 layers:

• Application layer (7)• Presentation layer (6)• Session layer (5)• Transport layer (4)• Network layer (3)• Data Link layer (2)• Physical layer (1)

• Each layer should be viewed as a job (task) description but not the actual rules or methods to do the job

OSI Model Analogy

Secretary

Servant

Captain

Secretary

Servant

Captain

King ArthurKnight Lancelot

OSI, Peer-Layer Communication

John

IE 7. Application

Win

2K

6. Presentation

5. Session

Server

4. Transport

3. Network

2. Data Link

Tok

en

Rin

g 1. Physical

Mary

7. Application

Netscap

e

6. Presentation Un

ix

5. Session

4. Transport Server

3. Network

2. Data Link

Eth

ernet1. Physical

Head

er1

Data

Header

2

Data2

H3 Data 3

H4 Data 4

H5 Data 5

H6 Data 7

H7 Data 8

WWW

Original purpose of the World Wide Web was to locate and display information

• Created by Tim Berners-Lee in 1990-91 at the European Laboratory for Particle Physics (CERN) in Geneva, Switzerland.

•Purpose: to easily access cross-referenced documents, through a method called hypertext linking

•Hypertext link (hyperlink): contains a reference to a Web page that can be accessed by a click (URL)

Terminologies• Web page: a document on the Web

• Web site: refers to a location on the Internet of Web pages and related files that belong to a company, organization, or individual

• Web browser: a program for displaying Web pages

• Request: when the user’s browser asks a Web server for a Web page

• Web server: a computer that delivers Web pages

• Response: what the Web server returns to the Web browser

Terminologies• Uniform Resource Identifier (URI): a generic term for

many types of names and addresses on the Web

• Uniform Resource Locator (URL): a unique address on the Web

• Uniform Resource Name (URN): a name (identity) of a resource on the Web

http://www.itk.ilstu.edu/faculty/chungli/ITK368-485/index.html

Protocol://…....Domain name…./………….…Directory………….……/…Filename…

urn:isbn:0451450523Urn : Namespace : nameString

CosmeticsTools or materials to make up faces

Face + (???)

HTML Document = HTML Document = Hypertext = Text + HTML Text + HTML TagsTags

HTML

• Hypertext Markup Language (HTML): a markup language used to create Web pages (HTML pages)

• Markup language: a set of characters or symbols that define a document’s logical structure and how to display the document

• HTML is based on Standard Generalized Markup Language (SGML)

• HTML documents are text documents that contain formatting instructions called tags

HTML: HyperText Markup Language

• A tool to make up HyperText

• A formal language for a Web author to:

1. Provide information to Search Engines2. Instruct web browsers.

• How:

• Use tags to distinguish the text and instructions.

• HyperText: text, tables, frames, pictures, images, links, scripts, etc.

Structure of HTML document

The author may want to provide information about his/her author may want to provide information about his/her web pages to the web browsers or search engines. web pages to the web browsers or search engines.

<html><head> Section

</head>

<body> Section Here the web author puts the material for his/her readers. .

</body>

</html>

Tags

In general, a tag is an instruction to instruct the web browser how to present the objects ;

<h1> This is H1 </H1>

start tag

end tag

Some tags do not have end tags, e.g. <br> : line breaking

End tag closes the effectof start tag.

Questions:

• What will happen if we miss some end tags?

• What kind of problem we will face if we want to type “<h1>” in our text. What

should we do?

Attribute of Tag

Some tags use attributes to specify how to perform their functions.

<font color=“green”> Turn me into green </font>

Attribute name

We can specify more than one attribute in a tag. E.g.

<font color=“green” size=+2> Turn me bigger and green </font>

Attribute value

<HR> tag

Some tags generate objects for the web browser.

<hr size=10 color=“green" align="left" width=20%>

<hr size=10 color=“red" align=“center" width=50%>

<head>

<title> Basic HTML </title>

<meta http-equiv="Content-Type" content="text/html; charset=big5">

<meta name="Author" content="Chung-Chih Li">

<meta name="GENERATOR" content="Microsoft FrontPage 3.0">

</head>

More on HTML tags, go to the web page of this class

Static HTML

ClientServer

Internet

I E

file1, file2, file3, file4, file5, file6, file7, file8, file9,

file10, file11, file12, file13, file14, …………. ………………..……………….. ………………..………………..………………..………………..

file6, file9,

file100,……. File server

need file20 need file34click click

click

clickclick cli

ck

click

Dynamic HTML

ClientServer

Internet

I E

file1, file2, file3, file4, file5, file6, file7, …………. ………………..program1, program2, program3, program4,………………..data1, data2, date3, 1022………………..

file9, outputs of prog4,program 3,…… File server

Name: Jane ..Tel: 315 …

need file34

program 4

Program 7

program 8

Security!

Form, CGI, Scripts

ClientServer

Internet

I E html,html (java scripts)

html,….

File server

form (data) need html

CGI prog

CGI prog.

Java scripts

Files (html, ..)

CGI programs

data

CGI Common Gateway Interface

Interface between Client and Server

Standardize: • I/O format• Common used environmental variables

On server side, programs must follow the CGI standards, and hence they are called CGI programs.

CGI Scripts and Programs

InterpreterScripts Results

• Perl, Vbasic, Java Scripts.. (they are stored in ASCII files)

Exe programs Results

• (they are machine codes)

compilerProgram source Exe programs

• C, C++, Java, Fortran ………….

Java Scripts in HTML documents

<html>……<script type=“text/javascript”>

Javascripts

</script>……</html>

• Literally, a client computer runs nothing Literally, a client computer runs nothing but browsers. but browsers.

• Thus, a client computer receives HTML Thus, a client computer receives HTML documents only. documents only.

Dynamic HTML

ClientServer

Internet

file1, file2, file3, ..quiz.html…….Program1….cgi-bin/generic-grader.pl………………..data1, data2, date3, 1022………………..

? quiz.html

<form name=“x” method=“post”action="http://cs.colgate.edu/cgi-bin/generic-grader.pl"

…..

</form>

IE

quiz.html

file servergeneric-grader.pl

Form x …….

? answers.txt

answers.txt

result.html100 out of 100 are correct..

ASP.NET does not go beyond the structure but make the job much easier.