Chapter One

Overview of the
internet and
www
 Outline
• Internet History, uses, and services
• Hypertext and the World Wide Web
• Introduction to web programming
• Programming vs. Scripting
• Difference between programming and scripting
• Commonly used scripting languages in web development
• Client/Server Model
• Universal Addressing
• Universal Protocols
• Website evaluation
• readability, layout, coloring, trust…
• Basic UI/UX Design and concept
Internet History
• The internet as we know it today is a vast, interconnected
network that has transformed how we communicate, work,
learn, and interact.
• The origin of the internet dates back to the 1950s when the
world was grappling with the Cold War, and researchers
sought to create a communication system that could
withstand disruptions.
• As cold war tensions grew and Sputnik was launched, the
United States Department of Defense (DoD) began to seek
additional methods of transmitting information to
supplement existing methods. Sputnik was the world's first
artificial Earth satellite, launched by the Soviet Union on
October 4, 1957
 Internet History
• They sought something that was decentralized, allowing
better resiliency in case of attack, where damage at one
point would not necessarily disrupt communication.
• Their network, Arpanet(Advanced Research Projects Agency
Network), connected the DoD and participating universities
together for the first time.
• In order to standardize the way networked systems
communicated the Transfer Control Protocol/Internetk
Protocol (TCP/IP) was created.
• As various network systems migrated to this standard, they
could then communicate with any network using the
protocol. The Internet was born.
Key Milestones in Internet History
• 1969: Launch of ARPANET, the first operational packet-
switching network.
• 1971: The first email is sent by Ray Tomlinson.
• 1983: Adoption of TCP/IP as the standard protocol for
ARPANET.
• 1989-1990: Tim Berners-Lee invents the World Wide Web.
• 1993: The first graphical web browser, Mosaic, is released.
• 1998: Google is founded, revolutionizing search engines.
• 2007: The iPhone introduces widespread mobile Internet
access.
• 2010s: Rise of cloud computing, social media, and
streaming services.
 Who Invented the Internet?
• While no single person can claim to have “invented”
the Internet, it emerged through the collaborative
efforts of numerous brilliant minds over several
decades.
Vint Cerf and Bob Kahn Known as “The Fathers of the
Internet”
Key Contributions:
• Invented TCP/IP protocol in 1974
• Created the foundation for data transmission
• Developed internet architecture
• Established basic internet communication standards
Services Internet
Internet Services allows us to access huge amount of
information such as text, graphics, sound and software
over the internet. Following diagram shows the four
different categories of Internet Services.
Communication Services
There are various Communication Services available
that offer exchange of information with individuals or
groups.
• Electronic Mail: Used to send electronic message
over the internet.
• Telnet: Used to log on to a remote computer that is
attached to internet.
• Newsgroup: Offers a forum for people to discuss
topics of common interests.
• Internet Relay Chat (IRC): Allows the people from
all over the world to communicate in real time.
Communication Services

• Mailing Lists: Used to organize group of internet

users to share common information through e-
mail.
• Internet Telephony (VoIP): Allows the internet
users to talk across internet to any PC equipped
to receive the call.
• Instant Messaging: Offers real time chat between
individuals and group of people. Eg. Yahoo
messenger, MSN messenger.
Information Retrieval Services
• File Transfer Protocol (FTP): Enable the users to
transfer files.

Web Services
• Web services allow exchange of information
between applications on the web. Using web
services, applications can easily interact with each
other.
World Wide Web (WWW)
• WWW is also known as W3. It offers a way to access
documents spread over the several servers over
the internet. These documents may contain texts,
graphics, audio, video, hyperlinks. The hyperlinks
allow the users to navigate between the
documents.
 Uses of Internet

ref javatpoint
 Hypertext and its significance
• Hypertext most often refers to text on a
computer that will lead the user to other,
related information on demand.
• that is the ability, in a computer environment,
to move from one part of a document to
another or from one document to another
through internal connections among these
documents (called "hyperlinks");
• Hypertext allows system designers to organize
information in a branching structure instead of
a linear one.
World Wide Web
• The World Wide Web and its associated Hyper Text
Transfer Protocol (HTTP) grew out of work done at
the European laboratory for particle physics (CERN)
in 1990
• Time Bernes-Lee developed HTTP as a network
protocol for distributing documents and wrote the
first web browser.
• HTTP is simple request/response protocol in which
web browser asks for a document and the web
server return the document in the form of HTML
data stream preceding by a few descriptive
headers.
World Wide Web
• Also called web.
• Is the most popular application or service of an internet.
• A collection of interlinked multimedia documents that are
stored on the Internet and accessed using a common protocol
(HTTP)
• Web pages could be static (fixed) or dynamic (changing).
• A Web site is a collection of related Web pages stored on the
same web server.
• A Web Server is a computer that delivers requested Web pages
to your computer. The same Web server can store multiple Web
sites.
• WWW is just a collections of websites around the world.
 Introduction to web programming

