Scribd
Upload
2 views

prac1

The document outlines a series of practical exercises for creating and managing various digital tasks, including setting up a Gmail account, creating folders and uploading files to Google Drive, and designing HTML forms for student registration. It also covers data analysis using spreadsheets, generating presentations, and developing web pages with formatting features. Each practice includes specific coding examples and tasks to enhance digital literacy and web development skills.

Uploaded by

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

prac1

The document outlines a series of practical exercises for creating and managing various digital tasks, including setting up a Gmail account, creating folders and uploading files to Google Drive, and designing HTML forms for student registration. It also covers data analysis using spreadsheets, generating presentations, and developing web pages with formatting features. Each practice includes specific coding examples and tasks to enhance digital literacy and web development skills.

Uploaded by

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

prac1. Create a Gmail Account and use its Features like adding contacts.

Compose mail, create and manage labels, filters and signatures

prac2. Create folder name semester_1 in D drive. Add any text and any
photo file (.Jpeg, .png) in that folder. Upload that folder in goggle drive and
manage it.

prac3. Create an online form for registration of students (for any activity)
and download its response.

<html>
<head>
<title>Student Registration Form</title>
</head>
<body>
<h2>Student Registration Form</h2>
<form>
<label for="name">Full Name:</label><br>
<input type="text" id="name" name="student_name" required><br><br>

<label for="email">Email:</label><br>
<input type="email" id="email" name="student_email" required><br><br>

<label for="grade">Grade:</label><br>
<input type="text" id="grade" name="student_grade" required><br><br>

<label for="activity">Activity:</label><br>
<select id="activity" name="student_activity" required>
<option value="sports">Sports</option>
<option value="music">Music</option>
<option value="art">Art</option>
<option value="science">Science</option>
</select><br><br>

<input type="submit" value="Submit">


</form>
</body>
</html>

prac4. Create a text document incorporating different formatting features,


inserting images and tables as per given sample.
<!--prac4:- Create a text document incorporating different formatting features,
inserting images and tables as per given sample-->
<html>
<head>
<title>Sample Formatted Document</title>
</head>
<body>
<h1>Welcome to the Sample Document</h1>

<h2>Introduction</h2>
<p>This document showcases various <strong>HTML formatting
features</strong>. You will see examples of <em>text formatting</em>,
inserting images, and creating tables.</p>

<h2>Text Formatting</h2>
<p>Here are some examples of different text formatting options:</p>
<ul>
<li><strong>Bold Text:</strong> This text is bold.</li>
<li><em>Italic Text:</em> This text is italic.</li>
<li><u>Underlined Text:</u> This text is underlined.</li>
<li><strong><em>Bold and Italic Text:</em></strong> This text is both
bold and italic.</li>
</ul>

<h2>Inserting Images</h2>
<p>You can insert images into your document. Here is an example:</p>
<img src="F:\DIPLOMA\1st Sem\STATIC WEB PAGE
DESIGN\collage.jpg" alt="Sample Image">
<p><em>Figure 1:</em> Prime College logo</p>

<h2>Creating Tables</h2>
<p>Student Information</p>
<table border="1" cellpadding="10" cellspacing="0">
<tr>
<th>Name</th>
<th>Mobile No</th>
<th>Address</th>
</tr>
<tr>
<td>Rohan</td>
<td>8905087426</td>
<td>Surat</td>
</tr>
<tr>
<td>Krishna</td>
<td>991385096</td>
<td>vapi</td>
</tr>
<tr>
<td>Mayur</td>
<td>9989050691</td>
<td>Navsari</td>
</tr>
</table>
</body>
</html>

prac5. Use mail merge feature for sending invitation letters for expert
lectures to 10 industries.

<html>
<head>
<title>Mail Merge Invitation Letters</title>
</head>
<body>
<h1>Invitation Letters for Expert Lectures</h1>

<div id="letters"></div>

<script>
// Data for industries
const industries = [
{ name: "Tech Innovations Ltd", contact: "Mr. hardik", email:
"hardypatel42@gmail.com" },
{ name: "Global Manufacturing Co.", contact: "Ms. Jane Smith", email:
"hardik.patel.hp291@gmail.com" },
{ name: "Green Energy Solutions", contact: "Mr. Alan Green", email:
"alan.green@greenenergy.com" },
{ name: "Digital Futures Inc.", contact: "Ms. Emma Johnson", email:
"emma.johnson@digitalfutures.com" },
{ name: "Automotive Dynamics", contact: "Mr. Robert Brown", email:
"robert.brown@autodynamics.com" },
{ name: "Smart Homes Ltd", contact: "Ms. Emily Davis", email:
"emily.davis@smarthomes.com" },
{ name: "Eco-Friendly Tech", contact: "Mr. George Wilson", email:
"george.wilson@ecotech.com" },
{ name: "NextGen IT Solutions", contact: "Ms. Laura White", email:
"laura.white@nextgenit.com" },
{ name: "Innovative Pharmaceuticals", contact: "Mr. Kevin Harris",
email: "kevin.harris@innovativepharma.com" },
{ name: "Advanced Robotics", contact: "Ms. Sarah Lee", email:
"sarah.lee@advancedrobotics.com" }
];

