IWT CAT-1: Ultimate Revision Notes

Internet & Web Technologies · Unit 1

Introduction to Web Technologies (IWT)

CAT-1 Ultimate Notes | Course Code: 26CSE0106

Purpose: Complete syllabus-aligned notes for understanding, revision, and publication on StudyDump.

Prepared from: The supplied CAT-1 syllabus and four faculty PPTs: Unit 1 PPT IWT, WWW Evolution, Protocol Suites & Web Hosting, HTML Fundamentals, Semantic Layouts, Tables & Lists, and Semantic HTML5 Elements with Codes. Technical explanations that were missing or only presented as slide headings have been completed using the linked reference documentation at the end.

Scope note: These notes cover every topic listed in the syllabus supplied for CAT-1. A short supplementary section also records related HTML list and HTML5-element material present in the faculty PPTs. No practice questions or quiz section is included.

Part I - Web Technology Fundamentals

Introduction to Web Technologies
Evolution of the Internet and World Wide Web
Internet Architecture and Protocol Suites
Client-Server Architecture
Frontend and Backend Technologies
Static and Dynamic Websites
Web Application Lifecycle

Part II - Browsers, Web Communication, DNS, URLs and Hosting

Web Browsers
Browser Rendering Process
Browser Developer Tools
HTTP and HTTPS
HTTP Methods: GET, POST, PUT and DELETE
HTTP Request-Response Model and Message Components
HTTP Response Status Codes
DNS and Domain Names
Domain Name Resolution Process
Top-Level Domains (TLDs)
URL Structure
Absolute and Relative URLs
Query Parameters
Web Hosting, Hosting Types, and Domain-Hosting Integration
Unit Summary: Web Architecture and Communication

Part III - HTML5

Introduction to HTML and HTML5
HTML5 Document Structure
HTML Tags, Elements and Attributes
Semantic HTML Elements
Headings and Paragraphs
Text Formatting and HTML Comments
Hyperlinks
Images
HTML Tables
Supplementary HTML Material from the Faculty PPT
Final Rapid-Revision Sheet
Syllabus Coverage Audit
References

Part I - Web Technology Fundamentals

1. Introduction to Web Technologies

1.1 Definition

Web technology is the collection of technologies, tools, programming languages, and protocols used to create, develop, deliver, and maintain websites and web applications that communicate over the Internet.

Web technologies allow different devices and software systems to exchange information and present it in a form people can use.

1.2 Why web technologies matter

Worldwide access: People can access information and services from different locations.
Communication: Supports messaging, email interfaces, social networks, and collaboration.
Online services: Supports shopping, banking, digital payments, education, and booking systems.
Multimedia and interaction: Websites can include images, audio, video, animation, and interactive controls.
Digital business: Many organisations use web applications to deliver products, services, and customer support.
Scalability: A web application can be designed to support a small number of users or a much larger audience.
Platform independence: Standard web technologies can work across operating systems and devices through compatible browsers.

1.3 Common applications

Application area	Typical use
E-commerce	Browse products, place orders, and pay online
Social networking	Create and share user-generated content
Online banking	View balances and complete financial transactions
E-learning	Access lectures, notes, and assessments
Video streaming	Deliver audio and video over the network
Cloud applications	Create, store, and collaborate on documents online
Information websites	Publish announcements, articles, and reference material

1.4 Core web technologies

Technology	Main responsibility
HTML	Defines the structure and meaning of webpage content
CSS	Controls presentation and layout, including colours, spacing, and typography
JavaScript	Adds behaviour, interaction, and client-side logic
HTTP/HTTPS	Defines communication between clients and web servers
DNS	Helps translate human-readable domain names into IP addresses using DNS records
Web server	Receives requests and serves files or application responses
Backend technology	Runs server-side application logic and may access databases or services
Database	Stores and retrieves structured or unstructured application data

Remember: HTML = structure, CSS = presentation, JavaScript = behaviour. HTTP/HTTPS = web communication, DNS = name resolution.

2. Evolution of the Internet and World Wide Web

The Internet and the World Wide Web (WWW) are connected concepts, but they are not the same thing. The Internet is the global network infrastructure. The Web is an information system that uses the Internet to access linked pages and resources.

2.1 Historical timeline from the faculty PPT

Year	Development	Significance
1969	ARPANET	Early computer network developed with U.S. Department of Defense support; it became an important foundation for the Internet.
1983	TCP/IP adoption	TCP/IP became the standard protocol suite for communication across interconnected networks and is associated with the emergence of the modern Internet.
1989	WWW proposed	Tim Berners-Lee proposed the World Wide Web while working at CERN. The Web brought together hypertext and network technologies; HTML, HTTP, and URLs are central to it.
1991	First website	The first website was launched by Tim Berners-Lee and introduced the WWW project and how webpages could be created.
1995	Growth of dynamic websites	Server-side technologies and databases enabled features such as login, search, personalised content, and data-driven pages.
2005	Web 2.0 period	User-generated content, participation, collaboration, blogs, wikis, and social networking became prominent.
2010	HTML5 era	Richer native audio/video, graphics through Canvas, and web storage reduced dependence on external plugins for many common features.
2020	Progressive Web Apps (PWAs)	PWAs brought app-like capabilities to the web, such as installability and, where supported and configured, offline use and notifications.

The timeline is a simplified teaching timeline from the faculty material. These developments overlapped; the Web did not change from one version to another on a single universal date.

2.2 Web 1.0, Web 2.0 and Web 3.0

These labels are broad teaching models used to describe changing patterns in web use. Their exact definitions can vary between sources, especially for Web 3.0.

Generation	Common description	Typical characteristics	Familiar examples or pattern
Web 1.0	Read-oriented or mostly read-only Web	Mostly static pages; limited user participation; content mainly published by site owners	Early informational websites and online brochures
Web 2.0	Read-write, participatory Web	User-generated content, comments, sharing, collaboration, social networking, blogs, and wikis	Social networks, video-sharing sites, collaborative encyclopaedias
Web 3.0	A term used for a more semantic/intelligent Web and, in other contexts, a decentralised Web	Depending on the definition: richer machine-understandable data, personalisation, AI-assisted information use, or decentralised systems	The meaning is context-dependent; follow the definition used in class if a specific one was supplied

MCQ distinction: Web 1.0 is associated with mostly reading; Web 2.0 with participation and user-generated content; Web 3.0 does not have one universally accepted definition.

2.3 Internet vs World Wide Web

Internet	World Wide Web (WWW)
Global network of interconnected networks	Collection of linked webpages and other web resources
Provides communication infrastructure	An information system operating over the Internet
Uses the TCP/IP protocol suite for network communication	Commonly accessed through HTTP/HTTPS and URLs
Supports several services, including the Web, email, file transfer, and voice/video communication	Provides websites, documents, media, and web applications
Developed through networking work over several decades	Proposed by Tim Berners-Lee in 1989 at CERN

Key idea: The Web depends on the Internet, but the Internet is not limited to the Web. Email and other network services are Internet services even when they are not webpages.

3. Internet Architecture and Protocol Suites

3.1 Internet architecture

Internet architecture is the overall design and structure that allows multiple independent networks to communicate. The word Internet reflects internetworking: connecting networks so that they can exchange data.

The Internet relies on the TCP/IP protocol suite. Its shared rules allow different types of devices, operating systems, hardware, and networks to communicate.

3.2 What is a protocol?

A protocol is an agreed set of rules or conventions controlling communication and data exchange between computing endpoints. Protocols specify how messages are structured, addressed, transmitted, interpreted, or handled.

3.3 Four-layer model used in the faculty PPT

The faculty slides present the architecture as Application, Transport, Internet/IP, and Network layers. This is a simplified four-layer TCP/IP-style model; it is not the seven-layer OSI model.

Layer in the PPT	Main role	Examples	Memory cue
Application	Provides network services used by applications	HTTP, HTTPS, DNS, FTP, SMTP, POP3, Telnet	What service is required?
Transport	Provides end-to-end communication between processes	TCP, UDP	How is data delivered between endpoints?
Internet / IP	Logical addressing and routing of packets between networks	IPv4, IPv6	Where should the packet go?
Network access / Network	Moves data over the local link or physical network medium	Ethernet, Wi-Fi; PPP is a link protocol	How does data travel over the local network?

The names and grouping of lower layers vary across networking models. For this course, recognise the four-layer names shown in the faculty PPT.

3.4 Application-layer protocols in the faculty material

Protocol	Full form / role	Main use
HTTP	Hypertext Transfer Protocol	Requests and transfers web resources
HTTPS	HTTP over TLS	Protects web communication in transit
DNS	Domain Name System	Resolves names using records such as IP-address records
FTP	File Transfer Protocol	File transfer between systems; classic FTP is not encrypted by default
SMTP	Simple Mail Transfer Protocol	Sending and relaying email
POP3	Post Office Protocol version 3	Retrieving/downloading email from a mail server
Telnet	Remote terminal protocol	Remote command-line access; classic Telnet is unencrypted and unsuitable for secure use over untrusted networks

PPP (Point-to-Point Protocol) appears in the faculty PPT as a data-link/network-access protocol used to establish a direct link between network nodes. It is not the same type of application protocol as HTTP or SMTP.

3.5 TCP vs UDP

TCP	UDP
Connection-oriented transport protocol	Connectionless transport protocol
Provides reliable, ordered delivery and retransmission when needed	Does not itself guarantee delivery, ordering, or retransmission
Has more delivery-control overhead	Has lower protocol overhead and can be useful when low latency matters
Commonly used for traditional web communication over HTTP/1.1 and HTTP/2	Commonly used by DNS queries in many cases, real-time media, and other latency-sensitive traffic; modern HTTP/3 uses QUIC over UDP

The shorthand in the faculty PPT is TCP = reliable delivery and UDP = faster but less reliable. More precisely, UDP has fewer built-in delivery guarantees; actual speed depends on the application and network conditions.

3.6 IP and IP addresses

Internet Protocol (IP) handles logical addressing and routing of packets between networks. An IP address identifies a network interface/addressing endpoint so packets can be directed toward the right destination.

IPv4 example: 192.168.1.10
IPv4 addresses are 32 bits long and commonly written as four decimal octets separated by dots.
IPv6 uses 128-bit addresses and a colon-separated hexadecimal notation.
An IP address is not the same thing as a domain name. DNS records can map a name to an IP address.

Some introductory networking curricula also discuss classful IPv4 address ranges (Classes A-E). Modern IP routing primarily uses CIDR and prefixes rather than classful allocation. Prioritise address classes only if the class diagrams or lecture explanation included them in your CAT-1 scope.

3.7 How the layers cooperate when a webpage is opened

The browser uses an application protocol, usually HTTP or HTTPS, to request a resource.
The transport layer carries application data between endpoints. Depending on the protocol, this may involve TCP or another transport such as QUIC over UDP.
IP addressing and routing help packets reach the correct destination across networks.
The local network technology, such as Wi-Fi or Ethernet, moves frames over the link.
The server processes the request and sends a response back through the network.

Layer memory cue: Application = service; Transport = delivery; IP = address and route; Network access = link transmission.

4. Client-Server Architecture

4.1 Client

A client is a device or software application that requests services or resources from another system. In web browsing, the browser is the client.

Examples include a laptop browser, mobile browser, desktop app, or an application making an HTTP request to an API.

4.2 Server

A server is a computer or software program that provides resources, data, or services to clients over a network. A web server can return static files or forward requests to application logic.

4.3 Request-process-response flow

Example: viewing an examination result.

The user opens the result page or submits the required details.
The browser sends a request over the network.
The web server receives the request.
Application logic may query a database for the user's marks.
The server prepares a response, such as HTML or JSON.
The browser receives the response and renders the page.
The user sees the result.

A database is not required for every request. A static page may be returned directly by the web server.

4.4 Two-tier architecture

A two-tier architecture divides an application into two main parts, commonly a client and a server/database system.

Client: user interface and, in some designs, some application logic.
Server: data store or server service.
Often simpler to build, and suited to smaller or controlled applications.
If business logic is placed largely in the client, maintenance and security control can become harder.

4.5 Three-tier architecture

A three-tier architecture separates the application into three layers:

Presentation layer: User interface, often in the browser.
Application/business-logic layer: Processes rules and requests on an application server.
Data layer: Database or other persistent data store.

4.6 Two-tier vs three-tier architecture

Feature	Two-tier	Three-tier
Number of layers	Two	Three
Business logic	Often closer to or inside the client in the simplified model	Separated into an application/business-logic tier
Database	Server/database tier	Separate data tier
Security and separation	Usually less separation	Better separation of responsibilities can improve security controls
Scalability	Can be more limited for larger systems	Layers can be scaled or managed separately
Maintenance	Changes may affect client applications	Centralised business logic can be easier to update
Typical teaching example	Small desktop/database application	Large web application, banking system, e-commerce platform

The exact design of real systems varies, but the exam distinction is two tiers versus presentation + business logic + data in three tiers.

5. Frontend and Backend Technologies

5.1 Frontend

The frontend is the part of a website or web application that users see and interact with. It includes the layout, navigation, text, images, buttons, forms, menus, and other interface elements.

Main technologies:

HTML: Structure and meaning of content.
CSS: Visual appearance and layout.
JavaScript: User interaction and client-side behaviour.

Frontend code runs primarily in the browser. The browser transforms the HTML, CSS, and JavaScript into the interactive interface.

5.2 Backend

The backend is the part users do not normally see directly. It handles server-side logic, data processing, authentication, permissions, business rules, and communication with databases or external services.

Examples of backend technologies listed or represented in the faculty material include PHP, Node.js, and ASP.NET. Other common server-side technologies include Python, Java, and similar server runtimes.

5.3 Frontend vs backend

Frontend	Backend
Visible and interactive interface	Server-side processing and logic
Common core technologies: HTML, CSS, JavaScript	Server languages/runtime, APIs, business logic, database access
Renders content and gathers user input	Validates requests, applies rules, retrieves or stores data
Runs primarily in the browser	Runs on a server or server-side environment
Example: displaying a result button	Example: checking the student's identity and retrieving marks

Both work together. The frontend sends requests; the backend processes them and returns data or a response.

6. Static and Dynamic Websites

6.1 Static website

A static website serves prebuilt files such as HTML, CSS, JavaScript, images, and other assets. The server generally returns the stored files without generating page content from application logic for each request.

Characteristics:

Often fast and simple to host.
Can be inexpensive because it may not need server-side application processing.
Content changes usually require editing and redeploying the site files or rebuilding the site.
A database is not required for the basic site delivery.
Static websites can still respond to user actions in the browser using JavaScript. “Static” describes how content is served/generated, not whether the page can contain any interaction.

Examples: a simple portfolio, documentation page, event information page, or static college notice page.

6.2 Dynamic website

A dynamic website can generate or alter response content at runtime, based on user input, stored data, session state, time, or other application logic. It often uses backend code and may interact with a database.

Characteristics:

Can show personalised content and account-specific information.
Can support login, search, shopping carts, dashboards, and database-backed records.
Shared templates or common data can make content updates easier.
Requires more application processing and operational complexity than a simple static site in many designs.

Examples: an online banking portal, an e-commerce dashboard, or a student result portal.

6.3 Static vs dynamic websites

Feature	Static website	Dynamic website
Page content	Typically prebuilt files	May be generated or modified at runtime
Server-side processing	Not required for basic file delivery	Commonly used
Database	Not required for basic delivery	May be used to retrieve/store application data
Performance	Often fast because files can be served directly or cached	May require extra processing; can still be highly optimised
Updating content	Often requires changing/rebuilding files	May be managed through application logic or content tools
Personalisation	Limited in the server response unless other services/client logic are involved	Commonly supported through accounts, data, and server-side logic
Hosting complexity	Often simple	Depends on the backend runtime, database, and application architecture
Typical use	Brochure sites, portfolios, documentation	Shopping, banking, personalised portals

Important nuance: A static frontend may call APIs or use browser-side JavaScript, and a dynamic website may cache pre-rendered pages. The main distinction is how the requested content is produced and managed, not merely whether JavaScript is present.

7. Web Application Lifecycle

A web application lifecycle describes the stages through which an application is planned, built, tested, released, and improved.

7.1 Stages listed in the faculty PPT

Stage	Purpose	Typical work
1. Planning	Define objectives and requirements	Identify users, features, scope, timeline, resources, and constraints
2. Design	Plan the user experience and system structure	Create UI/UX designs, workflows, architecture, and data models
3. Development	Implement the application	Write frontend and backend code, integrate services, and create data handling
4. Testing	Check correctness and quality	Find bugs; verify functionality, usability, compatibility, security, and performance
5. Deployment	Release the application to users	Configure hosting, deploy code/files, and make the application available on the live environment
6. Maintenance	Keep the application reliable after release	Fix bugs, update dependencies, improve features, and address changing requirements
7. Feedback	Learn from users and stakeholders	Collect suggestions, complaints, and usage observations for improvements
8. Monitoring	Track the application in operation	Observe uptime, errors, speed, security, and resource use

A practical lifecycle may be iterative rather than strictly one-directional. Feedback, monitoring, and maintenance can lead back to planning, design, and development.

Sequence to recall: Planning -> Design -> Development -> Testing -> Deployment -> Maintenance, with Feedback and Monitoring continuing after release and informing future iterations.

Part II - Browsers, Web Communication, DNS, URLs and Hosting

8. Web Browsers

8.1 Definition

A web browser is a software application used to access, retrieve, interpret, and display web resources. It communicates with web servers using HTTP/HTTPS and renders HTML, CSS, JavaScript, and related resources into an interactive page.

Examples named in the faculty PPT:

Google Chrome
Mozilla Firefox
Microsoft Edge
Apple Safari
Opera

8.2 Main browser responsibilities

Accept a URL or other navigation instruction.
Resolve a domain name when needed and connect to the server.
Send HTTP/HTTPS requests and receive responses.
Parse HTML and CSS, run JavaScript, and build the page representation.
Request supporting resources such as images, stylesheets, scripts, and fonts.
Display the page and handle scrolling, clicks, input, navigation, downloads, and other interactions.
Provide tools for debugging and inspecting pages.

A browser is a client application. A web server is the system that responds to its requests.

9. Browser Rendering Process

Browser rendering is the process of converting the resources of a webpage into pixels and interactive content on the screen. The exact implementation differs between browser engines, but the following high-level sequence is useful for CAT-1 revision.

9.1 Main stages

Navigation and resource retrieval: The browser processes the URL, uses cached information where possible, resolves the host, establishes the required connection, and requests the document.
HTML parsing and DOM construction: The browser parses HTML and creates the DOM (Document Object Model) tree, a structured representation of the document.
CSS parsing and CSSOM construction: The browser parses CSS and constructs the CSSOM (CSS Object Model), representing applicable style rules.
JavaScript processing: JavaScript may run and modify the DOM or styles. Some scripts can pause HTML parsing or delay rendering depending on how they are loaded.
Render tree construction: The browser combines the document structure with relevant computed styles to determine which visible nodes should be rendered.
Layout: The browser calculates the dimensions and positions of rendered elements.
Paint (rasterisation): Text, colours, borders, shadows, images, and other visual parts are drawn into pixels.
Compositing: Where layers are used, the browser combines them in the correct order to produce the final frame.

