Scribd
Upload
14 views20 pages

List of Programmes for IWT Lab

Uploaded by

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

List of Programmes for IWT Lab

Uploaded by

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

Practical File on “Introduction to Web Technologies”

Submitted By Submitted To
NAME: DR. DEVENDER KUMAR
Semester: 3
ASSOCIATE PROFESSSOR
Programme:
UNIVERSITY ROLL NO. Bachelor of Computer Applications

For December-2024 Examination

Department of Computer Science And Applications


FACULTY OF MANAGEMENT & COMMERCE
B A B A M A S T N AT H U N I V E R S I T Y
Asthal Bohar, Rohtak
https://bmu.ac.in
List of programmes for IWT Lab/Practical File
1. Write a program to create your class time table using table tag.
2. Write a program to design a Webpage for your college containing description of
courses, department, faculties, library etc. using list tags, href tags, and anchor tags.
3. Write a program to create web page using Frame with rows and columns where we
will have header frame, left frame, right frame, and status bar frame. On clicking in
the left frame, information should be displayed in right frame.
4. Write a program to create Your Resume using HTML, use text, link, size, color and
lists.
5. Write a program to create a Web Page of a super market using (internal CSS)
6. Write a program to use Inline CSS to format your resume that you have created.
7. Write a program to use External CSS to format your time table created.
8. Write a program to use all the CSS (inline, internal and external) to format college
web page that you have created.
9. Write a program to write a HTML Program to create your college website using for
mobile device.
10. Write a program to write an HTML/JavaScript page to create login page with
validations.
11. Write a program to develop a Simple calculator for addiction, subtraction,
multiplication and division operation using JavaScript.
1. Write a program to create your class time table using table tag.
Program code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Class Timetable</title>
<style>
table {
width: 80%;
margin: 20px auto;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 10px;
text-align: center;
}
th {
background-color: #4CAF50;
color: white;
}
td {
background-color: #f9f9f9;
}
</style>
</head>
<body>

<h1>My Class Timetable</h1>


<table>
<tr>
<th>Time</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
<tr>
<td>08:00 - 09:00</td>
<td>IWT</td>
<td>DSA</td>
<td>OS</td>
<td>C++</td>
<td>English</td>
</tr>
<tr>
<td>09:00 - 10:00</td>
<td>English</td>
<td>Math</td>
<td>IWT</td>
<td>C++</td>
<td>DSA</td>
</tr>
<!-- Add more rows as needed -->
<tr>
<td>10:00-11:00</td>
<td>IWT</td>
<td>DSA</td>
<td>OS</td>
<td>C++</td>
<td>English</td>
</tr>
<tr>
<td>11:00-11:10</td>
<td colspan="5">Break</td>
</tr>
<tr>
<td>11:10-12:10</td>
<td>English</td>
<td>Math</td>
<td>IWT</td>
<td>C++</td>
<td>DSA</td>
</tr>
</table>
</body>
</html>
Output:
2. College Webpage Using List, href, and Anchor Tags
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>College Webpage</title>
</head>
<body>

<h1>Welcome to ABC College</h1>

<ul>
<li><a href="#courses">Courses</a></li>
<li><a href="#departments">Departments</a></li>
<li><a href="#faculty">Faculty</a></li>
<li><a href="#library">Library</a></li>
</ul>

<h2 id="courses">Courses Offered</h2>


<ul>
<li>Bachelor of Science</li>
<li>Master of Arts</li>
</ul>

<h2 id="departments">Departments</h2>
<ul>
<li>Computer Science</li>
<li>Mathematics</li>
</ul>

<h2 id="faculty">Faculty</h2>
<ul>
<li>Dr. Smith - Computer Science</li>
<li>Prof. John - Mathematics</li>
</ul>

<h2 id="library">Library</h2>
<p>Our library has a vast collection of books and online resources.</p>

</body>
</html>
Output:
3. Webpage Using Frames with Interactivity
Program Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Webpage with Frames</title>
</head>
<frameset rows="70,*,50">
<frame src="header.html" name="header">
<frameset cols="200,*">
<frame src="left.html" name="left" />
<frame src="right.html" name="right" />
</frameset>
<frame src="status.html" name="status">
</frameset>
</html>

