4TH SEM BCA – INTERNET TECHNOLOGIES LAB
1. How to Create, organize meeting in GoogleMeet.
Creating a Meeting
1. Open Google Meet: Go to Google Meet in your browser.
2. Start a New Meeting: Click on "New Meeting" to start an instant meeting.
3. Copy the Meeting Link: You can share this link with participants via email, chat, or
any other communication method.
Scheduling a Meeting
1. Open Google Calendar: Go to Google Calendar and create a new event.
2. Add Guests: Enter the names or email addresses of the people you want to invite.
3. Add Google Meet Link: In the event details, add a Google Meet link.
4. Send Invites: Save the event and send invites to your guests.
Joining a Meeting
1. Open the Meeting Link: Click on the meeting link sent to you.
2. Allow Permissions: Grant permissions for your microphone and camera if prompted.
3. Join the Call: Click "Join now" to enter the meeting.
2. Create Simple HTML page for Student Time Table using table tag.
Creating tables in HTML is straightforward using the <table> element along with <tr>, <th>,
and <td> elements. Here's a quick breakdown:
• <table>: Defines the table.
• <tr>: Defines a table row.
• <th>: Defines a table header cell (bold and centered by default).
• <td>: Defines a table data cell.
<html>
<head>
<title>Student Time Table</title>
</head>
<body style="font-family: 'Times New Roman', Times, serif;">
<h1>Weekly class schedule Time Table</h1>
<table border="1" style="text-align: center;">
<tr>
<th>Day</th>
<th>9:00 - 10:00</th>
<th>10:00 - 11:00</th>
<th>11:00 - 12:00</th>
<th>12:00 - 1:00</th>
<th>1:00 - 2:00</th>
<th>2:00 - 2:30</th>
<th>2:30 - 3:30</th>
</tr>
<tr>
<td>Monday</td>
<td>Kannada</td>
<td>English</td>
<td>IT</td>
<td>ADA</td>
<td>SE</td>
<td>Break</td>
<td>Physical Education</td>
</tr>
<tr>
<td>Tuesday</td>
<td>IT-LAB</td>
<td>IT-LAB</td>
<td>IT-LAB</td>
<td>English</td>
<td>IT</td>
<td>Break</td>
<td>Kannada</td>
</tr>
<tr>
<td>Wednesday</td>
<td>ADA</td>
<td>IT</td>
<td>Kannada</td>
<td>SE</td>
<td>English</td>
<td>Break</td>
<td>CAR-LAB</td>
</tr>
<tr>
<td>Thursday</td>
<td>ADA</td>
<td>IT</td>
<td>ADA-LAB</td>
<td>ADA-LAB</td>
<td>ADA-LAB</td>
<td>Break</td>
<td>English</td>
</tr>
<tr>
<td>Friday</td>
<td>Kannada</td>
<td>English</td>
<td>ADA</td>
<td>CAR-LAB</td>
<td>IT</td>
<td>Break</td>
<td>Physical Education</td>
</tr>
<tr>
<td>Sarturday</td>
<td>Kannada</td>
<td>English</td>
<td>IT</td>
<td>ADA</td>
</tr>
</table>
</body>
</html>
OUTPUT:
3. Create a Simple HTML page by using some of the basic tags. (hyperlink, marquee,
images).
Hyperlink: To create a hyperlink, you use the <a> (anchor) element.
Syntax: <a href="[Link] here to visit [Link]</a>
Marquee: The <marquee> element creates scrolling text.
Syntax: <marquee behavior="scroll" direction="left">This is scrolling text</marquee>
Images: To display an image, you use the <img> element.
Syntax: <img src="[Link]" alt="Description of image" width="500" height="300">
<html>
<head>
<title> The National College jayanagar Page</title>
</head>
<body style="background-color: burlywood;">
<h1 style="color: brown;">Welcome to The National College Jayanagar Home Page!</h1>
<!-- Marquee Tag -->
<marquee behavior="scroll" direction="left" style="color: crimson;">THE NATIONAL
COLLEGE JAYANAGAR</marquee>
<!-- Hyperlink Tag -->
<p>Click <a href="[Link] to vist National College Jayanagar
website</p>
<!-- Image Tag -->
<h2>Here's an National College logo:</h2>
<img src="C:\Users\chandan\Downloads\[Link]" alt="Example Image" width="300"
height="200">
<p>Thank you for visiting!</p>
</body>
</html>
Output:
4. Create a form by using various attributes of the input tags (TEXT BOX,
MULTILINE TEXTBOX, OPTION BUTTON, CHECK BOX).
Text Box: A single-line text box is created using the <input> element with type="text"
Syntax: <input type="text" name="singleline" placeholder="Enter text here">
Multiline Text Box (Textarea): A multiline text box, or textarea, is created using the
<textarea> element.
Syntax: <textarea name="multiline" rows="4" cols="50" placeholder="Enter your message
here"></textarea>
Option Button (Radio Button): Option buttons, or radio buttons, are created using the
<input> element with type="radio". Radio buttons are usually grouped together with the same
name attribute so only one can be selected at a time.
Syntax:
<input type="radio" id="option1" name="options" value="Option 1">
<label for="option1">Option 1</label><br>
<input type="radio" id="option2" name="options" value="Option 2">
<label for="option2">Option 2</label><br>
Check Box: Checkboxes are created using the <input> element with type="checkbox".
Multiple checkboxes can be selected at once.
Syntax:
<input type="checkbox" id="checkbox1" name="checkboxes" value="Checkbox 1">
<label for="checkbox1">Checkbox 1</label><br>
<input type="checkbox" id="checkbox2" name="checkboxes" value="Checkbox 2">
<label for="checkbox2">Checkbox 2</label><br>
<html>
<head>
<title>Registration Form</title>
<style>
.login-container {
display: grid;
place-items: center;
position: absolute;
top: 40%; left: 40%;
background-color: gray;
padding: 30px;
border-radius: 10px;
width: 300px;
</style>
</head>
<body style="background-color: chocolate;">
<div class="login-container">
<h1>Registration Form</h1>
<form>
<label for="fullname">Full Name:</label>
<input type="text" id="fullname" name="fullname" placeholder="Enter your full
name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email
address" required><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter a
strong password" minlength="8" required><br><br>
<label for="address">Address:</label><br>
<textarea id="address" name="address" rows="4" cols="40" placeholder="Enter your
address" required></textarea><br><br>
<p>Gender:</p>
<input type="radio" id="male" name="gender" value="male" required>
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female" required>
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other" required>
<label for="other">Other</label><br><br>
<p>Interests:</p>
<input type="checkbox" id="coding" name="interests" value="Coding">
<label for="coding">Coding</label><br>
<input type="checkbox" id="music" name="interests" value="Music">
<label for="music">Music</label><br>
<input type="checkbox" id="sports" name="interests" value="Sports">
<label for="sports">Sports</label><br><br>
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" placeholder="Enter your phone number"
pattern="[0-9]{10}" title="Enter a 10-digit phone number"><br><br>
<!-- Submit and Reset Buttons -->
<input type="submit" value="Register">
<input type="reset" value="Reset">
</form>
</div>
</body>
</html>
OUTPUT:
5. Create a frames in browser windows using HTML.
Frames in HTML are a way to divide a web page into multiple sections where each section
can load a separate HTML document. This can be useful for creating a layout where parts of
the page stay constant while others change, like a navigation menu and main content area.
• Create the [Link] file.
<html>
<body style="background-color: blanchedalmond; text-align: justify;">
<title>Menu Page</title>
<h2 style="color: brown;" >Menu</h2>
<ul>
<li style="font-size: larger;">Masala-Dosa</li>
<li style="font-size: larger;">idli-Sambar</li>
<li style="font-size: larger;">Ghee-Rice</li>
<li style="font-size: larger;">Biryani</li>
</ul>
</body>
</html>
• Create the [Link] file.
<html>
<title>Content Page</title>
<body style="background-color: blanchedalmond; text-align: justify;">
<h2 style="color: brown; text-align: center;">Content</h2>
<p style="font-size: larger;">Welcome to our Indian food restaurant! we serve a food
according to your taste. </p>
</body>
</html>
• Create the [Link] file.
<html>
<title>Info Page</title>
<body style="background-color: blanchedalmond; text-align: justify;">
<h2 style="color: brown;">Infomation Related to Indian food restaurant</h2>
<p style="font-size:larger;">We are located at Jayanagar Bangalore and restaurant
timeings from 10am to 10pm everyday.</p>
</body>
</html>
• Create the main frameset HTML file.
<html>
<head>
<title>My Frameset</title>
</head>
<frameset cols="20%,40%,40%">
<frame src="[Link]" name="frame1">
<frame src="[Link]" name="frame2">
<frame src="[Link]" name="frame3">
</frameset>
</html>
Output:
6. Create a web page with multiple types of style sheet used in a single page.
Internal CSS: Defined within the <head> section using the <style> tag.
External CSS: Linked within the <head> section using the <link> tag.
Inline CSS: Applied directly within the HTML elements using the style attribute.
Create a file by [Link]:
<html>
<head>
<title>Multiple Stylesheets Example</title>
<!-- Link to external stylesheet -->
<link rel="stylesheet" href="[Link]">
<style>
/* Internal Styles */
.internal-style {
color: brown;
text-decoration: underline;
</style>
</head>
<body>
<h1 class="internal-style">This is a Line with internal styles defined in the head
section.</h1>
<p style="color: red; font-size: 18px;">This is a paragraph with inline styles.</p>
<p class="external-style">This is a paragraph styled by an external stylesheet.</p>
</body>
</html>
Create another File by the name of [Link]:
/* External Styles */
.external-style {
color: green;
font-size: 20px;
}
Output:
7. Write a java script program to create dialogue boxes using alert, confirm and
prompt method.
JavaScript is a versatile and powerful programming language that's widely used to make
web pages interactive. It runs in the browser, allowing you to create dynamic content like
animated graphics, interactive forms, and real-time updates.
JavaScript is primarily used for client-side scripting, meaning it runs on the user's
browser rather than on a server.
<html>
<head>
<title>Dialog Boxes Program</title>
<h2 style="text-align: center;color: crimson;">Welcome to our website!</h2>
<script>
function showAlert() {
alert("This is an alert box!");
function showConfirm() {
var result = confirm("Do you want to proceed?");
if (result) {
alert("You pressed OK!");
} else {
alert("You pressed Cancel!");
function showPrompt() {
var userInput = prompt("Please enter your name:", "Tom");
if (userInput != null) {
alert("Hello " + userInput + "!");
}
</script>
</head>
<body style="background-color: burlywood;">
<button onclick="showAlert()">Show Alert</button>
<button onclick="showConfirm()">Show Confirm</button>
<button onclick="showPrompt()">Show Prompt</button>
</body>
</html>
Output:
8. Write a java Script program on form validation.
<html>
<head>
<title>Login Form</title>
<script>
function validateForm() {
var name = [Link]["myForm"]["name"].value;
var email = [Link]["myForm"]["email"].value;
var password = [Link]["myForm"]["password"].value;
var emailPattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;
if (name == "") {
alert("Name must be filled out");
return false;
if (email == "") {
alert("Email must be filled out");
return false;
if () {
alert("Please enter a valid email address");
return false;
}
if(password == ""){
alert("password must be filled out");
return false;
if (password == "Ram@123"){
alert("Login is Successful..");
return true;
}else{
alert("Please Enter valid Password..")
</script>
</head>
<body style="background-color: antiquewhite;">
<h2 style="align-content: center;text-align: center;color: brown;">Simple Login
Form</h2>
<form name="myForm" onsubmit="return validateForm()" style="text-align: center;">
Name: <input type="text" name="name"><br><br>
Password: <input type="password" name="password"><br><br>
Email: <input type="text" name="email"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Output:
9. Write a java Script program to perform four arithmetic operations:
• Addition
• Subtraction
• Multiplication
• Division on two number.
<html>
<head>
<title>Arithmetic Operations</title>
</head>
<body>
<h1 style="text-align: center;">Arithmetic Operations</h1>
<form style="text-align: center;">
Number 1: <input type="number" id="num1" name="num1"><br><br>
Number 2: <input type="number" id="num2" name="num2"><br><br>
<input type="button" value="Add" onclick="performOperation('add')">
<input type="button" value="Subtract" onclick="performOperation('subtract')">
<input type="button" value="Multiply" onclick="performOperation('multiply')">
<input type="button" value="Divide" onclick="performOperation('divide')"><br><br>
Result: <input type="text" id="result" name="result" readonly>
</form>
<script>
function performOperation(operation) {
var num1 = parseFloat([Link]('num1').value);
var num2 = parseFloat([Link]('num2').value);
var result;
if (operation == 'add') {
result = num1 + num2;
} else if (operation == 'subtract') {
result = num1 - num2;
} else if (operation == 'multiply') {
result = num1 * num2;
} else if (operation == 'divide') {
result = num2 !== 0 ? num1 / num2 : 'Error: Division by zero';
[Link]('result').value = result;
</script>
</body>
</html>
Output:
10. Write a CGI sample program to send output back to the user.
Common gateway Interface (CGI) is a standard method used by web severs to interact with
backend application. It can be used to create dynamic content on web pages and is supported
by variety of languages including python, 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.
• Install Live Server in Visual Studio and open with Live server.
<html>
<head>
<title>Pyscript program</title>
</head>
<body>
<link rel="stylesheet" href="[Link]
<script type="module" src="[Link]
</head>
<body>
<!-- Use MicroPython to evaluate some Python -->
<script type="mpy" src="[Link]" terminal>
</script>
</body>
</html>
Create a python program file by giving a name as [Link] and type the given program.
print("The Pyscript program:")
print("Program to print multiplication of 5 table")
my_list = []
for x in range(1,11):
i=x*5
my_list.append(i)
print(my_list)
Output:
11. Create an interactive web home page for online Pizza Ordering.
<html>
<head>
<title>Pizza Shop</title>
<style>
body {
font-family: Arial;
margin: 0;
padding: 0;
background-color: #f8f9fa;
header {
background-color: #ff6347;
color: white;
text-align: center;
padding: 1rem;
}
nav {
display: flex;
justify-content: center;
background-color: #333;
}
nav a {
color: antiquewhite;
padding: 14px 20px;
text-decoration: none;
text-align: center;
}
nav a:hover {
background-color: #ff6347;
footer {
background-color: #333;
color: white;
text-align: center;
padding: 1px;
position: fixed;
bottom: 0px;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>Welcome to Online Pizza Corner!</h1>
<p>The best pizza in town!</p>
</header>
<nav>
<a href="#home">Home</a>
<a href="#menu">Menu</a>
<a href="#contact">Contact</a>
</nav>
<main>
<h2>Our Specialty Pizzas</h2>
<p>At our pizza shop, we offer a variety of delicious pizzas made with the freshest
ingredients. From classic Margherita to unique gourmet pizzas, there's something for
everyone!</p>
</main>
<footer>
<p>2025 Pizza Shop. All rights reserved.</p>
</footer>
</body>
</html>
Output:
12. Create an interactive web page for Pizza ordering using html, CSS tags and Java
Script.
<html>
<head>
<title>Online Pizza Order</title>
<style>
body {
font-family: Arial;
margin: 0%;
padding: 0%;
background-color: #f8f9fa;
color: #333;
}
header {
background-color: #ff6347;
color: white;
text-align: center;
padding: 1%;
.menu-item {
border: 1px solid #ddd;
padding: 1rem;
margin-bottom: 1rem;
background-color: #fff;
.order-button {
background-color: #ff6347;
color: white;
border: none;
padding: 0.5rem 1rem;
cursor: pointer;
.order-button:hover {
background-color: #e55339;
}
</style>
</head>
<body>
<header>
<h1>Order Your Pizza Online</h1>
<p>Select your favorite pizza and place an order!</p>
</header>
<main>
<div class="menu-item">
<h3>Margherita Pizza</h3>
<p>A classic pizza with fresh tomatoes, mozzarella cheese, and basil.</p>
<button class="order-button" onclick="placeOrder('Margherita Pizza')">Order
Now</button>
</div>
<div class="menu-item">
<h3>Pepperoni Pizza</h3>
<p>Loaded with pepperoni slices and lots of cheese.</p>
<button class="order-button" onclick="placeOrder('Pepperoni Pizza')">Order
Now</button>
</div>
<div class="menu-item">
<h3>Veggie Pizza</h3>
<p>Topped with bell peppers, onions, mushrooms, and olives.</p>
<button class="order-button" onclick="placeOrder('Veggie Pizza')">Order
Now</button>
</div>
</main>
<script>
function placeOrder(pizzaName) {
alert('You have placed an order for ' + pizzaName);
}
</script>
</body>
</html>
Output:
13. Write a javaScript embedded HTML tags to display the current date in the format
"dd/mm/yy" and current time in a text box in the 12 - hours format as
"hh:mm:ss[AM/PM]". The time has to be updated every second.
[Link]() retrieves the current day of the month as a number (e.g., if today is the 26th, it
returns 26).
padStart(2, '0') ensures that the resulting string has at least two characters by adding a leading
zero if necessary. For example, "3" becomes "03".
The span element is used to create a container for holding and displaying content on the web
page.
The line setInterval(updateTime, 1000); is a JavaScript function that repeatedly calls another
function at specified intervals. In this case, it’s calling updateTime every 1000 milliseconds
(or 1 second).
<!DOCTYPE html>
<html>
<head>
<title>Current Date and Time</title>
<script type="text/javascript">
function updateTime() {
var now = new Date();
var day = String([Link]()).padStart(2, '0');
var month = String([Link]() + 1).padStart(2, '0'); // January is 0!
var year = String([Link]()).slice(-2);
var hours = [Link]();
var minutes = String([Link]()).padStart(2, '0');
var seconds = String([Link]()).padStart(2, '0');
var ampm = hours >= 12 ? 'PM' : 'AM';
hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
var timeString = hours + ':' + minutes + ':' + seconds + ' ' + ampm;
var dateString = day + '/' + month + '/' + year;
[Link]('date').innerHTML = dateString;
[Link]('time').value = timeString;
setInterval(updateTime, 1000); // Update time every second
</script>
</head>
<body onload="updateTime()">
<h1>Current Date and Time</h1>
<p>Date: <span id="date"></span></p>
<p>Time: <input type="text" id="time" readonly></p>
</body>
</html>
Output:
14. Create an interactive web site of our college.
• Create a web page of giving name as [Link]:
<html>
<head>
<title>College Website</title>
</head>
<style>
body{
background-color: burlywood;
font-family: Arial, Helvetica, sans-serif;
nav{
margin: 20px 0;
text-align: center;
</style>
<body>
<header style="background-color:coral;padding: 20px;text-align: center;">
<img src="C:\Users\chandan\Downloads\[Link]" width="200" style="display:
block;margin-left: auto;margin-right: auto;border-radius: 50%;">
<h1>THE NATIONAL COLLEGE JAYANAGAR</h1>
<p>7th Block, Jayanagar, Bengaluru, Karnataka 560070</p>
</header>
<nav>
<a href="[Link]">Home</a>
<a href="[Link]">About</a>
<a href="[Link]">Courses</a>
<a href="[Link]">Contact Us</a>
</nav>
<main style="text-align: center;">
<h2>Welcome to The National College Jayanagar.</h2>
<p>The National Degree College, Jayanagar, Bangalore, an autonomous college, is
one of the fifteen institutions, being managed by the National Education Society of
Karnataka.</p>
</main>
</body>
</html>
• Create another web page for college details by giving name as [Link].
<!DOCTYPE html>
<html lang="en">
<head>
<title>About College</title>
</head>
<body style="background-color: burlywood;">
<h1 style="background-color: coral; padding: 5px; text-align: center;text-decoration:
underline;">About Us</h1>
<p style="text-align: justify; color: black; font-size: larger;">
The National Degree College, Jayanagar, Bangalore, an autonomous college, is one of the
fifteen institutions, being managed by the National Education Society of Karnataka. The
Society was established in 1917 with nationalist ideals as the driving force.
The College was started in 1965 with a humble strength of 110 in the Pre- University
Course and now it has grown into a leading institution of higher learning in General
Education. The College has several achievements to its credit in the academic field as well as
extracurricular activities.
</p>
</body>
</html>
• Create another web page for course details by giving name as [Link].
<!DOCTYPE html>
<html lang="en">
<head>
<title>Courses</title>
</head>
<body style="background-color: burlywood;">
<h1 style=" background-color: coral; padding: 10px; text-align: center;">The National
College offered Courses.</h1>
<h2 style="background-color: coral;padding: 20px; text-align: center;">Courses-
Information</h2>
<ul style="font-family: 'Times New Roman', Times, serif; font-size: x-large;">
<li>BCA</li>
<li>BCA(DATA SCIENCE)</li>
<li>BCA(INTENERT OF THINGS)</li>
<li>BCOM</li>
<li>BA</li>
<li>BSc</li>
</ul>
</body>
</html>
• Create another web page for contact details by giving name as [Link].
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contact Details</title>
</head>
<body style="background-color: burlywood;">
<h1 style="background-color: coral;padding: 10px; text-align: center;">Contact
Information</h1>
<p style="font-family: 'Times New Roman', Times, serif; font-size: x-large;">Principal: Dr.
P.L. Ramesh The Principal The National College (Autonomous).</p>
<p style="font-family: 'Times New Roman', Times, serif; font-size: x-large;">Address:
36th B Cross 2nd Main 7th Block, Jayanagar Bangalore–560070.</p>
<p style="font-family: 'Times New Roman', Times, serif; font-size: x-large;">Phone: 080-
26549684,26656644</p>
<p style="font-family: 'Times New Roman', Times, serif; font-size: x-large;">Email:
ncjblore@[Link]</p>
</body>
</html>
Output:
