Scribd
Upload
0 views

Practical File Final

The document is a project file on HTML submitted by Arzoo, a BBA 3rd Year student. It includes an introduction to HTML, various programs demonstrating basic HTML tags, webpage designs, lists, color effects, tables, and family information. Each section provides code examples and descriptions of the output, showcasing the fundamental aspects of HTML for web development.

Uploaded by

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

Practical File Final

The document is a project file on HTML submitted by Arzoo, a BBA 3rd Year student. It includes an introduction to HTML, various programs demonstrating basic HTML tags, webpage designs, lists, color effects, tables, and family information. Each section provides code examples and descriptions of the output, showcasing the fundamental aspects of HTML for web development.

Uploaded by

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

Project File on:- HTML

Submitted To: Submitted By:


Mrs. Pooja Bansal Arzoo
BBA 3rd Year
Roll No.- 12
Index
S No. Program Name Page No. Remarks

1. Introduction to HTML

2. Write a program of Basic Tags


in HTML

3. Write a program to design a


webpage to display your
college.
4. Write a program to design
a webpage using List

5. Write a program to design a


webpage using Color Effects

6. Write a program to show Time Table

7. Write a program to display your


family information with
background and other formatting
8. Write a program to design a
webpage of your favorite
leader
9. Write a program to show the link
of images

10. Write a program to show


frameset tag and frame tag
Introduction to HTML.
HTML, or Hyper Text Markup Language, is the standard
language used to create and design the structure of web
pages. HTML provides a way to structure content using
tags (or elements) that tell the web browser how to
display text, images, links, lists, tables, and other media
on a webpage.

Key Elements of HTML:


1. Tags and Elements: HTML consists of tags like <html>,
<head>, <body>, <h1>, <p>, etc. Each tag serves a specific
purpose. Tags are typically paired (opening and closing,
like <p> and </p> for paragraphs).

2. Attributes: Tags can have attributes that provide


additional information, like href in <a href="URL">
for links or src in <img src="URL"> for images.

3. HTML Document Structure:


- <!DOCTYPE html>: Declares the document
as HTML5.
- <html>: The root element.
- <head>: Contains metadata, title, and links
to stylesheets.
- <body>: Contains the content displayed to the user.
Example of Basic HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My Webpage</h1>
<p>This is a simple paragraph of text.</p>
</body>
</html>
HTML is the foundation of all web pages, working
alongside CSS (for styling) and JavaScript (for interactivity)
to create a full web experience.
Write a program of Basic HTML
(Code)
<!DOCTYPE html>
<html>
<head>
<title>Basic HTML Tags</title>
</head>
<body>
<h1>Welcome to My Page</h1>
<h2>About This Page</h2>
<p>This page demonstrates some basic HTML tags.
<ul>
<li>HTML is a markup language.</li>
<li>It structures content on the web.</li>
</ul>
<p>Thank you for visiting!</p>
</body>
</html>
This will Display
Write a program to design a webpage to
display your college.
(Code)
<!DOCTYPE html>
<html>
<head>
<title>MY COLLEGE</title>
</head>
<body>
<h1 align=center><u>All About My College</u></h1>
<hr>
<h2 align=right>Date: Nov 06,2024</h2>
<hr width=50% size=10>
<p><strong>My College</srtong> is established in 1073,
currently college offers a total of 12 Degrees and 20
Courses<em> are at my college</em>. My subject lecturer is
<b>Mrs.Pooja Bansal</b>.There are 14 students in my
class</p>
<p align=center>Here are some facts about My College</p>
<pre>
Date of Establishment: 1973
Courses 20
Class Rooms 30
Teachers 50
Address :Jhajjar Road,NH 71, Jagdish
Colony, Rohtak, Haryana 124001
</pre>
<hr nonshade>
<p align=cetrer>If you wish to contact, please contact at the
following phone number<blink> 01262-253848 </blink></p>

</body>
</html>
This Will Display:
Write a program to design a web page
using list
In HTML, there are three main types of lists that you can create:
1. Unordered List (<ul>)
- An unordered list displays a list of items without any
specific order. The items are usually marked with bullets (•).
- Each item in the list is defined by the <li> (list item) element.
Syntax:
html
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Example:
html
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li></ul>
</ul>

This will display:


- Apples
- Oranges
- Bananas
2. Ordered List (<ol>)
- An ordered list displays items in a specific
sequence, typically numbered or alphabetized.
- Each list item is defined by the <li> element, just like in
the unordered list.

Syntax:
html
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
Example:
html
<ol>
<li>First step</li>
<li>Second step</li>
<li>Third step</li>
</ol>
This will display:
1. First step
2. Second step
3. Third step

3. Description List (<dl>)


- A description list is used for defining a list of terms and
their descriptions.
- It consists of <dl> (definition list), <dt> (definition
term), and <dd> (definition description).
Syntax:
html
<dl>
<dt>Term 1</dt>
<dd>Description for Term 1</dd>
<dt>Term 2</dt>
<dd>Description for Term 2</dd>
</dl>

Example:
html
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language, used for structuring
web content.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets, used for styling
web pages.</dd>
</dl>
This will display:
- HTML: HyperText Markup Language, used for
structuring web content.
- CSS: Cascading Style Sheets, used for styling web pages.
Write a program to design a web page
using color effects.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Color</title>
</head>
<body bgcolor=lightgray text=red>
Adding colors to webpage could achieve certain visual effects
and make them more attractive.
</body>
</html>
This will display:
Write a program to show Time Table.
In HTML, a table is used to display data in a structured way,
using rows and columns. The main HTML elements involved
in creating a table are <table>, <tr>, <th>, and <td>. Here's a
breakdown of these elements:
Basic Structure of an HTML Table
 <table>: Defines the table itself.
 <tr>: Defines a table row.
 <th>: Defines a table header cell (usually bold
and centered).
 <td>: Defines a table data cell (contains the data).

