LAB PROGRAMS(IT)

1.Demonstrate E-Mail working (Sending Receiving, forward)

2. How to create, organize meeting in Zoom/GoogleMeet
3 Create a form by using various attributes of the input tags (text box, multiline
textbox, option button, checkbox)
4. Create a simple HTML page by using some of the basic tags (hyperlink,
marque image)
5. Create a web page with multiple types of style sheet used in a single page
6. Write a CGI sample program to send output back to the user
7. Create Time-Table using table tag
8. Creation of Frames in browser window using HTML
9. Write a java script program to create dialogue boxes using alert, confirm and
prompt methods
10. Write a java script program on Form Validations
11. Write a java script program to performs four arithmetic operations:
Addition, Subtraction, Multiplication and Division on two numbers.
12. Create a web site of our College.
Program 1

Demonstrate E-Mail working (Sending, Receiving, forward)

Let us consider Gmail as an example to demonstrate E-mail working. Gmail is a

widely used email service provided by Google. It supports both SMTP (Simple
Mail Transfer Protocol) and IMAP/POP3 (Internet Message Access
Protocol/Post Office Protocol 3) for email transmission. SMTP is utilized when
sending emails, allowing Gmail to transfer outgoing mail to the recipients'
servers. The protocols like IMAP and POP3 are used when receiving emails,
these protocols help Gmail fetch incoming mail from the server, allowing users
to view their emails from any device.

Step 1: Sending an Email

1. Open a web browser and go to Gmail's website.
2. Enter the email ID and password to login.
3. Click on the "Compose' button, usually found on the top left corner.
4. In the ‘To’ field, type in the email address of the recipient.
5. If needed, add more recipients in the 'Cc' or 'Bcc' fields.
6. Write a brief, relevant line in the 'Subject' field to indicate the topic of the
email.
7. In the main body field, type the content of the email.
8. If there are files to send along with the email, click on the 'Attach files' icon
(usually represented by a paperclip) and select the files.
9. Review the email for any errors or omissions.
10. Click on the 'Send' button to send the email.
Step 2: Receiving an Email
1. Once logged into the Gmail account, the 'Inbox' can be found on the left side
panel.
2. Click on 'Inbox'.
3. New emails will be visible in the list. Click on any email to open and read it.
4. If the email has any attachments, they can be opened or downloaded by
clicking on them.

Step 3: Forwarding an Email

1. Open the email intended to be forwarded by clicking on it in the 'Inbox'.
2. At the bottom of the email, find the 'Forward' button or icon (usually
denoted by an arrow) and click on it.
3. This will open a new email window with the content of the original email in
the body.
4. In the "To' field, type in the email address of the person to whom the email is
being forwarded.
5. If needed, additional text can be added to the email before forwarding
6. Review the email.
7. Click on the 'Send' button to forward the email.
Program 2

How to create, organize meeting in Zoom/GoogleMeet

Zoom and Google Meet are popular digital communication tools that allow
users to conduct online meetings, webinars, and video conferences. These
platforms heavily rely on Voice Over Internet Protocol (VOIP) technology for
their functionality: VOIP is a technology that allows voice calls to be made
using an internet connection instead of a regular analog phone line. Essentially,
it converts the voice signals into digital signals, which are then transmitted over
the internet. This technology facilitates real-time audio communication during
meetings on Zoom and Google Meet. The use of VOIP technology ensures that
both platforms can provide high-quality audio transmission, resulting in
efficient and effective communication regardless of the participants'
geographical locations.

Creating a Meeting in Zoom:

1. Log into the Zoom web portal.

2. Click on "Schedule a Meeting" in the top right corner of the homepage.
3. Choose the meeting title, description (optional), date, and time.
4. Select the meeting duration. Please note that the duration is only for
scheduling purposes. The meeting won't end after this length of time.
5. Select the time zone of the meeting.
6. Set up the meeting ID and passcode for security purposes.
7. Decide on advanced options like enabling a waiting room, allowing join
before host, muting participants on entry, and automatically recording the
meeting.
8. Finally, click on the "Save" button to create the meeting.
Organizing a Meeting in Zoom:

1. After the meeting is created, an invitation can be sent to participants.

2. The host can click on "Copy the invitation," then paste that information into
an email and send it to the participants.
3. During the time of the meeting, the host can start the meeting by logging into
their Zoom account, navigating to the "My Meetings" section, and selecting
"Start" for the scheduled meeting.
4. Participants join the meeting by clicking on the link in the email.

Creating a Meeting in Google Meet:

1. Go to Google Calendar and sign in.

2. Click on the "Create" button on the top left side to create a new event.
3. Add a title to the event, and set the date and time.
4. Click on "Add guests" to add participants by entering their email addresses
5. Click on "Add Google Meet video conferencing." This will automatically
generate a unique meeting link that can be used to join the meeting.
6. Once all the details are filled in, click on "Save."
7. A prompt will appear asking if the creator wants to send an invitation email
to the guests. Click "Send" to send the invitation.

Organizing a Meeting in Google Meet:

1. Participants will receive an email invitation containing the meeting link

2. The host can start the meeting at the scheduled time by opening the event in
Google Calendar and selecting the Google Meet link.
3. They can join the meeting by clicking the link at the scheduled time.
Program 3 Create a form by using various attributes of the input tags (text
box, multiline textbox, option button, check box)

<!DOCTYPE html>
<html>
<body>
<form action="/submit" method="post">
<label for ="fname">First Name:</label><br>
<input type="text" id="fname" name="fname"><br><br>

<label for="description">Description: </label><br>

<textarea id="description" name="description"></textarea><br><br>

<label for="gender">Gender:</label><br>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br><br>

<label for="interests">Interests:</label><br>
<input type="checkbox" id="sports" name="interests" value="sports">
<label for="sports">Sports</label><br>
<input type="checkbox" id="music" name="interests" value="music">
<label for="music">Music</label><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Program 4. Create a simple HTML page by using some of the basic tags
(hyperlink, marque image)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple HTML Page</title>
</head>
<body>

<!-- Header Section -->

<h1>Welcome to My Simple HTML Page</h1>

<!-- Paragraph with a hyperlink -->

<p>Click the link below to visit <a href="https://www.amazon.in/"
target="_blank">Amazon India</a> for great deals.</p>
 <!-- Marquee (scrolling text) -->
<marquee>Hurry up! Amazing offers on Amazon, grab them before they are
gone!</marquee>

<!-- Image Section -->

<img src="https://www.gstatic.com/webp/gallery3/1.sm.png" alt="Sample
Amazon Image" width="300" height="200">

</body>
</html>
output

Program 5 : Create a web page with multiple types of style sheet used in a
single page

Step 1: Create below CSS and Save as external.css in a chosen directory (For
example: D:/HTML)
/*external.css*/
h3 {
color:darkgreen;
font-family: Arial, sans-serif;
}
p.external-paragraph (
color: darkblue;
font-family: Verdana, sans-serif;
font-size: 18px;
}

Step 2: Create HTML File and Save as CSSDemo.html in the same directory
(For example: D:/HTML)
<html>
<head>
<title>Page with Different CSS Styles</title>
<style>