HTML code for header.html


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>Welcome to Frames Website</h1>
</body>
</html>
HTML code for left.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Left Frame</title>
</head>
<body>
<ul>
<li><a href="right.html" target="right">Click me</a></li>
</ul>
</body>
</html>
HTML code for right.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Right Frame</title>
</head>
<body>
<h1>Information will be displayed here</h1>
</body>
</html>
HTML code for status.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h2>Status - Footer &copy; BMU</h2>
</body>
</html>
4. Create Your Resume Using HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Resume</title>
</head>
<body>
<h1>FOMC Student</h1>
<p>Email: <a href="mailto:[email protected]">[email protected]</a></p>

<h2>Skills</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>

<h2>Experience</h2>
<ul>
<li>Software Developer at XYZ Corp</li>
</ul>

<h2>Education</h2>
<ul>
<li>Bachelor's in Computer Science from Baba Mast Nath University</li>
</ul>
</body>
</html>
Output:
5. Supermarket Webpage Using Internal CSS
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Supermarket</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
h1 {
color: #333;
}
.product {
display: inline-block;
width: 200px;
margin: 10px;
text-align: center;
}
.product img {
width: 100%;
height: auto;
}
</style>
</head>
<body>

<h1>Welcome to XYZ Supermarket</h1>


<div class="product">
<img src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1k9rji.img?
w=800&h=435&q=60&m=2&f=jpg" alt="Product 1">
<p>Product 1</p>
</div>
<div class="product">
<img src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1k9yaK.img?
w=800&h=435&q=60&m=2&f=jpg" alt="Product 2">
<p>Product 2</p>
</div>
<div class="product">
<img src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1k9DbQ.img?
w=800&h=435&q=60&m=2&f=jpg" alt="Product 3">
<p>Product 3</p>
</div>
<div class="product">
<img src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1k9ybp.img?
w=800&h=435&q=60&m=2&f=jpg" alt="Product 4">
<p>Product 4</p>
</div>
</body>
</html>
Output:
6. Resume with Inline CSS
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Resume</title>
</head>
<body>
<h1 style="color: blue; font-size: 36px;">BCA Student</h1>
<p>Email: <a href="mailto:[email protected]" style="color:
green;">[email protected]</a></p>
<h2 style="color: darkred;">Skills</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
Output:
7. External CSS for Timetable
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Class Timetable</title>
<link rel="stylesheet" href="timetable.css">
</head>
<body>

<h1>My Class Timetable</h1>


<table>
<tr>
<th>Time</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
<!-- Add rows for your timetable -->
</table>

</body>
</html>
Output:

CSS Code for timetable.css:


table {
width: 80%;
margin: 20px auto;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 10px;
text-align: center;
}
th {
background-color: #4CAF50;
color: white;
}
td {
background-color: #f9f9f9;
}
8. College Webpage Using All CSS Types
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>College Webpage</title>
<style>
body {
font-family: Arial, sans-serif;
}
.header {
background-color: #4CAF50;
color: white;
padding: 10px;
text-align: center;
}
.content {
padding: 20px;
}
</style>
<link rel="stylesheet" href="college.css">
</head>
<body>
<div class="header">
<h1>Welcome to Baba Mast Nath University</h1>
</div>

<div class="content">
<p>Programmes Offered: MCA and BCA</p>
<p>Courses Offered: Web Development, Data Science, etc.</p>
</div>
</body>
</html>
Output:

9. Mobile-Friendly College Website


HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>College Website</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
h1 {
text-align: center;
padding: 10px;
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>

<h1>Welcome to ABC College</h1>

<p style="padding:5px;"Explore our courses and departments. All pages are mobile-
friendly!</p>

</body>
</html>
Output:

10. Login Page with JavaScript Validations


HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
<script>
function validateForm() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (username == "" || password == "") {
alert("Both fields are required!");
return false;
}
return true;
}
</script>
</head>
<body>

<h2>Login</h2>
<form onsubmit="return validateForm()">
Username: <input type="text" id="username"><br><br>
Password: <input type="password" id="password"><br><br>
<input type="submit" value="Login">
</form>

</body>
</html>
Output:
11. Simple Calculator Using JavaScript
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Calculator</title>
<script>
function calculate(operation) {
var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(document.getElementById("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 = num1 / num2;
}
document.getElementById("result").innerText = "Result: " + result;
}
</script>
</head>
<body>
<h2>Simple Calculator</h2>
Number 1: <input type="text" id="num1"><br><br>
Number 2: <input type="text" id="num2"><br><br>
<button onclick="calculate('add')">Add</button>
<button onclick="calculate('subtract')">Subtract</button>
<button onclick="calculate('multiply')">Multiply</button>
<button onclick="calculate('divide')">Divide</button><br><br>
<p id="result"></p>
</body>
</html>
Output:

You might also like