Chapter one

Conti…
• Internet is a large number of computers connected
together to share information.
• It is a network of networks that consists of millions of
private, public, academic, business, and government
networks, of local to global scope, that are linked
together.
• Internet, as a “network of networks”, consists of many
computers, called servers or hosts, which are linked by
communication lines
Conti…
• important thing that has contributed to the growth of
Internet is ownership. Until recently, nobody owns the
Internet.
• The reason, although the Internet was made in the
U.S.A., its unique design transformed it into a source for
innovation that anyone in the world could use.
• Thought the Internet is not owned by anyone, its
backbone: servers and Internet Service Providers (ISP)
are owned by private as well government organizations
Conti…
• the functionalities of the Internet in many business areas is manifested through its
services listed below:

World Wide Web (WWW),

 Electronic mail,
 File Transfer
 Discussion Groups
 Usenet (News Group),
 Internet Chat,
 Search Services
World Wide Web

• World Wide Web (WWW) is a collection of interconnected

documents and other resources linked by hyperlinks.
• Hyperlinks (also called hypertext or simply link) are
reference or navigation element in a document to another
document.
• WWW is a massive storehouse of information that resides
on internet.
• WWW was created by Tim Berners-Lee in 1989 at the
European Nuclear Research Center (CERN) in Switzerland.
Conti…
• Berners-Lee created WWW by bringing together three technologies that were already in
development at the time:
 Markup Language – a system of instructions and formatting codes embedded
in text.
 Or it is the language used to describe the insides of web documents.

 Hypertext – a means of embedding links to other documents, images, and

other elements in a document. Or it is the language used to describe how
these documents are sent over the internet.
 Internet – a global network of computers where clients request service and
servers provide services
Conti…
• Tim Berners-Lee developed HTTP as a networking protocol for
distributing documents and wrote the first web browser.

• HTTP is simple request/response protocol in which a Web browser asks

for a document, and

• the Web server returns the document in the form of an HTML data
stream preceded by a few descriptive headers.

 Building web page statically (web page ahead of time) and

dynamically
Why dynamically?

 The Web page is based on data sent by the client.

 The Web page is derived from data that changes

frequently
 The Web page uses information from corporate
databases or other server-side sources
The Internet versus the Web

 The Internet is a network of connected computers

 No company owns the Internet; it is a cooperative effort governed by a

system of standards and rules.

 The World Wide Web (known affectionately as “the Web”) is just one of
the ways information can be shared over the Internet.

 It is unique in that it allows documents to be linked to one another using

hypertext links—thus forming a huge “web” of connected information.

 The Web uses a protocol called HTTP (Hypertext Transfer Protocol).

Serving Up Your Information

• Servers: - Computers that serve up documents upon

request.
• these computers are known as servers.
• More accurately, the server is the software (not the
computer itself) that allows the computer to
communicate with other computers; however, it is
common to use the word “server” to refer to the
computer, as well.
Conti…

In order for a computer to be part of the Web, it must be running
special web server software that allows it to handle Hypertext Transfer
Protocol transactions
 Web servers are also called “HTTP servers.”

 There are many server software options out there, but the two most
popular are Apache and Microsoft Internet Information Services
(IIS).
 The browser is the client software that makes requests for documents.
Frontend versus Backend

• Frontend refers to any aspect of the design process

that appears in or relates directly to the browser.
• The following tasks are commonly considered to be
frontend disciplines:
• Graphic design, Interface design, Information design as
it pertains to the user’s experience of the site, including
HTML documents, Style Sheets etc.
Conti…
• It is also referred to as the ‘client side’ of the
application.
• It includes everything that users experience directly:
 colors and styles,
 images,
 graphs and tables,
 buttons,
 navigation menu and etc.
Conti…
• Front End Languages