h1{
color: red;
font-family: 'Times New Roman', Times, serif;
}
p. Internal-paragraph {
color: orange;
font-family: Georgia, serif;
font-size: 45px;
</style>
<link rel="stylesheet" type="text/css" href="C:\Users\admin\Desktop\ex.css">
</head>
<body>
<h1 style="color:blue; font-family:Helvetica;">This is a Heading with Inline
CSS.</h1>
<p style="color:purple; font-family:Helvetica;">This is a paragraph with inline
CSS.</p>
<h2>This is a Heading with Internal CSS</h2>
<p class="internal-paragraph">This is a paragraph with internal CSS.</p>
<h3>This is a Heading with External CSS</h3>
<p class="external-paragraph">This is a paragraph with external CSS.</p>
</body>
</html>

Program 6 Write a CGI sample program to send output back to the user
Common Gateway Interface (CGI) is a standard method used by web servers to
interact with backend applications. It can be used to create dynamic content on
web pages and is supported by a wide variety of languages including Python,
Perl, C, C++, and so on. For the purpose of this program, Python will be used to
create a simple CGI script that will return an output to the user. The following
steps will guide through the process of setting up the environment in a Windows
system, starting from installing the Apache server and Python, configuring
Apache to support CGI, and finally writing and running the CGI program.

Step 1: Install Apache Server

1. Visit the Apache Lounge website
(https://www.apachelounge.com/download/) and download the appropriate
version of Apache based on the system's architecture (32-bit or 64-bit).
2. Extract the downloaded file to C:\
3. Open the Command Prompt with administrative rights (Right-click -> Run as
administrator).
4. Navigate to the Apache bin directory by typing cd C:\Apache24\bin and
pressing Enter.
5. Install Apache as a service by typing httpd.exe -k install and pressing Enter.
6. To start Apache, type httpd.exe -k start and press Enter. If Apache starts
without any error messages, the installation was successful. (or) click on
C:\Apache24\bin\httpd.exe

Step 2: Install Python

1. Visit the official Python website
(https://www.python.org/downloads/windows and download the latest Python
installer.
2. Run the installer, ensure "Add Python to PATH" is checked, and follow the
prompts to install Python.

Step 3: Configure Apache for CGI

1. Open the Apache configuration file located at C:\Apache24\conf\httpd.conf
in a text editor.
2. Uncomment the following lines (remove the # at the start of the line):
LoadModule cgi_module modules/mod_cgi.so
AddHandler cgi-script .cgi.py
3. In the same file, find the <Directory> section and change the Options line to:
Options Indexes FollowSymLinks ExecCGI

4. And add the following line:

AddHandler cgi-script .cgi.py

5. Change the ScriptAlias as shown below:

ScriptAlias /cgi-bin/ "C:/Apache24/cgi-bin/"

6. Save and close the file.

7. Restart Apache by opening the Command Prompt as administrator,
navigating to C:\Apache24\bin and typing httpd.exe -k restart.

Step 4: Create and Run the CGI Script

1. In the C:\apache\Apache24\cgi-bin directory, create a new file called
hello.py.
2. Write the following Python code into the file:
Code hello.py

#1E:/Python/python.exe #Change the path if Python is installed in different path

print("Content-Type: text/html") #HTML is following
print() #blank line required, end of headers
print("<html><body> <h1>Hello BCA Students, Welcome to
CGI</h1></body></html>")

3. Save and close the file.

4. Open a web browser and navigate to http://localhost/cgi-bin/hello.py. If
everything has been set up correctly, "Hello BCA Students, Welcome to CGI!"
should be displayed in the browser.
OUTPUT

Program 7 Create Time-Table using table tag

<!DOCTYPE html>
<html>
<head>
<title>Time Table</title>
</head>
<body>
<h2>Weekly Class Schedule</h2>
<table border="1">
<tr>
<th>Day</th>
<th>9:00- 10:00</th>
<th>10:00- 11:00</th>
<th>11:30 -12:30</th>
</tr>
<tr>
<td>Monday</td>
<td>Internet Technologies</td>
<td>Software Engineering</td>
<td>The Design and Analysis of Algorithms</td>
</tr>

<tr>
<td>Tuesday</td>
<td>Internet Technologies</td>
<td>Software Engineering</td>
<td>The Design and Analysis of Algorithms</td>
</tr>

<tr>
<td>Wednesday</td>
<td>Internet Technologies</td>
<td>Software Engineering</td>
<td>The Design and Analysis of Algorithms</td>
</tr>

<tr>
<td>Thursday</td>
<td>Internet Technologies</td>
<td>Software Engineering</td>
<td>The Design and Analysis of Algorithms</td></tr>
<tr>
<td>Friday</td>
<td>Internet Technologies</td>
<td>Software Engineering</td>
<td>The Design and Analysis of Algorithms</td>
</tr>
</table>
</body>
</html>

Output

Program 8 :Creation of Frames in browser window using HTML.

Let us create a frame-based HTML layout that uses three separate HTML files:
menu.html, content.html, and info.html.
Step 1: Create the menu.html file
This file will contain a simple list of Indian foods.

Code menu.html
<!DOCTYPE html>
<html>
<body>
<h2>Menu</h2>
<ul>
<li>Biryani</li>
<li>Butter Chicken</li>
<li>Paneer Tikka</li>
<li>Dal Makhani</li>
</ul>
</body>
</html>

Step 2: Create the content.html file

This file will contain a description of the restaurant.
Code content.html

<!DOCTYPE html>
<html>
<body>
<h2>Content</h2>
<p>Welcome to our Indian food restaurant! we serve a variety of delicious
dishes.</p>
</body>
</html>

Step 3: Create the info.html file

This file will contain additional information about the restaurant.
Code Info.html

<!DOCTYPE html>
<html>
<body>
<h2>Info</h2>
<p>We are located at Main Street and open from 10am to 10pm everyday.</p>
</body>
</html>

Step 4: Create the main frameset HTML file

This file will divide the webpage into three separate frames and each frame will
load one of the above HTM files.

Code main.html
<!DOCTYPE html>
<html>
<frameset cols="20%, 60%, 20%">
<frame src="menu.html" name="menu_frame">
<frame src="content.html" name="content_frame">
<frame src="info.html" name="info_frame">
</frameset>
</html>

Program 9 Write a java script program to create dialogue boxes using alert,
confirm and prompt methods
<!DOCTYPE html>
<html>
<head>
<title>Newsletter Subscription</title>
<script type="text/javascript">
function subscribeNewsletter() {
// Alert the user about the newsletter
alert("Welcome to our website! We offer a weekly newsletter");

// Ask if the user wants to subscribe

 var subscribe = confirm("Would you like to subscribe to our newsletter?");

if (subscribe) {
// Ask for the user's email address
var email = prompt("Please enter your email address for the subscription:",
"");

if (email) {
// If the user provided an email, show a thank you message
alert("Thanks. You will receive a confirmation email at " + email + ".");
} else {
// The user clicked "Cancel" or entered an empty email address
alert("You did not provide an email address. No subscription has been
made.");
}
} else {
// The user clicked "Cancel" on the confirm dialog
alert("No problem, you can always subscribe later if you change your
mind.");
}
}
</script>
</head>
<body onload="subscribeNewsletter()">
<h1>Welcome to our Website!</h1>
</body>
</html>
output
Program 10 Write a java script program on Form Validations.
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
<style>
.error { color: red; }
</style>
</head>
<body>
<h2>Registration Form</h2>
<form id="registrationForm" onsubmit="return validateForm()">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name"><br>
<span id="nameError" class="error"></span><br>

<label for="email">Email:</label><br>
<input type="text" id="email" name="email"><br>
<span id="emailError" class="error"></span><br>

<label for="password">Password:</label><br>
<input type="password" id="password" name="password"><br>
<span id="passwordError" class="error"></span><br>

<label for="confirmPassword">Confirm Password:</label><br>

<input type="password" id="confirmPassword"
name="confirmPassword"><br>
<span id="confirmPasswordError" class="error"></span><br>

<br>
<input type="submit" value="Register">
</form>

<script>
function validateForm() {
let valid = true;

// Clear previous errors

 document.getElementById('nameError').textContent = '';
document.getElementById('emailError').textContent = '';
document.getElementById('passwordError').textContent = '';
document.getElementById('confirmPasswordError').textContent = '';

// Get values
const name = document.getElementById('name').value.trim();
const email = document.getElementById('email').value.trim();
const password = document.getElementById('password').value;
const confirmPassword =
document.getElementById('confirmPassword').value;

// Name validation
if (name === '') {
document.getElementById('nameError').textContent = 'Name is required.';
valid = false;
}

// Email validation
const emailPattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;
if (email === '') {
document.getElementById('emailError').textContent = 'Email is required.';
valid = false;
} else if (!email.match(emailPattern)) {
document.getElementById('emailError').textContent = 'Invalid email format.';
valid = false;
}
 // Password validation
if (password.length < 6) {
document.getElementById('passwordError').textContent = 'Password must be
at least 6 characters.';
valid = false;
}

// Confirm Password validation

if (confirmPassword !== password) {
document.getElementById('confirmPasswordError').textContent =
'Passwords do not match.';
valid = false;
}
alert("registration successful");
return valid;
}
</script>

</body>
</html>
output
Program 11 Write a Java script program is perform four arithmatic operations:
Addition, subtraction ,Multiplication and Division on two numbers.

<!DOCTYPE html>
<html>
<head>
<title>Arithmetic Operations</title>
<script type="text/javascript">
function performOperations() {
// Retrieve numbers from the form
var num1 = parseFloat(document.getElementById("number1").value);
var num2 = parseFloat(document.getElementById("number2").value);

// Check if inputs are valid numbers

if (isNaN(num1) || isNaN(num2)) {
alert("Please enter valid numbers.");
 return;
}

// Perform operations and display results

document.getElementById("addition").innerHTML = "Addition: " + (num1
+ num2);
document.getElementById("subtraction").innerHTML = "Subtraction: " +
(num1 - num2);
document.getElementById("multiplication").innerHTML = "Multiplication:
" + (num1 * num2);

if (num2 !== 0) {
document.getElementById("division").innerHTML = "Division: " + (num1
/ num2);
} else {
document.getElementById("division").innerHTML = "Division: Cannot
divide by zero";
}
}
</script>
</head>

<body>

<h1>Arithmetic Operations</h1>

<form>
Number 1: <input type="number" id="number1"><br><br>
Number 2: <input type="number" id="number2"><br><br>
 <input type="button" value="Calculate" onclick="performOperations()">
</form>

<p id="addition"></p>
<p id="subtraction"></p>
<p id="multiplication"></p>
<p id="division"></p>

</body>
</html>

Program 12 Create a web site of our College.

1. Create index.html file.

Code index.html

<!DOCTYPE html>
<html>
<head>
<title>BMC Institute of Computer Applications</title>
<style>

body {
font-family: Arial, sans-serif;}

header {
background-color: #f8f9fa;
padding: 20px;
text-align: center;
}

nav {
margin: 20px 0;
text-align: center;
}

nav a {
margin: 0 15px;
}
</style>
</head>
<body>
<header>
<img src="logo.jpg" alt="BMC Institute of Computer Applications Logo"
width="100">
<h1>BMC Institute of Computer Applications</h1>
<p>157, 3RD MAIN, CHAMRAJPET BANGALORE 560018</p>
</header>

<nav>
<a href="index.html">Home</a>
<a href="about.html">About Us</a>
<a href="courses.html">Courses</a>
<a href="contact.html">Contact Us</a>
</nav>

<main>
<h2>Welcome to Skyward Institute of Computer Applications</h2>
<p>We provide best training on computer application courses.</p>
</main>
</body>
</html>

2. Create an about.html page for the About Us information:

Code about.html
<!DOCTYPE html>
<html>
<head>
<title>About Us Skyward Institute of Computer Applications</title>
</head>
<body>
<h1>About Us</h1>
<p>BMC Institute of Computer Applications was founded in 2010 with the aim
to provide quality education in the field of computer applications...</p>
</body>
</html>

3. Create a courses.html page to list the courses provided by the Institution:

Code courses.html

<!DOCTYPE html>
<html>
<head>
<title>Courses BMC Institute of Computer Applications</title>
</head>
<body>
<h1>Courses</h1>
<h2>BCA</h2>
<h2>MCA</h2>
</body>
</html>

4. Create a contact.html page to provide contact information:

Code contact.html
<!DOCTYPE html>
<html>
<head>
<title>Contact Us Skyward Institute of Computer Applications</title>
</head>
<body>
<h1>Contact Us</h1>
<p>Address: 157, 3RD MAIN, CHAMRAJPET BANGALORE 560016</p>
<p>Phone: +91-9611185999</p>
<p>Email: [email protected]</p>
</body>
</html>

OUTPUT