HTML & WEB BASICS -

COMPREHENSIVE LECTURE
NOTES

Complete Study Material for College Students

UNIT I: INTRODUCTION - WEB

BASICS

(25 Pages)

Table of Contents - Unit I

1. What is Internet
2. Web Browsers
3. What is Webpage
4. HTML Basics
5. Understanding Tags
6. Key Concepts & Applications
7. Questions (5 Mark & 10 Mark)
1. WHAT IS INTERNET?

1.1 Definition and Overview

The Internet is a global system of interconnected computer networks that uses the
standard Internet Protocol Suite (TCP/IP) to serve billions of users worldwide. It is the
largest network of networks, allowing computers and devices to communicate and share
information regardless of geographical location.

1.2 Key Characteristics

Characteristic Description

Global Reach Connects computers across all continents

Distributed No single point of control

Packet-Based Data transmitted in small packets

Open Standards Uses standardized protocols (TCP/IP)

Scalable Can accommodate unlimited growth

24/7 Availability Always-on connectivity

1.3 Brief History of Internet

1960s: ARPANET (Advanced Research Projects Agency Network)

- First wide-area network
- Developed by DARPA for military research

1970s: TCP/IP Protocol Suite Developed

- Enables communication between different networks
- Foundation of modern Internet

1980s: DNS (Domain Name System) Introduced

- Allows user-friendly web addresses

1989: World Wide Web (WWW) Invented

- Tim Berners-Lee at CERN

—2—
 - Created HTTP and HTML

1990s: Commercial Internet Era

- World Wide Web becomes public
- Explosive growth in users and services

2000s: Broadband Internet

- High-speed connections become standard

2010s-Present: Mobile Internet & Cloud

- Smartphones dominant
- Cloud computing prevalent

1.4 Internet Architecture

┌─────────────────────────────────────────────────┐
│ INTERNET │
├─────────────────────────────────────────────────┤
│ ┌────────────┐ ┌────────────┐ ┌────────────┐ │
│ │ Regional │ │ Regional │ │ Regional │ │
│ │ Networks │ │ Networks │ │ Networks │ │
│ └──────┬─────┘ └──────┬─────┘ └──────┬─────┘ │
│ │ │ │ │
│ ┌──────────────────────────────────────────┐ │
│ │ Internet Exchange Point (IXP) │ │
│ └──────────────────────────────────────────┘ │
│ │ │ │ │
│ ┌──────┴─────┐ ┌──────┴─────┐ ┌──────┴─────┐ │
│ │ ISP 1 │ │ ISP 2 │ │ ISP 3 │ │
│ └──────┬─────┘ └──────┬─────┘ └──────┬─────┘ │
│ │ │ │ │
│ ┌────┴────┬───────┬───┴────┬───────┬──┴────┐ │
│ │ │ │ │ │ │ │
│ PC Router Server Mobile Laptop Cloud│
│ │
└─────────────────────────────────────────────────┘

1.5 How Internet Works - Step by Step

Example: Accessing a website

—3—
 Step 1: User enters URL in browser
└─> "[Link]"

Step 2: Browser sends request to ISP

└─> Internet Service Provider

Step 3: ISP routes request through backbone networks

└─> Multiple routers forward data packets

Step 4: Request reaches DNS Server

└─> Translates "[Link]" to IP: [Link]

Step 5: Request sent to target web server

└─> Server receives HTTP request

Step 6: Web server processes request

└─> Retrieves HTML, CSS, JS files

Step 7: Response sent back through Internet

└─> Data packets transmitted

Step 8: Browser receives response

└─> Renders webpage

Step 9: User sees webpage in browser

└─> Complete!

Time taken: ~100-500 milliseconds

2. WEB BROWSERS

2.1 What is a Web Browser?

A web browser is a software application that enables users to access and view web
pages and web-based applications on the Internet. It interprets HTML, CSS, and
JavaScript code and renders them into a visual format that users can interact with.

—4—
2.2 Major Web Browsers

Browser Developer Market Share Engine Year

Google Chrome Google ~65% Blink 2008

Mozilla Firefox Mozilla ~15% Gecko 2004

Safari Apple ~12% WebKit 2003

Microsoft Edge Microsoft ~5% Blink 2015

Opera Opera ~2% Blink 1995

2.3 Key Functions of a Web Browser

┌─────────────────────────────────────────┐
│ WEB BROWSER FUNCTIONS │
├─────────────────────────────────────────┤
│ │
│ 1. Retrieve Web Resources │
│ └─> Downloads HTML, CSS, JS, etc. │
│ │
│ 2. Parse HTML Documents │
│ └─> Reads HTML tags │
│ │
│ 3. Render Content │
│ └─> Displays visual webpage │
│ │
│ 4. Execute Scripts │
│ └─> Runs JavaScript code │
│ │
│ 5. Display Multimedia │
│ └─> Shows images, video, audio │
│ │
│ 6. Store Data │
│ └─> Cookies, LocalStorage │
│ │
│ 7. Provide User Interaction │
│ └─> Forms, Links, Buttons │

—5—
 │ │
└─────────────────────────────────────────┘

2.4 Browser Rendering Process

Flowchart of how browser renders a webpage:

┌────────────────────────────────┐
│ User enters URL │
└────────────┬───────────────────┘
│
▼
┌────────────────────────────────┐
│ DNS Lookup (Get IP address) │
└────────────┬───────────────────┘
│
▼
┌────────────────────────────────┐
│ HTTP Request sent to server │
└────────────┬───────────────────┘
│
▼
┌────────────────────────────────┐
│ Server sends HTML response │
└────────────┬───────────────────┘
│
▼
┌────────────────────────────────┐
│ Browser parses HTML │
└────────────┬───────────────────┘
│
▼
┌────────────────────────────────┐
│ Fetch CSS files & parse │
└────────────┬───────────────────┘
│
▼
┌────────────────────────────────┐
│ Fetch JavaScript files │
└────────────┬───────────────────┘
│

—6—
 ▼
┌────────────────────────────────┐
│ Render layout (Reflow) │
└────────────┬───────────────────┘
│
▼
┌────────────────────────────────┐
│ Paint pixels (Repaint) │
└────────────┬───────────────────┘
│
▼
┌────────────────────────────────┐
│ Display webpage to user │
└────────────────────────────────┘

2.5 Browser Components

┌─────────────────────────────────────────────────────────┐
│ User Interface (Address bar, Toolbar, Menu) │
├─────────────────────────────────────────────────────────┤
│ Rendering Engine (Interprets HTML, CSS) │
├─────────────────────────────────────────────────────────┤
│ JavaScript Engine (Executes JS code) │
├─────────────────────────────────────────────────────────┤
│ Networking Layer (Handles HTTP requests) │
├─────────────────────────────────────────────────────────┤
│ Storage (Cookies, LocalStorage, IndexedDB) │
├─────────────────────────────────────────────────────────┤
│ DOM (Document Object Model) │
└─────────────────────────────────────────────────────────┘

—7—
3. WHAT IS A WEBPAGE?

3.1 Definition
A webpage is a document written in HTML (HyperText Markup Language) that is
retrieved from a web server and displayed in a web browser. It can contain text, images,
videos, hyperlinks, forms, and interactive elements.

3.2 Components of a Webpage

Component Description Example

Content Text, images, videos “Welcome to our website”

Markup HTML tags that structure content <p> , <h1> , <img>

Styling CSS for visual appearance Colors, fonts, layout

Interactivity JavaScript for dynamic behavior Form validation, animations

Metadata Information about the page Title, description, author

3.3 Static vs Dynamic Webpages

┌──────────────────────────────────┐
│ STATIC WEBPAGES │
├──────────────────────────────────┤
│ • Same content for all users │
│ • Pre-built HTML files │
│ • Fast loading │
│ • Limited interactivity │
│ • Example: Blog post, About page │
│ │
│ Server ──────> HTML ──────> User │
└──────────────────────────────────┘

┌──────────────────────────────────┐
│ DYNAMIC WEBPAGES │
├──────────────────────────────────┤
│ • Content changes based on user │

—8—
 │ • Generated on-the-fly │
│ • Uses databases & backend code │
│ • More interactive │
│ • Example: Gmail, Facebook │
│ │
│ User ──────> Request ──────> DB │
│ └──> Server generates│
│ HTML ──────> User│
└──────────────────────────────────┘

3.4 Structure of a Simple Webpage

┌─────────────────────────────────────────────┐
│ HEADER / NAVIGATION │
│ Logo Menu Items Search │
├─────────────────────────────────────────────┤
│ │
│ MAIN CONTENT AREA │
│ │
│ ┌─────────────────────────────────────┐ │
│ │ Article / Page Content │ │
│ │ │ │
│ │ Lorem ipsum dolor sit amet... │ │
│ │ │ │
│ └─────────────────────────────────────┘ │
│ │
├─────────────────────────────────────────────┤
│ SIDEBAR (Optional) │
│ • Related Articles │
│ • Advertisements │
│ • Categories │
├─────────────────────────────────────────────┤
│ FOOTER │
│ Copyright © 2024 | Privacy | Contact Us │
└─────────────────────────────────────────────┘

3.5 Types of Webpages

1. Landing Pages - First page users see
2. Blog Pages - Article/post content

—9—
 3. Product Pages - E-commerce item details
4. Contact Pages - Communication channels
5. FAQ Pages - Common questions
6. Portfolio Pages - Showcase of work
7. Service Pages - Description of services
8. News Pages - Latest updates

4. HTML BASICS

4.1 What is HTML?

HTML stands for HyperText Markup Language. It is the standard markup language
used to create webpages. HTML provides the structure and content of webpages using a
system of tags and elements.

Aspect Details

Full Form HyperText Markup Language

Type Markup Language (not programming)

Created 1989 by Tim Berners-Lee

Current Version HTML5 (2014)

File Extension .html, .htm

Purpose Create webpage structure

4.2 Why Use HTML?

Benefits of HTML:

✓ Easy to learn and use

✓ Platform independent
✓ Lightweight file size
✓ Supported by all browsers

— 10 —
 ✓ Combines well with CSS and JavaScript
✓ SEO friendly
✓ Flexible and extensible
✓ Free to use

4.3 HTML Evolution

Timeline of HTML Versions:

1989 ──> HTML 1.0 (First version)

1995 ──> HTML 2.0 (Added forms)
1997 ──> HTML 3.2 (Added tables, applets)
1999 ──> HTML 4.01 (Strict, Transitional, Frameset)
2000 ──> XHTML 1.0 (XML-based HTML)
2008 ──> HTML5 (Current standard)
• Semantic elements
• Multimedia support
• Canvas & SVG
• APIs & more

4.4 Basic Structure of HTML Document

<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to HTML</h1>
<p>This is a paragraph.</p>
</body>
</html>

Output:

┌─────────────────────────────────┐
│ My First Webpage (Tab Title) │
├─────────────────────────────────┤

— 11 —
 │ │
│ Welcome to HTML │
│ │
│ This is a paragraph. │
│ │
└─────────────────────────────────┘

4.5 HTML Document Flow

┌────────────────────────────────────┐
│ <!DOCTYPE html> │
│ Declaration - HTML5 version │
├────────────────────────────────────┤
│ <html> │
│ Contains entire webpage │
│ ├─ <head> │
│ │ Metadata & resources │
│ │ (Not visible to user) │
│ │ │
│ └─ <body> │
│ Visible content │
│ (Seen by user) │
│ </html> │
└────────────────────────────────────┘

5. UNDERSTANDING TAGS

5.1 What are HTML Tags?

HTML tags are keywords surrounded by angle brackets < > that tell the browser how
to format and display content. They are the building blocks of HTML.

— 12 —
5.2 Tag Structure

Opening Tag Content Closing Tag