// Template for the invitation letter


const letterTemplate = `
<div style="border: 1px solid #000; padding: 20px; margin-bottom:
20px;">
<p>Dear {contact},</p>
<p>We are pleased to invite you to an expert lecture series organized
by our institution. Your experience and knowledge in the industry, particularly at
{name}, would be invaluable to our students and faculty.</p>
<p>The lectures are scheduled for the first week of next month, and we
would be honored if you could participate as a speaker.</p>
<p>Please confirm your availability by replying to this email: <a
href="mailto:lectures@ourinstitution.com">lectures@ourinstitution.com</a>.</
p>
<p>Looking forward to your positive response.</p>
<p>Best regards,</p>
<p><strong>Organizing Committee</strong><br>Our Institution</p>
</div>
`;

// Function to generate letters


function generateLetters() {
const lettersContainer = document.getElementById('letters');
industries.forEach(industry => {
let letter = letterTemplate
.replace('{contact}', industry.contact)
.replace('{name}', industry.name);
lettersContainer.innerHTML += letter;
});
}
// Generate the letters on page load
generateLetters();
</script>
</body>
</html>

prac6. Create spreadsheet, Analyze data using formulas and functions and
present it through charts. Also apply a pivot table to analyze data.

<!-- prac:- 6 Create spreadsheet, Analyze data using formulas and functions and
present it through charts. Also apply a pivot table to analyze data -->
<html>
<head>
<title>Simple Data Analysis</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<h1>Simple Data Analysis</h1>

<!-- Basic Data Table -->


<h2>Data Table</h2>
<table border="1" cellpadding="5" cellspacing="0">
<tr>
<th>Student Name</th>
<th>Subject</th>
<th>Score</th>
</tr>
<tr>
<td>Krishna</td>
<td>Math</td>
<td>85</td>
</tr>
<tr>
<td>Smith</td>
<td>Math</td>
<td>90</td>
</tr>
<tr>
<td>Krishna</td>
<td>Science</td>
<td>78</td>
</tr>
<tr>
<td>Smith</td>
<td>Science</td>
<td>92</td>
</tr>
<tr>
<td>Krishna</td>
<td>English</td>
<td>88</td>
</tr>
<tr>
<td>Smith</td>
<td>English</td>
<td>85</td>
</tr>
</table>

<!-- Basic Analysis -->


<h2>Analysis</h2>
<p>Total Math Score: <span id="total-math"></span></p>
<p>Average Science Score: <span id="avg-science"></span></p>

<!-- Simple Chart -->


<h2>Score Distribution (Chart)</h2>
<canvas id="scoreChart" width="400" height="200"></canvas>

<script>
// Data Arrays
const mathScores = [85, 90];
const scienceScores = [78, 92];
const englishScores = [88, 85];

// Total Math Score


const totalMathScore = mathScores.reduce((a, b) => a + b, 0);
document.getElementById('total-math').innerText = totalMathScore;

// Average Science Score


const avgScienceScore = (scienceScores.reduce((a, b) => a + b, 0) /
scienceScores.length).toFixed(2);
document.getElementById('avg-science').innerText = avgScienceScore;

// Generate Chart using Chart.js


const ctx = document.getElementById('scoreChart').getContext('2d');
const scoreChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['krishna', 'Smith'],
datasets: [
{
label: 'Math',
data: mathScores,
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
},
{
label: 'Science',
data: scienceScores,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
},
{
label: 'English',
data: englishScores,
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}
]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
</body>
</html>

prac7. Create a professional presentation incorporating various formatting


features, inserting media and action buttons.
<!DOCTYPE html>
<html>
<head>

<title>Simple Presentation</title>
<style>
.slide { display: none; padding: 20px; text-align: center; }
.active { display: block; }
button { margin: 10px; padding: 10px; cursor: pointer; }
</style>
</head>
<body>

<!-- Slide 1 -->


<div class="slide active" id="slide1">
<h1>Welcome!</h1>
<p>Simple presentation using HTML</p>
<img src="F:\DIPLOMA\1st Sem\STATIC WEB PAGE
DESIGN\coverpage.jpg" alt="Placeholder Image">
<br><button onclick="nextSlide(2)">Next</button>
</div>

<!-- Slide 2 -->


