Scribd
Upload
16 views

CLASS 10 Lab Activity

Class 10 lab activity by Brilliantians .

Uploaded by

chandanabaishya649
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
16 views

CLASS 10 Lab Activity

Class 10 lab activity by Brilliantians .

Uploaded by

chandanabaishya649
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

Chapter 2 (Lab Activity)

1. Create a web page that serves as an invitation card to your birthday party. Use all the HTML tags along
with CSS properties you have learnt to make it attractive and lively.
Ans. Coding:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Birthday Party Invitation</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #FCE4D6;
text-align: center;
margin: 0;
padding: 0;
}
#header {
background-color: #FF6F61;
color: #FFF;
padding: 20px;
}
h1 {
font-size: 36px;
text-transform: uppercase;
}
#content {
padding: 20px;
}
p{
font-size: 18px;
color: #333;
line-height: 1.5;
}
.invitation {
background-color: #FFF;
border: 1px solid #FF6F61;
border-radius: 10px;
padding: 20px;
margin: 20px;
display: inline-block;
width: 80%;
max-width: 500px;
}
.details {
font-weight: bold;
text-decoration: underline;
color: #FF6F61;
}
.note {
font-style: italic;
}
#footer {
background-color: #FF6F61;
color: #FFF;
padding: 10px;
}
</style>
</head>
<body>
<div id="header">
<h1>Birthday Party Invitation</h1>
</div>
<div id="content">
<div class="invitation">
<p><span class="details">You're Invited!</span></p>
<p>Join us for a fun-filled birthday celebration!</p>
<p><span class="details">Date:</span> Saturday, October 15th</p>
<p><span class="details">Time:</span> 3:00 PM - 6:00 PM</p>
<p><span class="details">Location:</span> Dev Library Office Silapathar, Assam</p>
<p>We'll have games, music, delicious cake, and lots of fun! Don't forget to bring your
enthusiasm.</p>
<p class="note">Please RSVP by October 5th. We hope to see you there!</p>
</div>
</div>
<div id="footer">

<p>&copy; 2023 Dev Library</p>


</div>
</body>
</html>
2. Create a web page to show a list of various colours and their Hex codes (Hexadecimal numerals are
widely used by computer system designers and programmers because they provide a human – friendly
representation of binary – coded values). Also provide image for colours you mention in your code.

Ans. Code:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

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

<title>Color Codes</title>

