Computer Sciences Department 1

Computer Sciences Department 3

Web Design

Computer Sciences Department 4

• Internet History and Protocols•Domain Name System•Client and Server• Web server

• Document root

• Uniform Resource Locator

• Hypertext Transfer Protocol

Objectives

5

Internet History•Origins–ARPAnet - late 1960s and early 1970s•Network reliability • For ARPA-funded research organizations

•BITnet, CSnet - late 1970s & early 1980s

• email and file transfer for other institutions

–NSFnet - 1986 •Originally for non-DOD funded places• Initially connected five supercomputer centers•By 1990, it had replaced ARPAnet for non-military uses• Soon became the network for all (by the early 1990s)

- NSFnet eventually became known as the Internet

Computer Sciences Department

Computer Sciences Department 6

•What the Internet is:•A world-wide network of computer networks•At the lowest level, since 1982, all connections use TCP/IP• TCP/IP hides the differences among devices connected to the Internet

Computer Sciences Department 7

Internet Protocols• Internet Protocol (IP) Addresses– Every node has a unique numeric address

– Form: 32-bit binary number

– New standard, IPv6, has 128 bits (1998)

• Organizations are assigned groups of IPs for their computers

• By the mid-1980s, several different protocols had been invented and were being used on the Internet, all with different user interfaces (Telnet, FTP, Usenet, mailto

8

Internet Protocols• What Is a 'Domain Name System '?

• Domain Name System, or “DNS”, is the recognized system for assigning addresses to Internet web servers.

The domain names keep the real technical IP address invisible to most viewers. Example: Internet domain names http://www.w3schools.com/

Domain names are organized right to left, with general descriptors to the right, and specific descriptors to the left. “These descriptors are called "domains”

The "top level domains" (TLD, or parent domain ) is to the far right of a domain name. Mid level domains (children and grandchildren) are in the middle. The machine name, often "www", is to the far left. Levels of domains are separated by periods ("dots").

Computer Sciences Department

Computer Sciences Department 9

Domain name conversion

10

Client and Server• Clients and Servers are programs that

communicate with each other over the Internet

• A Server runs continuously, waiting to be contacted by a Client– Each Server provides certain services– Services include providing web pages

• A Client will send a message to a Server requesting the service provided by that server– The client will usually provide some

information, parameters, with the requestComputer Sciences Department

11

The World-Wide WebWeb or Internet? The Web uses one of the protocols, http, that runs

on the Internet. The internet is a collection of computers……….etc

Web Browsers: Browsers are clients - always initiate, servers react

(although sometimes servers require responses). Most requests are for existing documents, using HyperText Transfer Protocol (HTTP)

Web Servers: Provide responses to browser requests, either existing documents or dynamically built documents. Browser-server connection is now maintained through more than one request-response cycle. All communications between browsers and servers use Hypertext Transfer Protocol (HTTP)

Computer Sciences Department

Computer Sciences Department 12

Web Server Operation Details

• Web servers have two main directories:1.Document root (servable documents)

2.Server root (server system software)

• Document root “is accessed indirectly by clients”, “localHost”

– The document root is the folder where the website files for a domain name are stored. Example: “C:\wamp\www”

– Virtual document root “VirtualHost” run multiple independent websites on the same machine

– Instead of typing http://localhost/mylocalsite every time to view our site. just type http://mylocalsite and it works

Browsers : http://localhost/mylocalsite

Computer Sciences Department 13

• Proxy servers• Web servers now support other Internet protocols as ftp…etc

Computer Sciences Department 14

Web Server

•Web Server Operation : Apache (open source, fast, reliable)

•Web Server Operation : IIS•Operation is maintained through a program with a GUI interface

Computer Sciences Department 15

URL• General form: scheme:object-address

The scheme is the communication protocol.

These protocols include - http, ftp, telnet, mailto.

Different schemes use different object addresses.

HTTP uses an object address of the following

form:

//fully-qualified-domain-name/path-to-document

//www.pnu.edu.sa/ar/Pages/Home.aspx

Computer Sciences Department 16

URLs• Host name may include a port number, as

in :80 (80 is the default)

• URLs cannot include spaces or any of a

collection of other special characters

(semicolons, colons, ...)

• The doc path may be abbreviated as a partial

path

– The rest is furnished by the server

configuration

• If the doc path ends with a slash, it means it is

a directory

• Example: URL path

http://www.google.com.sa/

Computer Sciences Department 17

Multipurpose Internet Mail Extensions (MIME) read only

Computer Sciences Department 18

HTTP request

and

respond phase

The client will initiate the communication by:- sending a request (HTTP Request) and - the HTTP Server (or Web Server) will respond back by sending

a response (HTTP Response). Every time a client needs to send the request, it first establishes a

TCP reliable connection with the Web Server and then transfer the request via this connection.

The same happens in case a Web Server needs to send back an HTTP Response to a client.

Any of the two parties - the client or the server can prematurely stop the transfer by terminating the TCP connection.

Client

Server

- Cookies are key/value pairs used by websites to store state information on the browser - client-side cookies are often used to remember data that is not relevant to the server

- UI stuff; which check boxes have been checked; past login info; etc.

Computer Sciences Department 19

The Hypertext Transfer Protocol

The protocol used by ALL Web communications Request Phase

Form:

HTTP method domain part of URL HTTP ver.

Header fields

blank line

Message body An example of the first line of a request:

GET /degrees.html HTTP/1.1

Computer Sciences Department 20

The Hypertext Transfer Protocol: Methods

GET - Fetch a document HEAD - Fetch just the header of the

document POST - Execute the document, using the

data in body PUT - Store a new document on the server DELETE - Remove a document from the

server

Computer Sciences Department 21

HTTP Request Methods

Computer Sciences Department 22

HTTP Headers

HTTP header fields are components of the header section of request and response messages in the Hypertext Transfer Protocol (HTTP). They define the operating parameters of an HTTP transaction “both sender and recipient refer to either the client or the server, depending on who sends and who receives the entity”

The Accept request-header field can be used to specify certain media types which are acceptable for the response

Accept: text/plain

Accept: text/*

If no Accept header field is present, then it is assumed that the client accepts all media types

Computer Sciences Department 23

The asterisk "*" character is used to group media types into ranges, with "*/*" indicating all media types and "type/*" indicating all subtypes of that type.

Media types

Computer Sciences Department 24

HTTP Response is in the form of- status line:

Computer Sciences Department 25

Computer Sciences Department 26

Computer Sciences Department 27

Web Security

Computer Sciences Department 28

XHTML

To describe the general form and layout of documents

An XHTML document is a mix of content and controls Controls are tags and their attributes Tags often delimit content and specify something

about how the content should be arranged in the document

Attributes provide additional information about the content of a tag

Computer Sciences Department 29

Creating XHTML documents

XHTML editors - make document creation easier

Shortcuts to typing tag names, spell-checker,

WYSIWYG XHTML editors

What you see is what you get (MS FrontPage)

Computer Sciences Department 30

Plug-ins and Filters

Plug-ins

Integrated into tools like word processors,

effectively converting them to WYSIWYG XHTML

editors.

Filters

Convert documents from X formats to XHTML

Computer Sciences Department 31

To control the style and layout of multiple Web pages all at once.

CSS

Computer Sciences Department 32

Plug-ins and Filters: Advantages and Disadvantages

Advantages of both filters and plug-ins:

Existing documents produced with other tools can be converted

to XHTML documents.

Use a tool you already know to produce XHTML

Disadvantages of both filters and plug-ins:

XHTML output of both is not perfect - must be fine tuned

XHTML may be non-standard

You have two versions of the document, which are difficult to

synchronize

Computer Sciences Department 33

JavaScript

A client-side HTML-embedded scripting

language

Only related to Java through syntax

Dynamically typed and not object-oriented

Provides a way to access elements of HTML

documents and dynamically change them

Computer Sciences Department 34

XML

A meta-markup language

Used to create a new markup language for a

particular purpose or area.

Because the tags are designed for a specific area,

they can be meaningful.

No presentation details.

A simple and universal way of representing data of

any textual kind.

Computer Sciences Department 35

PHP

A server-side scripting language

An alternative to CGI

Similar to JavaScript

Great for form processing and database

access through the Web

Computer Sciences Department 36

Java

General purpose object-oriented

programming language

Based on C++, but simpler and safer

Focuses on applets, servlets, and JSP

Computer Sciences Department 37

ASP.NET

Computer Sciences Department 38

Perl, Ruby, Rails and Ajax no need