IWT Unit 1: Web Technologies & Internet Foundations

Part I — Web technologies and Internet foundations

1. Web technology: meaning, importance, characteristics, applications

Web technology comprises the technologies, tools, programming languages, and protocols used to create, develop, and maintain websites and web applications over the Internet. It also includes techniques through which different devices communicate over the Internet. The “web” refers to the World Wide Web (WWW). Tim Berners-Lee originated the World Wide Web in 1989 as a mechanism for sharing resources among scientists.

Its importance is worldwide access to information and services; online communication, education, shopping and banking; interactive and dynamic applications; and support for digital businesses.

Characteristic	Core Functional Role
Platform independence	Access across Windows, macOS, Linux, Android, and iOS
Client–server architecture	The browser communicates with a web server
Interactivity	Multimedia, animations, and user actions
Scalability	Can serve a small site or millions of users when appropriately designed
Accessibility of access	Available across places and times with Internet connectivity; this source usage is distinct from assistive-technology accessibility

Applications and every named example: e-commerce (Amazon, Flipkart); social networking (Facebook, Instagram); online banking and digital payments; e-learning (Coursera, NPTEL); streaming (YouTube, Netflix); cloud applications (Google Docs, Microsoft 365).

2. Internet and WWW evolution

2.1 Timeline as taught

Year	Milestone	Historical & Technical Significance
1969	ARPANET	Advanced Research Projects Agency Network; associated with the US Department of Defense and the Internet's foundation
1983	TCP/IP	Common protocols allowed different networks to communicate; a milestone in the modern Internet
1989	WWW proposal	Tim Berners-Lee at CERN; sharing information using ideas associated with HTML, HTTP, and URLs
1991	First website	Explained the Web and creating web pages
1995	Dynamic websites	PHP, ASP, JavaScript, and databases are associated with logins, searches, and interaction
2005	Web 2.0	User-generated content and social interaction; Facebook, YouTube, Wikipedia, blogs
2010	HTML5	Audio, video, Canvas, local storage, and the broader responsive-web ecosystem; reduced plugin dependence
2020	PWAs	Website/app combination; offline operation, fast loading, push notifications, installation without an app store

Date caution: This is the lecture's broad timeline, not a verified invention-date table. The HTML history separately gives 2014 for the W3C HTML5 Recommendation. Do not equate the 2010 milestone with that formal publication date. Claims such as ARPANET being the “first computer network,” or all listed technologies originating in the same milestone year, require qualification.

2.2 Additional information present only in the evolution image

The diagram plots Semantics vertically and Socialization horizontally. Its theoretical progression is:

Era	Dates printed	Label
PC Era	1980–1990	Desktop
Web 1.0	1990–2000	World Wide Web
Web 2.0	2000–2010	Social Web
Web 3.0	2010–2020	Semantic Web
Web 4.0	2020–2030	Web OS
Web 2.5	2010–20x	Branch marked “Real Evolution”

Other image labels: Web Technologies, Networking, Multimedia, Broadband, Semantic Technologies, Virtualization, Mobile Computing, and Cloud Computing. “Theoretical (or as decades)” and “Real Evolution” distinguish its two paths. These are the diagram's conceptual labels, not predictions independently validated by these notes.

2.3 Internet versus WWW

Internet	World Wide Web
Network of interconnected networks	Information system of websites and web pages running on the Internet
Communication infrastructure	Information and applications accessed through that infrastructure
TCP/IP suite	HTTP/HTTPS for web-resource communication
Supports email, FTP, VoIP, and the Web	Provides documents, images, videos, websites, and web applications
Source dates its development across the 1960s–1980s	Source associates invention with Tim Berners-Lee in 1989

3. Internet architecture and protocols

Internet architecture is the overall design and structure of interconnected independent networks. The term is explained as inter-networking. TCP/IP provides communication rules across different hardware, operating systems, software, and network designs, supporting broad interoperability and scalability.

A protocol is a convention or standard controlling connection, communication, and data transfer between computing endpoints.

3.1 The four-layer teaching model