9.2 DOM, CSSOM and render tree

Term	Meaning
DOM	Tree representation of the HTML document and its nodes
CSSOM	Representation of parsed CSS rules and applicable styles
Render tree	Representation of the visible content and its computed styles used for rendering
Layout	Calculation of each rendered element's size and position
Paint	Drawing visual details into pixels
Compositing	Combining rendered layers into the final display

9.3 Important rendering distinctions

DOM is built from HTML; CSSOM is built from CSS.
The DOM and CSSOM contribute to the render tree.
Layout calculates geometry; paint draws visual content.
Compositing combines layers where the browser uses them.
An element such as <head> is not displayed as normal page content. Likewise, an element with display: none is not included in the render tree; an element with visibility: hidden generally still occupies layout space.
Images, stylesheets, scripts, and fonts may trigger additional network requests.
JavaScript can alter the DOM, so a browser's rendered page can differ from the original HTML source.

Source for this added process detail: MDN, How browsers work and Critical rendering path.

10. Browser Developer Tools (DevTools)

Browser Developer Tools are built-in browser utilities used to inspect, debug, test, and optimise websites. The faculty PPT highlights HTML inspection, live CSS editing, JavaScript debugging, network monitoring, performance analysis, and responsive design testing.

Tool/panel	Main purpose
Elements / Inspector	Inspect the live DOM, select elements, and examine or temporarily modify CSS
Console	Read messages and JavaScript errors; run JavaScript commands
Sources / Debugger	Inspect source files, set breakpoints, and step through code
Network	Observe requests, responses, status codes, headers, timing, and transferred resources
Performance	Investigate loading, scripting, rendering, and runtime performance
Application / Storage	Inspect supported site storage, service workers, cookies, and related application data
Device toolbar / Responsive mode	Emulate different screen sizes and device viewports

10.1 Common uses

Find why a resource did not load.
Inspect the HTTP status code and headers of a request.
Identify CSS rules applied to a selected element.
Find JavaScript errors and debug execution.
Test responsive layouts.
Investigate slow loading or rendering.

Changes made in DevTools are usually temporary inspection changes; they do not automatically edit the original source files on disk or the deployed website.

Source: MDN, What are browser developer tools?.

11. HTTP and HTTPS

11.1 HTTP

HTTP (Hypertext Transfer Protocol) is an application-layer protocol used to transfer web resources between a client, such as a browser, and a server. Resources can include HTML, CSS, JavaScript, images, and API data.

HTTP uses a request-response model: the client sends a request and the server returns a response.

HTTP is stateless at the protocol level: each request is treated as an independent request. Applications can maintain state using mechanisms such as cookies, sessions, tokens, or server-side records.

11.2 HTTPS

HTTPS (HTTP Secure) is HTTP communication protected using TLS (Transport Layer Security). TLS helps provide confidentiality (encryption), integrity, and authentication of the server through certificate validation.

HTTPS is used for login pages, banking, shopping, payments, and ordinary websites generally.

11.3 HTTP vs HTTPS

Feature	HTTP	HTTPS
Full form	Hypertext Transfer Protocol	Hypertext Transfer Protocol Secure (common expansion)
Transport protection	No TLS protection by HTTP itself	HTTP communication is protected using TLS
Common default port	80	443
Typical URL scheme	`http://`	`https://`
Data in transit	Can be read or modified by an attacker who can intercept it	TLS protects confidentiality and integrity in transit
Server authentication	No TLS certificate validation inherent to plain HTTP	Certificate validation helps authenticate the server's domain
Common use	Plain HTTP is now avoided for sensitive website use	Modern public websites, sign-in, shopping, banking, APIs

Precision note: Introductory slides sometimes say HTTPS uses “SSL/TLS” or refer to an “SSL certificate.” Modern HTTPS uses TLS; SSL is the older predecessor and is obsolete. A valid HTTPS connection does not prove that a site is honest or legitimate; it protects the connection to the authenticated domain.

11.4 Statelessness

Statelessness means HTTP does not automatically remember the previous request as part of the protocol. For example, an application can use a cookie or token to associate multiple requests with a logged-in user.

Remember: HTTP = request-response and stateless; HTTPS = HTTP protected by TLS; common default ports = HTTP 80 and HTTPS 443.

12. HTTP Methods: GET, POST, PUT and DELETE

An HTTP method indicates the intended action associated with a request. Methods are sometimes called HTTP verbs.

Method	Main purpose	Typical example	Key characteristic
GET	Retrieve a representation of a resource	Open a webpage or retrieve product details	Intended to retrieve data, not to change server state
POST	Submit data to a resource for processing	Submit a form, create a record through an API, or start an operation	Often changes state or causes a server-side action
PUT	Create or replace the state/representation of a resource at a known target URI	Replace the details of a profile at `/users/42`	Defined as idempotent
DELETE	Request deletion of a specified resource	Delete a record at `/users/42`	Defined as idempotent

12.1 Example requests

GET /products/42 HTTP/1.1
Host: example.com

Requests the product resource identified by the path.

POST /users HTTP/1.1
Host: example.com
Content-Type: application/json

{"name":"Asha"}

Submits data for processing, commonly to create a new user in an API.

PUT /users/42 HTTP/1.1
Host: example.com
Content-Type: application/json

{"name":"Asha","role":"student"}

Requests that the target resource at /users/42 be created or replaced with the submitted representation, according to the server's implementation and HTTP semantics.

DELETE /users/42 HTTP/1.1
Host: example.com

Requests deletion of the resource identified by the target URI.

12.2 Safe and idempotent behaviour

Safe method: Intended not to change the requested resource's state. GET is safe.
Idempotent method: Repeating the same request has the same intended effect as performing it once.
GET is safe and idempotent.
PUT is idempotent but not safe.
DELETE is idempotent by HTTP semantics, although repeated requests can return different status codes.
POST is not generally safe or idempotent; repeated submission can create repeated effects unless the application adds safeguards.

12.3 Most important distinctions

GET retrieves; POST submits for processing.
PUT represents replacement/creation at a target URI; POST commonly submits to a collection or processing endpoint.
DELETE requests removal of a resource.
A response code indicates the outcome of the request; the method indicates the intended action.

Actual API behaviour can vary, but the meanings above describe the standard HTTP semantics. Source: MDN, HTTP request methods.

13. HTTP Request-Response Model and Message Components

13.1 The basic model

A client chooses a resource URL and HTTP method.
The browser sends an HTTP request to the server.
The server receives and processes the request.
The server returns an HTTP response containing a status code and, usually, headers and a response body.
The browser uses the response to display or otherwise handle the resource.

13.2 Components of an HTTP request

For HTTP/1.1, a request is commonly described using the following parts:

Request line: Method, request target/path, and HTTP version.
Request headers: Metadata that tells the server more about the request, client, accepted formats, or body.
Blank line: Separates the headers from the message body.
Optional request body: Data sent to the server, for example JSON or submitted form data.

Example:

POST /login HTTP/1.1
Host: example.com
Content-Type: application/json
Accept: application/json

{"username":"student"}

In this example:

POST is the method.
/login is the request target/path.
HTTP/1.1 is the protocol version.
Host, Content-Type, and Accept are headers.
The JSON text after the blank line is the body.

13.3 Common request headers

Header	General purpose
`Host`	Identifies the target host in HTTP/1.1 requests
`Accept`	Indicates response media types the client can accept
`Content-Type`	Describes the media type of the message body, such as JSON
`Content-Length`	Gives the body length in bytes when used
`Authorization`	Carries authentication credentials or a token according to the scheme
`Cookie`	Sends cookies associated with the request context

13.4 Components of an HTTP response

Status line: HTTP version, numeric status code, and (in HTTP/1.x) a reason phrase.
Response headers: Metadata about the response and its body.
Blank line: Separates headers from the body.
Optional response body: The returned representation or content, such as HTML, JSON, or an image.

Example:

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Cache-Control: max-age=60

<!DOCTYPE html>
<html><body><h1>Welcome</h1></body></html>

In this example:

HTTP/1.1 is the version.
200 is the status code.
OK is the reason phrase.
Content-Type and Cache-Control are response headers.
The HTML after the blank line is the response body.

13.5 Common response headers

Header	General purpose
`Content-Type`	Describes the media type of returned content
`Content-Length`	Gives a content length in bytes when applicable
`Cache-Control`	Directs caching behaviour
`Location`	Supplies a target location for redirection or a newly created resource, depending on the response
`Set-Cookie`	Requests that the browser store a cookie
`Server`	May identify server software; its presence and detail vary

13.6 Request vs response

Request	Response
Sent by client to server	Sent by server back to client
Starts with a method, target, and version in HTTP/1.x	Starts with version, status code, and reason phrase in HTTP/1.x
Often includes headers such as `Host`, `Accept`, and `Authorization`	Often includes headers such as `Content-Type`, `Cache-Control`, and `Set-Cookie`
Optional body can carry data to the server	Optional body commonly contains the requested representation or an error explanation

The HTTP/1.x line-based format is useful for learning the components; HTTP/2 and HTTP/3 encode messages differently internally while preserving HTTP semantics. Source: MDN, HTTP messages.