• HTML
• CSS
• JavaScript
• VBScript
Conti…
• Front End Frameworks and
Libraries
• AngularJS
• React.js
• Bootstrap
• jQuery
• SASS
Conti…
• Backend refers to the programs and scripts that work on
the server behind the scenes to make web pages dynamic
and interactive.
• In general, backend web development falls in the hands
of experienced programmers.
• The following tasks take place on the backend:
Information design as it pertains to how the information is
organized on the server, Forms processing,
• Database programming, Other server-side web
applications using PHP, JSP, Java and other programming
languages
Conti…
• Server-side programming must deal with dynamic content. Most web
pages are not static since they deal with searching databases.
• Server-side Uses
• It processes the user input
• Displays the requested pages
• Interaction with servers/storages
• Interaction with databases
• Querying the database
• Encoding of data into HTML
• Operations over databases like delete, update.
Conti…
Types of web pages (static vs. dynamic)

• Websites that only use HTML and CSS are called static
websites.
• Websites with scripting are called dynamic websites.
• When thinking about making your website, it’s
important to identify which type of site you want
A Static Website
 A static website is the simplest kind of website you can build.

 Static websites are written in HTML and CSS.

 The only form of interactivity on a static website is hyperlinked.

 If you intend your website to be small (3 pages or less), then a static website might be the easiest
way to go.

 But if you want to share elements between pages (such as logos or menus), you’ll have to
duplicate the HTML on each page.

 Static websites are easier to make than dynamic websites because they require less coding and
technical knowledge.

 However, fully static websites are very uncommon these days, since there is so much that
scripting can do.
A Dynamic Website

 A dynamic website is a website that not only uses HTML and CSS, but
includes website scripting as well.

 The main reasons why you’d want to use website scripting on your
site is you want an interactive web app that people can use, not just
read and you want to be able to share HTML code between your
pages.

 This website also shares the same HTML code for the header, menu
and sidebar between all pages of the site.
Continue…

 If you want a dynamic site, you will need to learn a coding

language such as JavaScript, PHP.

 In fact, there are actually two different types of interactivity

on a dynamic site – front-end scripts and back-end scripts.

 Front-end and back-end are sometimes also called client

side and server side.
Client-Server Architecture

• Most web coding languages are designed to run

on either the server side or the client side.
Client-Side Languages

 Client-side development is done almost fully in

JavaScript. This is, of course, in addition to basic HTML
and CSS code.

 The reason JavaScript is called a client-side language, it

runs scripts on your computer after you’ve loaded a
web page.
Server-Side Languages

 A server side or back-end language runs its scripts before the HTML is
loaded, not after.

 There are a range of server-side languages in use on the web today. PHP
is one of the most popular, as well as ASP.NET and many others.

 They are called server-side languages because their scripts are run not
on your computer,

 but on the server which hosts the website and sends down the HTML
code.
Conti…
How the Web Works?

• In order for you to find the location of the web server,

your browser will first connect to a Domain Name
System (DNS) server.
• It is the DNS servers that tell your browser how to find
the website.
• 1. When you connect to the web, you do so via an
Internet Service Provider (ISP).
• You type a domain name or web address into your
browser to visit a site; for example: google.com,
bbc.co.uk, microsoft.com.
Conti…
• 2. Your computer contacts a network of servers called
Domain Name System (DNS) servers.
• These act like phone books; they tell your computer the
IP address associated with the requested domain name.
• An IP address is a number of up to 12 digits separated
by periods / full stops.
• Every device connected to the web has a unique IP
address; it is like the phone number for that computer.
Cont…

3. The unique number that the DNS server returns to your

computer allows your browser to contact the web server
that hosts the website you requested.
A web server is a computer that is constantly connected
to the web, and is set up especially to send web pages
4. The web server then sends the page you requested back
to your web browser.
Hypertext Transfer Protocol (HTTP)

• WWW is a client/server architecture where client

