1

UNIT 1
THE INTERNET
AND THE WORLD
WIDE WEB 2
 Introduction to the Internet
 The Internet and the World Wide Web are often
used interchangeably.
 However, they refer to different yet
complementary technologies.
 Both have revolutionized communication,
information access, and business.

3
 What is the Internet?
 The Internet is a global network of interconnected
computers.
 It uses standard communication protocols (TCP/IP).
 Enables data exchange between devices worldwide.
 Examples of Internet services:
►Email ►File Transfer (FTP)
► Online gaming ►Voice over IP (VoIP)
4
How the Internet Works?

►The Internet is a globally interconnected

network of networks.
►It facilitates communication, learning, and
business worldwide.
►Understanding its architecture is crucial for web
design and development.

5
Overview of Internet Architecture
 The Internet is based on a layered structure:
- Physical Layer
- Data Transmission Layer
- Application Layer
 Protocols connect these layers to enable data
flow.
 Here is how the modern internet works, focusing
on structure: 6
 [Link] and Endpoints
 Devices: computers, smartphones, routers, servers
 Each has a unique IP address for identification
 Clients connect through Internet Service Providers
(ISPs)
 Example: A laptop connected via Wi-Fi or a phone
via mobile network

7
 [Link] Network Infrastructure
 Cables: copper, fiber optic, and undersea
cables(play a crucial role in intercontinental data
transmission), TV cables
 Routers & Switches: forward data packets to
destinations
 Servers: store, send, and receive data
 Data Centers: host servers and cloud computing
hardware
8
 [Link] Service Providers (ISPs)
 Provide internet access and manage data
transmission
 Offer web hosting, domain registration, and
security
 Examples: Comcast, BT, Deutsche Telekom,
Airtel, EthioTelecom, Safaricom
 Maintain and upgrade infrastructure like routers
and cables
9
 [Link] and Standards
 Key protocols include:
♦TCP/IP(Transmission Control Protocol/Internet
Protocol):
►TCP is ensures reliable transmission of data between
a source and destination.
-it is also breaks down data in to smaller packets
►IP is responsible for addressing and routing packets
so that they can travel across networks and arrive at the
correct destination.
♦DNS(Domain Name System): Translates human-
readable domain names into machine readable IP
10
addresses
♦ HTTP/HTTPS(Hyper Text Transfer
Protocol/Secure): Transfers web data securely.
-HTTP is the protocol used by the Web to transfer data
over the Internet and a request/response protocol
between clients and servers.
-HTTPS adds a layer of encryption to secure the data.
♦ SMTP(Simple Mail Transfer Protocol): Sends
emails from a client to server or between servers
♦ FTP(File Transfer Protocol): Transfers files
between systems over internets and use for moving
large file used by websites to upload or download files
11
 [Link] and Web Servers
 Clients use browsers like Chrome or Firefox to
send requests
 Web servers (Apache, Nginx) store and deliver
pages
 Communication follows the client-server model

12
 [Link] Transmission
 Data travels as packets across routers and
switches
 Routing algorithms choose efficient paths
 TCP/IP ensures packets arrive correctly and in
order

13
[Link] and Security Measures
 Firewalls act as gatekeepers, block
unauthorized access and potential cyber threats
 SSL/TLS encrypts data during transmission
 VPNs(Virtual Private Networks) enhance
privacy and security

14
 [Link] Addresses: IPv4 vs IPv6
 Every computer on the internet is assigned a series of
numbers, like [Link]. That series of numbers
uniquely identifies the computer over the internet. If a URL
like ([Link]) is a nickname for a website, an IP
Address (like [Link]) is its real name.
 IPv4(Internet Protocol Version 4): 32-bit address (~4.3
billion unique addresses), e.g., [Link]
 IPv6: 128-bit address for modern scalability, e.g.,
2001:0db8:85a3::7334
 IPv6 provides enhanced security and efficiency

15
 World Wide Web (WWW)
 The World Wide Web is an information system on the
Internet.
 Uses web browsers to access web pages linked by
hyperlinks.
 Invented by Tim Berners-Lee in 1989.
 Uses technologies like:
► HTTP (Hyper Text Transfer Protocol)
► HTML (Hyper Text Markup Language)
► URLs (Uniform Resource Locators)
16
 The World Wide Web (WWW) is a system of
interlinked hypertext documents accessed via the
Internet.
 It allows users to browse websites and interact with
web-based applications using browsers.
 Web pages contain text, images, videos, and
multimedia, connected through hyperlinks.
 It operates on top of the Internet and uses it to