Layer	Job	Examples	Memory question
Application	Network services for applications	HTTP/HTTPS, FTP, SMTP, DNS	What service is wanted?
Transport	End-to-end delivery	TCP, UDP	How should data be delivered?
Internet	Logical addressing and packet routing	IP	Where should data go?
Network	Actual transmission through network media	Ethernet, Wi-Fi	How does it travel?

TCP provides reliable, connection-oriented, ordered delivery; UDP is connectionless and faster with lower overhead, but offers fewer delivery guarantees. Example IP address: 192.168.1.10.

Opening Google, as taught: HTTP/HTTPS requests the webpage; TCP provides the illustrated reliable delivery; IP addresses/routes it; Wi-Fi/Ethernet provides network transmission. This is the source's simplified stack example.

3.2 Additional Network Protocols

Protocol	Expansion / role
HTTP	Hypertext Transfer Protocol; browser–server resource transfer
HTTPS	Hypertext Transfer Protocol Secure; encrypted HTTP communication
TCP	Transmission Control Protocol; reliable ordered delivery
IP	Internet Protocol; addressing and routing
FTP	File Transfer Protocol; file transfer between computers over TCP/IP
SMTP	Simple Mail Transfer Protocol; sends/transfers email, including between mail servers
POP3	Post Office Protocol Version 3; receives/downloads email from a mail server
DNS	Domain Name System; domain-name lookup
PPP	Point-to-Point Protocol; direct connection between two nodes at the data-link level
Telnet	Remote access and control through a command-line interface; source expands the name as “Telecommunication Network”

Point-to-Point Protocol (PPP) can optionally provide authentication (PAP/CHAP), encryption, privacy, and compression across direct serial links.

3.3 IP-Address Classifications & IPv4 Classes

IP addressing is systematically categorized across four core dimensions: addressing scope (unicast, multicast, broadcast), IP version (IPv4 vs. IPv6), assignment method (static vs. dynamic via DHCP), and network scope (public routable vs. private RFC 1918).

Classful IPv4 address architecture partitions the 32-bit address space into five distinct classes:

IP Class	Leading Octet Range	Default Subnet Mask	Primary Purpose / Allocation
Class A	1 – 126	255.0.0.0 (/8)	Large enterprise networks ($126$ networks, up to 16M hosts each)
Class B	128 – 191	255.255.0.0 (/16)	Medium-sized organizations ($16,384$ networks)
Class C	192 – 223	255.255.255.0 (/24)	Small local area networks ($2,097,152$ networks)
Class D	224 – 239	None	Multicast streaming & audio/video group delivery
Class E	240 – 255	None	Experimental research and development

[!NOTE] Multicast Allocation: Class D ($224.0.0.0$ to $239.255.255.255$) is dedicated strictly to multicasting (delivering single-source data streams to a subscribed host group), while Class E is reserved by the IETF for future and experimental protocols.

4. Client–server architecture and web working

A client is a device or program requesting services, resources, files, applications, printers, or database-related results. Examples: computer, laptop, workstation, mobile device. A server is a computer or software program providing those resources over a network.

The client sends a request through the network; the server processes it and returns a response through the network. The web-working diagram names Chrome/Edge browsers, Apache/Nginx web servers, and MySQL/PostgreSQL databases. It labels returned web-page/data resources as HTML, CSS, JS, and DB; interpret this as the result/data used by the application, not necessarily transmission of the entire database.

Result-portal example: A student asks to see a result. The browser sends a request. The Internet carries it to the web server. The database supplies the marks. The server builds the result page. The browser receives and displays it.

sequenceDiagram
    participant U as Student
    participant B as Browser
    participant S as Web server
    participant D as Database
    U->>B: Show my result
    B->>S: Request through Internet
    S->>D: Find marks
    D-->>S: Marks
    S-->>B: Result page
    B-->>U: Display result

4.1 Two-tier and three-tier architectures

Feature	Two-tier	Three-tier
Layers	Client and data server	Presentation, application/business logic, database
Business logic placement	Client side	Dedicated application server tier
Database	Server side	Dedicated database server
Security profile	Standard / localized	Higher (database isolated behind app server)
Scalability	Limited	High (independent horizontal scaling)
Intended scale	Small / internal applications	Large enterprise & web applications
Maintenance & Deployment	Monolithic client updates	Centralized application logic updates
Representative Examples	Traditional desktop database apps	E-commerce (Amazon), online banking, SaaS platforms