<style>
body {

font-family: Arial, sans-serif;

text-align: center;

.color {

display: inline-block;

margin: 20px;

</style>

</head>

<body>

<div class="color">

<div style="background-color: #FF5733; width: 100px; height: 100px;"></div>

<p>Color: Red</p>

<p>Hex Code: #FF5733</p>

</div>

<div class="color">

<div style="background-color: #33FF57; width: 100px; height: 100px;"></div>

<p>Color: Green</p>

<p>Hex Code: #33FF57</p>

</div>

<div class="color">

<div style="background-color: #3344FF; width: 100px; height: 100px;"></div>

<p>Color: Blue</p>

<p>Hex Code: #3344FF</p>

</div>

</body>

</html>
3. Create an HTML document on the topic HTML list and HTML Tables. The web page should contain
two frames wherein in one frame will HTML List and in other HTML Tables.

Ans. Code:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

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

<title>HTML Lists and Tables</title>

<style>

body {

font-family: Arial, sans-serif;

.section {

float: left;

width: 50%;

padding: 20px;

</style>

</head>

<body>

<h1>HTML Lists and Tables</h1>

<div class="section">

<h2>HTML Lists</h2>

<ul>

<li>Unordered List Item 1</li>

<li>Unordered List Item 2</li>

<li>Unordered List Item 3</li>

</ul>
<ol>

<li>Ordered List Item 1</li>

<li>Ordered List Item 2</li>

<li>Ordered List Item 3</li>

</ol>

</div>

<div class="section">

<h2>HTML Tables</h2>

<table border="1">

<tr>

<th>Header 1</th>

<th>Header 2</th>

</tr>

<tr>

<td>Row 1, Cell 1</td>

<td>Row 1, Cell 2</td>

</tr>

<tr>

<td>Row 2, Cell 1</td>

<td>Row 2, Cell 2</td>

</tr>

</table>

</div>

</body>

</html>
4. Create a web page to form a tabular representation of different mobile names with their features.

Ans. Code:

<!DOCTYPE html>

<html>
<head>

<meta charset="UTF-8">

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

<title>Mobile Phones</title>

<style>

table {

border-collapse: collapse;

width: 80%;

margin: 20px auto;

th, td {

border: 1px solid #333;

padding: 10px;

text-align: left;

th {

background-color: #333;

color: #FFF;

</style>

</head>

<body>

<h1>Mobile Phones and Features</h1>

<table>

<tr>

<th>Mobile Name</th>

<th>Operating System</th>

<th>Camera</th>

<th>Storage</th>
</tr>

<tr>

<td>iPhone 16</td>

<td>iOS</td>

<td>24 MP dual-camera</td>

<td>128GB</td>

</tr>

<tr>

<td>Samsung Galaxy S24</td>

<td>Android</td>

<td>108 MP triple-camera</td>

<td>256GB</td>

</tr>

<tr>

<td>Google Pixel 7</td>

<td>Android</td>

<td>50 MP dual-camera</td>

<td>128GB</td>

</tr>

</table>

</body>

</html>
5. Create a web page to show a list of various colours and their Hex codes (Hexadecimal numerals are
widely used by computer system designers and programmers because they provide a human – friendly
representation of binary – coded values). Also provide image for colours you mention in your code.

Ans. Code:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Color Codes</title>

<style>

body {

font-family: Arial, sans-serif;

text-align: center;

.color {

display: inline-block;

margin: 20px;

</style>

</head>

<body>

<div class="color">

<div style="background-color: #FF5733; width: 100px; height: 100px;"></div>

<p>Color: Red</p>

<p>Hex Code: #FF5733</p>

</div>

<div class="color">

<div style="background-color: #33FF57; width: 100px; height: 100px;"></div>

<p>Color: Green</p>

<p>Hex Code: #33FF57</p>

</div>

<div class="color">

<div style="background-color: #3344FF; width: 100px; height: 100px;"></div>

<p>Color: Blue</p>

<p>Hex Code: #3344FF</p>


</div>

</body>

</html>
6. Create a web page that serves as an invitation card to your birthday party. Use all the HTML tags along
with CSS properties you have learnt to make it attractive and lively.

Ans. Coding:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Birthday Party Invitation</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #FCE4D6;

text-align: center;

margin: 0;

padding: 0;

#header {

background-color: #FF6F61;

color: #FFF;

padding: 20px;

h1 {

font-size: 36px;

text-transform: uppercase;

#content {
padding: 20px;

p{

font-size: 18px;

color: #333;

line-height: 1.5;

.invitation {

background-color: #FFF;

border: 1px solid #FF6F61;

border-radius: 10px;

padding: 20px;

margin: 20px;

display: inline-block;

width: 80%;

max-width: 500px;

.details {

font-weight: bold;

text-decoration: underline;

color: #FF6F61;

.note {

font-style: italic;

#footer {

background-color: #FF6F61;

color: #FFF;
padding: 10px;

</style>

</head>

<body>

<div id="header">

<h1>Birthday Party Invitation</h1>

</div>

<div id="content">

<div class="invitation">

<p><span class="details">You're Invited!</span></p>

<p>Join us for a fun-filled birthday celebration!</p>

<p><span class="details">Date:</span> Saturday, October 15th</p>

<p><span class="details">Time:</span> 3:00 PM - 6:00 PM</p>

<p><span class="details">Location:</span> Dev Library Office Silapathar, Assam</p>

<p>We'll have games, music, delicious cake, and lots of fun! Don't forget to bring your
enthusiasm.</p>

<p class="note">Please RSVP by October 5th. We hope to see you there!</p>

</div>

</div>

<div id="footer">

<p>&copy; 2023 Dev Library</p>

</div>

</body>

</html>

7. Create a web page that serves as a guide for the mathematical formulas using HTML tags along with
CSS properties.

Ans. Coding:

<!DOCTYPE html>

<html lang="en">
<head>

<meta charset="UTF-8">

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

<title>Math Formulas Guide</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #E3F2FD;

text-align: center;

.formula {

background-color: #FFF;

border: 1px solid #2196F3;

border-radius: 10px;

padding: 20px;

margin: 20px auto;

max-width: 500px;

</style>

</head>

<body>

<h1>Math Formulas Guide</h1>

<div class="formula">

<p><strong>Pythagorean Theorem:</strong></p>

<p>a² + b² = c²</p>

<p>In a right triangle, the square of the hypotenuse (the side opposite the right angle) is equal to the
sum of the squares of the other two sides.</p>

</div>

<div class="formula">
<p><strong>Quadratic Formula:</strong></p>

<p>x = (-b ± √(b² - 4ac)) / (2a)</p>

<p>Solves quadratic equations of the form: ax² + bx + c = 0</p>

</div>

</body>

</html>

You might also like