transmit data.
17
The Internet vs The World Wide Web
 The Internet is a global network of interconnected
computers.
 The World Wide Web is one of the services running on the
Internet.
 The Internet provides infrastructure; the Web provides
access to linked documents.
 The Web uses HTTP protocol to transfer information
between browsers and servers.
 Example: When you open a webpage, you are using the
Web via the Internet.
18
Internet vs. World Wide Web
World Wide
Feature Internet
Web
Provides
Connects devices & information
Function transmits data through web
Global network of Collection of web pages
Definition computers pages
accessed via Internet

Email, FTP, VoIP, Websites, online

Services Chat media, e-commerce
Advanced Research
Tim Berners-Lee
Invented By Projects Agency
(1989)
(ARPANET, 1969)

Protocols UsedTCP/IP HTTP, HTTPS 19

Relationship Between Internet and
WWW
 The Web runs on the Internet.
 The Internet is the infrastructure, while the Web is
an application built on top.
 Without the Internet, the Web cannot function.
 Together, they enable online communication,
learning, and business.

20
 The Internet is the backbone of global connectivity.
 The WWW is one of its most powerful services.
 Understanding the difference helps us appreciate
the scope of digital innovation.
 Together, they shape our modern digital society.

21
 How the World Web Works?
 User enters a URL in the browser.
 Browser sends an HTTP request to the web server.
 Server responds with a web page.
 Browser displays the page using HTML, CSS, and
JavaScript.

22
►The WWW operates using a client-server model:
• Web servers store websites and deliver pages upon
request.
• Clients (browsers) request and display web content.
• Data transfer relies on key technologies:
- HTML (Hyper Text Markup Language)
- HTTP/HTTPS (Hyper Text Transfer
Protocol/Secure)
- Web browsers (Chrome, Firefox, Safari)
23
24
 Structure and Components of the
WWW
• Web Pages – HTML documents with text, images, and
multimedia.
• Web Browsers – interpret HTML and display content
(Chrome, Firefox).
• Web Servers – host and deliver web content.
• Hyperlinks – connect web pages and enable navigation.
• URLs – unique addresses pointing to specific web
resources.
• HTTP/HTTPS – protocols for secure data transfer between
clients and servers. 25
 Step-by-Step Process of Accessing
the Web
1. Entering a URL: User types an address like
[Link]
2. DNS Lookup: Browser translates URL to server’s IP
address.
3. HTTP Request: Browser requests the page from the web
server.
4. Server Processes Request: Server retrieves and sends the
webpage back.
5. Browser Displays Web Page: Content rendered using
HTML, CSS, JavaScript.
26
6. Navigation: User clicks hyperlinks to access other pages.
 HTTP (Hypertext Transfer Protocol) is a client-server
protocol used for requesting and transmitting web pages.
Clients (like browsers) send HTTP requests (GET, POST)
to servers, which respond with resources such as HTML
pages. It operates over TCP port 80 and uses a request-
response communication model.
Limitations of HTTP
HTTP operates over an unencrypted channel. Data can be
intercepted or modified during transmission. This makes
it unsuitable for sensitive data like passwords or financial
transactions.
27
Figure : How the World Wide Web
Works

28
 HTTP appears like:

29
 What is HTTPS?
 HTTPS (Hypertext Transfer Protocol Secure) is the
secure version of HTTP.
 It uses SSL/TLS encryption to protect data
between the client and the server.
 It operates over TCP port 443 and is recognized by
a padlock icon in browsers.

30
 Importance of HTTPS
• Encrypts communication for confidentiality
• Verifies website authenticity via SSL/TLS
certificates
• Prevents man-in-the-middle attacks
• Builds user trust and is essential for e-commerce,
banking, and login sites

 HTTPS appears the following image

31
HTTP vs HTTPS Summary
 HTTP: Unsecured, uses port 80, no encryption
 HTTPS: Secured with SSL/TLS, uses port 443,
encrypts communication, ensures data integrity

32
 Domain Name System (DNS)
 DNS is essential for web designers and developers.
 The Domain Name System (DNS) is hierarchical
naming system that translates domain names into IP
addresses.
 DNS translates human-readable domain names (like
[Link]) into IP addresses. It acts as the
Internet’s directory, allowing users to access websites
without remembering numerical IP addresses.
33
 How DNS Works?
1. User types [Link]
2. Browser sends query to DNS resolver
3. Resolver queries root, TLD, and authoritative
servers
4. IP address returned to browser
5. Browser sends HTTP/HTTPS request to that IP
6. Webpage loads

34
Figure : How the DNS Works