In a two-tier architecture, the client handles user-interface presentation and parts of the application logic, communicating directly with a database server.

In a three-tier architecture, the presentation tier (browser/client), application/business logic tier, and database tier are decoupled. This separation ensures security, since clients cannot query the database directly, and scalability, as application servers can be load-balanced independently.

5. Frontend, backend, static and dynamic websites

The frontend is the visible, interactive side: layout, navigation, text, images, video, buttons, animations, and forms. The backend handles data and processing logic behind the interface. Both must cooperate for a usable application.

Side	Technology	Role in the source
Frontend	HTML	Structure, compared to a skeleton
Frontend	CSS	Styling and visual presentation
Frontend	JavaScript	Interactivity, buttons, forms, animations
Frontend	React	Reusable components for dynamic interfaces
Backend	Node.js	JavaScript on the server; real-time applications
Backend	Express.js	Flexible framework for APIs with Node.js
Backend	Python, Django/Flask	Backend development with simple syntax/frameworks
Backend	PHP	Scripting for dynamic websites
Backend, also named	ASP.NET	Server-side web application technology

Static website: Server returns prebuilt files. In the taught model it does not generate personalized page content or query a database for each page request. HTML, CSS, and JavaScript may still respond to user actions in the browser. Diagram steps: browser requests page; server finds page; server returns page.

Dynamic website: Page content is processed or generated at runtime according to the user's request, often with server-side processing and a database. A common change can be applied centrally. The diagram connects database storage/logging/retrieval to the web server, then exchanges page content with the client.

Comparison Feature	Static Website	Dynamic Website
Page Content	Prebuilt; identical content delivered to all visitors	Dynamically generated per request/user session
Database Interaction	None; static files served directly from disk	Real-time database queries (SQL / NoSQL)
Loading Speed	Extremely fast (cached at CDN edge)	Requires server-side processing overhead
Hosting & Costs	Low cost / free (e.g., GitHub Pages, S3)	Requires application server runtime & DB hosting
Content Management	Manual file editing by developers	Non-technical CMS updates (WordPress, Strapi)
Core Technologies	HTML5, CSS3, Client-side JavaScript	Node.js, Python/Django, PHP, ASP.NET + DB
Maintenance	Changes require updating individual files	Central changes update templates across all pages

These are introductory comparisons, not universal limits on every static or dynamic system.

5.1 Static Website vs. Web Application (W3Schools & Industry Comparison)

Dimension	Static Website	Web Application (Web App)
Primary Purpose	Information delivery, reading, public content (blogs, portfolios, documentation).	Performing tasks, interactive operations, user-specific workflows (Gmail, Canva, NetBanking).
User Interaction	Passive navigation: clicking links, reading text, viewing images.	Active engagement: submitting data, manipulation of state, real-time feedback.
Content Generation	Pre-rendered files stored directly on the server; identical for all viewers.	Dynamic rendering based on authentication, database queries, and user input.
State & Authentication	Generally stateless; rarely requires accounts or sessions.	Highly stateful; manages user sessions, cookies, tokens (JWT), and permissions.
Architecture	Simple client-server delivery (HTML, CSS, static assets).	Multi-tier architecture (SPA/PWA frontend + REST/GraphQL APIs + Database layer).

6. Web application lifecycle, browser rendering pipeline and developer tools

6.1 Stages of Web Application Development Lifecycle

Stage	Focus & Work Performed	Key Deliverables / Tools
1. Planning & Analysis	Define project scope, target audience, business goals, feasibility, and technical stack.	Requirement Specification Document (SRS), timeline, resource allocation.
2. Design & Prototyping	Architecture design, database schema, user flows, UI wireframes, and UX mockups.	Figma wireframes, component design system, data-flow diagrams.
3. Implementation / Development	Writing clean, modular frontend and backend code, connecting APIs and databases.	HTML5, CSS3, JavaScript, backend server endpoints, database migrations.
4. Testing & Quality Assurance	Functional verification, cross-browser compatibility, responsive layout checks, security audits, performance profiling.	Test cases, automated testing scripts, W3C validation, bug-tracking reports.
5. Deployment	Hosting the production build on live servers, configuring DNS records, setting up SSL certificates.	Live web application, CI/CD deployment pipelines, CDN caching.
6. Maintenance & Updates	Resolving reported bugs, applying security patches, feature upgrades, software dependency updates.	Patch releases, database backups, uptime monitoring.
7. User Feedback & Monitoring	Tracking user analytics, crash reporting, collecting user reviews to guide future development.	Google Analytics, performance logs, user feedback surveys.

6.2 Web Browsers & The Browser Rendering Process

A web browser is a client application that retrieves, interprets, and visually presents resources from the World Wide Web. Major rendering engines include Blink (Google Chrome, Microsoft Edge, Opera), Gecko (Mozilla Firefox), and WebKit (Apple Safari).

When a browser receives HTML and CSS from a web server, it executes a rigorous multi-step rendering pipeline:

HTML Bytes ---> Characters ---> Tokens ---> Nodes ---> DOM Tree ----+
                                                                     |---> Render Tree ---> Layout (Reflow) ---> Paint ---> Compositing
CSS Bytes  ---> Characters ---> Tokens ---> Nodes ---> CSSOM Tree --+

1. DOM Tree Construction (Document Object Model):
   • The browser parses raw HTML bytes, decodes characters based on encoding (UTF-8), tokenizes tags, converts tokens into node objects, and links them into a hierarchical tree representing document structure.
2. CSSOM Tree Construction (CSS Object Model):
   • While parsing HTML, external stylesheets (<link>) and <style> blocks are parsed into the CSSOM tree, which maps CSS selectors and computed styles to elements.
3. Render Tree Creation:
   • The browser combines the DOM and CSSOM trees into a Render Tree.
   • Elements with display: none or non-visual tags (<head>, <meta>, <script>) are excluded from the render tree because they do not occupy physical space on the screen (elements with visibility: hidden are included as empty boxes).
4. Layout (also called Reflow):
   • The browser calculates the exact visual coordinates, width, height, and geometry of each visible box on the screen relative to the browser viewport.
5. Painting (Rasterization):
   • The engine converts calculated layout boxes into actual screen pixels, filling in colors, text, borders, shadows, and background images.
6. Compositing:
   • Visual layers drawn on separate GPU surfaces (e.g., elements with transform, opacity, or fixed positioning) are composited and blended together in the correct visual stacking order (z-index) onto the user's display.

6.3 Browser Developer Tools (DevTools)

Built-in browser utilities (opened via F12 or Ctrl+Shift+I / Cmd+Option+I) designed for real-time inspection, debugging, and testing:

• Elements Panel: Inspect and edit the DOM tree in real time; inspect computed CSS properties, box model geometry (margin, border, padding, content), and force pseudo-states (:hover, :active).
• Console Panel: View runtime JavaScript errors and warnings; execute interactive JavaScript commands; log diagnostic information via console.log(), console.error(), console.table().
• Network Panel: Inspect every HTTP/HTTPS request sent by the browser; view HTTP request and response headers, status codes, payload data, response size, and time-to-first-byte (TTFB) waterfall charts.
• Sources Panel: View and debug frontend source files; set JavaScript breakpoints, pause script execution, inspect scope variables, and step through code line-by-line.
• Application / Storage Panel: Inspect client-side storage mechanisms including localStorage, sessionStorage, cookies, IndexedDB, and Cache Storage.
• Performance & Lighthouse Panels: Profile page render speed, frame rates (FPS), CPU usage, and conduct automated audits for SEO, accessibility, and Core Web Vitals.

7. HTTP, HTTPS, request–response model and status codes

HTTP (HyperText Transfer Protocol) is an application-layer, client-server communication protocol operating over TCP/IP. It is stateless: every transaction is treated independently without built-in awareness of previous requests.

7.1 HTTP vs. HTTPS Comparison

