Internet and Web Technology

Module 1 : Web Development Introduction

(Web Browser)

-Sheetanshu Krishna
 ●
Web Development Introduction
Internet ●
HTML
and Web ●

●
Cascading Style Sheets (CSS)
Java Scripts
Technolo ●
JQUERY
●
Bootstrap
gy ●
XML & JSON
Module 1 : Web Development Introduction
Internet

WWW

Browser

Search engine

Client Server Model

URL (Uniform Resource Locator ))

Web Pages, Website and Web Services,

Types of Websites (Static, Dynamic and Responsive),

Developer options of Browser (View page source, Developer Tools, Inspect Element etc

Need of cyber security & IT Laws

 Learning Outcome
 What is a Web Browser ?
 Types of Web Browsers
 Features of Web Browsers
 Popular Web Browsers
 How Web Browser Works ?
 Web Browser
 Acts as an interface between user and internet and performs following
tasks on behalf of the user :
 Contact a web Server and Sends request to Server
 Receives the information and then displays it on user`s Computer
 It Translates the Websites/ Web Pages and displays the result to user. This
process is known as rendering.

Request

Response
Web Browser
 Web Browser
Web browser is a Software Application.
Worldwide Web was the first Web browser created by Tim berners
– Lee in 1990. It was renamed Nexus to avoid confusion caused by
the actual WWW (World Wide Web).
By using Web browser user can view and explore information on
the internet.
Used to locate , retrieve and display the content on WWW (World
Wide Web)
Also known as Browser , Internet Browser or Web Client.
By using Web Browser text , audio-video, animation, pictures can
be shown and represented on the web
 Types of Web Browser

Text Web Browser

That displays only text
based information .
Example : LYNX
 Types of Web Browser

Graphical Web Browser

Supports text and
graphical information
First Graphical web
browser was NCSA
Mosaic
 Popular Web Browsers
Google Chrome Developed by Google

Safari developed by Apple

Microsoft Edge developed by Microsoft

Firefox Developed by Mozilla Foundation

Samsung Internet Browser developed by Samsung
Electronics

Opera developed by Opera Software

UC Browser developed by UCWeb (Alibaba Group)

Features of Web Browser
 Features of Web Browser
Access the Web Page using URL
Navigation to previous visited page is possible by Arrow sign
Web pages can be opened in :
a same window
in new window
In new tab
In new private windows/tab
Bookmark the page and Manage all your Bookmarks
Browser keeps the history of your browsing
Browser can download the resources in a definite folder
Browser can save the user name and password of different sites with user
permission
How Web Browser Works in Client Server Model

In Client Server Model Server keeps all the resources and

Client will access it whenever required
 How Web Browser Works ?
Step - 1: Open the Web Browser
Step -2: Type the Web Address in the Address Bar of
Domain Name Server
Web Browser
Step -3: DNS Lookup happened to identify the IP
3.1
3.2 Address of Server
Step -4 : Web Browser (Client) send the request to Web
Server using http protocol

Client
 How Web Browser Works ?
Step-1 : Open the Web Browser
Step-2 : Type the Web Address in the Address Bar of Web Browser
Step-3 : DNS Lookup happened to identify the IP Address of Server
Step-4 : Web Browser (Client) send the request to Web Server using http
protocol
Step-5 : Web Server process the request and send the Web Response back to
client. Web Response will be the Web Document (HTML Document).
Step-6 : Browser will now download all related files of Web Document
Step-7 : Browser starts interpreting the Web Page Document
• Interpret the HTML to identify the structure
• Understand the CSS and provide the styling to Web Page
• Understand Java script and provide dynamic behaviour to the Web Page
Step-8 : Display the Content of Web Page
Developer Tools in a
Web Browser
 Web browser Developer Tools

Elements Tab
Console Tab
Sources Tab
Network Tab
Performance Tab
Memory Tab
Application Tab
Security Tab
Audit Tab
Web Browser
Architecture
Web Browser Architecture
 Web Browser Architecture
User Interface

 User Interface
provides method to user
to interact with Browser
Engine.

 Address bar, back &

forward button ,
bookmark is the part of
User Interface
 Web Browser Architecture
Browser Engine

 Works between UI and

Rendering Engine

 Provides methods to
initiate the loading of a URL
and other browsing events
like reload, back and
forward.

Provides error messages

and loading progress
message to UI
 Web Browser Architecture
Rendring Engine
 Produces visual
representation of a URL.

 Interprets the HTML/XML

and generates Layout

HTML parser which works

on html tags is the part of
Rendering Engine

Different browsers use

different rendering engines
for example Trident, Gecko ,
WebKit etc
 Web Browser Architecture
Networking

 Provides functionality to
handle :
 URLS
Internet protocols
Internet
communications
Security

 May Implement cache to

minimize network traffic
 Web Browser Architecture
Java Script Interpreter

 Executes the
JavaScript Code.

 Execution Result will

passed to Rendering
Engine.
 Web Browser Architecture
UI Backend

 Used for drawing

basic widgets like combo
boxes and windows
 Web Browser Architecture
Data Persistence

 manages user data such as

:
Bookmarks
Cookies
Prefrences
HTML 5 Web database
 Summary
What is Web Browser
Types of Web Browsers
Main Features of Web browser that is useful in
Browsing
Popular Web Browser in 2020
How Web browser works in Client Server Model
Web Browser Architecture
 Thanks for Watching
SUBSCRIBE Now ! For more video updates