web design and development

Chapter 1: Introduction

Slides modified from

Programming the World Wide Web
Robert W. Sebesta
1.1 A Brief Intro to the Internet
- Origins
- ARPA(Adv. Research Proj. Agency)net - late 1960s and early 1970s
- Network reliability
- only Available for ARPA-funded research organizations

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

 Available for national network.
- 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

What the Internet is:
At the lowest level, since 1982, all connections use
TCP/IP/Routable protocol/Subneting
 Uses routers to connect the sub networks
In Non routable protocol every pc is connected to each other
 Causes bandwidth utilization
TCP/IP hides the differences among devices connected to the
Internet
All devices connected to the Internet must be uniquely identifiable
1.1 A Brief Intro to the Internet (continued)
- 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

- Domain names aastu.edu.et

- Difficult to remember numeric address
- Machines on the Internet also have textual names, must be
unique
- Form: host-name.domain-names
- First domain is the smallest; last is the largest
- Last domain specifies the type of organization
- Fully qualified domain name - the host name and all of the domain
names
DNS servers - convert fully qualified domain names to IPs
By the mid-1980s, several different protocols
• invented and used on Internet
• all with different user interfaces
(Telnet, FTP, Usenet, mailto)
•Affected the growth of Internet
IP addresses are the addresses used internally by the Internet

Domain name conversion

1.2 The World-Wide Web

The web is massive distributed client server information system

• Many applications are running concurrently over the web, like web browsing,
email, file transfer, audio and video streaming etc.
• For proper communication between client and server, the applications must agree
on a specific application protocol like HTTP, FTP,SMTP
1.2 The World-Wide Web (cont..)

 - the Web is a collection of software and protocols that has been installed on most

of the computers on the Internet.

• Some of these computers run Web servers
 which provide documents

• but most run Web clients, or browsers

 which request documents from servers and display them to users.

 - The form of its Document is hypertext, which is text with embedded links to text

in other documents
 - Pages/Documents/Resources/We’ll call them documents

 - Hypermedia – more than just text

 – images, sound, etc.

• WWW allows a user anywhere on the Internet to search for and retrieve
documents
 Hypertext
 structured text that uses logical links (hyperlinks) between nodes that contain text

“Non-linear reading and writing”

-embedded links to text in other documents
-allows non-sequential browsing

A page
of text
A page
of text A page
of text
A page
of text A page
of text
A page
of text A page
of text
A page
of text A page
of text
A page
of text

A page
of text A page
of text
A page
of text A page
A page of text
of text
A page
of text
 Web or Internet?
 Internet is a collection of connected computers(devices)
 Web is a collection of software and protocols installed on these
computers which are using the internet
 Web uses the protocols, http, that runs on the Internet–
among several others (telnet, mailto, etc.)
 Client-Server Architecture

Mostly Client-Server configuration

 Client - initiate communication, request for info
stored on server
 Server- sends that info back to client, reacts
1.3 Web Browsers
- Browsers: programs running on clients, request documents
- The first browsers were text based, no display of graphic info, no GUI

- Mosaic - NCSA (Univ. of Illinois), early 1993

- First to use a GUI, led to explosion of Web use
- Initially for X-Windows, under UNIX
- ported to other platforms by late 1993

- Most requests are for existing documents, using HyperText

Transfer Protocol (HTTP)

- But some requests are for program execution, with the output
being returned as a document
•Port number are used to identify the senders and receivers of messages
:
1.4 Web Servers

- Provide responses to browser requests:

- 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)
• is a protocol to transfer hyper text

- Web servers run as background processes in the

operating system

- Monitor a communications port (port 80 is the default to

listen) on the host,
accepting HTTP messages when they appear
 Web servers have two main directories:

1. Document root (servable documents)

2. Server root (server system software)

-Document root is accessed indirectly by clients

- Its actual location is set by the server configuration file
- Requests (URLS) are mapped to the actual location

Example
-Site name: www.tunias.com
-document root: topdocs, stored as /admin/web/topdocs
-URL request1: http://www.tunias.com/petunias.html
- Server searches for: /admin/web/topdocs/petunias.html
-URL request2: http://www.tunias.com/bulbs/tulips.html
- Server searches for: /admin/web/topdocs/bulbs/tulips.html
1.4 Web Servers (continued)
-Proxy servers: serve documents that are in the document root of
other machines on the Web, intermediary, control access
• A server running on a machine that acts as intermediary b/n computer
and other server
• If one or more internet sites are frequently requested, these are likely to
be in the proxy cache, which will improve user response time
Advantage :-its cache can serve all users
• Helpful for troubleshooting (since the proxy logs its
interactions)
-Web servers now support other Internet protocols, other than HTTP
(e.g. ftp, mailto)
Common servers
- Apache (open source, fast, reliable)

- Began as the NCSA server, httpd

- widely used server
- Maintained by editing its configuration file
- IIS (internet information server)
- Most Windows-based Web servers use IIS
- Maintained through a program with a GUI interface
1.5 URLs
-Uniform resource locators (URLs) are used to identify documents (resources)
on the Internet.
-Four parts of URL
1. Protocol: the application level protocol used by the client and server like
HTTP, FTP
2.Hostname: the DNS domain name (www.aastu.edu.et) or ip
address(192.168.1.1)
3. port: the TCP port number that the server is listening to incoming requests
from the clients
4.Path and file name: the name and the location of the requested resource,
under the server document base directory
- URLs cannot include spaces or any of a collection of other special characters
(semicolons, colons, ...)
URLs (cont.…)