Feature	HTTP (HyperText Transfer Protocol)	HTTPS (HTTP Secure)
Security Layer	Plain text; no native encryption.	Encrypted via TLS / SSL (Transport Layer Security).
Default Port	Port 80	Port 443
URL Scheme	http://	https://
Confidentiality	Vulnerable to packet sniffing and man-in-the-middle (MITM) attacks.	Data is encrypted in transit; eavesdroppers cannot read credentials or session tokens.
Integrity & Authentication	No guarantee that data was not altered in transit; no domain verification.	Verified by a trusted Digital Certificate issued by a Certificate Authority (CA).
Browser Indicator	Marked as "Not Secure" by modern browsers.	Displays padlock icon in address bar.

7.2 HTTP Request & Response Packet Components

An HTTP transaction consists of an HTTP Request sent by the client and an HTTP Response returned by the server. Both follow a strict structural format defined by web RFC standards:

1. HTTP Request Message Structure

+-------------------------------------------------------------+
| Request Line: [Method] [Request-URI] [HTTP-Version]         |
+-------------------------------------------------------------+
| Request Headers: (Key: Value pairs, e.g., Host, User-Agent) |
+-------------------------------------------------------------+
| Empty Line (CRLF / \r\n separating headers from body)       |
+-------------------------------------------------------------+
| Request Message Body (Optional payload: JSON, Form data)    |
+-------------------------------------------------------------+

• Request Line:
  • HTTP Method: The operation to perform (GET, POST, PUT, DELETE, etc.).
  • Request-URI (Path): Path of resource on the server (e.g., /index.html or /api/users?id=101).
  • HTTP Version: Protocol version (e.g., HTTP/1.1 or HTTP/2).
• Request Headers: Metadata providing context to the server:
  • Host: Domain name of the server (e.g., www.example.com). Mandatory in HTTP/1.1.
  • User-Agent: Client browser, OS, and rendering engine information.
  • Accept: Content types acceptable to the client (e.g., text/html, application/json).
  • Content-Type: Media type of the request body (e.g., application/x-www-form-urlencoded or application/json).
  • Authorization: Credentials for authenticating the client (e.g., Bearer token).
  • Cookie: Key-value pairs previously set by the server.
• Empty Line (CRLF): A mandatory carriage return and line feed (\r\n) separating headers from body.
• Request Body: Data sent to the server (present in POST and PUT requests, omitted in standard GET requests).

Raw HTTP Request Example:

POST /api/students HTTP/1.1
Host: www.studydump.edu
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
Content-Type: application/json
Content-Length: 48

{"name": "Sehjal Saxena", "course": "B.E. CSE"}

---

2. HTTP Response Message Structure

+-------------------------------------------------------------+
| Status Line: [HTTP-Version] [Status-Code] [Reason-Phrase]   |
+-------------------------------------------------------------+
| Response Headers: (Key: Value pairs, e.g., Server, Date)    |
+-------------------------------------------------------------+
| Empty Line (CRLF / \r\n separating headers from body)       |
+-------------------------------------------------------------+
| Response Message Body (Resource content: HTML, CSS, JSON)   |
+-------------------------------------------------------------+

• Status Line:
  • HTTP Version: e.g., HTTP/1.1.
  • Status Code: 3-digit numeric indicator of the request outcome (e.g., 200, 404, 500).
  • Reason Phrase: Human-readable explanation of status code (e.g., OK, Not Found, Internal Server Error).
• Response Headers: Metadata describing the server and returned content:
  • Date: Timestamp when the response was generated.
  • Server: Web server software name and version (e.g., Apache/2.4.52, nginx/1.22).
  • Content-Type: MIME type of response body (e.g., text/html; charset=UTF-8, image/png).
  • Content-Length: Size of response body in bytes.
  • Set-Cookie: Sends cookies to be stored by the browser for session management.
  • Cache-Control: Caching directives for browsers and proxies (e.g., no-cache, max-age=3600).
• Empty Line (CRLF): Mandatory blank line separating headers from body.
• Response Body: The payload data returned to the client (HTML document, JSON payload, binary image data).

Raw HTTP Response Example:

HTTP/1.1 200 OK
Date: Wed, 16 Sep 2026 05:15:00 GMT
Server: Apache/2.4.52 (Ubuntu)
Content-Type: text/html; charset=UTF-8
Content-Length: 138