machines request service from server machines.
• In a client/server architecture, some application
programs act as information providers (servers), while
other application programs act as information receivers
(clients).
• The backbone of the web is the network of web servers
across the world.
Conti…
• These are really just computers that have a particular
type of software running on them:
• web server, which knows how to speak the protocol and
• knows which information stored on the computer,
should be made accessible through the web.
• WWW use classical client / server architecture.
• The web browser is also particularly clever in the way it
displays what it retrieves.
• Web pages are written in a certain language called HTML.
Conti…
• The browser knows how to display these correctly,
whether you have a huge flat screen or a tiny screen on
a handheld device or phone.
• Web clients interact with web servers with a simple
application-level protocol called HTTP.
• HTTP runs on top of TCP/IP network connections and it
is a text-based request-response protocol.
• HTTP is the standard protocol for transferring web
content and it is the foundation of data communication
for the World Wide Web.
Conti…
Conti…
 W W W – World Wide Web.
 HTML – HyperText Markup Language – The Language
of Web Pages on the World Wide Web.
HTML is a text formatting language.
 URL – Uniform Resource Locator.
 Browser – A software program which is used to show
web pages.
Conti…
• when you type a URL or click a hyperlink, the browser
translates your action into HTTP commands that request
the document from the server specified in the URL.
• The web server finds the document and sends it back to
the browser, where it’s displayed,
• along with its associated graphics and other hyperlinks.
HTTP Request Model
 HTTP as a stateless request/response protocol whose basic operation is as follows:

 A client application, such as a web browser, opens a socket to the web server’s
HTTP port (80 by default).

 Through the connection, the client writes an ASCII text request line

 The web server parses the request and locates the specified resources.

 The server writes a copy of the resource to the socket, where it’s read by the
client.

 The server closes the connection.

 A web server operates by listening for requests on a well-known port number(default

80).
Sending the HTTP request

• The HTTP protocol is a request/response protocol. A client sends a request to

the server in the form of a request method, URI, and protocol version, followed
by possible body content over a connection with a server.
I. Request method: this signifies the kind of request that the client is asking
of the web server.

II. URI: Identifies the document or other resource being requested

III. HTTP version: Indicates the highest level of the HTTP specification the
client-application understands. Some allowable values are: HTTP/1.0 or
HTTP/1.1
Request method:

 GET: - A simple request to retrieve the resource identified in the URI. In

simple terms, when a client issues a GET request, it is asking the server for
something.
 POST: -A request for the server to accept data that will be written to the
client’s output stream. In simple terms, when a client issues a POST
request it is sending data to the server (e.g. uploading a file, submitting
user information, etc.)

 HEAD: -Same as GET, but returns only the status line and headers and not
return a message-body in the response.
Conti…
• URI stands for Uniform Resource Identifier, which is used
to identify resource on the web.
• A URI identifies a resource either by location, or a name,
or both. URIs can be classified as Uniform Resource
Locators (URLs), as Uniform Resource names (URNs), or as
both.
• A uniform resource name (URN) functions like a person's
name, while a uniform resource locator (URL) resembles
that person's street address.
• In other words, the URN defines an item's identity, while
the URL provides a method to find it.
Conti…
• A common URL is composed by four parts:
 The protocol: this specifies which protocol is used to access
the document. It is also called URL scheme.
 The computer name: Gives the name of the computer, usually
a domain name or IP address, where the content is hosted.
 The directories path: Sequence of directories separated by
slashes that define the path to follow to reach the document.
 The file name: The name of the file containing the resource.
Conti…
For example,
http://www.htmlquick.com/reference/tags/span.html
 Protocol: http://
 Computer name (domain name): www.htmlquick.com

 Directories path: /reference/tags/

 File name: span.html

The HTTP Response from the Server

• A.1.The HTTP version: the server indicates its capability in terms of HTTP version it
supports.

• A.2. Response Code: a 3-digit numeric code that indicates whether the request succeeded or
failed and, if it failed, the reason why.

 1xx- informational, indicating that the client should respond with some other action.

 2xx- successful, in the 200s signify that the request was successful.

 3xx- redirection, Values in the 300s are used for files that have moved and usually include a
Location header indicating the new address.

 4xx- client error, Values in the 400s indicate an error by the client.

 5xx- server error, Codes in the 500s signify an error by the server.
End Chapter 1
Thanks!