Scribd
Upload
2 views11 pages

C) Write HTML Code For Creating A Table. Also Explain Table Element With Its Attributes

The document provides examples and explanations of various HTML elements including tables, framesets, meta tags, CSS, and Bootstrap. It covers the use of <pre> and <sup> tags, character encoding, and the <img> tag for displaying images. Additionally, it highlights the importance of CSS for web design and the benefits of using Bootstrap for responsive web development.

Uploaded by

jigarbatli7
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views11 pages

C) Write HTML Code For Creating A Table. Also Explain Table Element With Its Attributes

The document provides examples and explanations of various HTML elements including tables, framesets, meta tags, CSS, and Bootstrap. It covers the use of <pre> and <sup> tags, character encoding, and the <img> tag for displaying images. Additionally, it highlights the importance of CSS for web design and the benefits of using Bootstrap for responsive web development.

Uploaded by

jigarbatli7
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

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="page1.html">

<frame src="page2.html">

</frameset>
</html>

What this does:

• Divides the screen into 2 vertical parts (50% + 50%)

• Left frame shows page1.html

• Right frame shows page2.html

Example: Divide screen top and bottom

<!DOCTYPE html>

<html>

<frameset rows="30%,70%">

<frame src="header.html">

<frame src="content.html">

</frameset>

</html>

What this does:

• Divides the screen into 2 horizontal parts

• Top 30% shows header.html

• Bottom 70% shows content.html

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 10:00:00 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="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

</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="flower.jpg" 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.

You might also like