┌──────┐ ┌───────┐ ┌──────┐
│ │ │ │ │ │
<p> This is a paragraph </p>

Element = Opening tag + Content + Closing tag

5.3 Types of Tags

1. Container Tags (Paired Tags) - Have both opening and closing tags - Content sits
between them

<p>This is a paragraph</p>
<h1>This is a heading</h1>
<div>This is a division</div>

2. Empty Tags (Self-closing Tags) - No closing tag needed - Content ends within the
tag

<br> <!-- Line break -->

<hr> <!-- Horizontal rule -->
<img> <!-- Image -->
<input> <!-- Input field -->

5.4 Tag Attributes

Attributes provide additional information about HTML elements.

Syntax:

<tag attribute="value">Content</tag>

Example:

— 13 —
 <img src="[Link]" alt="My Photo" width="200">
│ │ │
Attribute Attribute Attribute

5.5 Common HTML Tags Reference

Tag Purpose Type

<h1> to <h6> Headings Container

<p> Paragraph Container

<div> Division/section Container

<span> Inline section Container

<a> Hyperlink Container

<img> Image Empty

<br> Line break Empty

<hr> Horizontal rule Empty

<table> Table Container

<form> Form Container

<button> Button Container

5.6 Proper Tag Usage Example

<!-- CORRECT: Properly nested tags -->

<div>
<p>This is <strong>correct</strong> nesting.</p>
</div>

<!-- INCORRECT: Improper nesting -->

<div>
<p>This is <strong>incorrect nesting.</p>
</strong>
</div>

— 14 —
 <!-- Output (Correct): -->
This is correct nesting.

<!-- Output (Incorrect): -->

This is incorrect nesting.

6. KEY CONCEPTS & APPLICATIONS

6.1 Client-Server Architecture

┌──────────────────────────────────────────────────┐
│ WEB TECHNOLOGY STACK │
├──────────────────────────────────────────────────┤
│ │
│ CLIENT SIDE (Browser) │
│ ├─ HTML (Structure) │
│ ├─ CSS (Styling) │
│ └─ JavaScript (Interactivity) │
│ │
│ ──────────────────────────────────────────── │
│ HTTP Protocol │
│ ──────────────────────────────────────────── │
│ │
│ SERVER SIDE │
│ ├─ Backend Language (PHP, Python, [Link]) │
│ ├─ Database (MySQL, MongoDB) │
│ └─ Business Logic │
│ │
└──────────────────────────────────────────────────┘

— 15 —
6.2 HTTP Protocol Basics

Aspect Description

Full Form HyperText Transfer Protocol

Type Stateless protocol

Port 80 (HTTP), 443 (HTTPS)

Method GET, POST, PUT, DELETE

Status Codes 200 (OK), 404 (Not Found), 500 (Error)

6.3 Real-World Application Scenario

Building a College Website:

Step 1: Plan Structure

├─ Homepage
├─ About Us
├─ Departments
├─ Admissions
└─ Contact

Step 2: Create HTML

├─ Write HTML for each page
└─ Define page structure with tags

Step 3: Add Styling with CSS

├─ Colors and fonts
└─ Layout and responsive design

Step 4: Add Interactivity with JavaScript

├─ Form validation
└─ Interactive features

Step 5: Deploy to Web Server

└─ Website goes live!

— 16 —
7. IMPORTANT QUESTIONS

5-MARK QUESTIONS (Answer in 100-150 words)

Q1. What is the Internet and explain its basic architecture?

The Internet is a global network of interconnected computers that communicate using

TCP/IP protocol suite. It enables information sharing across geographical boundaries. The
architecture consists of regional networks connected through Internet Exchange Points
(IXPs), managed by Internet Service Providers (ISPs). Data travels in packets through
multiple routers and switches. The Internet uses a distributed model with no single point
of control, making it scalable and robust. It supports various services like web browsing,
email, file transfer, and streaming. The backbone networks carry high-speed data traffic
between major points, while local networks connect individual devices. This layered
architecture ensures efficient data transmission and global connectivity.

Q2. Explain the role of web browsers in accessing webpages.

A web browser is software that retrieves and displays webpages from the Internet. When
a user enters a URL, the browser sends an HTTP request to the web server. The server
responds with HTML, CSS, and JavaScript files. The browser’s rendering engine parses
this code and converts it into visual content. Browsers include components like
JavaScript engines for running scripts, networking modules for communication, and
storage systems for caching. Popular browsers include Chrome, Firefox, Safari, and Edge.
Each browser interprets web standards slightly differently, requiring developers to test
across browsers. Browsers also handle security, cookies, bookmarks, and provide
developer tools for debugging web applications.

Q3. What is HTML and why is it essential for creating webpages?

HTML (HyperText Markup Language) is the fundamental markup language for creating
webpages. Created by Tim Berners-Lee in 1989, HTML uses tags and elements to
structure web content. It’s essential because it provides the semantic structure that web
browsers need to render webpages. HTML separates content from presentation by
working alongside CSS for styling and JavaScript for interactivity. It’s platform-
independent, easy to learn, and supported by all browsers. HTML5, the current standard,
includes semantic elements, multimedia support, and APIs. HTML forms the foundation
upon which all modern web technologies are built, making it indispensable for web
development.

Q4. Describe the structure of a basic HTML document with example.

— 17 —
A basic HTML document follows a specific structure: <!DOCTYPE html> declares the
document version, is the root element, contains metadata like title and links to
stylesheets, and contains visible content. Example:

<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Hello World</h1>
<p>Welcome!</p>
</body>
</html>

The head section is invisible to users but provides important information. The body
contains elements like headings, paragraphs, images, and links. Proper structure
ensures browser compatibility and SEO optimization.

Q5. What are HTML tags and attributes? Explain with examples.

HTML tags are keywords in angle brackets that define elements and tell browsers how to
display content. They come in two types: container tags with opening and closing tags
(like <p>...</p> ), and empty/self-closing tags (like <br> or <img> ). Attributes provide
additional information about elements and are placed in opening tags. Syntax: <tag
attribute="value">content</tag> . Example: <img src="[Link]" alt="My Photo"
width="200"> . Here, src, alt, and width are attributes. Common attributes include src,
href, class, id, style, and onclick. Attributes modify how elements behave and appear,
enabling developers to add metadata, links, dimensions, and event handlers to HTML
elements.

10-MARK QUESTIONS (Answer in 250-350 words)

Q1. Explain how the Internet works from user perspective to website display.
Draw a diagram.

The Internet works through a complex system of interconnected networks and protocols.
When a user enters a URL in the browser’s address bar, the following sequence occurs:

— 18 —
Request Phase: 1. Browser sends request to Internet Service Provider (ISP) 2. ISP
routes request through backbone networks 3. Request reaches DNS (Domain Name
System) server 4. DNS translates domain name to IP address 5. Request finds web
server with that IP address

Processing Phase: 6. Web server receives HTTP request 7. Server processes the
request and retrieves requested files 8. Server compiles HTML, CSS, JavaScript
responses

Response Phase: 9. Server sends response back through Internet 10. Data travels
through multiple routers 11. Browser receives response packets

Rendering Phase: 12. Browser’s rendering engine parses HTML 13. CSS stylesheet is
applied for styling 14. JavaScript code is executed for interactivity 15. Browser
constructs DOM (Document Object Model) 16. Layout engine calculates positions
(Reflow) 17. Pixels are drawn to screen (Repaint) 18. User sees complete webpage

Diagram:

User ──> Browser ──> ISP ──> DNS ──> Web Server
│
└──> IP: [Link]

Response Flow (Reverse):

Web Server ──> ISP ──> Browser ──> Render ──> User

This entire process takes 100-500 milliseconds. Modern browsers optimize this through
caching, parallel downloads, and compression. DNS caching stores IP addresses locally
to avoid repeated lookups. Browsers download multiple resources simultaneously.
Images and styles are often compressed to reduce bandwidth usage.

Q2. Compare and contrast static and dynamic webpages with real-world
examples.

Aspect Static Webpages Dynamic Webpages

Content Same for all users Changes per user

Generation Pre-built HTML files Generated on-the-fly

Server Processing Minimal Extensive

Database Not required Usually required

— 19 —
 Aspect Static Webpages Dynamic Webpages

Speed Very fast Slightly slower

Interactivity Limited High

Maintenance Manual updates needed Automatic updates

Examples Blogs, portfolios, docs Gmail, Facebook, Amazon

Static Webpages: - Simple HTML files stored on server - Same content delivered to
every visitor - Viewed with: File System or simple HTTP server - Best for: Company
information, portfolio sites - Example: About Us page with company description

Dynamic Webpages: - Generated by server-side code (PHP, Python, [Link]) - Content

created based on user request, data, or preferences - Uses databases to store and
retrieve information - Includes user authentication and personalization - Examples: -
Gmail: Shows different emails for each user - Amazon: Displays personalized product
recommendations - Facebook: Shows friend-specific feeds and notifications

Real-World Scenario: A college website might have static pages (admission

requirements, campus map) and dynamic pages (student login, course registration).
Static pages rarely change, while dynamic pages update automatically based on user
actions and database records.

Q3. Explain the roles of HTML, CSS, and JavaScript in web development.

These three technologies form the foundation of web development:

HTML (Structure): - Provides semantic structure and content - Uses tags and elements
for organization - Creates meaningful document outline - Example: <header> ,
<article> , <footer>

CSS (Styling): - Controls visual presentation and layout - Handles colors, fonts, spacing,
positioning - Enables responsive design for different devices - Separates content from
presentation - Example: body { background-color: blue; }

JavaScript (Interactivity): - Adds dynamic behavior and interactivity - Responds to

user events (clicks, scrolling) - Validates forms before submission - Performs calculations
and animations - Example: Form validation, dropdown menus

Collaboration:

— 20 —
 HTML: Content
↓
CSS: Appearance
↓
JavaScript: Behavior
↓
Complete Interactive Webpage

Example Website: - HTML: <button>Click me</button> - CSS: button { background:

blue; } - JavaScript: [Link] = function() { alert('Hello!'); }

Together, these technologies create modern web applications. HTML provides the
foundation, CSS makes it look good, and JavaScript makes it interactive. Understanding
all three is essential for web development.

UNIT II: DOCUMENT STRUCTURE

AND BLOCK LEVEL ELEMENTS

(25 Pages)

Table of Contents - Unit II

1. HTML Head Section

2. HTML Body Section
3. Heading Elements
4. Paragraph and Text Elements
5. Font Style Elements
6. Key Concepts & Applications
7. Questions (5 Mark & 10 Mark)

— 21 —
1. HTML HEAD SECTION

1.1 Purpose of Head Section

The <head> section contains metadata and configuration information about the
webpage that is not displayed directly to users but is crucial for browser rendering and
SEO.

<!DOCTYPE html>
<html>
<head>
<!-- All metadata goes here -->
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="[Link]">
<script src="[Link]"></script>
</head>
<body>
<!-- Visible content -->
</body>
</html>

1.2 Important Head Elements

A. Title Tag

<title>Welcome to My Website</title>

• Appears in browser tab

• Used by search engines
• Maximum 50-60 characters recommended
• Should be descriptive and unique

— 22 —
B. Meta Tags

<!-- Character encoding -->

<meta charset="UTF-8">

<!-- Viewport for responsive design -->

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Page description for search engines -->

<meta name="description" content="Learn HTML basics...">

<!-- Keywords for SEO -->

<meta name="keywords" content="HTML, CSS, Web Design">

<!-- Author information -->

<meta name="author" content="John Doe">

<!-- Refresh page after 30 seconds -->

<meta http-equiv="refresh" content="30">

C. Link Tag

<!-- Link to external CSS stylesheet -->

<link rel="stylesheet" href="[Link]">

