CREATING A MARKSHEET USING EXCEL AND

A WEBSITE USING HTML & CSS

Submitted by:
BABIT PANDEY
11 B4

Submitted to:
Er. ARUN KHANAL
NEPAL MEGA COLLEGE
BABARMAHAL, KATHMANDU

Co
ntents
Excel:...........................................................................................................................................................1
How I did it..............................................................................................................................................1
Formulae used.........................................................................................................................................2
Website:......................................................................................................................................................4
Home.html...............................................................................................................................................4
About.html..............................................................................................................................................8
Contact.html..........................................................................................................................................10
Style.css.................................................................................................................................................12
 Excel:

How I did it
Creating a standard Marksheet using MS Excel is a straightforward process. Here is how I created mine:

I started by opening Excel and making a spreadsheet called "Marksheet." I wrote the college name and
styled it appropriately using the cell style tool after leaving the first row and merging the second and
third rows. So, in order to provide a space between rows, I merged column in the fourth row. I began
entering my information on the fifth row, such as my name, roll number, class, and section and styled it
appropriately using the cell style tool. Leaving the room between the rows, I started the actual
marksheet from row seven. I entered headings like S/N, Subject, Marks Obtained, Grade, and Remarks.
And I entered the information corresponding to the heading in the next six rows.

 I used the formula "=SUM(H10:I10)" and dragged to fill the whole Total marks column to
calculated the total marks for each subject.
 I used the formula "=(J10/100)*4" and dragged to fill out the entire column to determine the
GPA for each subject.
 I used the formula
"=IF(K10>=3.6,"A+,"IF(K10>=3.2,"A",IF(K10>=2.8,"B+,"IF(K10>=2.4,"B",IF(K10>=2,"C+,"IF(K10>=1.
6,"C",IF(K10>=1.2,"D+")))))))) " to compute the grade for each subject.
 I used the formula "=IF(AND(H10>=30),"Pass ", "Fail")" and dragged to fill out the full column to
obtain the Remarks for each subject.

I used conditional formatting to highlight red in any cells with a failing grade or a mark below 40% of the
overall marks. I also divided divisions for total marks obtained, total GPA, final grade and final result
and I stylized them suitably as well.

 I used the formula "=SUM (J10:J15)" to determine the overall marks I received.
 I used the formula "=SUM (K10:K15)/6" to determine the overall GPA.
 I used the formula "=IF(H18>=3.6,"A+,"IF(H18>=3.2,"A", IF(H18>=2.8,"B+,"IF(H18>=2.4,"B",
IF(H18>=2,"C+,"IF(H18>=1.6,"C", IF(H18>=1.2,"D+"))))))) to determine the final grade.
 I used the formula
"=IF(AND(M10="Pass,"M11="Pass,"M12="Pass,"M13="Pass,"M14="Pass,"M15="Pass"),"Pass",
"Fail")" to determine the result.

Finally, I styled the grade sheet appropriately.

In conclusion, creating a standard mark sheet using MS Excel is a simple process that requires the use of
basic formulas and formatting tools. It helps to organize the data effectively and allows for easy tracking
of the student's academic performance.

1
 Formulae used

 Use the formula "=SUM (CELL1:CELL2)" in the Total Marks column to determine the overall
grade for each topic. Replace "CELL1" and "CELL2" in this formula with the cells containing the
Theoretical and Practical marks for the corresponding subjects.

 Use the formula "=(CELL3/100) *4" in the GPA column to find each subject's GPA. Change
"CELL3" in this calculation to the cell containing the sum of the marks for each subject.

 To calculate the grade for each subject, use the formula "=IF(K10>=3.6,"A+," IF(CELL4>=3.2,"A,"
IF(CELL4>=2.8,"B+," IF(CELL4>=2.4,"B," IF(CELL4>=2,"C+," IF(CELL4>=1.6,"C,"
IF(CELL4>=1.2,"D+")))))))))))))). Replace "CELL4" in this calculation with the cell containing the
GPA for each subject.

 Use the formula "=IF(AND(CELL1>=30),"Pass", "Fail")" to get each subject's Remarks. Change
"CELL1" in this calculation to the CELL that contains the theoretical marks for each subject.

 Apply the formula "=SUM(COL1)" to determine the final marks obtained. Replace "COL" in this
formula with the column that contains the overall marks for each subject.

 Apply the formula "=SUM(COL2)" to determine the overall GPA, where "COL2" is the column
containing the GPAs for each subject.

 Use the formula