35
 Uniform Resource Locator (URL)
 A URL identifies address of a resource on the
internet. It includes several components:
URL Examples:
► HTTP: [Link]
► HTTPS: [Link]
► FTP: [Link]
► File: [Link]
36
 Definition and Structure
 URL: The concept and definition of a URL as a
standardized format for addressing resources on
the internet.
►it consists of several component

37
 1. Protocol
 The protocol tells your browser how to connect to a
webpage. It could be HTTP (hypertext transfer
protocol) or HTTPS (HTTP secure).
♠The main difference between the two is that HTTPS
encrypts and protects any data transmitted between the
server and browser.
 URL Examples with different Protocols:
► HTTP: [Link]
► HTTPS: [Link]
► FTP: [Link] 38
39
 2. Subdomain
 A subdomain is a string of letters or a complete word that
appears before a URL’s first dot.
 The most popular subdomain is www. It stands for World
Wide Web, communicating that the URL is a web address.

40
 3. Domain
 A domain is the main part of the URL that
identifies the website. Like MOE, Amazon,
Expedia, or Ethiotelecom.

41
 4. Top-Level Domain (TLD)
 The TLD (also called domain extension) is the part
that comes after the name of your website, like“.com.”
 Examples of TLDs include:
 Generic Top-Level Domains (gTLDs)
► .com: Commercial entities.
►.org: Non-profit organizations.
► .net: Network-related entities.
►.edu: Educational institutions.
► .gov: government agencies.
►.mil: military. 42
 Country Code Top-Level Domains (ccTLDs):
► .et: Ethiopia
► .us: United States.
► .uk: United Kingdom.
► .ca: Canada.
► .jp: Japan.
► .au: Australia

43
 New Generic Top-Level Domains (new gTLDs):
► .app: Application-related websites.
► . blog: Blogs and publications.
► . tech: Technology-related sites.
► . guru: Expert or advice-focused domains.

44
 5. Subfolder
 A subfolder is a folder or directory that is located within
the top-most directory (or main directory)in your site
hierarchy.
 For example, consider the URL [Link]/shoes/
In this URL, the“ shoes” subfolder is located within the
main directory of the website, which is [Link]

45
6. Slug
 A slug is the part of a URL that identifies a
specific page or a post on a website. It helps
users understand the context and content of a
page.

46
 7. URL Parameters
 URL parameters (or query strings) are part of a URL that
comes after a question mark (?). They’re composed of
keys and values, separated by an equal sign (=). The key
tells you what kind of information is being passed. The
value is the actual information being passed.

47
What is a Website?
 A website is a collection of web pages and
related content hosted on a web server and
accessible via the World Wide Web. It allows
individuals and organizations to share
information, showcase products/services, and
engage users.
 Example website ([Link])

48
 Purpose of Websites
• Information Dissemination: News, educational
sites, blogs.
• E-commerce: Selling products/services globally
(e.g., Amazon, eBay).
• Marketing and Branding: Showcase brand identity,
engage customers.
• Customer Service: FAQs, live chat, resources.
• Community Building: Forums, social media,
discussion boards.
• Entertainment: Streaming, games, interactive
49
media.
 Web Pages
 Web pages are documents written in HTML forming
the structure and content of a website. They include
headings, paragraphs, images, links, and multimedia
elements.

50
 Web Page Structure and Elements
• Web Page Structure: Headers, paragraphs, lists,
images, tables, forms.
• Hyperlinks: often referred to simply as links, are
the foundation of the Web. They allow users to
navigate between web pages by clicking on text or
image
• Multimedia: The inclusion of images, videos,
audio, and other media types within web pages to
enhance the user experience.
• Forms and User Input: Text fields, checkboxes,
radio buttons, dropdowns, submit buttons. 51
Types of Websites
 Websites can be categorized as Static or
Dynamic based on content management and
interactivity.

52
 A. Static Websites
Characteristics:
• Fixed Content: Each page displays the same
content to every visitor, making it consistent
and reliable.
• Quick to Load: With no need to process data on the
server side, static pages usually load
faster than dynamic pages.
• Simplicity: They are easier to create and host, as
they require less server-side infrastructure.
53
 Typical Uses of Static Websites:
• Landing Pages: Often used for specific campaigns
where information does not need to be dynamically
generated.
• Small Business Websites: Suitable for businesses
that need an online presence but do not require
frequent updates.
• Documentation: Perfect for documentation sites
where information changes are infrequent.

