Project – 7
QUESTIONS
[Link]
<!DOCTYPE html>
<html>
<head>
<title>INTERESTING FACTS</title>
</head>
<frameset cols="40%,60%">
<frame src="[Link]" name="leftFrame">
<frame src="[Link]" name="rightFrame">
</frameset>
</html>
[Link]
<!DOCTYPE html>
<html>
<head>
<title>State Info</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h2>CHANDIGARH</h2>
<p>
Chandigarh, the capital of Punjab and Haryana, is known as
"The City Beautiful".
Established in 1953, it was designed by architect Le
Corbusier.
The city is divided into well-planned sectors, each with its
own market and amenities.
Attractions include the Capitol Complex, Open Hand Monument,
Nek Chand’s Rock Garden, Rose Garden, and Sukhna Lake.
Chandigarh is also home to Panjab University and several
museums, making it a hub of education and culture.
It is often ranked among the cleanest and most livable cities
in India.
</p>
<a href="[Link]" target="rightFrame">Pictures</a>
<h2>UTTAR PRADESH</h2>
<p>
<!DOCTYPE html>
<html>
<head>
<title>Uttar Pradesh Pictures</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h3>Uttar Pradesh Highlights</h3>
<div class="image-gallery">
<figure>
<img src="[Link]" alt="Taj Mahal">
<figcaption>Taj Mahal, Agra</figcaption>
</figure>
<figure>
<img src="[Link]" alt="Varanasi Ghats">
<figcaption>Varanasi Ghats</figcaption>
</figure>
<figure>
<img src="[Link]" alt="Temple">
<figcaption>Ancient Temples</figcaption>
</figure>
</div>
</body>
</html>
[Link]
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" href="[Link]">
</head>
<body class="welcome">
<p>Select a state to view pictures.</p>
</body>
</html>
[Link]
/* General page styling */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f9f9f9;
color: #333;
margin: 20px;
line-height: 1.6;
}
.image-gallery figure {
text-align: center;
max-width: 300px;
}
.image-gallery img {
width: 100%;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
figcaption {
margin-top: 8px;
font-size: 14px;
color: #555;
}
Project – 1
QUESTIONS
1. Create a HTML Basic Web page using basic tags and formatting tags. a. Give the title
of the web page, "Success Secrets". b. Set the background colour of the web page to
Orange. c. Choose Font size = 7 for the text 'Success', Font Face - 'Cooper Black' and
Font Color - 'Green'. d. Enter the text on the web page as shown in the picture. e.
Choose the Font size= 5, Font Face- 'Homeward Bound', and Font Color-'Blue' for the
subheadings, such as PLAN, LISTEN, etc. f. Choose the Font size = 4, Font Face-'Lucida
Handwriting', and Font Color-'White' for the text written under the subheadings. g.
Choose the Font size = 4, Font Face- 'Cooper Black', and Font h. Color- 'Green' for the
text "With Best Wishes". i. Select Font size= 5, Font Face "HomewardBound', and Font
Color- 'Red' for the text SPRINGFIELDS TEAM. j. Save the web page by giving the
extension ".html".
<!DOCTYPE html>
<html>
<head>
<title>Success Secrets</title>
</head>
<body bgcolor="orange">
<!-- Main Heading -->
<font face="Cooper Black" size="7" color="green">
Success
</font>
<br><br>
<!-- Subheading PLAN -->
<font face="Homeward Bound" size="5" color="blue">
PLAN
</font><br>
<font face="Lucida Handwriting" size="4" color="white">
Always plan your work before starting.
</font>
<br><br>
<!-- Subheading LISTEN -->
<font face="Homeward Bound" size="5" color="blue">
LISTEN
</font><br>
<font face="Lucida Handwriting" size="4" color="white">
Listen carefully to advice and instructions.
</font>
<br><br>
<!-- Subheading WORK HARD -->
<font face="Homeward Bound" size="5" color="blue">
WORK HARD
</font><br>
<font face="Lucida Handwriting" size="4" color="white">
Put in consistent effort to achieve your goals.
</font>
<br><br>
<!-- Closing message -->
<font face="Cooper Black" size="4" color="green">
With Best Wishes
</font>
<br><br>
<font face="Homeward Bound" size="5" color="red">
SPRINGFIELDS TEAM
</font>
</body>
</html>
</html>
2. Create a web page defining your
interests by using the Ordered and
Unordered list as follows: a. Title
of the page should be "My
Favourite Things". b. Insert any
image of yours in the center. c.
Background colour of the page
should be light blue and text
colour dark blue. d. Font "News
Gothic MT and size 6. e. Add the
bulleted points one after another.
i. My Favourite Hobby • Gardening
• Reading • Trekking ii. My
Favourite Car • Honda City •
Innova • Mercedes iii. My Favourite
Food • Chinese • Indian •
Mongolian
Project-2
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Favourite Things</title>
<style>
body {
font-family: News Gothic MT, sans-serif;
font-size: 6;
background-color: lightblue;
color: darkblue;
}
ul{
list-style-type: disc;
}
</style>
</head>
<body>
<center>
<img
src="[Link]
ept-of-loneliness-and-disappointment-in-love-sad-man-sitting-element-of-the-picture-
[Link]"
alt="[Link]" width="600" height="400" >
</center>
<ol type="i">
<li>My Favourite Hobby<ul>
<li>Gardening</li>
<li>Reading</li>
<li>Trekking</li>
</ul></li>
<br>
<li> My Favourite Car
<ul>
<li>Honda City</li>
<li>Innova</li>
<li>Mercedes</li>
</ul></li>
<br>
<li> My Favourite Food
<ul>
<li>Chinese</li>
<li>Indian</li>
<li>Mongolian</li>
</ul></li>
</ol>
</body>
</html>
[Link] the HTML code to design the
web page as shown below,
considering the given
specifications.
Specifications:
1. Create a Time-table as shown in
the image using proper tags.
2. Font should be "Verdana" &
background should be yellow.
3. Use proper heading tag & it
should be centre align.
4. Cell padding & cell spacing
should be 5.
5. The width of table border should
be 5. 6. Save it with the name
‘Timetable’.
Project-3
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<table border="5" cellpadding="5" cellspacing="5" font-family="Verdana"
Background-color="yellow">
<tr>
<th colspan="6">Time Table</th>
</tr>
<tr>
<th rowspan="6">hours</th>
<th>mon</th>
<th>tue</th>
<th>wed</th>
<th>thu</th>
<th>fri</th>
</tr>
<tr>
<td>Science</td>
<td>Maths</td>
<td>Hindi</td>
<td>English</td>
<td>Computer</td>
</tr>
<tr>
<td>Social</td>
<td>History</td>
<td>English</td>
<td>Maths</td>
<td>Sports</td>
</tr>
<tr>
<td colspan="5", align="center">Lunch</td>
</tr>
<tr>
<td>Science</td>
<td>Maths</td>
<td>Hindi</td>
<td>Computer</td>
<td rowspan="2">Project</td>
</tr>
<tr>
<td>Social</td>
<td>History</td>
<td>English</td>
<td>Hindi</td>
</table>
</body>
</html>
4. Create the following form in
HTML:
Project-4
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
<style>
body {
background-color: lightgreen;
font-family: Arial,
<label for="resume">Attach Resume:</label>
<input type="file" id="resume" name="resume">
<button class="submit-btn" type="submit">Submit</button>
</form>
</body>
</html>
5. Links in HTML: Write the HTML
code to generate a web page
including interlinked pages. a. The
Title of the page is 'Recycle b. The
Project-5
<!DOCTYPE html>
<html> </style>
<head> </head>
<title>Recycle</title> <body>
<!-- Page Title -->
<!-- Internal CSS for styling the page --> <h1>Recycle</h1>
<style> <!-- Main content with image and links -->
/* Set background color and default font */ <p class="content">
body { <!-- Right-aligned image -->
background-color: LightYellow; <img src="[Link]" alt="Recycle Image"
font-family: 'Arial Black', sans-serif; class="image-right">
} <!-- Subheading -->
<h2>How can we help?</h2>
/* Main heading style */ <!-- Descriptive paragraph -->
h1 {
font-family: Tahoma, sans-serif; <p>
font-size: 36px; /* Approximate size 6 */ Discover how small actions can
color: Blue; lead to big environmental
} changes. Explore
the links below to learn more:
/* Subheading style */ </p>
h2 { <!-- Interlinked pages -->
font-family: Verdana, sans-serif; <ul>
color: Red; <li><a
} href="[Link]">What is
Garbage</a></li>
/* Link colors */ <li><a
a:link { href="[Link]">Meaning of
color: #AAAA00; /* Normal link */ Reduce, Recycle &
} Reuse</a></li>
a:visited { <li><a href="[Link]">Weekly
color: #AA00AA; /* Visited link */ Activities</a></li>
} <li><a href="[Link]">Recycle
a:active { City</a></li>
color: #00AAAA; /* Active link */ <li><a
} href="[Link]
om">Be Our Member</a></li>
/* Image alignment and spacing */ </ul>
.image-right { </p>
float: right; <!-- Horizontal line across the
margin-left: 20px; page -->
width: 250px; <hr>
} </body>
</html>
/* Container to manage layout flow */
.content {
overflow: auto;
}
6. CSS: Write code to design a
web page as shown below,
considering the provided
specifications. Use CSS for
Heading and Paragraph.
Specifications: 1. Create a web
page using external style sheet
with Link element. 2. Heading
should be in uppercase with font
Algerian, alignment center and
colour red. 3. Paragraph should be
in Times New Roman with right
alignment. 4. Insert a video with
Embed tag.
Project-6
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS Web Page</title>
<!-- Link to external CSS file -->
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<!-- Heading styled via external CSS -->
<h1>LIGHT HOUSE</h1>
<!-- Paragraph styled via external CSS -->
<p>
A lighthouse is a tower, building, or other type of structure designed to emit light
from a system of lamps and lenses and to serve as a beacon for navigational aid.
</p>
<!-- Embedded video -->
<embed src="22059-325253411_tiny.mp4"
width="640" height="360" type="video/mp4">
</body>
</html>
CSS
/* Style for heading */
h1 {
font-family: Algerian, serif;
text-align: center;
color: red;
text-transform: uppercase;}
/* Style for paragraph */
p{
font-family: "Times New Roman", serif;
text-align: right;}
/* Style for embedded video */
embed {
display: block;
margin-left: auto;
margin-right: auto;}
8. Design a static website of your
school by including the web pages
as given below: a. Home Page b.
Vision and Mission c. Facilities d.
Academic Calendar e. Extra-
Curricular Activities f. Picture
Gallery
Project-8
Home
<!DOCTYPE html>
<html>
<head>
<title>Springfield School</title>
<!-- Linking external CSS -->
<link rel="stylesheet" href="[Link]">
</head>
<body>
<!-- Main heading -->
<h1>Welcome to Springfield School</h1>
<!-- Navigation menu -->
<div class="nav">
<a href="[Link]">Vision & Mission</a>
<a href="[Link]">Facilities</a>
<a href="[Link]">Academic Calendar</a>
<a href="[Link]">Extra-Curricular</a>
<a href="[Link]">Gallery</a>
</div>
<!-- Introductory paragraph -->
<p style="text-align:center"><b>We are committed to nurturing young minds
through academic excellence and holistic development.</b></p>
<h1>About Us</h1>
<p>'Springfields' comprehensively offers education and strives ceaselessly for the
all-round development of the students in a disciplined, systematic and well-planned
academic environment. The school is housed in several blocks of well-appointed
buildings consisting of modern facilities catering to the general well-being of both the
staff and students. The school utilises the benefits of closed-circuit cameras (CCTVs)
and P.A. systems, etc., to always maintain safety. The school is well-equipped with
top-class laboratories and a library-cum-reading room, and meticulous care is given
to extra-curricular activities and sports. The primary emphasis of 'Springfields' is on
excellent academic results and encouragement of sports, and it remains committed to
excellence in all spheres of activity.
</p>
<p>
The academic session starts on the 1st April every year and ends on the 31st March
next year.
</p>
<h1>Founders</h1>
<h2>Mrs. Leela Jetly</h2>
<h3>Founder</h3>
<p>Mrs. Leela Jetly, the visionary founder of Springfield School, has dedicated her
life to fostering an environment of learning and growth. With a passion for education
and a commitment to excellence, she has been instrumental in shaping the school's
ethos and guiding its journey towards becoming a beacon of knowledge and
experiments as per the curriculum. Students are encouraged to perform experiments
related to various chemical reactions, properties of elements and compounds, and
other fundamental concepts in Chemistry to enhance their understanding through
hands-on [Link] lab is an aesthetically designed spacious concrete-and-
tiles structure with a permanent Gas Bank and piped gas for burners and lamps.
The store-room is stocked with top-quality apparatus, chemicals and
reagents. It contains safety features like fire extinguishers, an emergency shower and
exhaust fans and is well-ventilated and well-lit with two exits. The lab facilitates
practical-work for about 40 students at the same time.
</p>
</li>
<li><b>Physics Lab</b>
<p>
The Physics lab is well-lit, well-ventilated and spacious,with every
possible apparatus and gadget which is necessary for practical-work. The students
are made to perform experiments related to light, magnetism, heat, general properties,
electricity, etc. repeatedly so that the fundamentals of Physics are clear to them. In
order to facilitate this, the school has made available more than sufficient instruments
and apparatus.
</p>
</li>
<li><b>Biology Lab</b>
<p>
The Biology lab is designed to provide students with a comprehensive
understanding of biological concepts through practical experiments. It is equipped
with microscopes, specimen slides, dissection kits, and other essential tools that
allow students to explore the intricacies of plant and animal biology. The lab
environment encourages curiosity and hands-on learning, enabling students to
conduct experiments that reinforce their theoretical knowledge.
It is the lab which opens a window to the world of animal and plant life and
its phenomena. The Biology lab has a collection of beautiful charts and exotic
specimens from the world of animal and plant life, which introduces the students to
the biological and environmental mysteries of our [Link] lab has adequate
arrangements for running water and sinks, practical-work tables and stools, a
teacher's demonstration-table, microscopes, etc. to facilitate simultaneous working
by several groups of students.
</p>
</li>
</ol>
<li><b>Computer Science Lab</b>
<p>
The Computer Science lab is equipped with the latest computers, high-
speed internet connectivity, and essential software applications to support the
curriculum. Students have access to a variety of programming tools and resources
that enable them to learn coding, software development, and other computer science
concepts effectively. The lab is designed to foster creativity and innovation, allowing
students to work on projects and collaborate on assignments in a tech-savvy
environment.
The magic and mystery of computers cannot be broken down to basics
and fundamentals through theoretical teaching alone. Practical exposure to and
operation of a computer and its various peripherals is a must to grasp and
tournaments. Both the Boys' and Girls' teams of 'Springfields' regularly represent the
school at these tournaments.
It encourages students to take up Yoga at an early age to inculcate good Indian
values from the beginning and also for their overall well-being. The school takes a lot
of pride in encouraging Yoga and many children have joined the Yoga activities and
have won many awards at various levels.
Judo is widely popular too. Each year many students enrol for practicing Judo and go
on to represent the school in many competitions.
It offers two Table Tennis arenas to interested students for regular practice everyday.
'It' has two Squash courts for students interested in the sport. Daily practice is
conducted under the supervision of a Squash coach.
It has a lush-green playground for children to run around and Football is played on a
regular basis.</p>
</li>
</ul>
</body>
</html>
Activities
<!DOCTYPE html>
<html>
<head>
<title>Extra-Curricular Activities</title>
<link rel="stylesheet" href="[Link]">
</head>
<body >
<h1>Extra-Curricular Activities</h1>
<!-- Activities list -->
<ul>
<li>Debate and Drama Club</li>
<li>Science Fair</li>
<li>Sports Day</li>
<li>Art Exhibition</li>
<li>Music and Dance Performances</li>
</ul>
</body>
</html>
Calendar
<!DOCTYPE html>
<html>
<head>
<title>Academic Calendar</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>Academic Calendar 2025–26</h1>
<!-- Calendar table -->
<table>
<tr><th>Month</th><th>Event</th></tr>
<tr><td>April</td><td>New Session Begins</td></tr>
<tr><td>August</td><td>Mid-Term Exams</td></tr>
<tr><td>December</td><td>Winter Break</td></tr>
<tr><td>March</td><td>Final Exams</td></tr>
</table>
</body>
</html>
Gallery
<!DOCTYPE html>
<html>
<head>
<title>Picture Gallery</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>School Gallery</h1>
<!-- Displaying images -->
<img src="1742812262l_function2024_12.jpg" alt="Annual Day" width="300">
<img src="1742801318dance2024_3.jpg" alt="Folk Dance Competition"
width="300">
<img src="1742798983nton_competition_3.jpg" alt="Badminton Competition"
width="300">
<img src="1742627030endence2024_4.jpg" alt="Independence Day Celebration"
width="300">
<img src="1742551638lic2024_5.jpg" alt="Republic Day Celebration" width="300">
</body>
</html>
[Link]
/* ========== GLOBAL STYLES ========== */
body {
font-family: 'Segoe UI', Tahoma, sans-serif;
background: linear-gradient(to right, #f0f8ff, #e6f2ff); /* Soft gradient background */
margin: 0;
padding: 20px;
color: #333;}
/* ========== HEADER STYLES ========== */
h1 {
font-family: 'Georgia', serif;
font-size: 36px;
text-align: center;
color: #003366;
margin-bottom: 10px;
border-top: 1px solid #ccc;}
Vision
<!DOCTYPE html>
<html>
<head>
<title>Vision & Mission</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>Our Vision & Mission</h1>
<!-- Vision statement -->
<h2>Vision</h2>
<p>To empower students to become responsible global citizens through quality
education.</p>
<p>We provide a balanced platform to them so that they are able to express their
talent, skills, knowledge and emotions. We give them opportunities to explore their
environment and interests with the help of a variety of extra-curricular activities and
sports facilities.
</p>
<p>We want them to grow up holistically in order to become happy, contented,
focussed and successful human beings in their lives and careers.
</p>
<p>We envision Springfield School as a nurturing ground where students are
inspired to achieve academic excellence while developing strong ethical values,
creativity, and leadership skills.</p>
<!-- Mission statement -->
<h2>Mission</h2>
<ul>
<li>Promote academic excellence</li>
<li>Encourage creativity and innovation</li>
<li>Foster ethical values and leadership</li>
</ul>
<p>At Springfield School, we are dedicated to creating a nurturing environment that
inspires students to reach their full potential and make meaningful contributions to
society.</p>
<p>We strive to give children a happy and a balanced environment by encouraging
expression, exploration and curiosity. We hope to inculcate in them good values,
kindness and discipline so that they are inspired to be not just academically strong
but also develop sufficiently to become ethical citizens of this country. We try to train
them to be great leaders and lifetime learners.
</p>
<p>We are committed to providing quality education through a well-rounded
curriculum, experienced faculty, and state-of-the-art facilities that cater to the diverse
needs of our students.</p>
<p>We aim to foster a collaborative community involving students, parents, and
educators to support the holistic development of every child.</p>
</body>
</html>
9. Create a Blog on the
following topics: a. Virus b.
Malware c. Span d. Antivirus
vProject-9
<!DOCTYPE html>
<head>
<title>Cybersecurity Blog</title>
<!-- Link to external CSS -->
<link rel="stylesheet" href="[Link]">
</head>
<body>
<!-- Main heading -->
<h1>Cybersecurity Awareness Blog</h1>
<p>Welcome to our blog where we discuss important topics related to
cybersecurity. Stay informed and protect
yourself online!</p>
<!-- Blog section: Virus -->
<section>
<h2>Virus</h2>
<p>
A computer virus is a malicious program designed to replicate itself and
spread from one system to another.
It often attaches to legitimate files and can corrupt data, slow down
performance, or even render systems
unusable.
</p>
</section>
<!-- Blog section: Malware -->
<section>
<h2>Malware</h2>
<p>
Malware stands for “malicious software” and includes viruses, worms,
trojans,
ransomware, and spyware. These
programs are designed to infiltrate, damage, or steal information from
computer systems.
</p>
</section>
<!-- Blog section: Spam -->
<section>
<h2>Spam</h2>
<p>
programs. It scans files and
monitors system activity to protect users from threats and ensure safe
computing.
</p>
</section>
<!-- Footer -->
<footer>
<p>© 2025 Springfield School Blog. All rights reserved. </p>
</footer>
</body>
</html>
10. Create a website discussing
"Plagiarism". List some reported
cases of plagiarism and
consequent punishment meted
out. Make an appealing and
attractive website by including
appropriate elements and
attribute.
Project-10
HTML
<!DOCTYPE html>
<head>
<title>Understanding Plagiarism</title>
<!-- Link to external CSS -->
<link rel="stylesheet" href="[Link]">
</head>
<body>
<!-- Main heading -->
<h1>Understanding Plagiarism</h1>
<!-- Introduction section -->
<section>
<h2>What is Plagiarism?</h2>
<p>
Plagiarism is the act of using someone else's work, ideas, or expressions
without proper acknowledgment. It violates academic integrity and intellectual
property rights, and can lead to serious consequences in education, publishing, and
professional fields.
</p>
</section>
<!-- Real-world cases section -->
<section>
<h2>Reported Cases & Consequences</h2>
<ul>
<li><strong>Case: Melania Trump’s 2016 RNC Speech</strong><br>
Parts of her speech were found to be nearly identical to Michelle Obama’s
2008 speech. The incident drew widespread criticism and led to public
embarrassment.
</li>
<li><strong>Case: German Defense Minister Karl-Theodor zu
Guttenberg</strong><br>
Resigned in 2011 after it was revealed that large portions of his doctoral
thesis were plagiarized.
</li>
<li><strong>Case: Indian Academics</strong><br>
Several professors and researchers faced suspension or blacklisting after
journals retracted plagiarized papers.
</li>
<li><strong>Case: Music Industry Lawsuits</strong><br>
Artists like Robin Thicke and Pharrell Williams were fined millions for
copying elements of Marvin Gaye’s work in “Blurred Lines”.
/ul> CSS
</section> body {
<!-- Prevention tips section --> font-family: 'Segoe UI', Tahoma, sans-serif;
<section> background: linear-gradient(to right, #fdfdfd, #eef7ff);
<h2>How to Avoid Plagiarism</h2> margin: 0;
<ol> padding: 20px;
<li>Always cite your sources using proper formats color: #333;
(APA, MLA, etc.).</li> }
<li>Use plagiarism detection tools before h1 {
submission.</li> font-family: 'Georgia', serif;
<li>Paraphrase ideas in your own words and give font-size: 36px;
credit.</li> text-align: center;
<li>Maintain detailed notes during research to color: #990000;
track sources.</li> margin-bottom: 20px;
</ol> border-bottom: 2px solid #990000;
</section> padding-bottom: 10px;
<!-- Footer --> }
<footer> h2 {
<p>© 2025 Springfield School | Academic font-size: 28px;
Integrity Matters</p> color: #003366;
</footer> margin-top: 30px;
</body> border-left: 5px solid #003366;
padding-left: 10px;
}