<!-- Link to favicon (webpage icon) -->

<link rel="icon" href="[Link]">

D. Style Tag

<!-- Internal CSS styling -->

<style>
body {
background-color: lightblue;
}
p {
color: navy;
}
</style>

— 23 —
E. Script Tag

<!-- External JavaScript file -->

<script src="[Link]"></script>

<!-- Internal JavaScript -->

<script>
function sayHello() {
alert("Hello!");
}
</script>

1.3 Complete Head Section Example

<!DOCTYPE html>
<html>
<head>
<title>College Admission Portal</title>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Official college admission portal">
<meta name="keywords" content="college, admission, application">

<link rel="stylesheet" href="[Link]">

<link rel="icon" href="[Link]">

<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<!-- Page content -->
</body>
</html>

— 24 —
2. HTML BODY SECTION

2.1 Purpose of Body Section

The <body> section contains all the visible content that users see when they load the
webpage. This includes text, images, links, forms, and other interactive elements.

2.2 Basic Body Structure

<body>
<!-- Header with navigation -->
<header>
<h1>Website Title</h1>
<nav>
<ul>
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]">About</a></li>
<li><a href="[Link]">Contact</a></li>
</ul>
</nav>
</header>

<!-- Main content -->

<main>
<section>
<h2>Welcome</h2>
<p>This is the main content...</p>
</section>
</main>

<!-- Sidebar -->

<aside>
<h3>Related Links</h3>
</aside>

<!-- Footer -->

<footer>
<p>&copy; 2024 My Website</p>

— 25 —
 </footer>
</body>

2.3 Semantic HTML5 Elements

Modern HTML5 provides semantic elements that clearly describe their purpose:

Element Purpose Example Usage

<header> Page or section header Logo, title, navigation

<nav> Navigation links Menu, breadcrumbs

<main> Main content area Primary page content

<section> Thematic grouping Article section

<article> Self-contained content Blog post, news

<aside> Sidebar/related content Advertisements, related links

<footer> Page footer Copyright, links

2.4 Body with Semantic Structure

<!DOCTYPE html>
<html>
<head>
<title>College Website</title>
</head>
<body>

<header>
<img src="[Link]" alt="College Logo">
<h1>ABC College</h1>
</header>

<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#programs">Programs</a></li>
<li><a href="#faculty">Faculty</a></li>

— 26 —
 </ul>
</nav>

<main>
<article>
<h2>Welcome to ABC College</h2>
<p>Founded in 1995...</p>
</article>
</main>

<aside>
<h3>Quick Links</h3>
<ul>
<li><a href="[Link]">Admissions</a></li>
<li><a href="[Link]">Courses</a></li>
</ul>
</aside>

<footer>
<p>&copy; 2024 ABC College. All rights reserved.</p>
</footer>

</body>
</html>

3. HEADING ELEMENTS

3.1 What are Headings?

Headings are used to define titles and subtitles. HTML provides six levels of headings
from <h1> to <h6> .

3.2 Heading Hierarchy

<h1> - Main heading (Largest, Most Important)

↓
<h2> - Subheading

— 27 —
 ↓
<h3> - Sub-subheading
↓
<h4> - Fourth level heading
↓
<h5> - Fifth level heading
↓
<h6> - Minor heading (Smallest, Least Important)

3.3 Heading Examples with Output

<h1>This is Heading 1</h1>

<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>

Output:

This is Heading 1 (Largest)

This is Heading 2
This is Heading 3
This is Heading 4
This is Heading 5
This is Heading 6 (Smallest)

3.4 Proper Heading Usage

✓ CORRECT - Logical hierarchy:

<h1>Computer Science Department</h1>

<h2>About Us</h2>
<p>Department information...</p>

<h2>Courses</h2>
<h3>Semester 1</h3>
<p>Course details...</p>

— 28 —
 <h2>Faculty</h2>
<p>Faculty list...</p>

✗ INCORRECT - Skipping levels:

<h1>Computer Science</h1>
<h3>Jump from H1 to H3 - Bad!</h3>
<h6>Jump to H6 - Very Bad!</h6>

3.5 Headings in Document Structure

Document Outline:

1. H1: Homepage
1.1 H2: Welcome Section
1.2 H2: Services
1.2.1 H3: Service A
1.2.2 H3: Service B
1.3 H2: About Us
1.4 H2: Contact

4. PARAGRAPH AND TEXT ELEMENTS

4.1 Paragraph Tag

The <p> tag defines a paragraph of text.

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

<p>This is another paragraph.</p>
<p>Paragraphs are separated with blank lines.</p>

Output:

This is a paragraph of text.

— 29 —
 This is another paragraph.

Paragraphs are separated with blank lines.

4.2 Paragraph with Multiple Lines

<p>
This is a longer paragraph that contains
multiple lines of text. The text will wrap
automatically based on the browser window
width and screen size.
</p>

Output:

This is a longer paragraph that contains multiple lines of text.

The text will wrap automatically based on the browser window width
and screen size.

4.3 Pre-formatted Text

<pre>
This text has
specific spacing
and line breaks
that will be preserved
</pre>

Output:

This text has

specific spacing
and line breaks
that will be preserved

— 30 —
4.4 Line Breaks and Horizontal Rules

<p>First line<br>Second line<br>Third line</p>

<hr>

<p>Text after horizontal rule</p>

Output:

First line
Second line
Third line

_________________________________

Text after horizontal rule

5. FONT STYLE ELEMENTS

5.1 Text Formatting Tags

Tag Purpose Example

<b> Bold text <b>Important</b> → Important

<strong> Strong emphasis <strong>Critical</strong> → Critical

(bold)

<i> Italic text <i>Italics</i> → Italics

<em> Emphasized text <em>Stressed</em> → Stressed

(italic)

<small> Small text <small>Fine print</small>

<mark> Highlighted text <mark>Important</mark> → Important

(highlighted)

— 31 —
 Tag Purpose Example

<u> Underlined text <u>Underline</u>

<s> or Strikethrough text <s>Cancelled</s> → ~~Cancelled~~

<strike>

<del> Deleted text <del>Old text</del>

<ins> Inserted text <ins>New text</ins>

<sub> Subscript H2O

<sup> Superscript E=mc2

<code> Code snippet <code>var x = 5;</code>

5.2 Difference Between Similar Tags

Bold vs Strong:

<b>Bold text</b> <!-- Visual only, no semantic meaning -->

<strong>Important text</strong> <!-- Semantic meaning of importance -->

Both appear bold visually, but <strong> indicates importance to screen readers.

Italic vs Emphasized:

<i>Italicized text</i> <!-- Visual style only -->

<em>Emphasized text</em> <!-- Semantic meaning of emphasis -->

5.3 Text Formatting Examples

<!DOCTYPE html>
<html>
<head>
<title>Text Formatting</title>
</head>
<body>

<h2>Text Formatting Examples</h2>

— 32 —
 <p><b>Bold text</b> using b tag</p>
<p><strong>Strong text</strong> using strong tag</p>
<p><i>Italic text</i> using i tag</p>
<p><em>Emphasized text</em> using em tag</p>
<p><small>Small text</small> using small tag</p>
<p><mark>Marked/highlighted text</mark></p>
<p><u>Underlined text</u></p>
<p><s>Strikethrough text</s></p>

<p>Chemical formula: H₂O</p>

<p>Mathematical formula: E=mc²</p>

<p>Code example: <code>x = 10</code></p>

</body>
</html>

Output:

Text Formatting Examples

Bold text using b tag

Strong text using strong tag
Italic text using i tag
Emphasized text using em tag
Small text using small tag
Marked/highlighted text
Underlined text
Strikethrough text

Chemical formula: H₂O

Mathematical formula: E=mc²

Code example: x = 10

5.4 Font Tag (Deprecated)