14. HTTP Response Status Codes

HTTP status codes are three-digit numbers sent in an HTTP response. The first digit identifies the class of response.

14.1 Five status-code classes

Range	Class	Meaning
100-199	Informational	The request has been received and the protocol process can continue
200-299	Success	The request was successfully received, understood, and processed
300-399	Redirection	The client may need to take further action, often using another location or cached response
400-499	Client error	The request cannot be fulfilled as sent, or access is refused for a client-related reason
500-599	Server error	The server failed to fulfil an apparently valid request

14.2 Common status codes

2xx - Success

Code	Phrase	Meaning
200	OK	Request succeeded; the response body often contains the requested resource
201	Created	A new resource was created
202	Accepted	Request was accepted for processing, but processing may not be complete
204	No Content	Request succeeded and there is no response body

3xx - Redirection or cache-related response

Code	Phrase	Meaning
301	Moved Permanently	Resource has a permanent new location
302	Found	Temporary redirection in common usage
304	Not Modified	A conditional request indicates that the cached representation can be reused

4xx - Client errors

Code	Phrase	Meaning
400	Bad Request	Server cannot process the request because it is malformed or invalid
401	Unauthorized	Authentication is required or the supplied authentication is not accepted
403	Forbidden	The server refuses access; authentication alone may not change this outcome
404	Not Found	The requested resource was not found
405	Method Not Allowed	The method is not allowed for the target resource
408	Request Timeout	The server timed out waiting for the request
409	Conflict	The request conflicts with the current state of the resource
429	Too Many Requests	The client has sent too many requests in a given period, according to server policy

5xx - Server errors

Code	Phrase	Meaning
500	Internal Server Error	Unexpected server-side failure
501	Not Implemented	Server does not support the required functionality/method for the request
502	Bad Gateway	A gateway or proxy received an invalid response from an upstream server
503	Service Unavailable	Server is temporarily unable to handle the request, often due to maintenance or overload
504	Gateway Timeout	A gateway/proxy did not receive a timely response from an upstream server

14.3 High-confusion distinctions

401 vs 403: 401 concerns authentication; 403 means the server refuses access. The label “Unauthorized” can be confusing, but this is the standard HTTP meaning.
404 vs 500: 404 = requested resource not found; 500 = unexpected server failure.
301 vs 302: 301 = permanent redirection; 302 = temporary redirection in common usage.
502 vs 504: 502 = invalid upstream response; 504 = upstream response did not arrive in time.
204: Successful request, no response body.
201: Successful creation of a resource.

Memory rule: 2xx success, 3xx redirection, 4xx client-side/request/access issue, 5xx server-side failure.

Source: MDN, HTTP response status codes.

15. DNS and Domain Names

15.1 DNS definition

DNS (Domain Name System) is a distributed naming system that stores and retrieves records associated with domain names. A major use is resolving a human-readable host name, such as www.example.com, to an IP address that a computer can use to contact the destination.

Without DNS, people would often need to remember numeric IP addresses instead of familiar names.

15.2 Domain name

A domain name is a human-readable name in the hierarchical DNS namespace. Examples include example.com, chitkara.edu.in, and www.example.com.

Domain names are made of labels separated by dots. The DNS hierarchy is read from right to left, from the top-level domain toward more specific names.

Example: www.example.com

.com - top-level domain (TLD)
example - label immediately below .com; example.com is the registrable domain in this example
www - subdomain/host label

The domain name is not the same thing as its IP address. A single domain can have multiple DNS records and can resolve to more than one IP address; a hosting provider can also change the addresses over time.

15.3 Important DNS terms

Term	Meaning
DNS resolver	Software/service that performs or coordinates DNS lookups on behalf of a client
Recursive resolver	Resolver that obtains an answer by querying other DNS servers when the answer is not cached
Root nameserver	Directs the lookup toward the correct TLD nameservers
TLD nameserver	Directs the lookup toward authoritative servers for a domain under a TLD
Authoritative nameserver	Publishes authoritative DNS records for a domain/zone
DNS cache	Temporary storage of DNS answers to reduce repeated lookups
IP address	Network-layer address used to direct packets to a destination/interface
Registrar	Organisation through which a domain name is registered; it is not the same as DNS itself or the web host

15.4 Common DNS record types

Record	Purpose
A	Maps a name to an IPv4 address
AAAA	Maps a name to an IPv6 address
CNAME	Makes one DNS name an alias of another name
MX	Identifies mail servers for a domain
NS	Identifies nameservers for a DNS zone
TXT	Stores text data used for purposes such as domain verification and email policy

For CAT-1, the most important idea is that DNS stores records and resolvers use them to find the appropriate destination. Do not treat every DNS lookup as only a single fixed IP lookup; a browser may request different records and may reuse cached answers.

16. Domain Name Resolution Process

A DNS lookup or domain name resolution is the process used to obtain the DNS information needed to contact a domain.

16.1 Simplified step-by-step process

User enters a URL: For example, https://www.example.com.
Browser/operating-system cache check: The system may already have a valid cached DNS answer. If so, it can skip further DNS queries.
Recursive resolver query: If no suitable cached result is available, the client asks a recursive resolver, often provided by an Internet service provider or a public DNS service.
Root nameserver: If necessary, the resolver asks a root server where to find the nameservers for the TLD, such as .com.
TLD nameserver: The resolver asks a .com TLD nameserver where the authoritative DNS information for example.com can be found.
Authoritative nameserver: The resolver asks the authoritative server for the record for www.example.com and receives the relevant answer, such as an A, AAAA, or CNAME record.
Answer returned and cached: The resolver returns the answer to the client and caches it according to the record's TTL (time to live).
Browser connects to the destination: The browser uses the relevant IP address and continues establishing the web connection, then sends an HTTP or HTTPS request.

Memory sequence: Cache/client -> Recursive resolver -> Root -> TLD -> Authoritative DNS -> Answer back -> Browser connects.

This is a simplified sequence, not a guarantee that every lookup contacts every server. Caching can reduce or skip steps. The recursive resolver performs much of the work on behalf of the client.

16.2 DNS resolution is not the same as loading a webpage

DNS helps find the destination. After resolution, the browser still needs to connect to the server and request the resource using HTTP/HTTPS. DNS alone does not download or render the webpage.

Source: Cloudflare Learning Paths, What is DNS?.

17. Top-Level Domains (TLDs)

A Top-Level Domain (TLD) is the final label in a domain name, appearing after the last dot. In example.com, the TLD is .com.

17.1 Common generic or purpose-associated TLDs from the faculty PPT

TLD	Common association in introductory materials	Example pattern
`.com`	Commercial / general-purpose websites	`example.com`
`.net`	Historically associated with networks and Internet services; now broadly used	`example.net`
`.org`	Historically associated with organisations, especially non-profits; now broadly used	`example.org`
`.edu`	Educational institutions, with eligibility rules depending on the TLD registry	`university.edu`
`.gov`	Government domains with eligibility requirements	`agency.gov` or country-specific equivalents
`.mil`	Military domains, primarily in the U.S. namespace	`example.mil`
`.int`	Certain international treaty-based organisations	`example.int`

The labels above are useful memory associations from the faculty material, not universal guarantees about what a site does. For example, .org does not by itself guarantee that a site is a registered non-profit.

17.2 Country-code TLDs (ccTLDs)

Country-code TLDs commonly use two-letter codes associated with a country or territory.

ccTLD	Country/territory association
`.in`	India
`.jp`	Japan
`.us`	United States
`.fr`	France
`.it`	Italy
`.cn`	China
`.au`	Australia

17.3 Domain labels and TLDs

For www.chitkara.edu.in:

.in is the final TLD.
edu.in is a domain suffix within the Indian namespace.
chitkara is the registered organisation label in this example.
www is a subdomain/host label.

Remember: The TLD is identified by the final label after the last dot, not by the first word in the address.

18. URL Structure

18.1 URL definition

URL (Uniform Resource Locator) is an address used to identify the location of a resource and how it can be accessed. URLs are used for webpages, files, images, APIs, and other resources.

18.2 Main components

Consider:

https://www.example.com:443/products/item.html?id=101&category=books#details

Component	Example	Function
Scheme / protocol	`https`	Specifies the scheme used to access the resource
Host name	`www.example.com`	Identifies the destination host name
Subdomain	`www`	More specific label under the domain
Registrable domain	`example.com`	Domain name registered in the example
TLD	`.com`	Final DNS label
Port	`443`	Optional explicit service port; default HTTPS port is 443
Path	`/products/item.html`	Identifies a path/resource on the server
Query string	`?id=101&category=books`	Carries query parameters
Fragment	`#details`	Identifies a location or fragment within the resource, often handled client-side

A port is often omitted when the scheme's default port is used. The fragment is not normally sent as part of the HTTP request target to the server; it is generally handled by the browser to navigate within the retrieved resource.

18.3 Why URLs matter

URLs enable users and applications to:

Open webpages and files.
Navigate between pages.
Load images, stylesheets, and scripts.
Share a specific resource.
Submit query data or access APIs.

18.4 URL vs domain name

A domain name is only one part that may appear in a URL. A URL can also include a scheme, port, path, query string, and fragment.

Example:

Domain name: example.com
URL: https://www.example.com/products?id=5

19. Absolute and Relative URLs

19.1 Absolute URL

An absolute URL contains the complete address of the resource, including its scheme and host, and may include a path, query string, and fragment.

Example:

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

Characteristics:

Supplies the complete destination.
Does not depend on the current page's directory for identifying the host and path.
Useful for linking to another website or sharing a complete address.