• Web programming involves creating web pages,

web applications, and other online content that
can be displayed in a web browser.
• Web programming is used to create websites,
online stores, web applications, and other online
services that are accessed through the Internet
• Web programming is accomplished using a
variety of programming languages, including
HTML, CSS, JavaScript, PHP, Python, Ruby, and
Java.
 Introduction to web programming

Web Development can be classified into two ways:

• Frontend Development
• Backend Development
Frontend Development
• The part of a website where the user interacts directly is
termed as front end. It is also referred to as the ‘client
side’ of the application.
Backend Development
• Backend is the server side of a website. It is part of the
website that users cannot see and interact with. It is the
portion of software that does not come in direct contact
with the users. It is used to store and arrange data.
 Introduction to web programming
Key Components of Web Programming
• Client-Side Technologies: Client-side technologies are
web technologies that run on a user's device, usually
within the user's browser. such as HTML, CSS, and
JavaScript, enabling dynamic user interfaces and
interactive web.
• Server-Side Technologies: A form of web server
technology in which users' requests are fulfilled by
running a script directly on the web server to generate
dynamic HTML pages.
• It is used to provide interactive web sites capable of
interfacing with databases and other data stores.
• Server-Side Technologies include: Server-Side
Languages, Databases and Server Environment.
Introduction to web programming

Client-Side Technologies
• HTML: stands for HyperText Markup Language. It
is used to design web pages using a markup
language.
• HTML is the combination of Hypertext and
Markup language.
• Hypertext defines the link between the web
pages.
• A markup language is used to define the text
document within tag which defines the structure
of web pages.
 Introduction to web programming
Client-Side Technologies
• CSS : Cascading Style Sheets is a stylesheet language
used to design the webpage to make it attractive.
• A stylesheet language is used to describe the
presentation and formatting of a document written in a
markup language such as HTML.
• The reason for using CSS is to simplify the process of
making web pages presentable.
• CSS allows you to apply styles to web pages.
• More importantly, CSS enables you to do this
independent of the HTML that makes up each web
page.
 Introduction to web programming
Client-Side Technologies
• JavaScript: JavaScript is the most powerful and versatile
scripting language used in the web.
• It is a lightweight, cross-platform, single-threaded and
interpreted scripting language.
Lightweight: lightweight programming language, means that it can
run on almost any device without requiring a lot of memory or
processing power, is easy to implement.
Single-threaded: refers to a program design where tasks are
executed sequentially
cross-platform: designed to function on multiple operating systems
or environments without requiring significant modifications
• It is a commonly used programming language to create dynamic
and interactive elements in web applications. It is easy to learn.
 Introduction to web programming
Server-Side Technologies
• Server-Side Languages: Languages like PHP, Python,
Ruby, Java, and [Link] are used to handle server-side
logic, process requests, and generate dynamic content.
• Databases: Systems like MySQL, PostgreSQL, MongoDB
are used to store and retrieve data dynamically, enabling
web applications to manage and manipulate information.
• Server Environment: Software environments such as
Apache, Microsoft IIS (Internet Information Services)
provide the infrastructure to host and serve web
applications. They handle incoming requests, route them
to the appropriate handlers, and send responses back to
clients.
 Introduction to web programming