54
[Link] Websites
Characterstics;
• Interactive and Personalized Content: Content
can change based on user interactions or input,
providing a personalized experience.
• Server-side Processing: These sites rely on server
technology for functions like logging in users,
managing user input, and storing data.
• Flexibility: More adaptable to complex
functionalities like online stores or forums where
content needs to be updated frequently. 55
 Typical Uses of Dynamic Websites:
• E-commerce Sites: These require dynamic pages
for product listings, user accounts, and shopping
carts.
• Social Media Platforms: Dynamic websites are
necessary to handle real-time updates, user
interactions, and content personalization.
• Blogs and News Portals: Where content is
constantly updated and may need to be archived or
searched.
56
UNIT 2
WEB BROWSERS

57
 Introduction to Web Browsers
 A web browser is a software application that allows
users to access and interact with content on the
World Wide Web (WWW).
 It acts as a user interface for navigating the internet,
retrieving web pages, and displaying them.
 Browsers interpret HTML, CSS, and JavaScript to
present visually appealing websites.

58
Browser Functions
 Retrieve and display web pages from web servers.
 Enable users to search, navigate, and interact with
online content.
 Support multimedia (text, images, videos).
 Manage bookmarks, tabs, and history.

59
Figure: Browser Architecture

60
Evolution of Web Browsers
 Lynx – Text-based browser (early stage).
 Mosaic – Introduced graphical interface.
 Netscape Navigator – Popularized the web in the
1990s.
 Internet Explorer – Dominated early 2000s.
 Modern Browsers: Chrome, Firefox, Safari,
Edge, Opera.

61
Popular Web Browsers
 [Link] Chrome – Fast, simple, customizable,
integrates with Google services.
 2. Apple Safari – Optimized for macOS/iOS, energy
efficient.
 3. Mozilla Firefox – Open-source, strong privacy
protection.
 4. Microsoft Edge – Chromium-based, integrates with
Windows tools.
 5. Opera – Built-in VPN, ad blocker, and sidebar tools.
62
Figure: Common Web Browsers

63
 Navigating the Browser Interface
 Browsing (or Surfing): Searching and accessing
information online.
 Requirement: Internet connection.
 Browser Interface Elements:
►Address bar
►Tabs
►Bookmarks bar
► Navigation buttons (Back, Forward, Refresh)
► Menu and settings 64
Importance of Effective Information
Management
 Time Efficiency: Find websites faster through
bookmarks.
 Productivity: Access saved pages and organize
resources.
 Content Retention: Save valuable content for future
reference.
 Cross-Device Accessibility: Sync data across devices.
 Enhanced Security: Use password managers and
privacy settings.
65
Basic Navigation in a Browser
Window
 Web Browser Navigation means efficiently moving
through websites and web pages.
 Key actions include:
►Going forward and backward
► Refreshing pages
►Using the address bar
 Keyboard shortcuts and mouse gestures improve
navigation speed and convenience. 66
Key Components of Chrome Interface
[Link] Button : Returns to the previous page.
[Link] Button Goes to the next page after
going back.
[Link] Button: Reloads or updates the page
content. Useful when a page doesn’t load correctly.
[Link]:
►Allow multiple web pages in one window.
► Click “+” to open a new tab.
► Use Ctrl + Tab to switch between tabs. 67
[Link] Bar:
► Displays the URL of the current web page.
►Type a URL or keyword to navigate or search.
[Link] Button:
► Save favorite web pages for quick access later.
[Link] Button:
► Access installed extensions via the puzzle icon.
►Manage or configure extensions here.

68
[Link] Icon:
► Displays the active Google account.
► Allows switching between profiles or managing
account settings.
[Link] (Three Dots):
 Access browser tools and settings.
 Options include:
► Opening new tabs/windows
► Viewing history and downloads
69
► Adjusting browser settings
[Link] Management Buttons:
Control the size and visibility of the browser window.
►Minimize (-): Hides window to the taskbar.
►Maximize (□): Expands the window to full screen.
►Close (X): Exits the browser completely.

70
Importance of Managing Tabs
Efficiently
 Enhances productivity by allowing users to switch
between tasks quickly.
 Minimizes confusion and clutter.
 Saves memory compared to opening multiple
browser windows.

71
 Bookmarks
 Bookmarks (or favorites) are tools that allow users
to save and organize frequently visited websites for
easy access.
 Purpose:
►Quickly revisit favorite sites
►Save time and effort
►Avoid typing or remembering long URLs

72
Benefits of Using Bookmarks
✅ Easy access to frequently visited websites
✅ Saves time while browsing
✅ Keeps websites organized
✅ Works across all devices when you sign in to
Chrome

73
 Browser History
 Browser history is a record of all the web pages you
have visited, maintained by your web browser.
 Purpose:
►Helps revisit previously visited sites
►Enables autocomplete forms
►Allows resuming previous browsing activities

74
 Types of Data Stored in Browser
History
 Browsing History – URLs, page titles, and visit
timestamps
 Download History – Record of downloaded files
and dates
 Cookies and Site Data – Login info, preferences,
and session data
 Cached Files – Copies of web pages and images for
faster loading
 Passwords – Saved login credentials 75
 Auto fill Data – Saved form entries (name, address,
etc.)
 Search History – Search queries entered in search
engines
 Bookmarks – Saved URLs for quick access
 Site Settings – Permissions (camera, microphone,
etc.)
 Hosted App Data – Data from Chrome apps and
extensions
76
 Chrome does not store:
►Chrome internal pages (e.g., chrome://setting
►Private browsing activity (Incognito Mode)
►Deleted pages from your browsing history

77
Viewing the Source Code of a
Website
 The page source is the static HTML markup of a
web page.
 It includes elements such as headings, paragraphs,
links, images, and scripts.
 The source code does not display dynamic changes
made by JavaScript after page load.

78
 Why View Source Code?
 To understand web design and structure.
 To debug HTML, CSS, or script issues.
 To learn from other developers’ techniques.
 To analyze website metadata and SEO tags.

79
 Setting and Managing Search Engines
in Google Chrome
►Common Default Search Engines
 Google: Known for speed, relevance, and a vast web
index.
 Bing: Integrates with Microsoft products and
Windows features.
 Yahoo: Combines search, news, and email services.
 DuckDuckGo: Emphasizes privacy and does not
track user searches 80
Importance of Managing Search
Engines
 Enables customization of browsing and search
experience.
 Allows prioritization of privacy or performance.
 Facilitates quick access to preferred information
sources.
 Useful for setting region-specific or specialized
search tools.
81
 Privacy, Security, and Syncing
Browsing Data Across Devices
 Online privacy and security are essential for
protecting personal data during web browsing.
 Browsers like Google Chrome provide robust
tools to control data access, prevent tracking, and
secure online activities.
 Synchronization (“Sync”) enhances user
experience by linking browser data across
multiple devices. 82
 Key Privacy and Security Features
in Browsers
 Safe Browsing: Warns users about potentially dangerous
websites or downloads.
 Do Not Track: Requests that sites avoid tracking browsing
activities.
 Site Permissions: Manages access to camera, microphone,
and location.
 Password Manager: Stores and secures passwords.
 Clear Browsing Data: Deletes cache, cookies, and history to
enhance privacy. 83
 Tabs and Windows Management
 To open a new tab:
♦Click on the "+" icon next to the existing tabs or press Ctrl
+T (Cmd + T on Mac).
 To close a tab:
♦Click on the "X" icon on the tab, or right-click on the tab and
select "Close Tab."
 To switch between tabs: Click on the desired tab.
 To open a new window: Go to the Firefox menu (three
horizontal lines) > New Window, or press Ctrl + N (Cmd +
N on Mac).
84
 Settings Up New Tab Page and
Home Page
 To customize the new tab page:
♦ Go to Firefox menu > Preferences (Options on
Windows) > Home. Choose "Firefox Home" or a
custom URL for new tabs.
 To set the home page:
♦Go to Firefox menu > Preferences (Options on
Windows)> Home. Enter the desired URL in the
"Homepage and new windows" field. 85
Create Bookmark Folder
 To create a bookmark folder:
♦Click on the bookmark icon (star icon) in the
address bar > Choose "Bookmark This Page" >
Select "More" > Choose "New Folder" > Name
the folder > Click "Done."

86
Bookmark Favorite Pages
 To bookmark a page:
♦ Click on the bookmark icon (star icon) in the
address bar >Choose "Bookmark This Page" >
Select the desired folder or create a new one >
Click "Done."

87
Open Bookmarked Pages
 To open a bookmarked page:
♦ Click on the bookmark icon (bookmarks
toolbar or menu) > Select the desired
bookmarked page from the list.

88
Managing Browser History
 To view browsing history:
♦Go to History menu > Show All History, or
press Ctrl + H (Cmd + Shift + H on Mac).
 To clear browsing history:
♦Go to History menu > Clear Recent History, or
press Ctrl + Shift + Del (Cmd + Shift + Del on
Mac).

89
Download, Save Files to a Location
 To download a file:
♦ Click on a download link > Choose the
download location >Click "Save."
 To access downloaded files:
♦ Go to the Firefox menu > Downloads, or press
Ctrl+ J (Cmd + J on Mac).

90