19.2 Relative URL

A relative URL identifies a resource in relation to the current document URL or applicable base URL.

Assume the current page is https://www.example.com/index.html.

Relative URL	Meaning/example resolution
`about.html`	`https://www.example.com/about.html`
`images/logo.png`	Resource inside the `images` subfolder
`../index.html`	Move up one directory, then refer to `index.html`
`/css/site.css`	Path beginning at the site's root path

The exact resolved URL depends on the base URL and directory structure.

19.3 Absolute vs relative

Absolute URL	Relative URL
Includes the complete scheme and host	Usually omits the scheme and host
Does not rely on the current page's directory to identify the destination	Resolved relative to the current/base URL
Useful for external links and fully qualified addresses	Useful for internal links and resources within a site
Example: `https://example.com/page.html`	Example: `page.html`

Memory cue: Absolute = full address. Relative = address in relation to the current/base location.

20. Query Parameters

Query parameters are name-value pairs commonly included in a URL's query string to pass data to an application or request a particular representation.

They start after ?. Multiple parameters are commonly separated with &.

Example:

https://example.com/search?q=computer

/search is the path.
? begins the query string.
q is the parameter name.
computer is the parameter value.

Multiple parameters:

https://example.com/products?category=mobile&brand=apple

Parameter name	Value
`category`	`mobile`
`brand`	`apple`

Important details

A URL can have zero, one, or many query parameters.
Parameter order can matter to a particular application, but many applications treat different orders as equivalent.
A query string begins with ?; additional name-value pairs are commonly separated with &.
A fragment begins with #, not ?.
Query parameters can be seen in the URL, so sensitive secrets should not be placed in them. HTTPS does not make URL query values invisible to the browser history, logs, or other places where URLs may be recorded.

21. Web Hosting, Hosting Types, and Domain-Hosting Integration

21.1 Web hosting

Web hosting is a service that provides storage and server resources so website files or web applications can be served to users over the Internet.

Website files may include HTML, CSS, JavaScript, images, fonts, and other assets. A web application may also require a server runtime, database, and other services.

21.2 How hosting works

A developer creates website files or builds a web application.
The files/application are deployed to a hosting environment.
A domain name is registered if the site needs a custom domain.
DNS is configured to direct the domain/subdomain toward the correct hosting service.
The user enters the URL in a browser.
The browser resolves the domain, connects to the destination, and sends the request.
The hosting service returns static files or passes the request to an application that generates a response.
The browser renders the returned resources.

Analogy from the faculty PPT: The domain is the address of a house, hosting is the house/building, and the website files are the contents inside it.

21.3 Types of hosting

The faculty material includes shared, VPS, dedicated, cloud, managed, free, reseller, and colocation hosting. The following table consolidates them.

Type	How it works	Advantages	Limitations / best fit
Free hosting	Provider offers limited hosting without a normal hosting fee	Useful for learning and small personal projects	Resource, feature, branding, or usage limitations may apply
Shared hosting	Many websites share resources on one server	Low cost; easy to manage	Resource sharing can affect performance; limited server-level control; suited to small sites and blogs
VPS hosting	One physical server is divided into multiple virtual private servers	More control and allocated resources than typical shared hosting	Costs more; may require system-administration knowledge; suited to growing sites
Dedicated hosting	One customer gets an entire physical server	High control, customisation, and dedicated resources	More expensive; requires administration; suited to demanding or high-traffic systems
Cloud hosting	Resources are provided through a network of interconnected servers/cloud infrastructure	Can scale resources and support high availability when designed appropriately	Pricing and configuration may be more complex
Managed hosting	Provider handles selected operational tasks	Provider may manage updates, backups, security configuration, monitoring, and maintenance	Less direct control; scope varies by provider and plan
Reseller hosting	A customer buys hosting capacity and resells it to other customers	Useful for hosting resellers and small businesses offering web services	Requires customer/billing/support management; dependent on upstream host
Colocation hosting	Customer-owned server is placed in a provider's data-centre facility	Customer retains hardware control while provider supplies facility, power, and network	Customer generally remains responsible for server hardware/software administration; requires own hardware
Static hosting	Hosting service serves prebuilt static files, often through a CDN or static hosting platform	Simple, fast, and often inexpensive for static sites	Server-side application logic requires separate services if needed

Hosting labels can overlap. For example, managed services can be offered for a VPS or dedicated server, and static sites may be hosted on cloud infrastructure.

21.4 Domain vs hosting

Domain name	Web hosting
Human-readable address, such as `www.example.com`	Service/infrastructure that stores or serves the site's files/applications
Registered through a domain registrar	Obtained from a hosting provider or platform
DNS configuration determines which services/nameservers the domain uses	Handles incoming requests and serves files or application responses
Can be pointed to a different provider by changing DNS settings	Can sometimes be accessed using a provider-supplied address before a custom domain is connected

A domain name does not automatically include hosting, and hosting does not automatically mean the site owns a custom domain. The two services must be configured to work together.

21.5 Domain and hosting integration

A typical process is:

Register domain -> Choose hosting -> Upload/deploy website -> Configure DNS -> Configure HTTPS -> Test the website.

Details:

Register the domain: Choose and register an available domain through a registrar.
Choose hosting: Select shared, VPS, dedicated, cloud, static, or another suitable hosting service.
Deploy files/app: Upload files or deploy the built application to the hosting platform.
Configure DNS: Update the domain's nameservers or the needed DNS records. An A record points a name to an IPv4 address; an AAAA record points to an IPv6 address; a CNAME aliases one name to another.
Wait for DNS caching to expire/update: DNS changes may not be visible everywhere immediately because resolvers cache records according to TTL values.
Configure HTTPS: Set up a valid TLS certificate and HTTPS configuration at the hosting service, when supported/required.
Test: Check the domain, redirects, resource loading, and the HTTP/HTTPS versions of the site.

Concept chain: Domain -> DNS records/nameservers -> Hosting destination -> Website files or application -> HTTP/HTTPS response.

22. Unit Summary: Web Architecture and Communication

Web technology combines tools, languages, and protocols used to build and maintain websites and web applications.
The Internet is the network infrastructure; the WWW is a linked information system that runs over it.
The Web was proposed by Tim Berners-Lee at CERN in 1989; the first website followed in 1991 according to the course timeline.
TCP/IP enables communication across interconnected networks.
In the four-layer model shown in the faculty material: Application = services, Transport = delivery, IP = logical addressing/routing, Network = link transmission.
TCP provides reliable ordered delivery; UDP does not provide those guarantees itself.
A client requests a resource; a server provides data or services.
Two-tier architecture has two principal tiers; three-tier architecture separates presentation, business logic, and data.
The frontend is the visible interactive interface; the backend runs server-side logic and data operations.
A static website generally serves prebuilt files; a dynamic website may generate content at runtime.
The web application lifecycle includes planning, design, development, testing, deployment, maintenance, feedback, and monitoring.
A browser retrieves and renders web resources. DOM comes from HTML; CSSOM comes from CSS; layout calculates geometry; paint draws pixels; compositing combines layers.
DevTools help inspect HTML/CSS, debug JavaScript, monitor network requests, inspect performance, and test responsive layouts.
HTTP is a stateless request-response protocol; HTTPS protects HTTP communication through TLS.
GET retrieves; POST submits data for processing; PUT creates/replaces at a target URI; DELETE requests removal.
HTTP status-code classes: 1xx informational, 2xx success, 3xx redirection, 4xx client error, 5xx server error.
DNS uses records and resolvers to find the right destination for a domain name.
Resolution may use cache, recursive resolver, root nameserver, TLD nameserver, and authoritative nameserver.
A TLD is the final label in a domain, such as .com or .in.
A URL can contain scheme, host, port, path, query string, and fragment.
An absolute URL gives a complete address; a relative URL is resolved against a base URL.
Query parameters begin after ?; multiple parameters are commonly separated by &.
Hosting serves website files or applications. DNS connects a domain to the chosen destination; domain and hosting are different things.

Part III - HTML5

23. Introduction to HTML and HTML5

23.1 HTML definition

HTML (HyperText Markup Language) is the standard markup language used to define the structure and meaning of webpages. HTML consists of elements that label content, such as a heading, paragraph, hyperlink, image, or table.

HTML is a markup language, not a general-purpose programming language. It describes document structure; CSS usually controls presentation, and JavaScript adds behaviour.

23.2 What HTML5 means

HTML5 is the widely used name associated with a major evolution of HTML that introduced or standardised semantic structural elements and native capabilities for audio, video, graphics, and web applications. HTML is now maintained as a living standard rather than remaining frozen at a single final version number.

23.3 Features highlighted in the faculty PPT

Semantic elements such as <header>, <nav>, <main>, <section>, <article>, and <footer>.
Native audio and video elements, reducing reliance on external plugins for common media playback.
Canvas and SVG support for graphics.
Newer form controls and input types, although forms are outside the explicit CAT-1 syllabus list supplied here.
Web Storage and other browser capabilities for client-side application data.
Improved support for modern responsive and cross-device web experiences.

23.4 HTML history from the faculty PPT

Year	Milestone in the faculty material
1989	Tim Berners-Lee invented/proposed the WWW
1991	HTML introduced by Tim Berners-Lee (as stated in the teaching timeline)
1993	HTML+ draft by Dave Raggett
1995	HTML 2.0 defined by an HTML Working Group
1997	W3C Recommendation: HTML 3.2
1999	W3C Recommendation: HTML 4.01
2000	XHTML 1.0
2008	First public HTML5 draft in the historical timeline
2012	WHATWG HTML5 Living Standard milestone in the faculty timeline
2014	W3C Recommendation: HTML5
2016	HTML 5.1 candidate recommendation milestone in the slides
2017	HTML 5.1 second edition and HTML 5.2 recommendation milestones in the slides