"=IF(CELL5>=3.6,"A+,"IF(CELL5>=3.2,"A,"IF(CELL5>=2.8,"B+,"IF(CELL5>=2.4,"B,"IF(CELL5>=2,"C+,"
IF(CELL5>=1.6,"C,"IF(CELL5>=1.2,"D+")")))))))" to determine the final grade, where "CELL5" is
changed with CELL containing the total GPA.

 Use the formula "=AND (CELL6="Pass", CELL7="Pass", CELL8="Pass", CELL10="Pass",

10CELL6="Pass", CELL11="Pass"),"Pass", "Fail")" to determine the outcome, where
"CELL6:CELL11" indicates the remarks column.

2
Figure 1: Marksheet

3
 Website:

Home.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Home</title>

<link rel="stylesheet" href="style.css" />

</head>

<body>

<header>

<!-- Navbar -->

<nav id="nav">

<div class="container">

<h1><a href="#">Mega</a></h1>

<ul>

<li><a href="home.html" class="active">Home</a></li>

<li><a href="about.html">About</a></li>

<li><a href="contact.html">Contact</a></li>

</ul>

</div>

</nav>

<!-- Hero Section Area -->

<div id="hero-section">

<div class="container">

4
 <div class="hero-content">

<img class="img" src="img/home.png" alt="" srcset="" />

<h2>A Simple Website</h2>

<p class="text">

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora,

nam debitis quos voluptates optio suscipit aliquid dolorum

adipisci! Quasi, enim incidunt porro perferendis, reprehenderit

aut beatae magni expedita quod dolorem earum cum. Ipsam nulla

nobis error et! Corporis eius sint quis dignissimos delectus

excepturi laudantium harum, accusantium necessitatibus culpa et.

<div height="20px"></div>

<a href="#" class="btn">Read More</a>

</p>

</div>

</div>

</div>

</header>

<!-- Table & Iframe -->

<div class="container">

<h3 class="title"><span>Table & Iframe</span></h3>

<!-- Iframe -->

<iframe src="https://www.youtube.com/embed/s2TyVQGoCYo" framebroder="0"></iframe>

<!-- Table -->

<table>

<tr class="head">

<th>head1</th>

<th>head2</th>

<th>head3</th>

<th>head4</th>

5
</tr>

<tr class="body">

<td>Data</td>

<td>Data</td>

<td>Data</td>

<td>Data</td>

</tr>

<tr class="body">

<td>Data</td>

<td>Data</td>

<td>Data</td>

<td>Data</td>

</tr>

<tr class="body">

<td>Data</td>

<td>Data</td>
Figure 2: Home Page
<td>Data</td>

<td>Data</td>

</tr>

<tr class="body">

<td>Data</td>

<td>Data</td>

<td>Data</td>

<td>Data</td>

</tr>

<tr class="body">

<td>Data</td>

<td>Data</td>

<td>Data</td>

6
 <td>Data</td>

</tr>

<tr class="body">

<td>Data</td>

<td>Data</td>

<td>Data</td>

<td>Data</td>

</tr>

<tr class="body">

<td>Data</td>

<td>Data</td>

<td>Data</td>

<td>Data</td>

</tr>

</table>

</div>

<!-- Footer -->

<footer id="footer">

<p>

This Page is Design by

<a target="_blank" href="https://babitpandey.me/"> Babit Pandey </a>

&copy 2023

</p>

</footer>

</body>

</html>

7
 About.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>About Us</title>

<link rel="stylesheet" href="style.css" />

</head>

<body>

<!-- Navbar -->

<nav id="nav">

<div class="container">

<h1><a href="#">Mega</a></h1>

<ul>

<li><a href="home.html">Home</a></li>

<li><a href="about.html" class="active">About</a></li>

<li><a href="contact.html">Contact</a></li>

</ul>

</div>

</nav>

<!-- About -->

<div class="container">

<div id="about">

<h3 class="title"><span>About Us</span></h3>

8
 <img class="img" src="img/about.png" alt="" srcset="" />

<p class="text">

Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum rem

voluptate inventore dicta illo distinctio autem voluptatum explicabo

odit aut possimus voluptatibus delectus beatae pariatur sit, eius

debitis reiciendis consequatur. Ducimus recusandae necessitatibus

dolores quasi obcaecati aut quisquam quod ipsa placeat debitis. Labore

maxime nostrum itaque! Quas recusandae ad excepturi molestias officia,

aspernatur nemo? Qui voluptatibus deleniti mollitia ut sapiente.