How the Web Work?
The stream of event that occurs with every web page that
appears on screen.
1. You request a web page by either typing its URL(for e.g
[Link] directly in the browser or by
clicking on a link on the page. The URL contains all the
information needed to target a specific document on a
specific web server on the internet.
[Link] browser send an HTTP request on the server named
in the URL and asks for a specific file .if the URL specifies
a directory(not a file).it is the same as request the
default file in that directory.
 Introduction to web programming
How the Web Work?
3. The server looks for the request file and sends an either of
the following HTTP response:
If the page cannot be found. The server return an error
message . the message typical says “404” not found.
• If the document is found. The server retrieves the
requested file and returns it to the browser.
4. The browser parses the HTML document. If the page
contains images(indicated by the HTML img tag), the browser
contacts the server again to request each image files
specified in the markup
5. The browser inserts each image in the document flow
where indicated by the img. Then, the assembled web page is
displayed for your viewing pleasure.
How the Web Work?
Programming vs. Scripting
 Programming vs. Scripting
• Both scripting and programming are computer languages.
• The basic difference between a scripting language and a
programming language is that scripting languages do not
need an additional step of compilation and rather they are
interpreted, whereas programming languages are compiled
and hence need a compilation step to convert the high-level
language to machine code.
• Programming Languages: are compiled languages, which
means the source code is translated (compiled) into machine
code once and then executed by the hardware
Examples of pure compiled languages are C, C++, Erlang,
Haskell, Rust, and Go.
 Programming vs. Scripting
• Interpreted Languages: Interpreters run through a program
line by line and execute each command (The code is
compiled and executed each time the program is run).
• Interpreted languages were once significantly slower than
compiled languages. But, with the development of just-in-
time compilation, that gap is shrinking.
• Just-in-time compilation: is a method for improving the
performance of interpreted programs. During execution the
program may be compiled into native code to improve its
performance. It is also known as dynamic compilation.
Examples of common interpreted languages are PHP, Ruby,
Python, and JavaScript.
 Programming vs. Scripting
• "A scripting language is a type of programming language which
does not require explicit compilation step, and it is designed for a
runtime system to automate the execution of tasks."
For example, a JavaScript program is not needed to be compiled
before we run it. These are also known as very high-level
programming languages because of working at a high level of
abstraction.
• Scripting languages support "script," which is small program
written for a specific runtime environment. These are interpreted
at runtime rather than compiled. It means, to convert the source
code to machine code, scripting languages use an interpreter,
not the compiler. As scripting language is not compiled so as we
write something meaningful, we can run it immediately.
 Programming vs. Scripting
Advantages of scripting language
• It is an easy and quick process to learn coding in Scripting language
• In scripting languages, a wide variety of libraries is available that
enable the developers to develop new applications.
• With the help of scripting languages, we can add visualization
interfaces and combinations to web pages. Most of the latest web
pages need scripting languages for creating enhanced web pages,
fascinating UI, and many more.
• There are less number of data structures and variable to be used,
which make it highly efficient.
• These are Less code-intensive as compared to traditional
programming languages.
 Commonly used scripting languages in
web development
• Client-side and server-side scripting are two essential
components of web programming that enable the creation of
dynamic websites.
The server-side scripting and client-side scripting collaborate
with one another to create a dynamic websites. However, these
two scripting techniques are different, where:
• the client-side scripting focuses on developing the web
application or website's interface to be more attractive and
functional.
• On the other hand, server-side scripting mainly focuses on
data access techniques, quick processing, error handling, etc.
Client-side scripting
• Client-side scripting refers to code that runs on
the user's browser (executed on the client end
without needing server-side processing).
• Client-side scripting may be utilized to check the
user's form for problems before submitting it and
to change the content based on the user input.
• The web needs three components to function
client, database, and server.
• The client-side scripting may significantly reduce
server demand.
 Client-side scripting
• Example : JavaScript is a client-side scripting
language designed for a specific purpose, but
several JavaScript frameworks are already
utilized as server-side scripting technologies.
 Client-side scripting
Some main features of the client-side scripting are:
• It is intended to execute code on which a web
browser runs, and the results of the inputs are
delivered to an accessible user.
• Client-side scripting enables greater involvement
with clients via the browser and is used to
validate programs and functionality based on the
request.
• The client does not include any contact with the
server in client-side scripting; the only
interaction is receiving the requested data.
server-side scripting
• server-side scripting involves code that executes on the
web server. In other words, server-side scripting is any
scripting method that may operate on a web server.
• At the server end, actions such as website customization,
dynamic changes in website content, response creation
to user requests, database access, and many more are
carried out.
• There are various server-side scripting languages. Some
main server-side scripting languages are: Python, PHP,
Ruby etc.
server-side scripting
Some main features of the server-side scripting are:
• It is connected with data access, error handling, and data
processing speed.
• It is processed and interacts with the server.
• Using a highly integrated programming language makes it
more secure than client-side scripting.
 Client-side scripting Vs server-side scripting
Client-side scripting server-side scripting
• client-side scripting is utilized at the • Server-side scripting is utilized in the
front end, which users may access backend when the source code is invisible or
via the browser and the source code hidden on the client side. output of server-
is visible to the user. side is an HTML page
• Its main function is to provide the • Its primary function is to manipulate and
requested output to the end user. provide access to the respective database as
• It reduce the server load. per the request.
• It runs on the user’s computer. • It may effectively customize web pages and
• It doesn't offer any access to the files offer dynamic websites.
on the web servers. • It runs on the webserver.
• It is less secure than server-side • It offers complete access to the file that is
scripting due to the code stored in the web database server.
accessibility offered to the client. • It is more secure.
Client-Server Model
• The Client-server model is a distributed application structure that
partitions tasks or workloads between the providers of a resource
or service, called servers, and service requesters called clients.
• In the client-server architecture, when the client computer sends a
request for data to the server through the internet, the server
accepts the requested process and delivers the data packets
requested back to the client.
• Clients are devices or programs that request services or resources,
while
• The server is a powerful machine providing these resources or
services.
Client-Server Model
• This architecture allows efficient data management and resource
sharing, making it popular in web applications, databases, and other
network-based systems.
• By separating roles and distributing tasks, client-server architecture
enhances performance, scalability, and security.