Use this table for historical revision as presented in the faculty PPT. The standards process has continued since these dated milestones.

24. HTML5 Document Structure

24.1 Basic HTML5 document

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Web Page</title>
</head>
<body>
  <h1>Hello World</h1>
  <p>This is a paragraph.</p>
</body>
</html>

24.2 Purpose of each part

Part	Purpose
`<!DOCTYPE html>`	Declares the document as modern HTML and tells the browser to use standards mode
`<html lang="en">`	Root element of the document; `lang` identifies the primary language, here English
`<head>`	Contains metadata and linked resources rather than the main visible page content
`<meta charset="UTF-8">`	Declares the document's character encoding
`<meta name="viewport" ...>`	Helps the page use the device viewport appropriately on mobile devices
`<title>`	Sets the document title shown in the browser tab and used by browsers/bookmarks; it is not the visible page heading
`<body>`	Contains the document's main content rendered for users
`<h1>`	Top-level heading in the example
`<p>`	Paragraph of text

24.3 Head vs body

<head> contains document information such as <title>, <meta>, stylesheet links, and scripts/resources.
<body> contains the page content, such as headings, paragraphs, images, hyperlinks, tables, lists, and other visible/interface elements.
<head> is not the same thing as <header>.
<title> is not the same thing as <h1>: the title normally appears in the browser tab; <h1> appears in the webpage content.

24.4 Indented structure

HTML elements can be nested inside other elements. The document starts with the doctype, has <html> as its root, and typically separates metadata in <head> from page content in <body>.

25. HTML Tags, Elements and Attributes

25.1 Tag

A tag is markup written inside angle brackets. Examples are <p>, <h1>, and </p>.

Start/opening tag: <p>
End/closing tag: </p>
The slash / in a closing tag marks the end of the element.

25.2 Element

An HTML element is the complete markup construct: commonly a start tag, content, and end tag.

Example:

<p>This is a paragraph.</p>

The complete line is a paragraph element. <p> is the start tag and </p> is the end tag.

25.3 Attribute

An attribute provides additional information about an element and is normally written in the start tag as a name and value.

Example:

<a href="https://example.com" target="_blank">Visit Example</a>

href and target are attribute names.
"https://example.com" and "_blank" are their values.
Visit Example is the link text.

25.4 Common attributes

Attribute	Common use
`id`	Unique identifier for an element within a document
`class`	Groups elements for CSS styling or JavaScript selection
`style`	Applies inline CSS declarations
`title`	Supplies supplementary advisory information in applicable contexts
`lang`	Specifies the language of an element/document
`href`	Destination URL for a hyperlink or linked resource
`src`	Source URL for an embedded resource such as an image
`alt`	Alternative text for an image
`width`, `height`	Specify dimensions for supported elements such as images

25.5 Void elements

A void element cannot contain child content and does not have a closing tag in HTML. Examples relevant to this syllabus include:

<img>
<meta>
<link>
<br>
<hr>

MCQ distinction: Do not write </img> as though <img> needed a normal closing tag.

26. Semantic HTML Elements

26.1 Semantic HTML definition

A semantic element communicates the meaning or role of its content to both people and software, including browsers, search tools, and assistive technologies. Semantic structure improves readability, accessibility, and maintainability.

Example:

<div>My College</div>
<header>My College</header>

<div> is a generic container. <header> communicates an introductory/header role.

26.2 Semantic vs non-semantic elements

Semantic elements	Non-semantic/general-purpose elements
Communicate a meaningful role or content type	Do not convey a specific content role by themselves
Examples: `<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<footer>`	Examples: `<div>`, `<span>`
Help define document landmarks and relationships	Used when a generic grouping or inline wrapper is needed
Can improve accessibility and document understanding when used correctly	Meaning must come from surrounding content, attributes, or context

Note: <img> and <table> also have defined semantics, but the principal semantic layout elements in the supplied code-cheatsheet are the structural elements listed below.

26.3 Core semantic elements from the supplied HTML PPTs

Element	Purpose	Simple memory cue
`<header>`	Introductory content for a page or section; may include a heading, logo, or navigation	Introduction/top content
`<nav>`	Groups important navigation links	Navigation
`<main>`	Contains the central content of the document	Main content
`<section>`	Groups content by a common topic or theme; usually has a heading	Related topic
`<article>`	Represents an independent, self-contained composition that could make sense on its own	Standalone item
`<aside>`	Contains complementary or indirectly related information, such as a sidebar or related links	Side information
`<footer>`	Contains closing information for a page or section, such as authorship or copyright	Footer/closing details
`<figure>`	Groups self-contained media such as an illustration, diagram, or code listing	Media group
`<figcaption>`	Provides a caption for a `<figure>`	Figure caption
`<mark>`	Marks/highlights text relevant in context	Highlight

26.4 Additional semantic/meaningful elements shown in the faculty PPT

Element	Meaning or use
`<details>`	Disclosure widget that can reveal/hide additional content
`<summary>`	Visible caption/summary for a `<details>` element
`<time>`	Represents a date or time in machine-readable markup where appropriate
`<output>`	Represents the result of a calculation or user action
`<progress>`	Represents the completion progress of a task
`<audio>`	Embeds audio content
`<video>`	Embeds video content
`<source>`	Provides a media source for elements such as `<audio>` and `<video>`
`<track>`	Provides timed text tracks such as subtitles or captions for media
`<canvas>`	Provides a drawing area controlled using scripting, commonly JavaScript
`<svg>`	Embeds scalable vector graphics
`<bdi>`	Isolates text whose direction may differ from surrounding text
`<wbr>`	Marks a possible line-break opportunity within a long word

The supplied deck also mentions <datalist> for suggestions associated with an input, and <keygen> as a historical HTML feature. <keygen> is obsolete and should not be used in current HTML.

26.5 Distinguishing `<section>` and `<article>`

Use <section> to group related content around a theme or subject, such as a chapter or topic area.
Use <article> for content that is self-contained, such as a blog post, news story, forum post, or independent content card.
An article can appear inside a section, and sections may contain multiple articles.
They are not interchangeable solely because both can contain headings and paragraphs.

26.6 Semantic layout example from the code-cheatsheet

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My College</title>
</head>
<body>
  <header>
    <h1>My College</h1>
  </header>

  <nav>
    <a href="index.html">Home</a>
    <a href="courses.html">Courses</a>
  </nav>

  <main>
    <section>
      <h2>Web Technologies</h2>
      <article>
        <h3>HTML5</h3>
        <p>HTML defines the structure of webpages.</p>
      </article>
    </section>

    <aside>
      <p>Related information goes here.</p>
    </aside>
  </main>

  <footer>
    <p>Copyright information</p>
  </footer>
</body>
</html>

26.7 Semantic element placement distinctions

<main> belongs inside <body> and identifies the dominant page content.
<header> may be used for the whole page or for an individual section/article.
A page can have more than one <header> or <footer> when they belong to separate sections, but the main page content should have a clear structure.
<nav> is for major navigation sections, not necessarily every single link on a page.
<figure> groups media; <figcaption> is its caption.

Source: MDN, Structuring documents and HTML elements reference.

27. Headings and Paragraphs

27.1 Headings: `<h1>` to `<h6>`

HTML provides six heading levels:

<h1> - highest/top-level heading.
<h2> - second-level heading.
<h3> - third-level heading.
<h4> - fourth-level heading.
<h5> - fifth-level heading.
<h6> - sixth-level heading.

Example:

<h1>Introduction to Web Technologies</h1>
<h2>Internet Architecture</h2>
<h3>Application Layer</h3>

Headings express document hierarchy. Their default visual sizes are browser styling; CSS can change their appearance. Do not choose a heading tag only because a particular size looks right.

27.2 Paragraph: `<p>`

The <p> element represents a paragraph of text.

<p>HTML describes the structure of a webpage.</p>
<p>CSS controls the presentation of the page.</p>

Browsers normally display paragraphs as separate blocks with spacing around them. Paragraphs should be used for paragraph content rather than as a universal spacing tool.

27.3 Line break and thematic break

<br> inserts a line break within text; it is a void element.
<hr> represents a thematic break between content sections; browsers typically display it as a horizontal rule.
Repeated <br> tags should not be used as the main way to create page layout or spacing; CSS is used for layout.

28. Text Formatting and HTML Comments

28.1 Common text-formatting elements

Element	Meaning/use	Common default appearance
`<b>`	Draws attention to text without declaring extra importance	Bold
`<strong>`	Indicates strong importance, seriousness, or urgency	Bold
`<i>`	Marks text in an alternate voice/mood or convention	Italic
`<em>`	Marks stress emphasis	Italic
`<u>`	Marks text with a non-textual annotation in modern semantic use	Often underlined
`<mark>`	Highlights text relevant in the current context	Highlighted background
`<small>`	Side comments, fine print, or less prominent text	Smaller text
`<del>`	Represents deleted/removed content	Often struck through
`<ins>`	Represents inserted content	Often underlined
`<sub>`	Subscript text	Lowered smaller text
`<sup>`	Superscript text	Raised smaller text
`<code>`	Represents a fragment of computer code	Often monospace
`<pre>`	Preserves spaces and line breaks in preformatted text	Often monospace

Example:

<p><strong>Important:</strong> Keep the original URL.</p>
<p>The word <em>must</em> is emphasised.</p>
<p>Water: H<sub>2</sub>O</p>
<p>Power: x<sup>2</sup></p>
<p>Use <code>&lt;p&gt;</code> for a paragraph.</p>

28.2 Commonly confused formatting pairs

<b> and <strong> may both appear bold by default, but <strong> communicates importance.
<i> and <em> may both appear italic by default, but <em> conveys emphasis.
HTML meaning should not be inferred only from visual appearance, because CSS can change the default presentation.

28.3 HTML comments

HTML comments are notes in the source code that the browser does not display as ordinary page content.

Syntax:

<!-- This is an HTML comment. -->
<p>This paragraph is displayed.</p>

Key points:

A comment begins with .
Comments can help explain or organise source code.
Comments remain visible to someone who can inspect the page source; they are not a secure place for passwords, secrets, or private information.
HTML comments should not be nested.

29. Hyperlinks

29.1 Anchor element

A hyperlink is created using the <a> (anchor) element. The href attribute gives the destination.

<a href="https://www.example.com">Visit Example</a>

<a> = anchor element.
href = hyperlink reference/destination.
Visit Example = visible link text.
Clicking the link causes the browser to navigate to or otherwise handle the destination.

29.2 Absolute and relative hyperlink destinations

<!-- Absolute URL -->
<a href="https://www.example.com/about.html">About</a>

<!-- Relative URL -->
<a href="about.html">About</a>

The first specifies a complete destination. The second is resolved using the current/base URL.

29.3 The `target` attribute

The target attribute controls the browsing context in which the linked document is opened.

Value	Meaning
`_self`	Opens in the current browsing context; default behaviour for ordinary links
`_blank`	Opens in a new tab/window, according to browser settings
`_parent`	Opens in the parent browsing context when frames are involved
`_top`	Opens in the top-level browsing context when frames are involved

Example:

<a href="https://example.com" target="_blank" rel="noopener">
  Open Example
</a>

29.4 Link destinations beyond webpages

An href value can use other URL schemes, such as:

<a href="mailto:help@example.com">Email support</a>
<a href="tel:+911234567890">Call support</a>

29.5 Image as a hyperlink

An image can be made clickable by placing the <img> element inside an <a> element.

<a href="https://example.com">
  <img src="images/logo.png" alt="Open Example website">
</a>

Important: <a> creates the link; href specifies its target. An image link still needs meaningful alternative text when the image provides the link's meaning.

30. Images

30.1 The `<img>` element

The <img> element embeds an image in a webpage. It is a void element and does not use a normal closing </img> tag.

<img src="images/flower.jpg" alt="A red flower" width="400" height="300">

30.2 Important image attributes

Attribute	Purpose
`src`	URL/path to the image resource
`alt`	Textual alternative describing the image or its purpose
`width`	Display/intrinsic width hint in CSS pixels for the image
`height`	Display/intrinsic height hint in CSS pixels for the image
`title`	Optional advisory information, not a replacement for `alt`

30.3 `src` attribute

The src value tells the browser where to request the image. It can be a relative path or an absolute URL.

<img src="photo.jpg" alt="Class photograph">
<img src="images/logo.png" alt="College logo">
<img src="https://example.com/images/logo.png" alt="Example logo">

If the path is incorrect or the server cannot provide the image, the browser may show a broken image indicator. Suitable alt text provides a useful text alternative.

30.4 `alt` attribute

The alt attribute provides alternative text for users who cannot see the image or when the image cannot be loaded. It is important for screen-reader accessibility.

Describe the information or function of the image, not merely its filename.
When an image functions as a link, the alternative text should communicate the link purpose.
For purely decorative images that convey no information, an empty alt="" can be appropriate.

30.5 Image paths

Path	Type/meaning
`photo.jpg`	Relative URL; file in a relevant same directory
`images/photo.jpg`	Relative URL; image inside an `images` folder
`../photo.jpg`	Relative URL; move one directory upward before locating the file
`https://example.com/photo.jpg`	Absolute URL

30.6 Common image formats from the faculty PPT

Format	Typical extension	Common notes
JPEG/JPG	`.jpg`, `.jpeg`	Common for photographs; lossy compression is typical
PNG	`.png`	Supports lossless compression and transparency
GIF	`.gif`	Supports simple animation and a limited colour palette
SVG	`.svg`	Vector graphics that scale without becoming pixelated in the same way as raster images
ICO	`.ico`	Commonly associated with icons and favicons
APNG	`.apng`	Animated PNG format

30.7 Modern vs outdated image presentation attributes

The faculty PPT contains historical attributes such as align and border on <img>. They are obsolete or not the modern way to style images. Use CSS for alignment, borders, dimensions, and spacing. For example:

<img src="images/logo.png" alt="College logo" class="logo">

.logo {
  width: 150px;
  height: auto;
  border: 1px solid #999;
}

Remember: src = source location; alt = alternative text. <img> has no normal closing tag.

Source: MDN, HTML images and the `` element.

31. HTML Tables

31.1 Purpose

HTML tables arrange tabular data into rows and columns. They should be used for data relationships rather than as the main method for page layout.

31.2 Core table elements

Element	Meaning
`<table>`	Defines the table
`<caption>`	Provides a title/caption for the table; placed near the start of the table structure
`<tr>`	Defines a table row
`<th>`	Defines a header cell
`<td>`	Defines a data cell
`<thead>`	Groups table header rows
`<tbody>`	Groups the main body rows
`<tfoot>`	Groups footer rows, often totals or summaries
`<colgroup>`	Groups columns for shared formatting or structure
`<col>`	Represents column properties within a `<colgroup>`

31.3 Basic table example

<table>
  <caption>Monthly Savings</caption>
  <thead>
    <tr>
      <th scope="col">Month</th>
      <th scope="col">Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>80</td>
    </tr>
  </tbody>
</table>

How it is structured:

<table> starts the table.
<caption> provides its caption.
<thead> groups the heading row.
<tr> begins each row.
<th> contains the heading cells.
<tbody> groups the main data rows.
<td> contains each data cell.

31.4 Row and column spans

colspan="2" makes a cell span two columns.
rowspan="2" makes a cell span two rows.

Example:

<table>
  <tr>
    <th>Name</th>
    <th colspan="2">Contact details</th>
  </tr>
  <tr>
    <td>Aman</td>
    <td>aman@example.com</td>
    <td>1234567890</td>
  </tr>
</table>

31.5 Table styling concepts from the faculty PPT

CSS is the modern way to control table borders, spacing, padding, colours, and dimensions.

<style>
  table, th, td {
    border: 1px solid #444;
    border-collapse: collapse;
  }
  th, td {
    padding: 8px 12px;
  }
</style>

Border: Draws an outline around a table or its cells.
border-collapse: collapse: Adjacent table borders are collapsed into a shared border.
Cell padding: Space between the cell content and its edges; controlled with CSS padding.
Cell spacing: Space between cells; CSS border-spacing controls it when borders are separate.
Caption: Names/describes the table and improves understanding.
thead, tbody, tfoot: Group rows by their role. These groups improve structure but do not necessarily change the table's visual layout by themselves.
colgroup and col: Support applying shared structure or styling to columns.

31.6 Important distinctions

Term	Meaning
Row	Horizontal group of cells, created by `<tr>`
Column	Vertical series of cells
Header cell	`<th>`; describes a row/column category
Data cell	`<td>`; contains ordinary table data
`colspan`	Span across columns
`rowspan`	Span across rows
Cell padding	Space inside a cell, between content and border
Cell spacing	Space between neighbouring cells in separated-border layouts

Modern accessibility practice uses correct header cells and, where helpful, scope="col" or scope="row" so the relationships between headings and data are clearer to assistive technologies.

31.7 Legacy table attributes

The faculty PPT shows historical attributes such as border, bordercolor, bgcolor, background, width, and height directly on table markup. For modern HTML, CSS is preferred for presentation. Recognise the concepts in the slides, but use CSS in new code.

Source: MDN, The HTML `

` element.

32. Supplementary HTML Material from the Faculty PPT

The supplied CAT-1 syllabus explicitly lists tables but does not explicitly list HTML lists. The HTML fundamentals PPT does include lists, so this short reference is provided as supplementary material; prioritise the explicitly listed syllabus topics first if time is limited.

32.1 Types of HTML lists

List type	Elements	Use
Unordered list	`<ul>` with `<li>` items	Items without a required sequence; commonly displayed with bullets
Ordered list	`<ol>` with `<li>` items	Items in a sequence; commonly numbered or lettered
Description/definition list	`<dl>` containing `<dt>` and `<dd>`	Terms paired with descriptions or definitions

Example:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<ol>
  <li>Plan</li>
  <li>Develop</li>
  <li>Test</li>
</ol>

<dl>
  <dt>HTML</dt>
  <dd>Markup language for webpage structure.</dd>
</dl>

The <li> element defines a list item. Historical type attributes for bullet styles are not the modern preferred approach; CSS list-style-type is used for presentation.

32.2 Website file and folder structure from the faculty PPT

A simple website project may use a structure such as:

website/
├── index.html
├── about.html
├── contact.html
├── css/
│   └── styles.css
├── js/
│   └── script.js
└── images/
    └── logo.png

index.html is commonly configured as the default or home document.
about.html and contact.html can hold other pages.
css/ commonly contains stylesheet files.
js/ commonly contains JavaScript files.
images/ commonly contains image assets.

This structure is a convention, not a strict requirement imposed by HTML.

33. Final Rapid-Revision Sheet

33.1 Web architecture

