Internet Basics
Introduction to the Internet
• Definition: The Internet is a global network of interconnected computers that
communicate via standard protocols (like TCP/IP).
• Origin: It began as ARPANET in the late 1960s, developed by the U.S. Department
of Defence.
• Functionality: It enables data sharing, resource exchange, communication, and access
to information worldwide.
Features of the Internet
Feature Description
Global Connectivity Connects millions of devices globally.
Accessibility Accessible 24/7 from any location with internet access.
Multimedia Support Handles text, audio, video, images, and animations.
Interactivity Enables two-way communication (e.g., emails, chats).
Scalability Easily accommodates new users and devices.
No central control; governed by protocols and organizations like
Decentralized
ICANN, IETF.
Cost-Effective Low-cost communication and information sharing.
Dynamic Nature Content is continuously updated and accessible.
Applications of the Internet
Domain Applications
Communication Email, VoIP (e.g., Skype), Messaging Apps, Video Calls
Education E-learning, MOOCs, research papers, online libraries
Online shopping (Amazon), auctions (eBay), payment systems
E-commerce
(PayPal)
Entertainment Streaming (YouTube, Netflix), gaming, social media
Banking Online transactions, mobile banking, UPI, NEFT
Healthcare Telemedicine, health records, symptom checkers
Cloud Services Google Drive, Dropbox, AWS
Social Networking Facebook, Twitter, Instagram, LinkedIn
Services of the Internet
Service Description
A system of interlinked hypertext documents accessed via
WWW (World Wide Web)
browsers.
Email (Electronic Mail) Sending messages electronically over the Internet.
FTP (File Transfer Protocol) For transferring files between computers.
VoIP (Voice over IP) Internet-based calling service (Skype, Zoom, WhatsApp).
IRC (Internet Relay Chat) Real-time text communication system.
Telnet Protocol for accessing remote computers.
Search Engines Tools to find information (Google, Bing).
Cloud Computing Accessing remote servers for storage, computing, etc.
Logical and Physical Addresses
Physical Address
• Also known as MAC Address (Media Access Control).
• Permanent and assigned by the manufacturer.
• Format: 6 pairs of hexadecimal digits (e.g., 00:1A:2B:3C:4D:5E).
• Operates at the Data Link Layer (Layer 2 of OSI).
Logical Address
• Also known as IP Address (Internet Protocol).
• Assigned by network administrators or ISPs.
• Format:
o IPv4: 32-bit (e.g., 192.168.1.1)
o IPv6: 128-bit (e.g., 2001:0db8:85a3:0000:0000:8a2e:0370:7334)
• Operates at the Network Layer (Layer 3 of OSI).
• Can be dynamic (changes) or static (fixed).
Relationship:
• Data is routed via logical addresses (IP), but is physically delivered using MAC
addresses.
Internet Service Providers (ISP)
• Definition: A company that provides access to the Internet for individuals and
organizations.
• Examples:
o India: Jio, Airtel, BSNL, ACT Fibernet
o Global: Comcast, AT&T, Verizon
• Types of Services Provided:
o Dial-up (legacy)
o Broadband (DSL, fiber, cable)
o Mobile data (3G, 4G, 5G)
o Satellite Internet
o Hosting and domain services
Roles of ISPs:
• Assign IP addresses
• Manage internet bandwidth
• Provide DNS services
• Ensure network security and support
Domain Name System (DNS)
Definition:
• DNS is the "phonebook" of the Internet.
• Converts domain names (e.g., www.google.com) into IP addresses (e.g.,
142.250.183.78).
Components:
Component Description
Domain Name Human-readable name (e.g., example.com)
DNS Resolver Client-side system that queries DNS
Root Server Top of DNS hierarchy, directs to TLD servers
TLD Server Manages top-level domains (e.g., .com, .org)
Authoritative Server Contains the actual IP for the domain
Working of DNS:
1. User types www.example.com.
2. Browser asks DNS Resolver to resolve it.
3. Resolver queries Root Server → TLD Server → Authoritative Server.
4. Gets IP address and loads the website.
Importance:
• Improves user-friendliness.
• Enables distributed and scalable internet infrastructure.
• Supports caching to reduce lookup time.
Difference between Physical Address and Logical Address:
Feature Physical Address Logical Address
An address assigned by software to
A unique identifier assigned to a device’s
Definition identify a device on a network (IP
network interface (MAC address).
address).
MAC Address (Media Access Control
Other Name IP Address (Internet Protocol Address)
Address)
Level in OSI Model Data Link Layer (Layer 2) Network Layer (Layer 3)
Type Hardware Address Software/Network Address
Permanence Permanent; set by the manufacturer Temporary or dynamic; can be changed
48-bit hexadecimal (e.g., IPv4: 32-bit (e.g., 192.168.1.1) or IPv6:
Format
00:1A:2B:3C:4D:5E) 128-bit
Used within a local network to deliver Used to route packets across different
Usage
data frames networks
Commonly seen and used (e.g., in URLs,
Visibility Not usually visible to users
configurations)
Assignment Assigned by hardware manufacturer Assigned by network administrator or ISP
Example AC:DE:48:00:11:22 192.168.0.1 or 2001:0db8::1
Quick Analogy:
• Physical Address is like your home’s physical location (permanent and unique).
• Logical Address is like your mailing address which can change depending on your
location or network.
_________________________________________________________________________________
Introduction to Web and Web Technologies
Introduction to the Web
• Definition: The Web (World Wide Web) is a system of interlinked hypertext
documents and multimedia content accessible via the Internet using web browsers.
• Invented by: Sir Tim Berners-Lee in 1989.
• Components:
o Web Pages: Documents written in HTML.
o Web Servers: Host and serve web content.
o Web Clients (Browsers): Display content.
• Working: A user sends a request (usually via a URL) to a web server, which responds
with the requested webpage that the browser displays.
Web Browser
• Definition: A web browser is a software application that retrieves, renders, and
displays web content from the internet.
Common Web Browsers:
• Google Chrome
• Mozilla Firefox
• Microsoft Edge
• Safari
• Opera
Key Features:
Feature Description
Rendering Engine Displays HTML content (e.g., Blink for Chrome)
Address Bar Used to enter URLs
Navigation Buttons Back, Forward, Refresh
Tab Management Allows multiple web pages to be opened
Extensions/Add-ons Extra functionalities like ad blockers
Developer Tools For inspecting and debugging web pages
HTTP / HTTPS
Protocol HTTP (HyperText Transfer Protocol) HTTPS (HTTP Secure)
Purpose Transfers data between browser and server Same as HTTP, but securely
Security No encryption (data is plain text) Encrypted via SSL/TLS
Port Used Port 80 Port 443
URL Prefix http:// https://
Use Case Non-sensitive information Login forms, payments, etc.
Why HTTPS Matters:
• Protects data from eavesdropping and tampering.
• Builds user trust (lock icon in browser).
• Preferred by search engines for SEO.
URL (Uniform Resource Locator)
• Definition: A URL is the address used to access web resources.
• Structure:
https://www.example.com:443/path/to/page?query=123#section
|______| |_______________| |__| |___________| |_______| |_____|
Scheme Domain Name Port Path Query Fragment
Components:
Part Example Description
Protocol/Scheme https Communication method
Host/Domain www.example.com Location of the resource
Port (optional) :443 Network port (default: 80 for HTTP, 443 for HTTPS)
Path /path/to/page File or resource location
Query string ?query=123 Parameters passed to the server
Fragment #section Refers to a specific part of the page
HTML5 (HyperText Markup Language – Version 5)
• Definition: HTML5 is the latest version of HTML used to structure content on the
web.
• Purpose: Describes the elements of a webpage (headings, paragraphs, links, images,
forms, etc.)
Key Features:
Feature Description
New Semantic Tags <header>, <footer>, <section>, <article>, <nav>
Multimedia Support <audio>, <video> without plugins
Canvas Element <canvas> for drawing graphics via JavaScript
Form Enhancements Input types like email, date, range
Geolocation API Allows websites to access user location
Local Storage Stores data on the client side using localStorage or sessionStorage
Mobile-Friendly Designed with responsiveness and mobile support in mind
Example:
<!DOCTYPE html>
<html>
<head>
<title>My First HTML5 Page</title>
</head>
<body>
<header><h1>Welcome to My Website</h1></header>
<article>
<p>This is an example of HTML5.</p>
</article>
</body>
</html>
CSS (Cascading Style Sheets)
• Definition: CSS is used to style and layout HTML elements on a webpage.
• Separation of Concerns: Keeps content (HTML) and design (CSS) separate.
Features:
Feature Description
Selectors Apply styles to specific HTML elements
Properties Define how elements appear (color, size, layout)
Responsive Design Media queries adjust layout for different screen sizes
Animations Add transitions, animations to elements
Frameworks Tools like Bootstrap, Tailwind CSS speed up design
Example:
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: navy;
text-align: center;
}
CSS Types:
Type How it's applied
Inline CSS Within an HTML tag using style attribute
Internal CSS Inside a <style> block in the <head> section
External CSS Linked using <link rel="stylesheet" href="style.css">
HTML Tags and Their Definitions
1. <head>
• Purpose: Contains metadata about the HTML document (not displayed on the webpage).
• Usage: Includes <title>, CSS links, meta tags, and scripts.
<head>
<title>My Webpage</title>
<meta charset="UTF-8">
</head>
2. <a>
• Purpose: Defines a hyperlink to another page, location, or file.
• Usage: Needs an href attribute.
<a href="https://www.google.com">Visit Google</a>
3. <title>
• Purpose: Sets the title of the webpage (shown on the browser tab).
• Usage: Placed inside <head>.
<title>My First Page</title>
4. <body>
• Purpose: Contains all the visible content of the HTML document (text, images, links, etc.)
<body>
<h1>Hello, world!</h1>
</body>
5. <li>
• Purpose: Stands for List Item, used inside <ol> or <ul>.
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
6. <ol>
• Purpose: Defines an Ordered List (numbered list).
<ol>
<li>First</li>
<li>Second</li>
</ol>
7. <font>
• Purpose: Used to define font style, size, and color.
• Note: Avoid using this tag. Use CSS instead.
<font color="red" size="4">Deprecated Tag</font>
8. <h1> / <h2>
• Purpose: Define headings from <h1> (largest) to <h6> (smallest).
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
9. <p>
• Purpose: Stands for Paragraph, used to display blocks of text.
<p>This is a paragraph of text.</p>
10. <br>
• Purpose: Line break, used to insert a new line without starting a new paragraph.
• Self-closing tag.
Line one<br>
Line two
11. <a href>
• Purpose: Specifies the destination URL of a hyperlink.
• href stands for Hypertext REFerence.
<a href="https://example.com">Click Here</a>
12. <hr>
• Purpose: Horizontal Rule — inserts a horizontal line on the page.
• Used for separating content.
• Self-closing tag.
<p>Above the line</p>
<hr>
<p>Below the line</p>
• Purpose: Root element of an HTML document.
• Usage: Wraps all the content on the page.
<html>
<head>...</head>
<body>...</body>
</html>
14. <div>
• Purpose: Generic block-level container used to group elements for CSS styling or scripting.
• Usage: Often used for layout and design.
<div style="background-color:lightgray">
<p>This is a block of content.</p>
</div>
15. <span>
• Purpose: Generic inline container for styling a part of text or element.
• Usage: Unlike <div>, it does not break into a new line.
<p>This is <span style="color:red">important</span> text.</p>
16. <strong>
• Purpose: Makes text bold and gives it semantic importance.
• SEO Friendly.
<strong>Warning!</strong>
17. <em>
• Purpose: Emphasizes text (usually italic).
• SEO Friendly (semantic meaning).
<em>This is emphasized text.</em>
18. <img>
• Purpose: Embeds an image.
• Self-closing tag.
• Attributes: src (source), alt (alternative text), width, height.
<img src="image.jpg" alt="My Image" width="200">
19. <input>
• Purpose: Defines an input field in forms.
• Type can be text, password, checkbox, radio, etc.
<input type="text" placeholder="Enter name">
20. <form>
• Purpose: Wraps input elements and submits user data to a server.
<form action="/submit" method="post">
<input type="text" name="username">
<input type="submit" value="Submit">
</form>
21. <label>
• Purpose: Defines a label for an <input> element, improves accessibility.
<label for="email">Email:</label>
<input type="email" id="email" name="email">
22. <button>
• Purpose: Creates a clickable button.
<button>Click Me</button>
23. <table>, <tr>, <td>, <th>
• Purpose: Used to create tables.
<table border="1">
<tr>
<th>Name</th><th>Age</th>
</tr>
<tr>
<td>John</td><td>25</td>
</tr>
</table>
24. <ul> (Unordered List)
• Purpose: Creates a bullet-point list.
<ul>
<li>Milk</li>
<li>Bread</li>
</ul>
25. <meta>
• Purpose: Provides metadata about the HTML document.
• Usage: In <head> section for charset, description, author, etc.
<meta charset="UTF-8">
<meta name="description" content="Learn basic HTML tags">
