Introduction

IT301 Introduction to Web Technology

Lecture 1

Credits to:
- Dr. Ahmed Helmi
- Nikolay Kostov, Telerik Corporation 1
Course Contents

• The Internet & World Wide Web

• Introduction to web programming using:

— HTML

— CSS

— Javascript

— PHP

2
References
• David R Brooks-An Introduction to HTML and
JavaScript for Scientists and Engineers-Springer (2007)

• D. R. Brooks, Guide to HTML, JavaScript and PHP for

scientists and engineers: Springer, 2011.

3
The Internet
• The Internet is a public communication system
linking hundreds of thousands of individual
networks all over the world.
• The word Internet is derived from internetworking.
• The Internet makes information instantly accessible
worldwide.
• Using Internet, people can communicate with each
other in a faster and effective way.
• One can do all his shopping sitting back at home
(electronic commerce), etc.

4
Packet Switching
• The Internet operates based on a technique
called packet-switching, in which data is sent in
small packets.
• Packets from different senders are intermixed on
the same line.
• The packets contain address information so that
it can be routed to their destinations.
• This greatly reduces transmission costs
compared to dedicated communications lines.

5
Internet Protocols
• A Protocol is a set of rules that defines how computers
talk, how data is formatted and processed on a network
• The Internet is based mainly on the following two
protocols:
—Transmission Control Protocol (TCP)
Software that breaks messages into packets at the
sending end and then reassembles them at destination
—Internet Protocol (IP)
Software that routes packets through the Internet to
their final destination

6
Internet Protocol (IP)
• The IP address is used to transfer data from source
to destination devices.
—32-bit number
—Each device has a unique IP address.
—Written as four dot-separated bytes, e.g.
192.0.34.166
• IP packet contains:
—Header: source and destination IP addresses, etc.
—Data itself

7
World Wide Web
• In 1991,Tim Berners-Lee created the World Wide Web
(WWW), commonly known as ‘The Web’.
• The Web provides easy access to cross-referenced
documents.
• Information on the Internet are presented to the user as
a document popularly known as Web Page which
contains text, graphics, audios or videos.
• Web Pages are linked to each other using Hyper Links.
One can easily surf the Web by jumping from one
document to another using the links (Hypertext) in
those documents.

8
How the Web Works?
• WWW uses classical client / server architecture
• The Web is the collection of machines (Web servers) hosting
web pages that can be accessed via the Internet from any
part of the world. Machines that access information on the
Web are known as Web clients.

Client running
Server running Web Server
a Web Browser
Software (IIS, Apache, etc.) 9
The Client/Server Architecture
• Client (“front end”):
– Presents an interface to the user (the Web browser)
– Gathers information from the user, submits it to a
server, then receives and presents the results
returned from the server.
• Server (“back end”):
▪ Responsible for data storage and management
(database)
▪ Responds to client requests for information
• A system consisting of a client and a server is
known as a two-tier system.
10
Web Browsers
• Web browsers are software tools used by the end user to
view Web Pages.
—Convert web addresses (URL’s) to HTTP requests
—Communicate with web servers via HTTP
—Display documents returned by a server
• Examples: Internet Explorer, Google Chrome, etc...