General form: scheme:object-address

 - The scheme is often a communications protocol,
such as http, telnet or ftp
 - For the http protocol, the object-address is:
fully qualified domain name/doc path E.g.
http://www.aastu.edu.et
 - For the file protocol, only the doc path is needed
file://path-to-document
 - Host name may include a port number, to identify
appropriate process running on the host, as in:
 zeppo:80 (80 is the default, so this is silly)
 URLs…

 The doc path may be abbreviated as a partial path

 The rest is furnished by the server configuration, no need to
include all directories on the path:
• http://www.gumboco.com/files/f99/storefront.html =>complete
path
• http://www.gumboco.com/storefront.html =>partial path

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

server then searches for a home page, index.html.
1.6 Multipurpose Internet Mail Extensions (MIME)
•A browser needs some way of determining the format of a document it
receives from a Web server

•MIME is used to specify to browser the form of a file returned by server

(attached by the server to the beginning of the document)
• different document formats require different rendering tools
• E.g. text, image, video, …

•MIME specifications have the following form:

type/subtype

•Examples: text/plain, text/html, image/gif, image/jpeg

• Server gets type from the requested file name’s suffix

• (.html implies text/html)

• Browser gets the type explicitly from the server

 Experimental types
Experimental/tentative/new subtypes are sometimes used.
The name of an experimental subtype begins with x
e.g., video/x-msvideo
If a web provider might have some contents he or she
wants to make available to others through the Web.
The provider specifies how the browser can display the
content.
As might be expected,
the Web provider must supply an external program that the
browser can call when it needs to display the contents.
 i.e., helper applications
or are code modules that are inserted into the browser
 i.e., plug-ins
1.7 The Hypertext Transfer Protocol (HTTP)

•The most popular application protocol used in the internet /web

•HTTP consists of two phases: the request and the response,
Request/Response paradigm

•Each HTTP communication (request or response) between a browser

and a Web server consists of two parts:
• Header: info about the communication
• Body: data of the communication

1. Request Phase
Form: Request line
Request Header fields
blank line
Message body
Example
1.7 The Hypertext Transfer Protocol(continued)
•Four categories of header fields:
• General: for general info, e.g. date
• Request: info about browser, in request headers
• Response: information about the server, for response headers
• Entity: meta-information, used in both request & response headers

•Common request fields:

Host: host name (specify host name, for HTTP 1.1)
Accept: text/plain (specify MIME type)
Accept: text/*
If-Modified_since: date

- Common response fields:

Content-length: 488
Content-type: text/html

-We can also communicate with HTTP without a browser

> telnet blanca.uccs.edu http -> creates conn
HTTP commands also:
GET /user1 /respond.html HTTP/1.1
Host: blanca.uccs.edu
1.7 The Hypertext Transfer Protocol
(continued)

2. Response Phase

Form:

Status line
Response header fields
Blank line
Response body

- Status line format: HTTP version status code explanation

- The header field, Content-type, is required , not optional

Example HTTP/1.1 200 OK

Server: Apache (Red-Hat/Linux)
Content-Type: text/html
Content-Length: 9934

<HTML>
<HEAD>
<TITLE> Addis Ababa Science and Technology University </TITLE>
…
- Status code is a three-digit number; first digit
specifies the general status

1 => Informational

2 => Success

3 => Redirection Some HTTP Status Codes

4 => Client error

5 => Server error

1.8 Security
- Many kinds of Internet and Web security problems
- One fundamental problem is getting data
between a browser and a server without it being
intercepted or corrupted in the process

- Security issues for a communication between a

browser and a server:

1. Privacy: data must not be stolen on its way

2. Integrity: must not be modified

3. Authentication: identity of both parties

4. Nonrepudiation: check that data was sent & received

- Basic tool to support privacy and integrity: encryption

- If both sender and receiver use the same encryption key,

the key must be transmitted from the sender to the receiver

- Solution: (1976, Diffie and Hellman)

- Public-key encryption

- Use a public/private key pair

- Everyone uses your public key to encrypt messages
sent to you
- You decrypt them with your matching private key
- Virtually impossible to compute the private key
from a given public key

-RSA is the most widely used public-key algorithm

1.8 Security…

- Another security problem: destruction of data on

computers connected to the Internet

- Viruses and worms

- Yet another common security problem: Denial-of-Service (DoS)

attack

- Created by flooding a Web server with traffic requests

- Zombie computers (compromised by a hacker , computer virus or trojan horse
and can be used to perform malicious tasks under remote direction)
Web Programmer’s Toolbox
HTML/XHTML
CSS
XML
JavaScript
PHP
Ajax, ASP.NET
HTML
Describes the general form and layout of documents
An HTML 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
CSS
A language for defining stylesheets that was developed
for HTML
Provide the means to control and change presentation
of HTML documents
Style sheets allow you to impose a standard style on a
whole document, or even a whole collection of
documents
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
PHP
A widely used server-side scripting language
Similar to JavaScript
Great for form processing and database access through
the Web
Free software released under the PHP License

Want to proceed to the Next slide?

click the link below
Chapter two