ST.
Xavier’S College
MAITIGHAR, KATHMANDU, NEPAL
Phone: 01-5321365, 01-5344636
Email: [email protected]
ASSIGNMENT NUMBER: 3
“Implementation of HTML and CSS”
Submitted By Submitted To Signature
Name: Aarav Thakur Mr. Jaya Sundar
Roll No: 806 Shilpakar
Class: 11 Department of
Section: H Computer Science (+2)
Submission Date: 3rd March, 2025
Table of Contents
1.Home Page .................................................................................................................................... 3
Code: ............................................................................................................................................ 3
2.CSS Configuration 1 ..................................................................................................................... 5
Code: ............................................................................................................................................ 5
3.CSS Configuration 2 ..................................................................................................................... 8
HTML Code:................................................................................................................................ 8
CSS Code: .................................................................................................................................. 10
Conclusion ..................................................................................................................................... 13
1.Home Page
Code:
<html>
<html lang="en">
<head>
<title>Home Page</title>
</head>
<body>
<button>
<a href="index.html">Click Here To Add CSS 1!</a>
</button>
<button>
<a href="page2.html">Click Here To Add CSS 2!</a>
</button>
<h1>Welcome</h1>
<p>This is a sample webpage created only using HTML.</p>
<p>To add CSS, click the button on the top the page.</p>
<hr />
Favorite Manga:
<ul type="square">
<li>Berserk</li>
<li>Vagabond</li>
<li>The Climber</li>
<li>Homunculus</li>
<li>Blame</li>
</ul>
<hr />
<table border="5">
<tr>
<th>Characters</th>
<th>Rating</th>
</tr>
<tr>
<td>Arlecchino</td>
<td>5</td>
</tr>
<tr>
<td>Neuvillette</td>
<td>5</td>
</tr>
<tr>
<td>Traveller</td>
<td>0</td>
</tr>
</table>
<hr />
<form action="#" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required />
<br /><br />
<label for="password">Password:</label>
<input type="password" id="password" name="password" required />
<br /><br />
<label for="email">Email:</label>
<input type="email" id="email" name="email" required />
<br /><br />
<label for="address">Address:</label>
<input type="text" id="address" name="address" required />
<br /><br />
<label for="anime">Select your favorite anime:</label>
<select id="anime" name="anime">
<option>Select</option>
<option value="vinland_saga">Vinland Saga</option>
<option value="one_piece">One Piece</option>
<option value="monster">Monster</option>
<option value="violet_evergarden">Violet Evergarden</option>
<option value="parasyte">Parasyte</option>
<option value="frieren">Frieren</option>
<option value="fmab">Fullmetal Alchemist: Brotherhood</option>
<option value="steins_gate">Steins;Gate</option>
<option value="hxh">Hunter x Hunter</option>
<option value="bleach">Bleach</option>
</select>
<br /><br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
Figure 1: Output for initial HTML page
2.CSS Configuration 1
Code:
< html>
<html lang="en">
<head>
<title>Home Page Styled</title>
<link rel="stylesheet" href="index.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;
0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=
Sour+Gummy:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet"
/>
<style>
body {
font-family: "Poppins", sans-serif;
background-color: #f4f4f4;
margin: 10px;
}
h1 {
background-color: #555;
border-radius: 50px;
width: 200px;
padding: 4px 4px;
padding-left: 20px;
font-family: "Sour Gummy", sans-serif;
font-size: 2.5em;
color: #deeced;
}
p{
font-family: "Poppins", sans-serif;
font-size: 1.1em;
color: #555;
}
.form {
border: 2px solid rgba(255, 255, 255, 0.5);
padding: 20px;
width: 350px;
margin: 20px;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
border-radius: 10px;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
}
a{
text-decoration: none;
color: white;
}
button {
background-color: #413c3c;
color: white;
padding: 10px 20px;
font-size: 1em;
border: none;
border-radius: 5px;
cursor: pointer;
transition: 0.3s ease-in-out;
}
button:hover {
background-color: #393838;
transform: scale(1.1);
color: #f4f4f4;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<button>
<a href="home.html">Click Here To Remove CSS!</a>
</button>
<button>
<a href="page2.html">Click Here To Switch To CSS 2!</a>
</button>
<h1>Welcome</h1>
<p>This is a sample webpage created using both HTML and internal CSS.</p>
<p>To remove CSS, click the button on the top the page.</p>
<hr />
Favorite Manga:
<ul type="square">
<li>Berserk</li>
<li>Vagabond</li>
<li>The Climber</li>
<li>Homunculus</li>
<li>Blame</li>
</ul>
<hr />
<table border="5">
<tr>
<th>Characters</th>
<th>Rating</th>
</tr>
<tr>
<td>Arlecchino</td>
<td>5</td>
</tr>
<tr>
<td>Neuvillette</td>
<td>5</td>
</tr>
<tr>
<td>Traveller</td>
<td>0</td>
</tr>
</table>
<hr />
<div class="form">
<form action="#" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required />
<br /><br />
<label for="password">Password:</label>
<input type="password" id="password" name="password" required />
<br /><br />
<label for="email">Email:</label>
<input type="email" id="email" name="email" required />
<br /><br />
<label for="address">Address:</label>
<input type="text" id="address" name="address" required />
<br /><br />
<label for="anime">Select your favorite anime:</label>
<select id="anime" name="anime">
<option>Select</option>
<option value="vinland_saga">Vinland Saga</option>
<option value="one_piece">One Piece</option>
<option value="monster">Monster</option>
<option value="violet_evergarden">Violet Evergarden</option>
<option value="parasyte">Parasyte</option>
<option value="frieren">Frieren</option>
<option value="fmab">Fullmetal Alchemist: Brotherhood</option>
<option value="steins_gate">Steins;Gate</option>
<option value="hxh">Hunter x Hunter</option>
<option value="bleach">Bleach</option>
</select>
<br /><br />
<input type="submit" value="Submit" />
</form>
</div>
</body>
</html>
Figure 2: CSS style 1
3.CSS Configuration 2
HTML Code:
< html>
<html lang="en">
<head>
<title>Home Page Styled 2</title>
<link rel="stylesheet" href="index.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;
0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=
Sour+Gummy:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="page2.css" />
</head>
<body>
<div class="container">
<button class="styled-button">
<a href="home.html">Click Here To Remove CSS!</a>
</button>
<button class="styled-button">
<a href="index.html">Click Here To Switch To CSS 1!</a>
</button>
<h1>Welcome</h1>
<p>
This is another sample webpage created using both HTML and external CSS.
</p>
<p>To remove CSS, click the button on the top the page.</p>
<hr />
<h2>Favorite Manga:</h2>
<ul type="square">
<li>Berserk</li>
<li>Vagabond</li>
<li>The Climber</li>
<li>Homunculus</li>
<li>Blame</li>
</ul>
<hr />
<h2>Character Ratings:</h2>
<table>
<tr>
<th>Characters</th>
<th>Rating</th>
</tr>
<tr>
<td>Arlecchino</td>
<td>5</td>
</tr>
<tr>
<td>Neuvillette</td>
<td>5</td>
</tr>
<tr>
<td>Traveller</td>
<td>0</td>
</tr>
</table>
<hr />
<div class="form">
<h2>Sign Up</h2>
<form action="#" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required />
<br /><br />
<label for="password">Password:</label>
<input type="password" id="password" name="password" required />
<br /><br />
<label for="email">Email:</label>
<input type="email" id="email" name="email" required />
<br /><br />
<label for="address">Address:</label>
<input type="text" id="address" name="address" required />
<br /><br />
<label for="anime">Select your favorite anime:</label>
<select id="anime" name="anime">
<option>Select</option>
<option value="vinland_saga">Vinland Saga</option>
<option value="one_piece">One Piece</option>
<option value="monster">Monster</option>
<option value="violet_evergarden">Violet Evergarden</option>
<option value="parasyte">Parasyte</option>
<option value="frieren">Frieren</option>
<option value="fmab">Fullmetal Alchemist: Brotherhood</option>
<option value="steins_gate">Steins;Gate</option>
<option value="hxh">Hunter x Hunter</option>
<option value="bleach">Bleach</option>
</select>
<br /><br />
<input type="submit" value="Submit" class="submit-button" />
</form>
</div>
</div>
</body>
</html>
CSS Code:
/* General Styles */
body {
font-family: "Poppins", sans-serif;
background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
color: #333;
margin: 0;
padding: 20px;
line-height: 1.6;
}
h1 {
font-size: 2.5rem;
color: #2c3e50;
text-align: center;
margin-bottom: 20px;
}
p{
font-size: 1.1rem;
margin-bottom: 20px;
text-align: center;
}
hr {
border: 0;
height: 1px;
background: #ddd;
margin: 20px 0;
}
/* Button Styles */
button {
background: #3498db;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
font-size: 1rem;
cursor: pointer;
transition: background 0.3s ease;
display: block;
margin: 0 auto 20px;
}
button:hover {
background: #2980b9;
}
button a {
color: #fff;
text-decoration: none;
}
/* List Styles */
ul {
list-style-type: square;
padding-left: 20px;
}
ul li {
font-size: 1.1rem;
margin-bottom: 10px;
}
/* Table Styles */
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
table th,
table td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #ddd;
}
table th {
background: #3498db;
color: #fff;
font-weight: 600;
}
/* Form Styles */
.form {
margin-top: 20px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: 500;
color: #2c3e50;
}
input[type="text"],
input[type="password"],
input[type="email"],
select {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 1rem;
margin-bottom: 15px;
box-sizing: border-box;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
select:focus {
border-color: #3498db;
outline: none;
}
input[type="submit"] {
background: #3498db;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
font-size: 1rem;
cursor: pointer;
transition: background 0.3s ease;
width: 100%;
}
input[type="submit"]:hover {
background: #2980b9;
}
Figure 3: CSS style 2
Conclusion
In conclusion, I successfully created a lab report on the implementation of HTML and CSS by
developing an HTML home page along with two additional webpages that shared the same HTML
structure but had different CSS styles and configurations. To enhance user interaction, I
incorporated a button at the top of each page that, when clicked, seamlessly switched between the
webpages, creating the effect of applying different CSS styles on the same page. Through this
project, I gained valuable insights into various HTML tags, CSS properties, and the different types
of CSS, deepening my understanding of web development and styling techniques.
