c) Write HTML code for creating a table.
Also
explain table element with its attributes.
<!DOCTYPE html>
<html>
<head>
<title>Simple Table</title>
</head>
<body>
<h2>Student Marks Table</h2>
<table border="1">
<tr>
<th>Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td>John</td>
<td>Math</td>
<td>90</td>
</tr>
<tr>
<td>Emma</td>
<td>Science</td>
<td>85</td>
</tr>
</table>
</body>
</html>
Explain frameset and frame tag with
proper example.
What is <frameset> in HTML?
• <frameset> is used to divide the browser window into multiple sections (frames).
• Each frame can show a different HTML page.
• It was used before in old websites, but now it's not used in modern HTML5
(it's outdated).
What is <frame>?
• <frame> is used inside <frameset>
• It loads a webpage in each section created by <frameset>
Example: Show 2 web pages side by side (left and right)
<!DOCTYPE html>
<html>
<frameset cols="50%,50%">
<frame src="[Link]">
<frame src="[Link]">
</frameset>
</html>
What this does:
• Divides the screen into 2 vertical parts (50% + 50%)
• Left frame shows [Link]
• Right frame shows [Link]
Example: Divide screen top and bottom
<!DOCTYPE html>
<html>
<frameset rows="30%,70%">
<frame src="[Link]">
<frame src="[Link]">
</frameset>
</html>
What this does:
• Divides the screen into 2 horizontal parts
• Top 30% shows [Link]
• Bottom 70% shows [Link]
Summary:
Tag Meaning
<frameset> Divides the window into frames
Loads different pages in each
<frame>
frame
Tag Meaning
(i) Write any two meta tag syntax to implement different features
in HTML.
What is <meta> tag?
• <meta> gives extra info about your webpage.
• It goes inside the <head> tag.
• It does not show anything on the webpage.
• Helps browsers, search engines, and devices understand the page.
Useful <meta> tag syntaxes with features:
1. Set character encoding
<meta charset="UTF-8">
Allows your webpage to show all types of characters (like English, Hindi, symbols, etc.)
2. Auto-refresh the page
<meta http-equiv="refresh" content="10">
This will reload the page every 10 seconds
3. Mobile responsive layout
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Makes your website fit properly on phones and tablets
4. Set description for search engines
<meta name="description" content="This is a website about travel
tips."> Shows this text in Google search results
5. Set keywords for SEO
<meta name="keywords" content="HTML, CSS, Web Design, Tutorial">
Helps search engines understand what your page is about
Where do we write meta tags?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0"> <meta name="description" content="Learn HTML basics">
<title>My Web Page</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Q.3 (b) What do you mean by meta tags? How can following be achieved using
metadata? a) Stop page from being listed b) Set expiration date c) Stop
browser from caching page ?
a) Stop page from being listed in search engines
Use this meta tag:
<meta name="robots" content="noindex">
Tells Google and other search engines NOT to show this page in search results.
b) Set expiration date for the web page
Use this meta tag:
<meta http-equiv="expires" content="Tue, 10 May 2025 [Link] GMT"> Tells
the browser that this page should not be used after this date/time.
c) Stop browser from caching (saving) the page
Use this meta tag:
<meta http-equiv="cache-control" content="no-cache">
Tells the browser not to save the page, so it always loads fresh content.
What is the Importance of CSS?
CSS (Cascading Style Sheets) is important because it controls how a web page looks.
Without CSS:
• The web page looks plain and boring.
• Only text and structure from HTML is visible.
With CSS:
• You can change colors, fonts, sizes, spacing, layout, and more.
• Makes websites look beautiful, clean, and user-friendly.
Why CSS is Important:
1. Makes websites attractive
→ You can style text, backgrounds, buttons, etc.
2. Saves time
→ One CSS file can style many HTML pages.
3. Improves user experience
→ Layout and design become easy to use and read.
4. Keeps design separate from content
→ HTML is for structure, CSS is for design.
5. Responsive design
→ CSS helps your site work well on phones, tablets, and desktops
(ii) Why We Use Bootstrap?
Bootstrap is a free tool (framework) that helps you:
Make websites that are:
• Responsive (work on mobile, tablet, and desktop)
• Quick to build (ready-made code for layout, buttons, forms, etc.)
• Nice looking (modern design with clean styles)
Benefits of Bootstrap:
1. Mobile-friendly design (automatically adjusts to screen size)
2. Grid system for easy layout
3. Built-in styles for buttons, forms, tables, etc.
4. Saves time – no need to write full CSS from scratch
Basic Structure of Bootstrap Grid:
Bootstrap uses a 12-column grid system.
You divide the screen into parts using col- classes inside rows.
Basic HTML Code Example:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Grid</title>
<!-- Add Bootstrap CSS link -->
<link rel="stylesheet"
href="[Link]
</head>
<body>
<div class="container">
<div class="row">
<div class="col-4" style="background-color: lightblue;">Column 1 (4 parts)</div>
<div class="col-4" style="background-color: lightgreen;">Column 2 (4 parts)</div>
<div class="col-4" style="background-color: lightcoral;">Column 3 (4
parts)</div> </div>
</div>
</body>
</html>
Explain following with example: <pre> tag, <sup> tag,
character encoding in HTML.
1. <pre> tag
What it does:
• The <pre> tag shows preformatted text.
• It keeps the spaces, tabs, and line breaks exactly as you type them.
Example:
<pre>
This is text
with spaces
and new lines.
</pre>
Output:
This is text
with spaces
and new lines.
Useful for showing code, poems, or formatted text.
2. <sup> tag
What it does:
• The <sup> tag makes superscript text (text goes above the line).
• Used in math formulas, footnotes, etc.
Example:
<p>Area = a<sup>2</sup></p>
Output:
Area = a²
2 is in superscript form.
3. Character Encoding in HTML
What it is:
• Character encoding tells the browser how to read text characters.
• It helps show symbols, special letters, emojis, etc.
Common encoding:
html
CopyEdit
<meta charset="UTF-8">
This is written inside <head> and supports almost all languages and symbols.
Example:
html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Character Encoding</title>
</head>
<body>
<p>Smile: </p>
<p>Rupee: ₹</p>
</body>
</html>
Without correct encoding, these might show as weird boxes or question marks
(�)
1. <img> Tag
• The <img> tag is used to display images on a web page.
• It is a self-closing tag (does not need a closing tag).
• You must use the src attribute (image path) and alt (alternative text).
Example:
html
CopyEdit
<img src="[Link]" alt="A beautiful flower" width="300" height="200">
• src = image file name or URL
• alt = text shown if image doesn't load
• width and height = size of image
2. HTML to show each letter of "RAINBOW" in different color:
<span style="color: red;">R</span>
<span style="color: orange;">A</span>
<span style="color: yellow;">I</span>
<span style="color: green;">N</span>
<span style="color: blue;">B</span>
<span style="color: indigo;">O</span>
<span style="color: violet;">W</span>
This shows each letter in a different rainbow color.