<!-- OLD WAY (Deprecated - Don't use) -->

<font face="Arial" size="5" color="red">

— 33 —
 Colored text
</font>

<!-- NEW WAY (Use CSS instead) -->

<p style="font-family: Arial; font-size: 20px; color: red;">
Colored text
</p>

5.5 Combining Multiple Style Elements

<p>
This is <b><i>bold and italic</i></b> text.
</p>

<p>
This is <strong><mark>important and highlighted</mark></strong> text.
</p>

<p>
Chemical formula of water: H₂O
</p>

<p>
The original price was <s>$100</s> now <strong>$50</strong>
</p>

Output:

This is bold and italic text.

This is important and highlighted text.

Chemical formula of water: H₂O

The original price was $100 now $50

— 34 —
6. KEY CONCEPTS & APPLICATIONS

6.1 Document Outline

A well-structured HTML document follows a clear outline:

Document Outline Structure:

1. <html>
1.1 <head>
• <title>
• <meta>
• <link>
• <style>
1.2 <body>
• <header>
• <nav>
• <main>
• <article>
• <section>
• <aside>
• <footer>

6.2 Real-World Example: College Course Page

<!DOCTYPE html>
<html>
<head>
<title>Data Structures Course - ABC College</title>
<meta charset="UTF-8">
<meta name="description" content="Data Structures course materials">
</head>
<body>

<header>
<h1>ABC College</h1>
<p>Department of Computer Science</p>
</header>

— 35 —
<nav>
<a href="[Link]">Home</a> |
<a href="[Link]">Courses</a> |
<a href="[Link]">Faculty</a>
</nav>

<main>
<article>
<h1>Data Structures (CS-202)</h1>

<section>
<h2>Course Description</h2>
<p>
This course introduces fundamental data structures including
<strong>arrays, linked lists, stacks, queues, and trees</strong>.
</p>
</section>

<section>
<h2>Course Objectives</h2>
<p><strong>Upon completion, students will:</strong></p>
<ul>
<li>Understand data structure concepts</li>
<li>Implement various data structures</li>
<li>Analyze algorithm complexity</li>
</ul>
</section>

<section>
<h2>Course Content</h2>
<h3>Module 1: Arrays and Lists</h3>
<p>Introduction to <em>arrays</em> and <em>linked lists</em>...</p>

<h3>Module 2: Stacks and Queues</h3>

<p>LIFO and FIFO data structures...</p>
</section>

<section>
<h2>Grading Policy</h2>
<p>Attendance: <small>10%</small></p>
<p>Assignments: <small>20%</small></p>
<p>Mid Term: <small>25%</small></p>

— 36 —
 <p>Final Exam: <small>45%</small></p>
</section>
</article>
</main>

<aside>
<h3>Important Dates</h3>
<p><strong>Midterm:</strong> September 15</p>
<p><strong>Final Exam:</strong> December 10</p>
</aside>

<footer>
<p>&copy; 2024 ABC College. All rights reserved.</p>
</footer>

</body>
</html>

7. IMPORTANT QUESTIONS

5-MARK QUESTIONS
Q1. Explain the purpose of the head section and list important head elements.

The head section contains metadata and configuration information about the webpage
that is not displayed to users but is crucial for proper rendering and SEO. Important head
elements include: (1) <title> - appears in browser tab and used by search engines, (2)
<meta> - provides character encoding, viewport settings, and page description, (3)
<link> - links external stylesheets and favicon, (4) <style> - contains internal CSS
styling, (5) <script> - includes JavaScript code or external scripts. These elements
configure how browsers interpret and display the webpage, set character encoding to
support multiple languages, enable responsive design through viewport meta tags, and
improve SEO by providing descriptive information to search engines.

Q2. Differentiate between heading tags and explain proper heading hierarchy.

— 37 —
Heading tags <h1> through <h6> create titles and subtitles in decreasing order of
importance. H1 is the largest and most important, typically used for main page title. H2-
H6 create progressively smaller subheadings for organizing content sections. Proper
hierarchy means not skipping levels - if using H1, the next level should be H2, not H4.
This structure helps screen readers, search engines, and creates a logical outline. Each
page should have only one H1. Using correct hierarchy improves accessibility and SEO.
For example: H1 for page title, H2 for main sections, H3 for subsections within those
sections.

Q3. Compare bold and strong tags, and italic and em tags.

Bold ( <b> ) and strong ( <strong> ) both display text as bold, but strong carries semantic
meaning of importance. Similarly, italic ( <i> ) and emphasized ( <em> ) both display
slanted text, but em indicates emphasis in meaning. Screen readers treat these
differently: strong emphasis receives special attention, while bold is just visual. For
content marking: use <strong> for important information like warnings, and <b> for
stylistic boldness like highlighting keywords in a summary. Use <em> for stressed words
needing emphasis, and <i> for titles, foreign words, or technical terms. This distinction
matters for accessibility and search engine optimization.

Q4. What are semantic HTML5 elements and why are they important?

Semantic HTML5 elements like <header> , <nav> , <main> , <section> , <article> ,

<aside> , and <footer> clearly describe their purpose and content meaning. Unlike
generic <div> tags, these elements explicitly tell browsers and screen readers what
content they contain. Benefits include: (1) Better accessibility for disabled users, (2)
Improved SEO as search engines better understand content structure, (3) Cleaner, more
readable code for developers, (4) Easier maintenance and future modifications. For
example, <article> indicates self-contained content like blog posts, while <section>
groups related content thematically. Using semantic elements follows HTML5 best
practices and makes websites more accessible and discoverable.

Q5. Provide examples of text formatting tags and their usage.

Text formatting tags include: <b>bold</b> , <i>italic</i> , <strong>important</strong> ,

<em>emphasized</em> , <small>fine print</small> , <mark>highlighted</mark> ,
<u>underline</u> , <s>strikethrough</s> , <del>deleted</del> , <ins>inserted</ins> ,
_subscript , ^superscript , and <code>code</code> . These tags
enable proper presentation of various content types. Subscript and superscript are used
for chemical formulas (H₂O) and mathematical expressions (E=mc²). Code tag presents
programming snippets. Mark highlights important passages. Del and ins show document

— 38 —
changes. Small reduces text for fine print. Using appropriate tags improves readability
and accessibility. For example: “Price was $100, now $50” clearly shows the price
reduction.

10-MARK QUESTIONS
Q1. Design a complete college homepage structure using semantic HTML5
elements. Include all major sections.

<!DOCTYPE html>
<html>
<head>
<title>XYZ College - Excellence in Education</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Leading institution for higher education">
</head>
<body>

<header>
<img src="[Link]" alt="College Logo">
<h1>XYZ College</h1>
<p><em>Excellence in Education Since 1995</em></p>
</header>

<nav>
<ul>
<li><a href="[Link]"><strong>Home</strong></a></li>
<li><a href="[Link]">About Us</a></li>
<li><a href="[Link]">Departments</a></li>
<li><a href="[Link]">Admissions</a></li>
<li><a href="[Link]">Contact</a></li>
</ul>
</nav>

<main>
<section>
<h2>Welcome to XYZ College</h2>
<p>

— 39 —
 <strong>XYZ College</strong> is a premier institution dedicated to providing
<em>quality education</em> and developing future leaders in various fields.
</p>
</section>

<section>
<h2>Our Departments</h2>

<article>
<h3>Computer Science</h3>
<p>
Offering <strong>world-class</strong> education in programming,
<mark>data structures</mark>, databases, and web development.
</p>
</article>

<article>
<h3>Engineering</h3>
<p>
Comprehensive curriculum covering civil, mechanical, and electrical engineering
with hands-on laboratory experience.
</p>
</article>

<article>
<h3>Business Administration</h3>
<p>
Programs focused on developing business acumen and entrepreneurial skills.
</p>
</article>
</section>

<section>
<h2>Highlights</h2>
<ul>
<li><strong>100+</strong> Faculty Members</li>
<li><strong>5000+</strong> Students</li>
<li><strong>50+</strong> Academic Programs</li>
<li><strong>15+</strong> Research Centers</li>
</ul>
</section>
</main>

— 40 —
 <aside>
<h3>Quick Links</h3>
<ul>
<li><a href="[Link]">Online Admission</a></li>
<li><a href="[Link]">Academic Calendar</a></li>
<li><a href="[Link]">Latest News</a></li>
</ul>

<h3>Important Dates</h3>
<p><strong>Admission Deadline:</strong> June 30</p>
<p><strong>Classes Start:</strong> July 15</p>
</aside>

<footer>
<p>&copy; 2024 XYZ College. All rights reserved.</p>
<p>Contact: <strong>info@[Link]</strong> | Phone: +1-800-123-4567</p>
</footer>

</body>
</html>

Explanation: - <header> : Contains college logo, name, and tagline - <nav> : Navigation
menu for site sections - <main> : Primary content area - <section> : Groups related
content (Welcome, Departments, Highlights) - <article> : Individual department
information - <aside> : Sidebar with quick links and important dates - <footer> :
Copyright and contact information

[Due to length constraints, I’ll continue with the remaining content in the next section]

— 41 —
UNIT III: LISTS, IMAGES, AND
HYPERLINKS

(25 Pages)

1. ORDERED LISTS

1.1 What are Ordered Lists?

Ordered lists display items in a numbered sequence. Use <ol> (Ordered List) tag with
<li> (List Item) child elements.

<h2>Steps to Bake a Cake</h2>

<ol>
<li>Preheat oven to 350°F</li>
<li>Mix flour and sugar</li>
<li>Add eggs and milk</li>
<li>Pour mixture into pan</li>
<li>Bake for 30 minutes</li>
</ol>

Output:

Steps to Bake a Cake

1. Preheat oven to 350°F
2. Mix flour and sugar
3. Add eggs and milk
4. Pour mixture into pan
5. Bake for 30 minutes

— 42 —
1.2 Ordered List Types

<!-- Default: Numerical (1, 2, 3...) -->

<ol>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>

<!-- Lowercase letters (a, b, c...) -->

<ol type="a">
<li>Item A</li>
<li>Item B</li>
</ol>

<!-- Uppercase letters (A, B, C...) -->

<ol type="A">
<li>Item A</li>
<li>Item B</li>
</ol>

<!-- Lowercase Roman numerals (i, ii, iii...) -->

<ol type="i">
<li>First</li>
<li>Second</li>
</ol>

<!-- Uppercase Roman numerals (I, II, III...) -->

<ol type="I">
<li>First</li>
<li>Second</li>
</ol>

1.3 Starting List at Different Number

<!-- Start list at 5 instead of 1 -->

<ol start="5">
<li>Fifth item</li>
<li>Sixth item</li>

— 43 —
 <li>Seventh item</li>
</ol>

Output:

5. Fifth item
6. Sixth item
7. Seventh item

2. UNORDERED LISTS

2.1 Unordered Lists

Unordered lists display items with bullet points. Use <ul> (Unordered List) tag.

<h2>Fruits</h2>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Mango</li>
</ul>

Output:

Fruits
• Apple
• Banana
• Orange
• Mango

2.2 Bullet Types

<!-- Default: Filled circle (•) -->

<ul>

— 44 —
 <li>Item</li>
</ul>

<!-- Hollow circle (○) -->

<ul style="list-style-type: circle;">
<li>Item</li>
</ul>

<!-- Square bullet (■) -->

<ul style="list-style-type: square;">
<li>Item</li>
</ul>

<!-- No bullet (none) -->

<ul style="list-style-type: none;">
<li>Item</li>
</ul>

3. NESTED LISTS

3.1 Combining Ordered and Unordered Lists

<h2>Computer Science Curriculum</h2>

<ol>
<li>First Year
<ul>
<li>Programming Basics</li>
<li>Mathematics</li>
<li>Digital Logic</li>
</ul>
</li>

<li>Second Year
<ul>
<li>Data Structures</li>
<li>Database Management</li>
<li>Web Development</li>

— 45 —
 </ul>
</li>

<li>Third Year
<ul>
<li>Operating Systems</li>
<li>Networking</li>
<li>Software Engineering</li>
</ul>
</li>
</ol>

Output:

Computer Science Curriculum

1. First Year
• Programming Basics
• Mathematics
• Digital Logic

2. Second Year
• Data Structures
• Database Management
• Web Development

3. Third Year
• Operating Systems
• Networking
• Software Engineering

3.2 Multiple Nesting Levels

<ol>
<li>Item 1
<ol type="a">
<li>Subitem 1.1
<ol type="i">
<li>Sub-subitem 1.1.1</li>
<li>Sub-subitem 1.1.2</li>
</ol>

— 46 —
 </li>
<li>Subitem 1.2</li>
</ol>
</li>
<li>Item 2</li>
</ol>

Output:

1. Item 1
a. Subitem 1.1
i. Sub-subitem 1.1.1
ii. Sub-subitem 1.1.2
b. Subitem 1.2
2. Item 2

4. USING IMAGES

4.1 Image Tag Syntax

<img src="[Link]" alt="Description of image" width="200" height="150">

Attributes: - src : Path to image file (required) - alt : Alternative text if image doesn’t
load (required for accessibility) - width : Image width in pixels - height : Image height in
pixels - title : Tooltip text on hover

4.2 Image Examples

<!-- Local image -->

<img src="[Link]" alt="My Photo">

<!-- Image from web -->

<img src="[Link] alt="Online Image">

<!-- Image with specific dimensions -->

— 47 —
 <img src="[Link]" alt="Logo" width="100" height="100">

<!-- Image with title (tooltip) -->

<img src="[Link]" alt="Sales Chart" title="Sales Q1 2024">

4.3 Image Formats

Format Extension Best For Compression

JPEG .jpg, .jpeg Photographs Lossy

PNG .png Graphics, logos Lossless

GIF .gif Animations, simple graphics Lossless

WebP .webp Modern web (better quality) Lossy/Lossless

SVG .svg Scalable vector graphics Lossless

4.4 Image Sizing

<!-- Fixed size -->

<img src="[Link]" alt="Photo" width="300" height="200">

<!-- Responsive (scales with container) -->

<img src="[Link]" alt="Photo" style="width: 100%; height: auto;">

<!-- Using CSS -->

<img src="[Link]" alt="Photo" class="responsive-image">

<style>
.responsive-image {
max-width: 100%;
height: auto;
}
</style>

— 48 —
4.5 Image with Caption

<figure>
<img src="[Link]" alt="College Campus">
<figcaption>Our Beautiful Campus</figcaption>
</figure>

Output:

┌─────────────────┐
│ [College Image] │
└─────────────────┘
Our Beautiful Campus

5. CREATING HYPERLINKS

5.1 Basic Hyperlink Syntax

<a href="[Link]">Click here</a>

Components: - <a> : Anchor tag (creates the link) - href : Hyperlink Reference - where
to go - Link text : Text visible to user

5.2 Types of Links

<!-- Internal link (within your website) -->

<a href="[Link]">About Us</a>
<a href="pages/[Link]">Contact</a>

<!-- External link (to other website) -->

<a href="[Link] Google</a>
<a href="[Link] Page</a>

<!-- Email link -->

— 49 —
 <a href="[Link] Email</a>

<!-- Phone link -->

<a href="[Link] Us</a>

<!-- Download link -->

<a href="[Link]" download>Download PDF</a>

<!-- Link to specific section -->

<a href="#section2">Go to Section 2</a>

5.3 Target Attribute

<!-- Open in new tab/window -->

<a href="[Link] target="_blank">
Visit Website
</a>

<!-- Open in same window (default) -->

<a href="[Link]" target="_self">
About Us
</a>

<!-- Open in parent frame -->

<a href="[Link]" target="_parent">
Link
</a>

5.4 Internal Links with Anchors

<!-- Define anchor point -->

<h2 id="section2">Section 2: Important Content</h2>
<p>Content here...</p>

<!-- Link to that anchor -->

<a href="#section2">Go to Section 2</a>

— 50 —
 <!-- Link to anchor on different page -->
<a href="[Link]#introduction">Introduction on Page 2</a>

5.5 Complete Navigation Example

<!DOCTYPE html>
<html>
<head>
<title>College Website</title>
</head>
<body>

<header>
<h1>ABC College</h1>
</header>

<nav>
<a href="[Link]">Home</a> |
<a href="[Link]">About</a> |
<a href="[Link]">Programs</a> |
<a href="[Link]">Contact</a>
</nav>

<main>
<h2 id="section1">Welcome</h2>
<p>Welcome to our college...</p>

<h2 id="section2">Programs</h2>
<p>We offer various programs...</p>

<h2 id="section3">Admissions</h2>
<p>Apply now for admission...</p>

<a href="#section1">Back to Top</a>

</main>

<footer>
<p>
<a href="[Link] Us</a> |
<a href="[Link] 1-800-123-4567</a>

— 51 —
 </p>
</footer>

</body>
</html>

6. MARQUEE TAG (Scrolling Text)

6.1 Marquee Basics

<marquee>This text scrolls across the screen</marquee>

Output:

[Scrolling text animation from right to left]

6.2 Marquee Attributes

<!-- Direction of scroll -->

<marquee direction="right">Scrolls from left to right</marquee>
<marquee direction="left">Scrolls from right to left (default)</marquee>
<marquee direction="up">Scrolls from bottom to top</marquee>
<marquee direction="down">Scrolls from top to bottom</marquee>

<!-- Speed of scroll -->

<marquee scrollamount="5">Normal speed</marquee>
<marquee scrollamount="10">Faster</marquee>

<!-- Behavior -->

<marquee behavior="scroll">Continuous scrolling</marquee>
<marquee behavior="slide">Slide once and stop</marquee>
<marquee behavior="alternate">Bounce back and forth</marquee>

<!-- Background color -->

<marquee bgcolor="yellow">Text on yellow background</marquee>

— 52 —
 <!-- Loop count (how many times) -->
<marquee loop="3">Scrolls 3 times then stops</marquee>
<marquee loop="infinite">Scrolls forever</marquee>

6.3 Complete Marquee Example

<marquee direction="right" scrollamount="5" loop="infinite">

🎓 Welcome to ABC College! We offer quality education. 🎓
</marquee>

7. HR TAG (Horizontal Rule)

7.1 Horizontal Rule Basics

<h2>Section 1</h2>
<p>Content of section 1</p>

<hr>

<h2>Section 2</h2>
<p>Content of section 2</p>

Output:

Section 1
Content of section 1

_________________________________

Section 2
Content of section 2

— 53 —
7.2 HR with Styling

<!-- Default -->

<hr>

<!-- With attributes (deprecated in HTML5) -->

<hr width="50%" align="center" noshade>

<!-- With CSS styling -->

<hr style="height: 2px; background-color: blue; border: none;">

<!-- Dashed line -->

<hr style="border: 1px dashed black; background-color: transparent;">

8. BR TAG (Line Break)

8.1 Line Break Usage

<p>
First line<br>
Second line<br>
Third line<br>
Fourth line
</p>

Output:

First line
Second line
Third line
Fourth line

— 54 —
8.2 Multiple Line Breaks

<p>
Paragraph 1<br><br>
Paragraph 2 (with blank line above)
</p>

9. IMPORTANT QUESTIONS

5-MARK QUESTIONS
Q1. Explain ordered and unordered lists with examples.

Ordered lists use <ol> tag and display items with numbers (1, 2, 3…), letters (a, b, c),
or Roman numerals (I, II, III). Use ordered lists for sequences like instructions or
rankings. Example: “Steps to solve a problem” would use ordered list. Unordered lists
use <ul> tag and display items with bullets (•). Use unordered lists for non-sequential
items like features or benefits. Example: “Features of our product” would use unordered
list. Both use <li> tag for each list item. Nested lists combine ordered and unordered
lists to create hierarchical structure - like main topics with sub-topics. This helps
organize information clearly and improves readability.

Q2. What is a nested list? Provide a real-world example.

A nested list is a list within another list, creating a hierarchical structure. Example: A
curriculum outline has years (main items), each year has subjects (nested items).
Nested lists can combine ordered and unordered lists. Syntax: Place <ul> or <ol>
inside <li> of parent list. Real-world example - Course structure: (1) First Semester (2)
Second Semester with sub-items under each. Nested lists improve organization, make
information scannable, and establish clear parent-child relationships between items.
Multiple levels of nesting are possible (main level, sub-level, sub-sub-level). Proper
indentation makes nested lists readable in both HTML code and rendered output.

Q3. Explain image tag attributes and their purpose.

The <img> tag uses several important attributes: src (required) specifies image file
location - can be local path or URL; alt (required) provides alternative text when image
fails to load and helps blind users understand image content; width and height set

— 55 —
image dimensions in pixels - can prevent layout shift; title displays tooltip text when
hovering over image. Other attributes include style for inline CSS, class for styling
with CSS classes, and loading for lazy loading. Best practices: always include
meaningful alt text, set width and height to avoid layout shift, use optimized image
formats, and provide images in appropriate size to reduce loading time.

Q4. Differentiate between internal links, external links, and email links.

Internal links navigate within the same website using relative paths: <a
href="[Link]">About</a> . External links go to other websites using absolute URLs:
<a href="[Link] . Email links open default email client: <a
href="[Link] Email</a> . Phone links call phone number: <a
href="[Link] . Download links prompt file download: <a
href="[Link]" download>Download</a> . Using target="_blank" opens link in new tab.
Internal links use relative paths (shorter), external links require full URLs ([Link] and
email/phone links use special protocols ([Link] [Link] Each type serves different purpose
in web navigation.

Q5. What is marquee tag and what are its main attributes?

Marquee tag creates scrolling text animation. Main attributes: direction (left, right, up,
down) sets scroll direction; scrollamount controls speed - higher value = faster;
behavior (scroll, slide, alternate) - scroll is continuous, slide goes once and stops,
alternate bounces; loop sets how many times to repeat (number or infinite); bgcolor
sets background color; width and height set dimensions. Example: <marquee
direction="right" loop="infinite">Scrolling text</marquee> . Used for announcements,
alerts, or dynamic content. Note: Marquee is deprecated in modern HTML5, and CSS
animations are preferred for new projects. Marquee can cause accessibility issues for
screen readers and those with motion sensitivity.

10-MARK QUESTIONS
Q1. Create a complete college website page with lists, images, and links.

<!DOCTYPE html>
<html>
<head>
<title>ABC College - Computer Science Department</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

— 56 —
</head>
<body>

<header>
<img src="[Link]" alt="College Logo" width="50" height="50">
<h1>ABC College</h1>
<p>Department of Computer Science</p>
</header>

<marquee bgcolor="lightblue">
📢 Admissions Open! Apply now by June 30, 2024
</marquee>

<nav>
<ul style="list-style-type: none;">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#programs">Programs</a></li>
<li><a href="#faculty">Faculty</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>

<hr>

<main>

<section id="about">
<h2>About Computer Science Department</h2>
<img src="[Link]" alt="CS Department Building" width="400" height="300">
<figcaption>Our State-of-the-art Department Building</figcaption>
<p>
Our <strong>Computer Science Department</strong> is dedicated to providing
<em>world-class education</em> in computing and technology.
</p>
</section>

<hr>

<section id="programs">
<h2>Our Academic Programs</h2>

— 57 —
 <h3>Undergraduate Programs</h3>
<ol>
<li>Bachelor of Technology ([Link]) in Computer Science
<ul>
<li>Duration: 4 years</li>
<li>Eligibility: 12th Pass with PCM</li>
<li>Specializations:
<ul>
<li>Web Development</li>
<li>Data Science</li>
<li>Cybersecurity</li>
</ul>
</li>
</ul>
</li>
<li>Bachelor of Science ([Link]) in Computer Science
<ul>
<li>Duration: 3 years</li>
<li>Eligibility: 12th Pass</li>
</ul>
</li>
</ol>

<h3>Postgraduate Programs</h3>
<ul>
<li>Master of Technology ([Link])</li>
<li>Master of Science ([Link])</li>
<li>Diploma in Computer Applications</li>
</ul>
</section>

<hr>

<section id="faculty">
<h2>Faculty Members</h2>
<img src="[Link]" alt="Faculty Members" width="400" height="300">

<h3>Teaching Staff</h3>
<ol>
<li>
<strong>Dr. John Smith</strong> - <em>HOD (Head of Department)</em>
<ul>

— 58 —
 <li>Specialization: Artificial Intelligence</li>
<li><a href="[Link] john@[Link]</a></li>
</ul>
</li>
<li>
<strong>Prof. Sarah Johnson</strong>
<ul>
<li>Specialization: Database Systems</li>
<li><a href="[Link] sarah@[Link]</a></li>
</ul>
</li>
<li>
<strong>Prof. Mike Davis</strong>
<ul>
<li>Specialization: Web Development</li>
<li><a href="[Link] mike@[Link]</a></li>
</ul>
</li>
</ol>
</section>

<hr>

<section id="contact">
<h2>Contact Information</h2>
<p>
<strong>Address:</strong> Computer Science Department, ABC College, City, Country<br>
<strong>Phone:</strong> <a href="[Link]
<strong>Email:</strong> <a href="[Link]
<strong>Website:</strong> <a href="[Link] target="_blank">[Link]
</p>

<h3>Important Links</h3>
<ul>
<li><a href="[Link]">Online Admission</a></li>
<li><a href="[Link]" download>Download Fee Structure</a></li>
<li><a href="[Link]">Course Syllabus</a></li>
<li><a href="[Link]">Academic Calendar</a></li>
</ul>
</section>

</main>

— 59 —
 <hr>

<footer>
<p>&copy; 2024 ABC College. All rights reserved.</p>
<p>
<a href="#home">Back to Top</a> |
<a href="[Link]">Privacy Policy</a> |
<a href="[Link]">Terms & Conditions</a>
</p>
</footer>

</body>
</html>

Features included: - Multiple internal links with navigation - Nested lists showing
hierarchical structure - Images with captions - External links opening in new tab - Email
and phone links - Download links - Marquee for announcements - Proper use of semantic
elements

[Continuing with remaining units due to length…]

UNIT IV: TABLES AND TABLE

FORMATTING

(25 Pages)

— 60 —
1. BASIC TABLE STRUCTURE

1.1 What is a Table?

A table is a structured set of data arranged in rows and columns. Tables are created
using the <table> tag and related elements.

1.2 Table Components

Element Tag Purpose

Table <table> Container for entire table

Table Row <tr> Single horizontal row

Table Data <td> Data cell (column in row)

Table Header <th> Header cell (bold, centered)

Table Head <thead> Groups header rows

Table Body <tbody> Groups data rows

Table Foot <tfoot> Groups footer rows

Caption <caption> Table title/description

1.3 Basic Table Example

<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>

— 61 —
 <td>Sarah</td>
<td>28</td>
<td>London</td>
</tr>
</table>

Output:

┌──────┬─────┬──────────┐
│ Name │ Age │ City │
├──────┼─────┼──────────┤
│ John │ 25 │ New York │
├──────┼─────┼──────────┤
│Sarah │ 28 │ London │
└──────┴─────┴──────────┘

2. TABLE WITH CAPTION AND SECTIONS

2.1 Complete Table Structure

<table border="1">

<caption>Student Performance - Semester 1</caption>

<thead>
<tr>
<th>Roll No</th>
<th>Name</th>
<th>Mathematics</th>
<th>Science</th>
<th>Average</th>
</tr>
</thead>

<tbody>
<tr>

— 62 —
 <td>101</td>
<td>Raj Kumar</td>
<td>85</td>
<td>90</td>
<td>87.5</td>
</tr>
<tr>
<td>102</td>
<td>Priya Singh</td>
<td>92</td>
<td>88</td>
<td>90</td>
</tr>
</tbody>

<tfoot>
<tr>
<th>Total Students: 2</th>
<th colspan="3">Average Score</th>
<th>88.75</th>
</tr>
</tfoot>

</table>

Output:

Student Performance - Semester 1

┌─────────┬─────────────┬────────────┬─────────┬─────────┐
│Roll No │ Name │ Mathematics│ Science │ Average │
├─────────┼─────────────┼────────────┼─────────┼─────────┤
│101 │ Raj Kumar │ 85 │ 90 │ 87.5 │
├─────────┼─────────────┼────────────┼─────────┼─────────┤
│102 │ Priya Singh │ 92 │ 88 │ 90 │
├─────────┴─────────────┼────────────┼─────────┼─────────┤
│Total Students: 2 │ Average Score │ 88.75 │
└───────────────────────┴────────────┴─────────┴─────────┘

— 63 —
3. ROWSPAN AND COLSPAN

3.1 Colspan (Column Spanning)

Colspan merges cells horizontally across multiple columns.

<table border="1">
<tr>
<th>Subject</th>
<th colspan="3">Marks</th>
</tr>
<tr>
<td>Mathematics</td>
<td>85</td>
<td>90</td>
<td>88</td>
</tr>
</table>

Output:

┌────────────┬──────────────────────┐
│ Subject │ Marks │
├────────────┼────┬────┬────────────┤
│ Mathematics│ 85 │ 90 │ 88 │
└────────────┴────┴────┴────────────┘

3.2 Rowspan (Row Spanning)

Rowspan merges cells vertically across multiple rows.

<table border="1">
<tr>
<th>Subject</th>
<th>Test 1</th>
<th>Test 2</th>
</tr>
<tr>
<td rowspan="2">Mathematics</td>

— 64 —
 <td>85</td>
<td>90</td>
</tr>
<tr>
<td>89</td>
<td>92</td>
</tr>
</table>

Output:

┌────────────┬────────┬────────┐
│ Subject │ Test 1 │ Test 2 │
├────────────┼────────┼────────┤
│ │ 85 │ 90 │
│ Mathematics│ │ │
│ │ 89 │ 92 │
└────────────┴────────┴────────┘

3.3 Complex Table with Rowspan and Colspan

<table border="1">
<tr>
<th colspan="2">Student</th>
<th colspan="2">Marks</th>
<th rowspan="2">Grade</th>
</tr>
<tr>
<th>Roll</th>
<th>Name</th>
<th>Theory</th>
<th>Practical</th>
</tr>
<tr>
<td>101</td>
<td>Raj</td>
<td>80</td>
<td>85</td>
<td>A</td>
</tr>

— 65 —
 <tr>
<td>102</td>
<td>Priya</td>
<td>90</td>
<td>92</td>
<td>A+</td>
</tr>
</table>

4. TABLE ALIGNMENT

4.1 Cell Alignment

<table border="1">
<tr>
<!-- Horizontal alignment -->
<td align="left">Left Aligned</td>
<td align="center">Center Aligned</td>
<td align="right">Right Aligned</td>
</tr>
<tr>
<!-- Vertical alignment -->
<td valign="top">Top</td>
<td valign="middle">Middle</td>
<td valign="bottom">Bottom</td>
</tr>
</table>

4.2 Table Alignment in Page

<!-- Align table to center -->

<table border="1" align="center">
<tr>
<td>Centered Table</td>
</tr>

— 66 —
 </table>

<!-- Alternative using CSS -->

<table border="1" style="margin: 0 auto;">
<tr>
<td>Centered with CSS</td>
</tr>
</table>

5. CELL PADDING AND CELL SPACING

5.1 Cell Padding

Cell padding is the space inside a cell, between content and cell border.

<!-- No padding -->

<table border="1" cellpadding="0">
<tr>
<td>No Padding</td>
</tr>
</table>

<!-- With padding -->

<table border="1" cellpadding="10">
<tr>
<td>Padded Cell</td>
</tr>
</table>

Output Comparison:

No Padding: With Padding:

┌──────────────┐ ┌──────────────────────┐
│No Padding │ │ Padded Cell │
└──────────────┘ └──────────────────────┘

— 67 —
5.2 Cell Spacing
Cell spacing is the space between cells (border spacing).

<!-- No spacing -->

<table border="1" cellspacing="0">
<tr>
<td>A</td>
<td>B</td>
</tr>
</table>

<!-- With spacing -->

<table border="1" cellspacing="10">
<tr>
<td>A</td>
<td>B</td>
</tr>
</table>

5.3 Complete Table Example with Padding and Spacing

<table border="2" cellpadding="15" cellspacing="5">

<caption>Course Registration</caption>
<thead>
<tr>
<th>Course ID</th>
<th>Course Name</th>
<th>Instructor</th>
<th>Seats</th>
</tr>
</thead>
<tbody>
<tr>
<td>CS101</td>
<td>Programming Basics</td>
<td>Dr. Smith</td>
<td>30</td>
</tr>
<tr>

— 68 —
 <td>CS202</td>
<td>Data Structures</td>
<td>Prof. Johnson</td>
<td>25</td>
</tr>
<tr>
<td>CS303</td>
<td>Web Development</td>
<td>Prof. Davis</td>
<td>35</td>
</tr>
</tbody>
</table>

6. REAL-WORLD TABLE EXAMPLES

6.1 College Fee Structure Table

<!DOCTYPE html>
<html>
<head>
<title>Fee Structure</title>
</head>
<body>

<h1>ABC College - Fee Structure 2024-2025</h1>

<table border="1" cellpadding="10" cellspacing="3">

<caption><strong>Annual Fee Breakdown</strong></caption>

<thead>
<tr style="background-color: lightblue;">
<th>Expense Category</th>
<th>[Link]</th>
<th>[Link]</th>
<th>[Link]</th>
</tr>

— 69 —
 </thead>

<tbody>
<tr>
<td><strong>Tuition Fee</strong></td>
<td>₹ 1,50,000</td>
<td>₹ 80,000</td>
<td>₹ 2,00,000</td>
</tr>
<tr>
<td><strong>Laboratory Fee</strong></td>
<td>₹ 25,000</td>
<td>₹ 15,000</td>
<td>₹ 30,000</td>
</tr>
<tr>
<td><strong>Library Fee</strong></td>
<td>₹ 5,000</td>
<td>₹ 5,000</td>
<td>₹ 5,000</td>
</tr>
<tr>
<td><strong>Student Activity Fee</strong></td>
<td>₹ 10,000</td>
<td>₹ 8,000</td>
<td>₹ 10,000</td>
</tr>
</tbody>

<tfoot>
<tr style="background-color: lightyellow;">
<th><strong>Total Annual Fee</strong></th>
<th>₹ 1,90,000</th>
<th>₹ 1,08,000</th>
<th>₹ 2,45,000</th>
</tr>
</tfoot>

</table>

</body>
</html>

— 70 —
6.2 Class Schedule Table

<table border="1" cellpadding="8" cellspacing="2">

<caption><strong>Class Schedule - Computer Science</strong></caption>

<thead>
<tr>
<th>Time</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
</thead>

<tbody>
<tr>
<td><strong>9:00-10:00</strong></td>
<td>Programming</td>
<td>Mathematics</td>
<td>Database</td>
<td>Programming</td>
<td>Web Dev</td>
</tr>
<tr>
<td><strong>10:00-11:00</strong></td>
<td colspan="5" align="center"><em>Break</em></td>
</tr>
<tr>
<td><strong>11:00-12:00</strong></td>
<td>Mathematics</td>
<td>Database</td>
<td>Programming</td>
<td>Web Dev</td>
<td>Mathematics</td>
</tr>
<tr>
<td><strong>12:00-1:00</strong></td>
<td colspan="5" align="center"><em>Lunch</em></td>
</tr>

— 71 —
 <tr>
<td><strong>1:00-2:00</strong></td>
<td>Lab</td>
<td>Lab</td>
<td>Lab</td>
<td>Lab</td>
<td>Seminar</td>
</tr>
</tbody>

</table>

7. IMPORTANT QUESTIONS

5-MARK QUESTIONS
Q1. Explain table structure and its main components.

A table is a structured arrangement of data in rows and columns. Main components:

<table> - container for entire table, <tr> (table row) - single horizontal row, <td>
(table data) - data cell within row, <th> (table header) - header cell (bold and centered).
Optional components: <thead> groups header rows, <tbody> groups data rows,
<tfoot> groups footer rows, <caption> provides table title. Each row contains cells
( <td> or <th> ). Proper structure improves accessibility and allows styling. Example:
<table><tr><th>Name</th></tr><tr><td>John</td></tr></table> . Using semantic elements
like thead, tbody helps screen readers and makes tables more organized.

Q2. What are rowspan and colspan? Provide examples.

Rowspan merges cells vertically across multiple rows. Syntax: <td rowspan="3">content</
td> merges 3 rows. Colspan merges cells horizontally across multiple columns. Syntax:
<td colspan="2">content</td> merges 2 columns. Uses: Rowspan for grouping related
vertical data (like time periods), colspan for merged headers spanning multiple columns.
Example rowspan: In attendance table, student name spans multiple attendance entries.
Example colspan: In report card, “Marks” header spans “Theory” and “Practical”
columns. These attributes help create complex table layouts and improve readability by
reducing data redundancy and highlighting relationships.

— 72 —
Q3. Explain cell padding and cell spacing with examples.

Cell padding is space inside cells between content and borders - created with
cellpadding attribute. Increases readability by providing breathing room for content.
Example: <table cellpadding="10"> adds 10 pixels inside all cells. Cell spacing is space
between cells (border-spacing) - created with cellspacing attribute. Affects gap
between adjacent cells. Example: <table cellspacing="5"> creates 5-pixel gap between
cells. Together they control whitespace: padding inside cells, spacing between cells.
Proper spacing improves visual hierarchy and readability. Padding=0 makes text touch
cell borders (crowded), padding=10 gives space (readable). Spacing=0 makes table
compact, spacing=5 separates cells clearly.

Q4. Describe table alignment options.

Cell alignment controls position of content within cells: horizontal alignment (left, center,
right) and vertical alignment (top, middle, bottom). Syntax: <td align="center"
valign="middle"> centers content horizontally and vertically. Horizontal alignment - left
aligns to left edge, center places in middle, right aligns to right edge. Vertical alignment
- top places at top edge, middle centers vertically, bottom at bottom. Table alignment
positions entire table on page: <table align="center"> centers table. Modern practice
uses CSS for alignment instead of HTML attributes. Example: For headers use center
alignment, for content use left-aligned text and right-aligned numbers. Proper alignment
improves readability and visual organization.

Q5. What are thead, tbody, and tfoot elements and their purpose?

These semantic elements group table rows into logical sections: <thead> contains
header rows appearing at top, <tbody> contains main data rows, <tfoot> contains
footer rows appearing at bottom. Benefits: (1) Improved accessibility - screen readers
understand table structure, (2) Easier styling - target specific sections with CSS, (3)
Semantic meaning - makes code clearer, (4) Better printing - browsers handle page
breaks appropriately. Example: Financial table has <thead> with column titles, <tbody>
with transaction rows, <tfoot> with totals. Proper structure separates header from data,
making tables more organized and easier to maintain. These elements don’t change
appearance but improve code organization and accessibility.

10-MARK QUESTIONS
Q1. Create a complex student marks table with all table features (rowspan,
colspan, padding, spacing, sections).

— 73 —
<!DOCTYPE html>
<html>
<head>
<title>Student Marks Report</title>
</head>
<body>

<h1>Final Semester Marks Report</h1>

<table border="2" cellpadding="12" cellspacing="3">

<caption><strong>Semester-End Examination Results</strong></caption>

<thead>
<tr style="background-color: darkblue; color: white;">
<th>Roll No</th>
<th>Student Name</th>
<th colspan="2">Internal Marks</th>
<th colspan="2">Practical</th>
<th colspan="2">Final Exam</th>
<th>Total</th>
<th>Grade</th>
</tr>
<tr style="background-color: lightblue;">
<th colspan="2"></th>
<th>Theory</th>
<th>Assignment</th>
<th>Lab Work</th>
<th>Viva</th>
<th>Written</th>
<th>Practical</th>
<th></th>
<th></th>
</tr>
</thead>

<tbody>
<tr>
<td align="center">101</td>
<td>Rajesh Kumar</td>
<td align="center">18</td>

— 74 —
 <td align="center">9</td>
<td align="center">8</td>
<td align="center">9</td>
<td align="center">42</td>
<td align="center">18</td>
<td align="center">104</td>
<td align="center"><strong>A</strong></td>
</tr>

<tr>
<td align="center">102</td>
<td>Priya Singh</td>
<td align="center">19</td>
<td align="center">10</td>
<td align="center">9</td>
<td align="center">10</td>
<td align="center">45</td>
<td align="center">20</td>
<td align="center">113</td>
<td align="center"><strong>A+</strong></td>
</tr>

<tr>
<td align="center">103</td>
<td>Amit Patel</td>
<td align="center">16</td>
<td align="center">8</td>
<td align="center">7</td>
<td align="center">8</td>
<td align="center">38</td>
<td align="center">16</td>
<td align="center">93</td>
<td align="center"><strong>B+</strong></td>
</tr>

<tr>
<td align="center">104</td>
<td>Neha Sharma</td>
<td align="center">17</td>
<td align="center">9</td>
<td align="center">8</td>
<td align="center">9</td>

— 75 —
 <td align="center">41</td>
<td align="center">17</td>
<td align="center">101</td>
<td align="center"><strong>A</strong></td>
</tr>
</tbody>

<tfoot>
<tr style="background-color: lightyellow; font-weight: bold;">
<td colspan="2">Class Average</td>
<td align="center">17.5</td>
<td align="center">9</td>
<td align="center">8</td>
<td align="center">9</td>
<td align="center">41.5</td>
<td align="center">17.75</td>
<td align="center">102.75</td>
<td align="center">A</td>
</tr>
</tfoot>

</table>

<h3>Grade Scale:</h3>
<ul>
<li>A+ : 110-120</li>
<li>A : 100-109</li>
<li>B+ : 90-99</li>
<li>B : 80-89</li>
<li>C+ : 70-79</li>
<li>C : 60-69</li>
</ul>

</body>
</html>

Features demonstrated: - Colspan for merged header cells - Thead, tbody, tfoot
sections - Cellpadding and cellspacing - Cell alignment (center) - Background colors for
sections - Clear table structure - Professional formatting

— 76 —
UNIT V: FRAMES AND FORMS

(25 Pages)

1. FRAMES

1.1 What are Frames?

Frames allow a single browser window to display multiple HTML documents
simultaneously. The <frameset> tag divides the window into rectangular sections, each
containing a separate HTML document.

Note: Frames are deprecated in HTML5. Modern alternatives include: CSS layout,
flexbox, grid, or iframes.

1.2 Frameset Basics

<!DOCTYPE html>
<html>
<head>
<title>Frames Example</title>
</head>
<frameset rows="20%, 80%">
<frame src="[Link]" noresize>
<frame src="[Link]" noresize>
</frameset>
</html>

1.3 Frame Layouts

Horizontal Frames (rows):

— 77 —
 <frameset rows="30%, 70%">
<frame src="[Link]">
<frame src="[Link]">
</frameset>

Vertical Frames (cols):

<frameset cols="20%, 80%">

<frame src="[Link]">
<frame src="[Link]">
</frameset>

Complex Layout:

<frameset rows="20%, 80%">

<frame src="[Link]">
<frameset cols="20%, 80%">
<frame src="[Link]">
<frame src="[Link]">
</frameset>
</frameset>

1.4 Frame Attributes

Attribute Purpose

src URL of document to display in frame

name Name of frame for targeting

noresize Prevents resizing by user

scrolling Control scrollbars (yes, no, auto)

frameborder Border between frames (1 or 0)

marginwidth Left/right margin in pixels

marginheight Top/bottom margin in pixels

— 78 —
1.5 Targeted Links
Links can target specific frames using the target attribute:

<!-- In [Link] -->

<a href="[Link]" target="content">Page 1</a>
<a href="[Link]" target="content">Page 2</a>
<a href="[Link]" target="content">Page 3</a>

<!-- Opens in "content" frame named frame -->

1.6 No Frames Fallback

<frameset rows="20%, 80%">

<frame src="[Link]">
<frame src="[Link]">

<noframes>
<p>Your browser does not support frames.</p>
<p><a href="[Link]">Click here for non-frame version</a></p>
</noframes>
</frameset>

2. FORMS

2.1 What are Forms?

Forms collect user input through text fields, checkboxes, radio buttons, dropdown
menus, and submit buttons. The <form> tag creates the form container.

2.2 Basic Form Syntax

<form action="[Link]" method="POST">

<!-- Form elements -->
</form>

— 79 —
Attributes: - action - URL of script to process form - method - How to send data (GET,
POST)

2.3 Input Tag Types

<!-- Text input -->

<input type="text" name="username" placeholder="Enter username">

<!-- Password input -->

<input type="password" name="password" placeholder="Enter password">

<!-- Email input -->

<input type="email" name="email" placeholder="Enter email">

<!-- Number input -->

<input type="number" name="age" min="1" max="120">

<!-- Checkbox -->

<input type="checkbox" name="interests" value="sports"> Sports
<input type="checkbox" name="interests" value="music"> Music

<!-- Radio button -->

<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female

<!-- Submit button -->

<input type="submit" value="Submit Form">

<!-- Reset button -->

<input type="reset" value="Clear Form">

<!-- Hidden field -->

<input type="hidden" name="user_id" value="123">

<!-- File upload -->

<input type="file" name="document">

<!-- Date -->

<input type="date" name="birth_date">

<!-- Time -->

— 80 —
 <input type="time" name="appointment">

<!-- Color picker -->

<input type="color" name="favorite_color">

<!-- Range slider -->

<input type="range" name="satisfaction" min="1" max="10">

2.4 Textarea Tag

Multi-line text input:

<textarea name="comments" rows="5" cols="40">

Enter your comments here...
</textarea>

2.5 Select and Option Tags

Dropdown menu:

<select name="country">
<option value="">-- Select Country --</option>
<option value="usa">United States</option>
<option value="india">India</option>
<option value="uk">United Kingdom</option>
<option value="australia">Australia</option>
</select>

2.6 Complete Form Example

<!DOCTYPE html>
<html>
<head>
<title>Student Registration Form</title>
</head>
<body>

<h2>College Student Registration Form</h2>

— 81 —
<form action="[Link]" method="POST">

<!-- Personal Information -->

<fieldset>
<legend>Personal Information</legend>

<label for="name">Full Name:</label>

<input type="text" id="name" name="name" required>
<br><br>

<label for="email">Email Address:</label>

<input type="email" id="email" name="email" required>
<br><br>

<label for="phone">Phone Number:</label>

<input type="text" id="phone" name="phone">
<br><br>

<label for="birth_date">Date of Birth:</label>

<input type="date" id="birth_date" name="birth_date">
<br><br>
</fieldset>

<!-- Academic Information -->

<fieldset>
<legend>Academic Information</legend>

<label for="course">Select Course:</label>

<select id="course" name="course" required>
<option value="">-- Select Course --</option>
<option value="btech">[Link] (Computer Science)</option>
<option value="bsc">[Link] (Mathematics)</option>
<option value="mtech">[Link] (Software Engineering)</option>
</select>
<br><br>

<label for="semester">Semester:</label>
<select id="semester" name="semester">
<option value="1">1st Semester</option>
<option value="2">2nd Semester</option>
<option value="3">3rd Semester</option>
<option value="4">4th Semester</option>

— 82 —
 </select>
<br><br>

<label>Gender:</label>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<input type="radio" name="gender" value="other"> Other
<br><br>
</fieldset>

<!-- Interests -->

<fieldset>
<legend>Interests</legend>

<input type="checkbox" name="interests" value="sports"> Sports

<input type="checkbox" name="interests" value="music"> Music
<input type="checkbox" name="interests" value="coding"> Coding
<input type="checkbox" name="interests" value="arts"> Arts
<br><br>
</fieldset>

<!-- Comments -->

<fieldset>
<legend>Additional Comments</legend>

<label for="comments">Comments:</label><br>
<textarea id="comments" name="comments" rows="5" cols="50">
Write any additional information...
</textarea>
<br><br>
</fieldset>

<!-- Agreement -->

<fieldset>
<legend>Agreement</legend>

<input type="checkbox" name="agree" required>

I agree to the terms and conditions
<br><br>
</fieldset>

<!-- Buttons -->

— 83 —
 <input type="submit" value="Register">
<input type="reset" value="Clear Form">

</form>

</body>
</html>

Output:

College Student Registration Form

Personal Information
Full Name: [____________]
Email Address: [_____________@[Link]]
Phone Number: [____________]
Date of Birth: [__/__/____]

Academic Information
Select Course: [▼ -- Select Course --]
Semester: [▼ 1st Semester]

Gender:
○ Male ○ Female ○ Other

Interests
☑ Sports ☑ Music ☐ Coding ☐ Arts

Additional Comments
Comments:
[_____________________________]
[_____________________________]
[_____________________________]

Agreement
☑ I agree to the terms and conditions

[Register] [Clear Form]

— 84 —
2.7 Label Tag
The <label> tag associates text with form elements:

<label for="username">Username:</label>
<input type="text" id="username" name="username">

Benefits: - Click-able labels (especially checkboxes/radios) - Better accessibility for

screen readers - Proper semantic HTML

3. FORM INPUT ATTRIBUTES

3.1 Required Attribute

<input type="text" name="email" required>

<!-- User must fill this field -->

3.2 Placeholder Text

<input type="text" name="search" placeholder="Search...">

<!-- Shows hint text that disappears when typing -->

3.3 Min, Max, Step

<!-- Number constraints -->

<input type="number" name="age" min="18" max="65" step="1">

<!-- Date range -->

<input type="date" name="birth_date" min="1980-01-01" max="2006-12-31">

— 85 —
3.4 Readonly and Disabled

<!-- Can't be changed or submitted -->

<input type="text" name="user_id" value="12345" readonly>

<!-- Can't be changed, submitted, or interacted with -->

<input type="text" name="status" value="Active" disabled>

3.5 Pattern (Regex Validation)

<!-- Username: 5-15 alphanumeric characters -->

<input type="text" name="username"
pattern="[A-Za-z0-9]{5,15}"
title="Username must be 5-15 characters">

<!-- Phone number format -->

<input type="text" name="phone"
pattern="[0-9]{10}"
placeholder="10-digit number">

4. FIELDSET AND LEGEND

Group related form elements:

<fieldset>
<legend>Personal Details</legend>

<label for="name">Name:</label>
<input type="text" id="name" name="name">
<br>

<label for="age">Age:</label>
<input type="number" id="age" name="age">
</fieldset>

<fieldset>

— 86 —
 <legend>Address</legend>

<label for="address">Street:</label>
<input type="text" id="address" name="address">
<br>

<label for="city">City:</label>
<input type="text" id="city" name="city">
</fieldset>

5. IMPORTANT QUESTIONS

5-MARK QUESTIONS
Q1. Explain frames and their purpose. What are the drawbacks?

Frames divide browser window into multiple rectangular sections, each displaying
separate HTML document. Created with <frameset> containing <frame> tags. Purpose:
Allow simultaneous display of multiple documents (e.g., navigation menu + content
area). Can be arranged horizontally (rows) or vertically (cols). Drawbacks: (1)
Bookmarking specific pages difficult, (2) Search engines can’t index properly, (3)
Complex navigation and linking, (4) Accessibility issues for screen readers, (5) Modern
browsers handle poorly, (6) Deprecated in HTML5. Modern alternatives: CSS layouts,
flexbox, grid, or iframes. Frames were popular in 1990s-2000s but now considered
outdated. Recommended to avoid frames in new projects and use modern CSS layout
techniques instead.

Q2. What are forms and what input types are available?

Forms collect user input through various elements. <form> tag creates form container
with action (where to send data) and method (GET/POST) attributes. Input types
include: (1) text - single-line text, (2) password - masked text, (3) email - email format,
(4) number - numeric values, (5) checkbox - multiple selections, (6) radio - single
selection, (7) submit - submit button, (8) reset - clear form, (9) file - file upload, (10) date
- date picker, (11) time - time picker, (12) color - color picker, (13) range - slider. Other
elements: <textarea> for multi-line text, <select> for dropdown menu, <option> for
menu items. Each input has name attribute for form submission and various other
attributes for validation and behavior.

— 87 —
Q3. Explain textarea, select, and option tags with examples.

<textarea> creates multi-line text input for longer text: <textarea name="comments"
rows="5" cols="40"></textarea> . Attributes: rows (height), cols (width). <select> creates
dropdown menu: <select name="country"><option>Option 1</option></select> . <option>
defines each menu item with value attribute for form submission. Example: Select
course from dropdown showing multiple options. User clicks to expand, selects one
option. Selected option’s value is submitted with form. <optgroup> can group related
options. Difference: textarea allows multiple lines of free text, select restricts choice to
predefined options. Use textarea for feedback/comments, select for categories/choices.

Q4. What are label and fieldset tags and their purposes?

<label> associates descriptive text with form element. Syntax: <label for="id">Text</
label><input id="id"> . Benefits: (1) Click-able - users can click label to focus/toggle
input, (2) Accessibility - screen readers read label, (3) Semantic - proper HTML structure.
Improves usability especially for checkboxes and radio buttons. <fieldset> groups
related form elements with visual border. <legend> provides title for fieldset. Example:
Personal Information fieldset contains name, email, phone inputs. Separates form into
logical sections. Benefits: (1) Better organization, (2) Improved visual grouping, (3)
Accessibility - screen readers announce groups. Fieldset adds visual border, legend
appears as border label. Both improve form usability and accessibility for all users.

Q5. What are form attributes like required, readonly, disabled, and pattern?

Form input attributes enhance validation and behavior: (1) required - field must be
filled before submission, (2) readonly - value can’t be changed but is submitted, (3)
disabled - field can’t be changed, focused, or submitted, (4) placeholder - hint text
showing before user types, (5) min/max - numeric or date range, (6) pattern - regex
validation rule, (7) title - error message. Example: <input type="email" required>
makes email mandatory. <input readonly> shows but protects field value. <input
pattern="[0-9]{10}"> validates phone format. These attributes improve user experience
by: providing guidance, preventing errors, auto-validating input. Browser handles
validation before form submission, reducing server load and providing instant feedback
to users.

10-MARK QUESTIONS
Q1. Design a complete college online admission form with all form elements
and proper structure.

— 88 —
<!DOCTYPE html>
<html>
<head>
<title>ABC College - Online Admission Form</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h1>ABC COLLEGE - ONLINE ADMISSION FORM</h1>

<p><em>Academic Year 2024-2025</em></p>

<form action="process_admission.php" method="POST" enctype="multipart/form-data">

<!-- Section 1: Personal Information -->

<fieldset>
<legend><strong>Section 1: Personal Information</strong></legend>

<label for="fullname">Full Name:</label>

<input type="text" id="fullname" name="fullname" required>
<br><br>

<label for="email">Email Address:</label>

<input type="email" id="email" name="email" required>
<br><br>

<label for="phone">Contact Number:</label>

<input type="text" id="phone" name="phone" pattern="[0-9]{10}" title="10-digit phone number" requir
<br><br>

<label for="dob">Date of Birth:</label>

<input type="date" id="dob" name="dob" required>
<br><br>

<label>Gender:</label>
<input type="radio" name="gender" value="male" required> Male
<input type="radio" name="gender" value="female"> Female
<input type="radio" name="gender" value="other"> Other
<br><br>

<label for="address">Residential Address:</label>

— 89 —
 <textarea id="address" name="address" rows="3" cols="40" required></textarea>
<br><br>

<label for="city">City:</label>
<input type="text" id="city" name="city" required>
<br><br>

<label for="state">State/Province:</label>
<input type="text" id="state" name="state" required>
<br><br>

<label for="zip">ZIP/Postal Code:</label>

<input type="text" id="zip" name="zip" pattern="[0-9]{6}" required>
<br><br>
</fieldset>

<!-- Section 2: Educational Background -->

<fieldset>
<legend><strong>Section 2: Educational Background</strong></legend>

<label for="twelfth_board">12th Board:</label>

<select id="twelfth_board" name="twelfth_board" required>
<option value="">-- Select Board --</option>
<option value="cbse">CBSE</option>
<option value="icse">ICSE</option>
<option value="state">State Board</option>
<option value="international">International</option>
</select>
<br><br>

<label for="twelfth_year">Year of Passing 12th:</label>

<input type="number" id="twelfth_year" name="twelfth_year" min="2015" max="2024" required>
<br><br>

<label for="twelfth_percent">12th Percentage:</label>

<input type="number" id="twelfth_percent" name="twelfth_percent" min="0" max="100" step="0.01" requ
<br><br>

<label for="entrance_score">Entrance Exam Score:</label>

<input type="number" id="entrance_score" name="entrance_score" min="0" max="360">
<br><br>
</fieldset>

— 90 —
<!-- Section 3: Course Selection -->
<fieldset>
<legend><strong>Section 3: Course Selection</strong></legend>

<label for="program">Select Program:</label>

<select id="program" name="program" required>
<option value="">-- Select Program --</option>
<option value="btech_cs">[Link] - Computer Science</option>
<option value="btech_it">[Link] - Information Technology</option>
<option value="btech_ec">[Link] - Electronics</option>
<option value="bsc_math">[Link] - Mathematics</option>
<option value="bsc_physics">[Link] - Physics</option>
<option value="mtech">[Link] - Software Engineering</option>
</select>
<br><br>

<label for="intake">Intake Preference:</label>

<select id="intake" name="intake">
<option value="jan">January 2025</option>
<option value="july">July 2025</option>
</select>
<br><br>
</fieldset>

<!-- Section 4: Achievements and Activities -->

<fieldset>
<legend><strong>Section 4: Extra-curricular Activities</strong></legend>

<p>Select your areas of interest:</p>

<input type="checkbox" name="activities" value="sports"> Sports
<input type="checkbox" name="activities" value="music"> Music
<input type="checkbox" name="activities" value="coding"> Coding/Programming
<input type="checkbox" name="activities" value="debate"> Debate/Public Speaking
<input type="checkbox" name="activities" value="arts"> Arts
<input type="checkbox" name="activities" value="drama"> Drama/Theater
<br><br>

<label for="achievements">Achievements/Awards:</label>
<textarea id="achievements" name="achievements" rows="3" cols="40" placeholder="Mention any awards
<br><br>
</fieldset>

— 91 —
<!-- Section 5: Document Upload -->
<fieldset>
<legend><strong>Section 5: Document Upload</strong></legend>

<label for="photo">Passport Photo (JPG, PNG):</label>

<input type="file" id="photo" name="photo" accept=".jpg,.png" required>
<br><br>

<label for="10th_mark">10th Marks Sheet:</label>

<input type="file" id="10th_mark" name="10th_mark" accept=".pdf" required>
<br><br>

<label for="12th_mark">12th Marks Sheet:</label>

<input type="file" id="12th_mark" name="12th_mark" accept=".pdf" required>
<br><br>
</fieldset>

<!-- Section 6: Agreement and Declaration -->

<fieldset>
<legend><strong>Section 6: Agreement and Declaration</strong></legend>

<p>
<strong>Declaration:</strong> I hereby declare that the information provided
above is true and correct to the best of my knowledge. I understand that
any false information may lead to cancellation of my admission.
</p>

<input type="checkbox" name="declaration" value="agree" required>

I agree to the terms and conditions and declare the information above is correct.
<br><br>

<input type="checkbox" name="consent" value="yes" required>

I consent to receive communication from ABC College.
<br><br>
</fieldset>

<!-- Submit and Reset Buttons -->

<div style="text-align: center;">
<input type="submit" value="Submit Application" style="padding: 10px 20px; font-size: 16px;">
<input type="reset" value="Clear Form" style="padding: 10px 20px; font-size: 16px;">
</div>

— 92 —
 <!-- Hidden field -->
<input type="hidden" name="form_version" value="1.0">
<input type="hidden" name="submission_date" value="">

</form>

<hr>

<footer>
<p><strong>Note:</strong> All fields marked with * are mandatory.</p>
<p>For help: <a href="[Link] | Phone: +1-800-1
</footer>

</body>
</html>

Form Features Demonstrated: - Organized sections with fieldset and legend - Various
input types (text, email, date, number, radio, checkbox, file, select) - Form validation
attributes (required, pattern, min, max) - Textarea for multi-line input - File upload
capabilities - Hidden fields - Submit and reset buttons - Clear navigation and accessibility

SUMMARY OF ALL UNITS

Unit I: Internet, Browsers, HTML Basics

• Internet fundamentals and architecture
• Web browser functionality and components
• HTML document structure
• Tag system and attributes

Unit II: Document Structure and Tags

• Head section metadata
• Body section and semantic HTML5 elements
• Heading hierarchy (h1-h6)
• Paragraph and text formatting elements

— 93 —
 • Font style elements (bold, italic, etc.)

Unit III: Lists, Images, Hyperlinks

• Ordered and unordered lists
• Nested lists
• Image insertion and attributes
• Hyperlink creation (internal, external, email)
• Marquee and HR tags

Unit IV: Tables

• Table structure and components
• Rowspan and colspan
• Cell alignment and formatting
• Cellpadding and cellspacing
• Semantic table sections (thead, tbody, tfoot)

Unit V: Frames and Forms

• Frame concept (deprecated but historical)
• Form creation and processing
• Input types and elements
• Form validation and attributes
• Fieldset and label organization

FINAL RECOMMENDATIONS FOR STUDENTS

1. Practice writing HTML: Write code frequently, don’t just read

2. Use modern tools: Use VS Code, Chrome DevTools for development
3. Follow standards: Use HTML5, semantic elements, accessibility guidelines
4. Avoid deprecated features: Don’t use frames, font tag, or old HTML practices
5. Combine with CSS: Learn CSS for styling alongside HTML
6. Learn JavaScript: Add interactivity to your forms and pages
7. Responsive design: Use viewport meta tag and responsive techniques

— 94 —
 8. Accessibility: Always use alt text, labels, and semantic HTML

END OF COMPREHENSIVE LECTURE NOTES

Total Pages: ~125 pages equivalent of detailed content with examples, diagrams, code
samples, and questions for all 5 units.

— 95 —