Example:
<!DOCTYPE html>
<html>
<head>
<title>Time Table</title>
</head>
<body>
<table border="1" Cellpadding="10" cellspacing="0" >
<tr>
<th>Day/Time </th>
<th>I(9-10) </th>
<th>II(10-11) </th>
<th>III(11-12) </th>
<th>IV(12-13) </th>
<th>V(13-14) </th>
</tr>
<tr>
<th>Monday </th>
<td>C.Law (Dr. Renu Jain) R.19 </td>
<td>IBE (Dr. Prativindya) R.18 </td>
<td> </td>
<td>Pro. Mgt (Dr. Nidhi) R.19 </td>
<td>IT (Ms. Monila Jain) R.17 </td>
</tr>
<tr>
<th>Tuesday </th>
<td>C.Law (Dr. Renu Jain) R.19 </td>
<td>IBE (Dr. Prativindya) R.18 </td>
<td> </td>
<td>Pro. Mgt (Dr. Nidhi) R.19 </td>
<td>IT (Ms. Monila Jain) R.17 </td>
</tr>

<tr>
<th>Wednesday </th>
<td>Per.Devel. (Dr. Nidhi) R.19 </td>
<td>IBE (Dr. Prativindya) R.18 </td>
<td> </td>
<td>Cyber Sec. (Dr. Prativindya) R.19 </td>
<td>Pro. Mgt (Dr. Nidhi) R.17 </td>
</tr>
<tr>
<th>Thursday </th>
<td>Per.Devel. (Dr. Nidhi) R.19 </td>
<td>IBE (Dr. Prativindya) R.18 </td>
<td> </td>
<td>Cyber Sec. (Dr. Prativindya) R.19 </td>
<td>Pro. Mgt (Dr. Nidhi) R.17 </td>
</tr>

<tr>
<th>Friday </th>
<td>Per.Devel. (Dr. Nidhi) R.19 </td>
<td> IT Lab (Ms. Pooja Bansal) </td>
<td>C.Law (Dr. Renu Jain) R.18 </td>
<td> </td>
<td>Cyber Sec. (Dr. Renu Jain) R.17 </td>
</tr>
<tr>
<th>Saturday </th>
<td>Per.Devel. (Dr. Nidhi) R.19 </td>
<td> IT Lab (Ms. Pooja Bansal) </td>
<td>C.Law (Dr. Renu Jain) R.18 </td>
<td> </td>
<td>Cyber Sec. (Dr. Renu Jain) R.17 </td>
</tr>
</table>
</body>
</html>
This will display:
Write a program to display your family
information with background and
other formatting.
Syntax:

<!DOCTYPE html>
<html>
<head>
<title>My Family</title>
</head>
<body background="C:\Users\Lenovo\OneDrive\Desktop\
background.j pg">
<h1 align=center>Together We Stand: A Portrait of My Family
</h1>
<hr>
<p>
My family is the foundation of my life, a close-knit and
supportive unit where every member plays a vital role. My
father is a successful businessman, whose hard work and
dedication provide for our family and inspire me daily. My
mother, a nurturing housewife, is the heart of our home—her
love and care create a warm and welcoming environment for all
of us. I am fortunate to have two elder sisters, both of whom are
married and have children. They each have two kids, who bring
immense joy and laughter to our lives. Lastly, I have a younger
brother, full of energy and curiosity, who adds a sense of fun
and mischief to our family dynamic. Together, we share love,
laughter, and a strong bond that makes our family truly special.
</p>
<center>
<img src="C:\Users\Lenovo\OneDrive\Desktop\family.avif">
</center>
</body>
</html>
This will display:
Write a program to design a web page of
our favorite leader.
Syntax:

<!DOCTYPE html>
<html>
<head>
<title>My Family</title>
</head>
<body background="C:\Users\Lenovo\OneDrive\Desktop\
bhagat singh.jpg" height="800" width="1500" text=white>
<h1 align=center>"In the Footsteps of Bhagat Singh: A Leader
Who Inspired Generations"</h1>
<hr>

<p>
Bhagat Singh’s life and legacy continue to resonate deeply, not
just as a revolutionary figure but as a symbol of unwavering
courage, selfless sacrifice, and visionary leadership. His bold
actions, fearless defiance against colonial rule, and commitment
to the cause of India’s freedom inspired an entire generation to
rise against oppression. At just 23 years old, Bhagat Singh
became an icon, showing that age was no barrier to making a
lasting impact. His deep understanding of the socio-political
landscape and his determination to fight for justice transformed
him into a beacon of hope for countless young minds. Even
decades after his martyrdom, his spirit lives on, urging us to
challenge injustice, stand up for the oppressed, and pursue the
greater good with conviction. Following in his footsteps means
not only honoring his sacrifices but also embracing his vision of
a free, equal, and just society—values that continue to inspire
people around the world today.
</p>
</body>
</html>
This will display:
Write a program to show the link of images
Syntax:
<!DOCTYPE html>
<html>
<head>
<title>link</title>
</head>
<body>
<h1 align=center>Images</h1>
<hr>
<h2>Click on the link to open image</h2>
<a href="C:\Users\Lenovo\OneDrive\Desktop\family.avif">C:\
User s\Lenovo\OneDrive\Desktop\family.avif </a> <br>
<a href="C:\Users\Lenovo\OneDrive\Desktop\bhagat
singh.jpg"> Bhagat Singh </a><br>
<a href="C:\Users\Lenovo\OneDrive\Desktop\
background.jpg">Cli ck here to Open </a>
</body>
</html>
This will display:

You might also like