</p>

<p class="text">

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odit nemo,

nobis porro ipsum esse dolore illum facilis laboriosam perspiciatis.

Voluptates explicabo nam nostrum eum molestiae consequuntur quam

perspiciatis praesentium est non? Labore quas harum, voluptatum veniam

et omnis saepe ipsa ea alias porro odit odio molestiae, aspernatur

deserunt magnam exercitationem nobis possimus dignissimos quos eos

maxime cumque id cum. Non!

</p>

</div>

</div>

</body>

</html>

Figure 3: About Page

9
 Contact.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Contact Us</title>

<link rel="stylesheet" href="style.css" />

</head>

<body>

<!-- Navbar -->

<nav id="nav">

<div class="container">

<h1><a href="#">Mega</a></h1>

<ul>

<li><a href="home.html">Home</a></li>

<li><a href="about.html">About</a></li>

<li><a href="contact.html" class="active">Contact</a></li>

</ul>

</div>

</nav>

<!-- Contact -->

<div class="container">

<div id="contact">

<h3 class="title"><span>Contact Us</span></h3>

<div class="contact-form">

<form>

10
 <div class="form-group">

<label for="name">Name</label>

<input type="text" name="name" />

</div>

<div class="form-group">

<label for="email">Email</label>

<input type="email" name="name" />

</div>

<div class="form-group">

<label for="message">Message</label>

<textarea

name="message"

id="message"

cols="30"

rows="10"

></textarea>

</div>

<button type="button" class="btn">Submit</button>

</form>

</div>

</div>

</div>

</div>

</body>

</html>

Figure 4: Contact page

11
 Style.css

*{ display: inline-block;

margin: 0; padding: 10px 25px;

padding: 0; background: #366ef0;

box-sizing: border-box; border: none;

} cursor: pointer;

body { font-size: 16px;

font-family: sans-serif; border-radius: 03px;

line-height: 1.5em; color: #fff;

background: #ddd; }

} .btn:hover {

a{ background: #4397ea;

color: #fff; border: none;

text-decoration: none; color: #fff;

} }

.container { .title {

max-width: 1110px; border-bottom: 2px solid #f5f5f5;

margin: auto; width: 100%;

} margin-bottom: 20px;

.text { }

font-size: 16px; .title span {

padding: 10px 10px; background: #f5f5f5;

text-align: justify; padding: 10px 22px;

} color: #333;

.img { text-align: center;

float: right; display: inline-block;}

height: 490px;} /* Navbar */

.btn { #nav {

12
 background: #366ef0; height: 600px;

overflow: auto; color: #fff;

} }

#nav h1 { .hero-content {

float: left; padding-top: 150px;

font-size: 30px; color: #333;

padding: 20px; }

} .hero-content .img {

#nav ul { margin: -100px 0 0 20px;

list-style: none; }

float: right;

} .hero-content h2 {

#nav ul li { font-size: 60px;

float: left; line-height: 2em;

} }

#nav ul li a {

display: block; .hero-content p {

padding: 20px; font-size: 20px;

text-align: center; margin-bottom: 20px;

transition: all 0.5s; }

} /* Table */

#nav ul li a:hover, table {

#nav ul li a.active { margin: 25px 0;

background-color: #ddd; font-size: 1em;

opacity: 0.8; min-width: 400px;

color: #366ef0; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);

} }

/* Hero Section */ .head th {

#hero-section { background-color: #009879;

13
 color: #fff; margin-top: -60px;

text-align: left; }

.body:nth-of-type(even) { /* Contact Us */

background-color: #f3f3f3; #contact {

} margin-top: 20px;

.body:last-of-type { }

border-bottom: 2px solid #009879; #contact .form-group {

} margin-bottom: 20px;

table, }

th, .contact-form label {

td { display: block;

border-collapse: collapse; margin-bottom: 5px;

padding: 5px 15px; }

} .contact-form input {

iframe { width: 100%;

float: right; padding: 10px;

min-width: 420px; border: 1px solid #f3f3f3;

height: 280px; }

border: none; #contact textarea {

box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); height: 150px;

} width: 100%;

/* About Section */ }

#about { .contact-form input:focus,

height: 350px; .contact-form textarea:focus {

margin-top: 40px; outline: none;

} border-color: #366ef0;

#about .img { }

/* Footer */

14
#footer {

background: #366ef0;

padding: 20px;

text-align: center;

color: #fff;

#footer p a {

font-weight: bold;

15