<div class="slide" id="slide2">
<h1>Media Example</h1>
<video width="400" controls>
<source src="F:\DIPLOMA\1st Sem\STATIC WEB PAGE
DESIGN\mov_bbb.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/mov_bbb.mp4"
type="video/mp4">
</video>
<br>
<button onclick="prevSlide(1)">Previous</button>
<button onclick="nextSlide(3)">Next</button>
</div>

<!-- Slide 3 -->


<div class="slide" id="slide3">
<h1>End of Presentation</h1>
<p>Thanks for watching!</p>
<br>
<button onclick="prevSlide(2)">Previous</button>
</div>

<script>
function nextSlide(slideNumber) {
document.querySelector('.slide.active').classList.remove('active');
document.getElementById('slide' + slideNumber).classList.add('active');
}
function prevSlide(slideNumber) {
document.querySelector('.slide.active').classList.remove('active');
document.getElementById('slide' + slideNumber).classList.add('active');
}
</script>

</body>
</html>

prac8. Develop HTML/Web page using various formatting tags as per given
sample.

<html>
<head>
<title>Sample HTML Page</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
h1 {
color: #333;
}
h2 {
color: #666;
}
p{
line-height: 1.6;
}
ul, ol {
margin: 10px 0;
}
table {
width: 100%;
border-collapse: collapse;
}
table, th, td {
border: 1px solid #ddd;
}
th, td {
padding: 8px;
text-align: left;
}
blockquote {
border-left: 4px solid #ccc;
padding-left: 10px;
margin: 10px 0;
font-style: italic;
}
</style>
</head>
<body>
<!-- Main Heading -->
<h1>Welcome to My Sample Page</h1>

<!-- Subheading -->


<h2>Introduction</h2>

<!-- Paragraph with formatting -->


<p>This is a <b>bold</b> paragraph with <i>italic</i> text. You can also use
<u>underlined</u> text.</p>

<!-- Unordered List -->


<h3>Unordered List Example:</h3>
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
<!-- Ordered List -->
<h3>Ordered List Example:</h3>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>

<!-- Link and Image -->


<h3>Link and Image:</h3>
<p>Visit <a
href="file:///C:/Users/hardi/OneDrive/Desktop/Dip3sem/prac22.html"
target="_blank">Example.com</a> for more information.</p>
<img src="F:\DIPLOMA\1st Sem\STATIC WEB PAGE
DESIGN\collage.jpg" alt="Placeholder Image">

<!-- Table -->


<h3>Student Info:</h3>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Hardik</td>
<td>25</td>
<td>Surat</td>
</tr>
<tr>
<td>Smith</td>
<td>25</td>
<td>Navsari</td>
</tr>
</table>

<!-- Blockquote -->


<h3>Blockquote Example:</h3>
<blockquote>
"This is a blockquote. It is used to highlight a quote or a section of text."
</blockquote>

<!-- Horizontal Line -->


<hr>

<!-- Footer -->


<footer>
<p>&copy; 2024 Sample Web Page. All rights reserved.</p>
</footer>
</body>
</html>

prac9. Use image tags to create a web page and Use hyperlink tag to navigate
through different web pages as per given sample.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample Web Page with Images and Links</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
h1 {
color: #333;
}
img {
max-width: 100%;
height: auto;
border: 1px solid #ddd;
}
.gallery img {
margin: 10px;
border-radius: 8px;
}
a{
color: #1a73e8;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<!-- Main Heading -->
<h1>Welcome to My Image Gallery</h1>

<!-- Navigation Links -->


<nav>
<ul>
<li><a href="page1.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
</ul>
</nav>

<!-- Image Gallery -->


<h2>Gallery</h2>
<div class="gallery">
<a href="F:\DIPLOMA\1st Sem\STATIC WEB PAGE
DESIGN\page1.html" target="_blank">
<img src="F:\DIPLOMA\1st Sem\STATIC WEB PAGE
DESIGN\image1.jpg" alt="Placeholder Image 1">
</a>
<a href="F:\DIPLOMA\1st Sem\STATIC WEB PAGE
DESIGN\page2.html" target="_blank">
<img src="F:\DIPLOMA\1st Sem\STATIC WEB PAGE
DESIGN\image2.jpg" alt="Placeholder Image 2">
</a>
<a href="F:\DIPLOMA\1st Sem\STATIC WEB PAGE
DESIGN\page3.html" target="_blank">
<img src="F:\DIPLOMA\1st Sem\STATIC WEB PAGE
DESIGN\image3.jpg" alt="Placeholder Image 3">
</a>
</div>

<!-- Footer -->


<footer>
<p>&copy; 2024 Image Gallery. All rights reserved.</p>
</footer>
</body>
</html>

You might also like