<!DOCTYPE html>
<html>
<head><title>Success</title></head>
<body><h1>Registration Successful</h1></body>
</html>

7.3 HTTP Methods

Method	Action & Purpose	Safe?	Idempotent?	Request Body Allowed?
GET	Retrieve data from server. Parameters sent in URL query string.	Yes	Yes	No (standard practice)
POST	Submit data to create a new resource or process data.	No	No	Yes
PUT	Completely replace or create a specific resource at the specified URI.	No	Yes	Yes
PATCH	Apply partial modifications to an existing resource.	No	No	Yes
DELETE	Remove the specified resource from the server.	No	Yes	Optional
HEAD	Same as GET, but retrieves only headers without response body (used for checking file existence and size).	Yes	Yes	No
OPTIONS	Returns HTTP methods supported by the target resource (essential for CORS preflight checks).	Yes	Yes	No

(Note: Safe means the operation does not alter server state; Idempotent means making multiple identical requests has the same outcome as making a single request).

7.4 HTTP Status Codes by Class

Range	Category	Meaning & Core Concepts	Common Status Codes
100–199	Informational	Request received; client should continue request or ignore if finished.	100 Continue, 101 Switching Protocols
200–299	Success	Action requested by the client was received, understood, and accepted.	200 OK, 201 Created (resource created via POST), 204 No Content (success without body)
300–399	Redirection	Further action must be taken by client to complete request.	301 Moved Permanently (SEO redirect), 302 Found (temporary redirect), 304 Not Modified (client cache valid)
400–499	Client Error	Request contains bad syntax, invalid parameters, or cannot be fulfilled.	400 Bad Request, 401 Unauthorized (needs authentication), 403 Forbidden (authenticated but denied), 404 Not Found, 405 Method Not Allowed
500–599	Server Error	Server failed to fulfill an apparently valid request due to an internal problem.	500 Internal Server Error, 502 Bad Gateway (upstream server failure), 503 Service Unavailable (overloaded/maintenance), 504 Gateway Timeout

8. DNS, domain names and URLs

8.1 DNS and domains

DNS maps human-readable domain names to addressing information used by computers. Standard examples include mapping domain names like www.example.com or www.facebook.com to IP addresses like 192.168.1.1. DNS operates as a distributed hierarchical database holding domain name mappings. Dot-separated labels make names easier to use than memorizing IP addresses.

The source's “no two organizations can have the same domain name” expresses uniqueness of a registered name, not an inability to share hosting or delegate parts of a domain. Its one-name/one-IP wording is an introductory simplification.

Complete Step-by-Step DNS Resolution Sequence:

1. User types www.yahoo.com; request reaches the local DNS server at the ISP.
2. Local DNS lacks the answer and asks a root DNS server.
3. Root directs it toward the .com DNS server.
4. Local DNS queries .com.
5. .com directs it toward the yahoo.com DNS server.
6. Local DNS asks the yahoo.com server.
7. That server supplies the IP address for www.yahoo.com.
8. Local DNS returns the IP to the client.

The separate Amazon image labels User, Request, Web Server, DNS Server, Amazon.com?, and 72.21.215.90. That number is the screenshot's example, not a verified current address. Its drawing places the web-server icon before DNS; use the fuller Yahoo diagram for the lookup sequence.

8.2 Top-level and country-code domains

A TLD is the last domain label after the final dot.

Extension	Source association	Examples
.com	Commercial/business	www.amazon.com, www.yahoo.com
.net	Networks/ISPs	www.speedtest.net
.gov	Government	www.nj.gov; source also lists www.india.gov.in
.edu	Educational institutions, mainly US	www.harvard.edu
.org	Non-profit association in source	www.wikipedia.org
.mil	Military, mainly US	www.army.mil
.int	International organizations	www.itu.int, International Telecommunication Union

Read the labels correctly: The final label of www.india.gov.in is .in; gov is an earlier label. Extension associations do not by themselves prove an organization's legitimacy or exact legal status.

