Introduction to HTML
UNIT I
1. What is the Internet?
1.1 Definition
The Internet is a worldwide system of interconnected computer networks that use the
Transmission Control Protocol/Internet Protocol (TCP/IP) to communicate.
It is essentially a “network of networks” that links millions of devices — computers,
smartphones, servers — enabling global communication and data exchange.
1.2 Key Characteristics
• Global Reach – Connects users across continents without geographical limitations.
• Decentralized – No single organization controls it; multiple providers and organizations
maintain it collectively.
• Multiple Services – Email, web browsing, file sharing, online streaming, cloud services,
etc.
• Always On – Available 24/7 with minimal downtime.
1.3 Internet vs. World Wide Web
Internet World Wide Web
Physical and logical network infrastructure Service built on top of the Internet
Uses TCP/IP for communication Uses HTTP/HTTPS for data exchange
Includes email, FTP, VoIP, streaming Includes websites, web apps, blogs
Exists without the Web Cannot exist without the Internet
2. Web Browsers
2.1 Definition
A web browser is a software application that retrieves, interprets, and displays web content from
servers.
2.2 Functions
1. Requesting Data – Sends a request to a web server when you enter a URL.
2. Rendering Content – Processes HTML, CSS, and JavaScript to present visual and
interactive elements.
3. Navigation & History – Allows moving between pages, storing visited sites.
4. Security – Blocks malicious sites, supports encryption (HTTPS).
2.3 Examples
• Google Chrome
• Mozilla Firefox
• Microsoft Edge
• Apple Safari
• Opera
2.4 How Browsers Work (Simplified)
1. URL Entry – User types [Link]
2. DNS Lookup – Browser finds the IP address of the domain.
3. HTTP Request – Sent to the server.
4. Server Response – HTML, CSS, JS files sent back.
5. Rendering Engine – Displays page on screen.
Diagram (text form):
User -> Browser -> Internet -> Web Server -> Browser -> User
3. What is a Webpage?
3.1 Definition
A webpage is a digital document written in HTML (HyperText Markup Language) that is
displayed in a web browser.
3.2 Types of Webpages
• Static Webpage – Content is fixed; requires manual updates.
Example: Personal portfolio page.
• Dynamic Webpage – Content is generated in real-time from databases or user input.
Example: Facebook news feed.
3.3 Common Elements of a Webpage
• Text (headings, paragraphs)
• Images and videos
• Hyperlinks to other pages
• Lists and tables
• Forms for user input
HTML Basics: Understanding Tags
1. What is HTML?
1.1 Definition
HTML (HyperText Markup Language) is the standard language used to create and structure
content for the World Wide Web.
1.2 Purpose
• Structures the webpage’s content.
• Works alongside CSS (styling) and JavaScript (interactivity).
• Tells the browser what each part of the content means.
1.3 HTML in the Web Development Stack
HTML → Structure (headings, paragraphs, links)
CSS → Style (colors, fonts, layouts)
JS → Behavior (animations, validation, events)
2. HTML Tags
2.1 What is a Tag?
A tag is a special keyword in angle brackets < > that tells the browser how to interpret a piece of
content.
2.2 Tag Structure
• Opening Tag: <tagname>
• Content: The actual text, image, or element.
• Closing Tag: </tagname>
Example:
<p>This is a paragraph.</p>
2.3 Types of Tags
Type Description Example
Container Tags Have both opening and closing tags <h1>Title</h1>
Empty/Self-closing Tags No closing tag needed <br> <img src="[Link]">
3. Common HTML Tags
Structural Tags:
<html> <!-- Root element -->
<head> <!-- Metadata, title, scripts -->
<title>My Page</title>
</head>
<body> <!-- Visible content -->
</body>
</html>
Text Formatting Tags:
html
CopyEdit
<h1>Main Heading</h1>
<p>This is a paragraph.</p>
<b>Bold text</b>
<i>Italic text</i>
<br> <!-- Line break -->
Links and Media:
<a href="[Link] Example</a>
<img src="[Link]" alt="Description">
Lists:
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
4. HTML Document Structure Example
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is my first paragraph in HTML.</p>
<a href="[Link] Example</a>
</body>
</html>
Explanation:
• <!DOCTYPE html> → Tells browser this is HTML5.
• <html> → Starts the HTML document.
• <head> → Metadata and page info.
• <body> → Content visible to the user.
5. HTML Best Practices
• Use lowercase tags for consistency.
• Properly nest tags (no overlaps).
• Include alt text for images for accessibility.
• Use semantic tags in HTML5 for better meaning (<header>, <nav>, <footer>).
UNIT II
. HTML Document Structure Tags
An HTML document is a hierarchical structure that defines how web content is written,
organized, and displayed in the browser.
1.1 Doctype Declaration
• Purpose:
Tells the browser which version of HTML the document is using.
• HTML5 Syntax:
<!DOCTYPE html>
• Must be the first line of the document (above <html> tag).
• In HTML5, the doctype is case-insensitive and much shorter than earlier versions (HTML
4.01 or XHTML).
1.2 <html> Tag
• Definition: The <html> tag is the root element that contains all other HTML elements.
• Structure:
<html lang="en">
<head> ... </head>
<body> ... </body>
</html>
• Attributes:
o lang— Specifies the document language (en for English, fr for French, etc.).
Example: <html lang="en">
• Notes:
o Only one <html> tag per HTML page.
o Acts as the container for head and body sections.
1.3 <head> Tag
• Definition: Contains metadata — data about the webpage that is not directly displayed.
• Possible Elements inside <head>:
Tag Purpose Example
<title> Sets the browser tab name <title>My Page</title>
<meta>
Defines metadata like charset, <meta charset="UTF-8">
description, keywords
<link rel="stylesheet"
<link> Links to CSS stylesheets or icons href="[Link]">
<style> Internal CSS styles <style>h1 {color:red;}</style>
<script> JavaScript files or inline scripts <script src="[Link]"></script>
• Example:
<head>
<meta charset="UTF-8">
<meta name="description" content="Learn HTML basics">
<meta name="author" content="John Doe">
<title>HTML Basics</title>
<link rel="stylesheet" href="[Link]">
</head>
1.4 <body> Tag
• Definition: Contains all visible content of the webpage.
• Can include:
o Headings
o Paragraphs
o Images
o Tables
o Forms
o Multimedia elements
• Example:
<body>
<h1>Welcome!</h1>
<p>This is my first webpage.</p>
<img src="[Link]" alt="Sample Photo">
</body>
• Rules:
o Only one <body> tag per document.
o Displayed in the order written in HTML.
1.5 Example: Complete HTML5 Document
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="HTML Document Structure Example">
<meta name="author" content="Jane Doe">
<title>HTML Structure</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This page demonstrates HTML structure.</p>
</body>
</html>
2. Block-Level Text Elements
2.1 What is a Block-Level Element?
A block-level element:
• Always starts on a new line.
• Stretches to take up the full width of its parent container by default.
• Can contain other block-level elements or inline elements.
• Used for structuring sections of a page.
2.2 Difference Between Block and Inline Elements
Block-Level Elements Inline Elements
Start on a new line Flow within a line of text
Take full available width Take only as much width as content
Can contain block or inline elements Can contain only text or inline elements
Examples: <p>, <div>, <h1> Examples: <span>, <a>, <strong>
2.3 Common Block-Level Text Elements in HTML5
Tag Description Example
Headings, <h1> largest, <h6>
<h1> to <h6> <h2>Subheading</h2>
smallest
<p> Paragraph <p>This is a paragraph.</p>
Tag Description Example
<div>
Generic container for grouping <div>Content here</div>
content
<blockquote> Quoted section of text <blockquote>Quote here</blockquote>
<pre> Preformatted text (preserves <pre>Line1 Line2</pre>
spaces and line breaks)
<address>Email:
<address> Contact info info@[Link]</address>
<hr> Horizontal line divider <hr>
<section> Thematic grouping of content <section><h2>News</h2></section>
<article>
Self-contained, independent <article>Blog post</article>
content
2.4 Examples of Block-Level Text Elements
<body>
<h1>Company Profile</h1>
<p>We specialize in modern web solutions.</p>
<blockquote>
"Quality is not an act, it is a habit." – Aristotle
</blockquote>
<div>
<h2>Our Services</h2>
<p>Web Design, Development, SEO</p>
</div>
<pre>
Line 1: Code Sample
Line 2: Preserved formatting
</pre>
</body>
2.5 Diagram: Browser Rendering Behavior
[<h1>Heading</h1>]
---------------------------------
| Heading text |
---------------------------------
(new line starts here)
[<p>Paragraph</p>]
---------------------------------
| Paragraph content |
---------------------------------
1. Headings in HTML
1.1 Purpose of Headings
• Organize content into hierarchical sections.
• Provide semantic meaning — search engines and assistive technologies use headings to
understand page structure.
• Visually emphasize section titles.
1.2 Heading Levels
HTML defines six levels of headings:
Tag Default Size Use Case
<h1> Largest Main page title (one per page)
<h2> Smaller than <h1> Section title
<h3> Smaller than <h2> Subsection title
<h4> Smaller than <h3> Sub-subsection
<h5> Smaller than <h4> Less important heading
<h6> Smallest Least important heading
1.3 Syntax
<h1>Main Title</h1>
<h2>Section Heading</h2>
<h3>Subsection Heading</h3>
1.4 Rendering Characteristics
• Block-level element — starts on a new line.
• By default, rendered in bold.
• Size and style can be changed with CSS.
• Browsers automatically add vertical spacing before and after headings.
1.5 Accessibility Considerations
• Heading levels should follow a logical order.
• Screen readers use heading tags to navigate pages.
• Avoid using headings purely for visual size — use CSS for appearance.
1.6 Example
<h1>About Us</h1>
<p>We are a technology company...</p>
<h2>Our Mission</h2>
<p>To innovate and inspire...</p>
2. Paragraphs in HTML
2.1 Purpose
• Display blocks of text in a structured manner.
• Separate ideas into readable chunks.
2.2 Syntax
<p>This is a paragraph of text.</p>
2.3 Rendering Characteristics
• Block-level element.
• Starts on a new line.
• Browsers add spacing before and after paragraphs.
• Paragraphs can contain inline elements such as <b>, <i>, <a>.
2.4 Accessibility Considerations
• Paragraphs help screen readers identify text boundaries.
• Avoid breaking paragraphs into multiple <br> tags — use <p> for clarity.
2.5 Example
<p>HTML is the standard language for creating webpages.</p>
<p>It uses tags to define the structure and content of a page.</p>
3. Font-Style Elements
Font-style elements affect the appearance and sometimes meaning of text.
They are divided into physical style tags and semantic style tags.
3.1 Physical vs. Semantic
Physical Style Tag Purpose Semantic Equivalent
<b> Bold appearance <strong> (strong importance)
<i> Italic appearance <em> (emphasis)
<strike> (deprecated) Strike-through <del> (deleted text)
<big> (deprecated) Larger text CSS font-size
<font> (deprecated) Change font size, color, face CSS font properties
3.2 <b> — Bold Text
• Purpose: Makes text bold without semantic meaning.
• Syntax:
<p>This is <b>bold text</b>.</p>
• Modern Use: For purely visual bolding.
• Accessibility: Avoid for meaning — use <strong> instead.
3.3 <strong> — Strong Importance
• Purpose: Indicates strong emphasis or importance.
• Default Rendering: Bold text.
• Syntax:
<p>This is <strong>important text</strong>.</p>
• Accessibility: Screen readers emphasize <strong> text vocally.
3.4 <i> — Italic Text
• Purpose: Italics without semantic meaning.
• Syntax:
<p>This is <i>italic text</i>.</p>
• Common Uses: Foreign words, technical terms, titles of works.
3.5 <em> — Emphasis
• Purpose: Indicates emphasis — may change intonation in speech.
• Syntax:
<p>This is <em>emphasized text</em>.</p>
• Rendering: Usually italics, but can vary with CSS.
3.6 <font> — Font Face, Size, Color (Deprecated)
• Used in older HTML for styling text:
<font face="Arial" size="4" color="blue">Sample text</font>
• HTML5 Status: Deprecated — use CSS:
<p style="font-family: Arial; font-size: 16px; color: blue;">Sample text</p>
3.7 <small> — Smaller Text
• Purpose: Renders text in a smaller font size than surrounding text.
• Syntax:
<p>This is <small>smaller text</small>.</p>
• Common Uses: Legal disclaimers, fine print.
3.8 <strike> — Strike-through (Deprecated)
• Older way to mark text as deleted or incorrect.
<p>This is <strike>old text</strike>.</p>
• Modern Alternative: <del> for removed text, <s> for inaccurate but unchanged text.
3.9 <big> — Larger Text (Deprecated)
• Purpose: Makes text one size larger.
<p>This is <big>larger text</big>.</p>
• HTML5 Status: Deprecated — use CSS:
<p style="font-size: larger;">This is larger text</p>
4. Complete Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Headings, Paragraphs, and Font Styles</title>
</head>
<body>
<h1>Product Sale</h1>
<p>Our <strong>best-selling</strong> products are now available at
<em>discounted prices</em>.</p>
<p><strike>$50.00</strike> <b>$35.00</b> only!</p>
<p>This offer is valid for a <small>limited time</small> only.</p>
</body>
</html>
5. Deprecated Tags & Modern Alternatives
Deprecated Tag Modern HTML5/CSS Alternative
<font> CSS font-family, font-size, color
<strike> <del> or <s>
<big> CSS font-size: larger;
UNIT III
1. Introduction
A list in HTML is a group of related items presented in a specific order (numbered) or no order
(bulleted). Lists make web pages more organized, improve readability, and give semantic
meaning to content.
There are three primary list types:
1. Ordered List (<ol>) – Items are numbered or lettered in sequence.
2. Unordered List (<ul>) – Items are bulleted.
3. Description List (<dl>) – Items are terms with corresponding descriptions.
Additionally, HTML supports nested lists (lists within lists) and styling through CSS.
2. Ordered Lists (<ol>)
2.1 Definition
An ordered list is used when the sequence of items is important (e.g., steps in a recipe, ranking
results).
2.2 Syntax
<ol>
<li>Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
</ol>
Explanation:
• <ol> – Container for the ordered list.
• <li> – “List Item” tag, contains each list entry.
2.3 Default Behavior
• Displays numbers starting from 1.
• Each item appears on a new line.
• The numbering continues sequentially.
2.4 Attributes of <ol>
Attribute Purpose Example
type Numbering style: 1 (default), A, a, I, i <ol type="A">
start Number or letter to start list from <ol start="5">
reversed Reverse order numbering <ol reversed>
Example with Attributes:
<ol type="I" start="4" reversed>
<li>Item Four</li>
<li>Item Three</li>
<li>Item Two</li>
</ol>
3. Unordered Lists (<ul>)
3.1 Definition
An unordered list presents items where order is irrelevant, such as a grocery list.
3.2 Syntax
<ul>
<li>Bread</li>
<li>Butter</li>
<li>Milk</li>
</ul>
3.3 Default Behavior
• Uses bullets (•) as default markers.
• Indents content slightly.
3.4 Bullet Styles
In HTML4, the type attribute controlled bullet shapes (disc, circle, square), but it is
deprecated in HTML5.
Now, use CSS:
ul {
list-style-type: square; /* Options: disc, circle, square, none */
}
Example with different bullet styles:
<ul style="list-style-type: circle;">
<li>Circle Bullet</li>
</ul>
<ul style="list-style-type: square;">
<li>Square Bullet</li>
</ul>
4. Nested Lists
4.1 Definition
A nested list is a list placed inside another list. It’s useful for hierarchical data.
4.2 Syntax
<ul>
<li>Fruits
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
</li>
<li>Vegetables
<ol type="A">
<li>Carrot</li>
<li>Broccoli</li>
</ol>
</li>
</ul>
Behavior:
• Automatically indents inner lists.
• Can mix <ul> and <ol> at any nesting level.
5. Description Lists (<dl>)
5.1 Definition
Used for term–description pairs, like glossaries or FAQ lists.
5.2 Syntax
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
Tags:
• <dl> – Container for the list.
• <dt> – The “term” being defined.
• <dd> – The “description” of the term.
5.3 Rendering
• <dt> usually bold or on a new line.
• <dd> indented under <dt>.
6. Visual Representation
Example:
Ordered List:
1. One
2. Two
3. Three
Unordered List:
• Item
• Item
• Item
Description List:
Term
Definition
7. Accessibility & Semantic Importance
• Screen readers can identify <ol>, <ul>, and <dl> for better navigation.
• Ordered lists indicate priority or sequence.
• Use correct list type for meaning — not just for visual effect.
Other HTML Tags & Features
1. <marquee> Tag — Scrolling Text and Images
HTML5 Status: Deprecated (not recommended for modern use) — Still works in many
browsers but may be removed in the future.
Alternative: CSS animations (@keyframes, animation) or JavaScript.
Purpose
The <marquee> tag was introduced in early versions of HTML to create scrolling or moving
text/images horizontally or vertically without additional scripting. It is a non-standard
extension originally supported by Internet Explorer.
Basic Syntax
<marquee>Scrolling text or image</marquee>
Common Attributes
Attribute Description Values / Example
direction Direction of scroll "left", "right", "up", "down"
scrollamount Speed (numeric pixels moved per scrollamount="10"
interval)
scrolldelay
Delay (in milliseconds) between scrolldelay="100"
movements
"scroll" (default), "slide",
behavior Type of scroll behavior "alternate"
loop Number of repetitions "infinite" or number
bgcolor Background color (non-CSS method) bgcolor="yellow"
width / height Defines the area size of the marquee width="400" height="50"
hspace / Horizontal and vertical margins around hspace="10" vspace="5"
vspace the marquee
Example
<marquee behavior="alternate" direction="right" bgcolor="lightblue"
scrollamount="5" loop="3">
Welcome to My Website!
</marquee>
Best Practice Alternative (CSS)
<style>
.scroller {
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
animation: scroll 10s linear infinite;
}
@keyframes scroll {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
</style>
<div class="scroller">Welcome to My Website!</div>
2. <hr> Tag — Horizontal Rule
Purpose
Creates a horizontal line for visual separation between sections of content. In HTML5, <hr> is a
thematic break element — meaning it represents a shift in topic or context.
Syntax
<hr>
(Self-closing in HTML5 — no end tag)
HTML Attributes (Older/Deprecated)
Attribute Description Example
size Thickness in pixels <hr size="5">
width Width in px or % <hr width="50%">
color Line color (deprecated) <hr color="red">
align Alignment: left, center, right (deprecated) <hr align="center">
Modern Styling (CSS)
hr {
border: 2px solid #333;
width: 60%;
margin: 20px auto;
}
Example
<p>Introduction Section</p>
<hr>
<p>Next Section</p>
3. <br> Tag — Line Break
Purpose
Forces text to break to the next line without starting a new paragraph. Commonly used in
addresses, poems, or multi-line lists.
Syntax
Line 1<br>
Line 2
Notes
• Empty element — no closing tag.
• Not recommended for large structural breaks — use <p> instead.
• Accessible HTML encourages <br> only when line breaks are semantically meaningful.
Example
Address:<br>
123 Main Street<br>
New Delhi, India
4. <img> Tag — Inserting Images
Purpose
Embeds an image file into a webpage.
Syntax
<img src="[Link]" alt="Description of image">
Required Attributes
Attribute Description Example
src Path or URL to the image src="images/[Link]"
alt Alternative text for accessibility and when image alt="A scenic mountain
fails to load view"
Optional Attributes
Attribute Description Example
width Display width (px or %) width="400"
height Display height (px or %) height="300"
title Tooltip text on hover title="My Photo"
loading lazy for delayed loading until needed loading="lazy"
Example
<img src="[Link]" alt="Mountain Landscape" width="400" height="300"
title="Beautiful Mountain">
Best Practices
• Always include descriptive alt text.
• Use CSS for responsive scaling:
img {
max-width: 100%;
height: auto;
}
• Compress images for faster loading.
5. <a> Tag — Hyperlinks
Purpose
Creates clickable links to:
• Web pages
• Email addresses
• Files
• Sections within the same page
Syntax
<a href="URL">Link Text</a>
Common Attributes
Attribute Description Example
href Target URL/path href="[Link]"
target Open location: _blank (new tab), _self (default) target="_blank"
title Tooltip text title="Visit OpenAI"
download Forces file download download="[Link]"
Types of Links
1. External Link
<a href="[Link] target="_blank">Visit OpenAI</a>
2. Internal Link
<a href="[Link]">Contact Us</a>
3. Email Link
<a href="[Link] Us</a>
4. Anchor Link (Same Page)
<a href="#section2">Go to Section 2</a>
<h2 id="section2">Section 2</h2>
6. Combined Demonstration
<!DOCTYPE html>
<html>
<head>
<title>HTML Extra Tags Example</title>
</head>
<body>
<marquee behavior="scroll" direction="left" bgcolor="lightblue"
scrollamount="4">
Welcome to my website!
</marquee>
<hr size="3" color="blue">
<p>This is a paragraph.<br>
This is a new line using the <br> tag.</p>
<img src="[Link]" alt="Snowy Mountain" width="300" title="Scenic
Mountain View">
<p>Visit <a href="[Link] target="_blank" title="External
Website">[Link]</a></p>
</body>
</html>
UNIT IV
1. Introduction to HTML Tables
Tables in HTML are used to organize and display data in rows and columns, making
information easier to read and understand. Tables are structured using specific tags that define
rows, columns, headers, and data cells.
2. Basic Table Structure
2.1 Table Container: <table>
The <table> tag defines the start and end of a table.
2.2 Table Row: <tr>
Each table row is defined with the <tr> tag.
2.3 Table Header Cell: <th>
Table headers are cells that define the heading of a column or row, rendered in bold and
centered by default.
2.4 Table Data Cell: <td>
Table data cells contain the actual data in the table.
Example of Basic Table
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Ram</td>
<td>25</td>
<td>Chennai</td>
</tr>
<tr>
<td>Rita</td>
<td>30</td>
<td>Coimbatore</td>
</tr>
</table>
3. Caption Tag
3.1 Purpose
The <caption> tag provides a title or description for the table, improving accessibility and
understanding.
3.2 Syntax
Placed immediately after the opening <table> tag.
<table border="1">
<caption>Employee Details</caption>
...
</table>
Default Appearance
Usually displayed centered above the table.
4. Table and Cell Alignment
4.1 Aligning Table
• Use align attribute on <table> (deprecated, use CSS now) to position table:
o align="left" — table aligned to left
o align="center" — table centered
o align="right" — table aligned to right
Example:
<table align="center" border="1">
...
</table>
4.2 Aligning Cell Content
• Use align attribute on <td> or <th> to horizontally align text:
o align="left" (default for data cells)
o align="center"
o align="right"
• Use valign attribute on <td> or <th> to vertically align content:
o valign="top"
o valign="middle" (default)
o valign="bottom"
Example:
<td align="center" valign="top">Data</td>
5. Row Span and Column Span
5.1 Rowspan
• Attribute: rowspan="n" allows a cell to span vertically across n rows.
Example:
<tr>
<td rowspan="2">Ram</td>
<td>25</td>
<td>Chennai</td>
</tr>
<tr>
<td>Developer</td>
<td>IT Dept.</td>
</tr>
Here, "Ram" cell spans 2 rows vertically.
5.2 Colspan
• Attribute: colspan="n" allows a cell to span horizontally across n columns.
Example:
<tr>
<th colspan="3">Employee Details</th>
</tr>
This heading spans across 3 columns.
6. Cell Padding
6.1 Purpose
• Adds space inside each cell between the cell content and the cell border, improving
readability.
6.2 HTML Attribute
• cellpadding="value" attribute on <table> adds padding to all cells.
Example:
<table border="1" cellpadding="10">
...
</table>
This adds 10 pixels of padding inside every cell.
6.3 Modern CSS Approach
table {
border-collapse: collapse; /* Optional: to remove double borders */
}
td, th {
padding: 10px;
border: 1px solid black;
}
7. Complete Example Combining All Concepts
<table border="1" cellpadding="8" align="center">
<caption><strong>Student Information</strong></caption>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
<th>Subject</th>
</tr>
<tr>
<td rowspan="2">Saravanan</td>
<td>22</td>
<td>Madurai</td>
<td>Maths</td>
</tr>
<tr>
<td>22</td>
<td>Madurai</td>
<td>Physics</td>
</tr>
<tr>
<td>Meena</td>
<td>21</td>
<td>Coimbatore</td>
<td colspan="2" align="center">Computer Science</td>
</tr>
</table>
UNIT V
Frames and Forms in HTML
1. Frames
1.1 Introduction to Frames
Frames are used to divide a web browser window into multiple sections (frames), each
displaying a different HTML document. This allows multiple pages to be visible simultaneously.
Note: Frames are deprecated in HTML5. Modern web design uses CSS and JavaScript instead.
1.2 <frameset> Tag
Defines the number and size of frames (replacing <body> tag when used).
Syntax Example:
<frameset cols="30%,70%">
<frame src="[Link]" name="menuFrame">
<frame src="[Link]" name="contentFrame">
</frameset>
• cols="30%,70%" divides window into 2 vertical frames: left 30%, right 70%.
• Can use rows="..." for horizontal division.
• Each <frame> defines a separate HTML document inside the frameset.
1.3 Targeted Links
Links can open content in specific frames using the target attribute in <a> tags.
Example:
<a href="[Link]" target="contentFrame">Open in Content Frame</a>
Here, clicking the link loads "[Link]" into the frame named "contentFrame".
1.4 <noframes> Tag
Used to provide alternative content for browsers that do not support frames.
Syntax:
<noframes>
<p>Your browser does not support frames. Please visit the <a
href="[Link]">full page</a>.</p>
</noframes>
2. Forms
HTML forms collect user input and send data to a server or process it client-side.
2.1 <form> Tag
Container for form elements.
Basic Syntax:
<form action="[Link]" method="post">
<!-- form elements go here -->
</form>
• action specifies the URL to send data to.
• method can be get or post.
2.2 Form Elements
a) <input> Tag
Used for various input types like text, password, checkbox, radio, submit, etc.
Syntax:
<input type="text" name="username" placeholder="Enter your username">
Common Attributes:
Attribute Description
type Type of input (text, password, submit, checkbox, radio, etc.)
name Name of input, sent as key-value pair
value Initial value or label (for submit buttons)
placeholder Hint text shown inside input field
checked For checkboxes/radios, marks them selected by default
disabled Disables the input field
b) <textarea> Tag
Multi-line text input area.
Syntax:
<textarea name="comments" rows="5" cols="30" placeholder="Enter your
comments"></textarea>
Attributes:
Attribute Description
name Name of textarea
rows Number of visible text lines
cols Width of textarea (characters)
placeholder Hint text
maxlength Max number of characters
readonly Prevents editing
c) <select> Tag
Creates a drop-down list.
Syntax:
<select name="country">
<option value="india">India</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
</select>
d) <option> Tag
Defines each option inside <select> or list boxes.
Attributes:
Attribute Description
value Value sent when option is selected
selected Pre-selects this option
disabled Disables this option
3. Complete Example Combining Frames and Forms
<!-- [Link] -->
<!DOCTYPE html>
<html>
<head><title>Frameset Example</title></head>
<frameset cols="25%,75%">
<frame src="[Link]" name="menuFrame">
<frame src="[Link]" name="contentFrame">
</frameset>
<noframes>
<body>
Your browser does not support frames. Please visit <a
href="[Link]">this page</a>.
</body>
</noframes>
</html>
html
CopyEdit
<!-- [Link] -->
<!DOCTYPE html>
<html>
<body>
<a href="[Link]" target="contentFrame">Go to Form</a><br>
<a href="[Link]" target="contentFrame">Other Page</a>
</body>
</html>
html
CopyEdit
<!-- [Link] -->
<!DOCTYPE html>
<html>
<body>
<form action="/[Link]" method="post">
Username: <input type="text" name="username" placeholder="Enter
username"><br><br>
Password: <input type="password" name="password"><br><br>
Gender:
<input type="radio" name="gender" value="male" checked> Male
<input type="radio" name="gender" value="female"> Female<br><br>
Hobbies:
<input type="checkbox" name="hobby" value="reading"> Reading
<input type="checkbox" name="hobby" value="traveling" checked>
Traveling<br><br>
Comments:<br>
<textarea name="comments" rows="4" cols="40" placeholder="Enter your
comments here"></textarea><br><br>
Country:
<select name="country">
<option value="india" selected>India</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
</select><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
