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