Country-domain examples: .in India; .jp Japan; .us United States; .fr France; .it Italy; .cn China; .au Australia. These two-letter country codes are standardized under ISO 3166-1 alpha-2.

8.3 Website files and structure

Good organization supports navigation, file management, maintenance, deployment, performance, and security. The example root is mywebsite/.

Path	Role
index.html	Main/home page, commonly the default page
about.html	About page
contact.html	Contact page
css/style.css	CSS stylesheet
js/script.js	JavaScript
images/logo.png	Logo
images/banner.jpg	Banner

8.4 URL structure

URL = Uniform Resource Locator, the address/location of a resource. Uses: visit sites, navigate pages, download files, load images/resources, submit data, access APIs, and share specific pages.

The annotated source URL is http://www.w3schools.com/html/html_forms.asp: scheme http, // after the colon, host www.w3schools.com, then path /html/html_forms.asp.

The second diagram gives https://mobileversion.example.com/blog/digital-vidya#location:

Component	Example
Protocol	https
Subdomain	mobileversion
Domain label labelled “root domain” by the image	example
TLD	com
Directory	blog
Slug	digital-vidya
Fragment/anchor	location, introduced by #

In a domain such as example.com, the label combined with the top-level domain forms the complete domain name.

8.5 Absolute and relative URLs

An absolute URL includes the scheme and domain, for example https://www.example.com/about.html. A relative reference is resolved against a base/current-page location, for example about.html.

Reference	Meaning in examples
about.html	Same folder
images/logo.png	Subfolder
../index.html	One folder upward
/css/default.asp	Path beginning at the site's root
#contact	Section/element identified as contact in the page

From https://www.example.com/index.html, about.html resolves to https://www.example.com/about.html. Absolute addresses are useful for external domains and sharing; relative paths are commonly used for internal resources.

<a href="https://www.example.com">Visit Example</a>
<a href="about.html">About Us</a>
<a href="../index.html">Home</a>
<img src="https://www.example.com/images/logo.png" alt="Logo">

The last example adds descriptive alt text to the source's abbreviated image example.

8.6 Query parameters

? begins the query; & separates parameters; each illustrated parameter uses name=value.

• https://example.com/search?q=computer: name q, value computer.
• https://example.com/products?category=mobile&brand=apple: category=mobile, brand=apple.
• /products/index.html?id=101: resource path plus parameter id=101.

9. Web hosting and domain integration

Hosting supplies server storage/resources so web files can be reached over the Internet. Files include HTML, CSS, JavaScript and images. In the house/campus analogies: domain = address; hosting = building; website files = contents.

Working sequence: create files; upload to a hosting server; connect the domain through DNS settings; user enters the domain; browser requests the resource; server returns files/data; browser displays the page. Source domain example: www.mycollege.com, accessed as https://www.mycollege.com.

Hosting type	Arrangement	Advantages / suitable uses	Limitations in source
Free	Free service with limited resources; may show advertisements	Learning projects, personal sites	Resource limits and possible ads
Shared	Websites A–D share one server	Low cost, easy management, small sites, small businesses, blogs	Shared resources, neighboring sites affect performance, limited control
VPS	One physical server divided into virtual servers; VPS1–3 assigned to sites	More control; growing websites; better isolation/performance in the taught comparison	More expensive than shared; technical knowledge
Dedicated	Entire physical server for one customer	Performance, full control, customization; large/high-traffic applications	Cost and administration skills
Cloud	Interconnected servers supply resources	Scalability, availability, resources expanded when needed	Complex pricing and advanced configuration
Managed	Provider manages technical operation	Maintenance, updates, security configuration, backups, monitoring	Higher monthly operational cost; reduced low-level server control
Reseller	Customer resells hosting space with management/billing tools	Resellers and small hosting businesses	Requires managing individual sub-client accounts; limited server resource allocation
Colocation	Customer-owned server in provider's facility	Hardware control with provider power/network/infrastructure	High initial hardware capital expenditure; physical maintenance handled by tenant

The complete source workflow is: create website → HTML/CSS/JS/images → upload → register domain → connect domain and hosting → configure DNS → user enters domain → website opens. This illustrates dependencies rather than requiring domain registration to occur after every upload.