Internet = global network infrastructure; WWW = linked information system on the Internet.
Tim Berners-Lee proposed the Web at CERN in 1989; first website in 1991 according to the course timeline.
TCP/IP is the main Internet protocol suite.
Application layer = HTTP/HTTPS, DNS, FTP, SMTP; Transport = TCP/UDP; Internet = IP addressing/routing; Network access = Ethernet/Wi-Fi.
TCP provides reliable ordered delivery; UDP does not guarantee delivery/order by itself.
Client requests; server provides resources/data/services.
Three-tier = presentation + business logic + database.
Frontend = HTML/CSS/JavaScript interface; backend = server-side logic/data handling.
Static = prebuilt files generally served as-is; dynamic = content may be generated at runtime.
Lifecycle: Planning -> Design -> Development -> Testing -> Deployment -> Maintenance, with Feedback and Monitoring continuing after deployment.

33.2 Browser and HTTP

Browser: retrieves and renders web resources.
DOM = parsed HTML structure; CSSOM = parsed CSS rules; render tree = visible nodes plus computed styles.
Layout = positions/sizes; paint = pixels; compositing = combining layers.
DevTools: Elements/Inspector, Console, Sources/Debugger, Network, Performance, Application/Storage, Responsive device toolbar.
HTTP = request-response and stateless.
HTTPS = HTTP protected using TLS; common default ports HTTP 80, HTTPS 443.
GET retrieves; POST submits data for processing; PUT replaces/creates state at a known target URI; DELETE requests resource deletion.
Request: request line + headers + blank line + optional body.
Response: status line + headers + blank line + optional body.
1xx informational; 2xx success; 3xx redirection; 4xx client error; 5xx server error.
Remember: 200 OK, 201 Created, 204 No Content, 301 permanent redirect, 302 temporary redirect, 304 Not Modified, 400 Bad Request, 401 authentication, 403 forbidden, 404 not found, 405 method not allowed, 429 too many requests, 500 internal server error, 502 bad gateway, 503 unavailable, 504 gateway timeout.

33.3 DNS, URLs, and hosting

DNS = distributed system of records/resolvers that helps map names to destinations.
Resolution sequence when uncached: client/cache -> recursive resolver -> root -> TLD -> authoritative nameserver -> answer returned/cached.
TLD is the final label: .com, .org, .in, etc.
A = IPv4; AAAA = IPv6; CNAME = alias; MX = mail servers; NS = nameservers; TXT = text/verification/policy records.
URL parts: scheme, host, optional port, path, query string, fragment.
Absolute URL = complete address; relative URL = resolved against a base URL.
Query string begins with ?; parameter pairs are commonly separated by &; fragment starts with #.
Domain = address; hosting = service/infrastructure that serves website resources.
Hosting types from the supplied faculty PPT: free, shared, VPS, dedicated, cloud, managed, reseller, colocation; static hosting is also common for prebuilt files.
Domain integration chain: register domain -> deploy website -> set DNS records/nameservers -> configure HTTPS -> test.

33.4 HTML5

HTML = HyperText Markup Language; defines structure and meaning, not page styling by itself.
<!DOCTYPE html> declares modern HTML/standards mode.
<html> root; <head> metadata/resources; <title> tab/document title; <body> page content.
<h1> to <h6> = heading hierarchy; <p> = paragraph.
Tag is the markup; element is the complete construct; attribute is additional information in a start tag.
Semantic tags: <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>, <figure>, <figcaption>, <mark>.
<section> groups related topics; <article> is self-contained; <aside> is complementary; <nav> groups navigation; <main> marks principal content.
<b> vs <strong>: bold presentation vs importance; <i> vs <em>: alternate voice/mood vs emphasis.
Comment syntax: .
<a href="..."> creates a link; href specifies its destination; target controls the browsing context.
<img src="..." alt="..."> embeds an image; src is the source, alt is the text alternative; <img> is void.
Table: <table>, <caption>, <tr>, <th>, <td>, <thead>, <tbody>, <tfoot>, <colgroup>, <col>.
colspan spans columns; rowspan spans rows; padding is inside a cell; border-spacing controls separation between cells in separate-border layouts.

34. Syllabus Coverage Audit

The following audit maps each item in the supplied CAT-1 syllabus to these notes.

Syllabus item	Covered in section(s)
Introduction to Web Technologies	1
Evolution of the World Wide Web	2
Internet Architecture	3
Client-Server Architecture	4
Frontend and Backend Technologies	5
Static and Dynamic Websites	6
Differences between Static and Dynamic Websites	6.3
Web Application Lifecycle	7
Stages of Web Application Development	7.1
Web Browsers	8
Browser Rendering Process	9
Browser Developer Tools	10
HTTP and HTTPS Protocols	11
HTTP Methods: GET, POST, PUT, DELETE	12
HTTP Status Codes	14
HTTP Request-Response Model	13.1
HTTP Request and Response Components	13.2-13.6
DNS	15
Domain Names	15
Domain Name Resolution Process	16
Top-Level Domains (TLDs)	17
URL Structure	18
Absolute and Relative URLs	19
Query Parameters	20
Web Hosting	21.1-21.2
Types of Web Hosting	21.3
Domain and Hosting Integration	21.4-21.5
Unit Summary	22
Introduction to HTML5	23
HTML5 Document Structure	24
HTML Elements and Attributes	25
Semantic HTML Elements	26
Headings	27
Paragraphs	27
Text Formatting	28
Comments	28.3
Hyperlinks	29
Images	30
Tables	31

35. References

Faculty material supplied for this set of notes

IWT (26CSE0106) - Unit 1 PPT, Dr. Kamal, Chitkara University Institute of Engineering and Technology.
Unit 1: WWW Evolution, Protocol Suites & Web Hosting, Dr. Kamal, Chitkara University Institute of Engineering and Technology.
Unit 2: HTML Fundamentals, Semantic Layouts, Tables & Lists, Dr. Neeraj Singla, Chitkara University Institute of Engineering and Technology.
Semantic HTML5 Elements with Codes, supplied faculty reference presentation.

Technical references used to fill in syllabus topics that were only headings or were not explained fully in the slides

MDN Web Docs, How browsers work.
MDN Web Docs, Critical rendering path.
MDN Web Docs, Browser developer tools.
MDN Web Docs, HTTP request methods.
MDN Web Docs, HTTP messages.
MDN Web Docs, HTTP response status codes.
Cloudflare Learning Paths, What is DNS?.
CERN, The birth of the Web.
MDN Web Docs, Structuring documents.
MDN Web Docs, HTML images.
MDN Web Docs, HTML table element.

End of IWT CAT-1 Ultimate Notes

Introduction to Web Technologies (IWT)

CAT-1 Ultimate Notes | Course Code: 26CSE0106

Contents

Part I - Web Technology Fundamentals

Part II - Browsers, Web Communication, DNS, URLs and Hosting

Part III - HTML5

Part I - Web Technology Fundamentals

1. Introduction to Web Technologies

1.1 Definition

1.2 Why web technologies matter

1.3 Common applications

1.4 Core web technologies

2. Evolution of the Internet and World Wide Web

2.1 Historical timeline from the faculty PPT

2.2 Web 1.0, Web 2.0 and Web 3.0

2.3 Internet vs World Wide Web

3. Internet Architecture and Protocol Suites

3.1 Internet architecture

3.2 What is a protocol?

3.3 Four-layer model used in the faculty PPT

3.4 Application-layer protocols in the faculty material

3.5 TCP vs UDP

3.6 IP and IP addresses

3.7 How the layers cooperate when a webpage is opened

4. Client-Server Architecture

4.1 Client

4.2 Server

4.3 Request-process-response flow

4.4 Two-tier architecture

4.5 Three-tier architecture

4.6 Two-tier vs three-tier architecture

5. Frontend and Backend Technologies

5.1 Frontend

5.2 Backend

5.3 Frontend vs backend

6. Static and Dynamic Websites

6.1 Static website

6.2 Dynamic website

6.3 Static vs dynamic websites

7. Web Application Lifecycle

7.1 Stages listed in the faculty PPT

Part II - Browsers, Web Communication, DNS, URLs and Hosting

8. Web Browsers

8.1 Definition

8.2 Main browser responsibilities

9. Browser Rendering Process

9.1 Main stages

9.2 DOM, CSSOM and render tree

9.3 Important rendering distinctions

10. Browser Developer Tools (DevTools)

10.1 Common uses

11. HTTP and HTTPS

11.1 HTTP

11.2 HTTPS

11.3 HTTP vs HTTPS

11.4 Statelessness

12. HTTP Methods: GET, POST, PUT and DELETE

12.1 Example requests

12.2 Safe and idempotent behaviour

12.3 Most important distinctions

13. HTTP Request-Response Model and Message Components

13.1 The basic model

13.2 Components of an HTTP request

13.3 Common request headers

13.4 Components of an HTTP response

13.5 Common response headers

13.6 Request vs response

14. HTTP Response Status Codes

14.1 Five status-code classes

14.2 Common status codes

2xx - Success

3xx - Redirection or cache-related response

4xx - Client errors

5xx - Server errors

14.3 High-confusion distinctions

15. DNS and Domain Names

15.1 DNS definition

15.2 Domain name

15.3 Important DNS terms

15.4 Common DNS record types

26.5 Distinguishing `<section>` and `<article>`

27.1 Headings: `<h1>` to `<h6>`

27.2 Paragraph: `<p>`

29.3 The `target` attribute

30.1 The `<img>` element

30.3 `src` attribute

30.4 `alt` attribute