11
The Web is distinguished by:
• Communication protocols
— (http://) [hyper text transfer protocol]
— manages the hypertext links used to navigate
the Web.
• Documents which contain Navigation links
(hyperlinks).
— built using Hypertext Markup Language
(HTML).
— Hypertext ➔ (text containing links)

12
Domain Name System (DNS)
• A domain name is a unique address used for
identifying a computer, such as a Web server on the
Internet.
• To access a website, you must enter the IP address
of the web server in your browser or the domain
name because it is easier to remember.
• Domain name server (DNS): A computer that
translate a hostname into an IP address
• Examples: IP address: 72.64.56.86
Domain name: www.microsoft.com
• DNS is the “phone book” for the Internet
—Map between host names and IP addresses
13
Internet Address
• Every web page has a unique address called the Uniform
Resource Locator (URL). A typical Internet address or
URL would looks like:
http://www.google.com/help/index.html

Protocol Domain name Directory or Path Filename

• The protocol followed by a colon identifies the item we
are looking for as a web page. Many Internet pages use
HTTP.
• Other common Internet protocol that one might come
across is FTP (File Transfer Protocol).
14
Server Domain Name
• The second component of the URL is the domain
name of the server (//www.google.com) which
stores the information you seek and is always
preceded by two slashes.
www = the name of the web server at the company.
google = the organization maintaining the server
com = Top-level domain (or domain identifier),
usually two- or three-letters, identifies the type of
organization:
—Generic: .com, .org, .edu, .net, etc.
—Country-code: .us, .eg,.sa, etc.
15
The Path
• The last part of the URL /help/index.html defines
the path within the Server where the requested
item will be found. Each segment of the
pathname is preceded by a single slash.
• Most of the Web pages will have .htm or .html
extension.

16
HTTP
• HTTP is a protocol used to transfer files from a
Web server onto a browser in order to view a web
page.
• HTTP is a one-way system as files are transported
only from the server onto the client's browser.
• When http appears in a URL it means that the
user is connecting to a web server and not a file
server.
• Web server: A computer dedicated to
responding to requests for web pages
17
HTTP
• HTTP is based on the request-response
communication model:
—Client sends a request
—Server sends a response
• Standard browser-server interaction:
—User enters Web address in browser
—Browser uses DNS to locate IP address
—Browser sends HTTP request
—Server sends HTTP response to browser
—Browser displays body of response in the client
area of the browser window
18
File transfer protocol (FTP)
• FTP is used to upload files from a workstation to an
FTP server or download files from a FTP server to a
workstation.
• Using FTP, files are made available on the Internet.
• When ftp appears in a URL it means that the user
is connecting to a file server and not a web server
and that some form of file transfer is going to take
place.
• Most FTP servers require the user to log on to the
server in order to transfer files.
• File server: A computer dedicated to storing and
managing files for network users.
19
Static Web Content
• The content of a website can be: Static or Dynamic.
• Static Web Site: (sometimes called a flat page)
is a web page that:
—displays the same information, products or
services, for all users.
—are often HTML documents stored as files in the
web server.
—very simple in layout, informative, and sufficient
if the changes to web content is infrequent.

20
When to use a static website?
• Changes to web content is infrequent
• List of products / services offered is limited
• Simple e-mail based ordering system should suffice
• No advanced online ordering facility is required
• Features like verifying availability of stock, online
credit card transactions, are not needed
• Web site not required to be connected to back-end
system.

21
Dynamic Web Content
• The content of a dynamic web pages, on the other
hand, changes depending on the user or from time
to time (ex. a news content).
• Dynamic web page is required when there is a need
for:
1. Frequent changes in the content to update
products/services.
2. Introducing sales promotion.
3. Providing tracking and online ordering services to
clients.
• Dynamic web sites are programmed using client-
side or server-side scripting. 22
Client vs. Server-side Scripting
• In client-side scripting, the source code is transferred from
the web server to the user’s (client) computer over the internet
and run directly in the browser. The browser then displays the
retrieved page's content to the user.
• In server-side scripting, a user's request is fulfilled by
running a script directly on the web server to generate dynamic
HTML pages which are sent to the client browser. This is
usually used to provide interactive web sites that interface to
databases on the server.

Client Side Server Side

JavaScript PHP
VBScript ASP
HTML Java Servlets
Java Applets 23
Client Caching
• A cache is a local copy of information obtained
from some other source
Client Server

1. HTTP request for image

Browser Web
2. HTTP response containing image Server

3. Store image

Cache

24
Client Caching
• What happens if we need the image again?
• We have two options: either to do another
HTTP request or to use the cached copy.
• Cache advantages
—(Much) faster than HTTP request/response
—Less network traffic
—Less load on server
• Cache disadvantage
—Cached copy of resource may be invalid (inconsistent
with remote version)

25
Secure Servers
• Since HTTP messages typically travel over a
public network, private information (such as
credit card numbers) should be encrypted.
• Hypertext Transfer Protocol Secure (HTTPS)
provides secure Internet connections for
transactions that require security and privacy
• https URL scheme tells browser to use
encryption

26
Cookies
• Some websites, when you visit and register with it, use
cookies to store information about what items you
search for marketing needs.
• Cookies are small text files placed on the visitor’s
computer.
• The text is entered into the memory of the browser. The
browser in turn stores the cookie information on the hard
drive so when the browser is closed and reopened at a
later time the cookie information is still available.
• Cookies are merely text, not executable, files that can be
deleted at any time. They cannot be used to spread
viruses and they cannot access your hard drive to find
out information about you.
27