Scribd
Upload
2 views9 pages

Web Lab Programs

The document contains various HTML and JavaScript code snippets for creating web pages, including a college website with department details, a class timetable, a student registration form, multimedia integration, frame layouts, and JavaScript programs for arithmetic operations, prime number checking, object creation, array manipulation, and email validation. Each section provides specific examples of HTML structure and JavaScript functionality. The content is aimed at demonstrating web development techniques and practices.

Uploaded by

Roopa Sk
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
2 views9 pages

Web Lab Programs

The document contains various HTML and JavaScript code snippets for creating web pages, including a college website with department details, a class timetable, a student registration form, multimedia integration, frame layouts, and JavaScript programs for arithmetic operations, prime number checking, object creation, array manipulation, and email validation. Each section provides specific examples of HTML structure and JavaScript functionality. The content is aimed at demonstrating web development techniques and practices.

Uploaded by

Roopa Sk
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/ 9

1.

Design web pages for your college containing college name and Logo,
departments list using href, list tags.
<html>
<head>
<title>
College Department Details
</title>
</head>
<body bgcolor="lightgreen">
<marquee bgcolor="red"><FONT SIZE="100">WELCOME TO IBMR BUSINESS
SCHOOL</MARQUEE></FONT>
<img src="C:\Users\ibmr\Desktop\IBB.jpg"align="RIGHT"></marquee>
<h1 align="center" style="color: black;">IBMR COLLEGE</h1>
<h2 align="center" style="color: black;">Akashy colony,Vidya nagar</h2>
<h2 align="center" style="color: black;">HUBBALLI-580030</h2>
<hr>
<h2 align="center" style="color: BLUE;">About College </h2>
<p style="font-family:courier";>IBMR Hubli, officially the Institute of Business
Management and Research, is a private business school located in Hubli, Karnataka,
India. It was established in 1999 and is recognized by AICTE. IBMR Hubli offers a range
of undergraduate and postgraduate programs, including MBA, BBA, and PGDM, with a
focus on industry-aligned learning. IBMR Business School, Hubli (also known as IBMR
Business School Hubli), founded in 1999, is located in Hubli, Karnataka. IBMR Business
School Hubli is a private institute and it has course approved by AICTE. It offers 1 course
at PG level. Course MBA/PGDM is provided in Full Time mode. The institute offers the
course in streams such as Banking, Finance & Insurance, Business & Management
Studies and Hospitality & Travel. These course is served in various specialisations such
as Agriculture & Food Business, HealthCare & Hospital, Operations, Retail. The institute
provides an annual intake of 120 students. The total fees for all the course at IBMR
Business School, Hubli is around INR 4,20,000. IBMR Business School, Hubli has a
well-equipped campus with all the advanced facilities.
</p>
<h2><b>Courses Offered</b></h2>
<ul>
<li>PUC</li>
<li>Bsc</li>
<li>BCA</li>
<li>BCOM</li>
<li>BBA</li>
<li>BA</li>
<li>MBA</li>
<li>MCOM</li>
</ul>
<h2>Department of Computer Science</h2>
<p style="font-family:courier">To educate the young
minds with the ability to manage real world problem with the latest technology,
to inculcate professional behaviors, strong ethical values, innovative research
capability and leadership ability.
Help the students to explore the depths of computer science, exalt in them and at
the same time join hands with the other
branches of science to turn something virtual into real and vice versa.</p>
<h2>Faculties of Computer Science</h2>
<ol>
<li>Prof Roopa</li>
<li>prof Kavita</li>
<li>Prof Swathi</li>
<li>Prof Bharati</li>
</ol>
<h3>Condact as </h3>
<p>Phone Number: 09945111232</p>
<p>Email:info@ibmrbschool.org</p>

<marquee bgcolor="yellow"><FONT SIZE="100">THANK YOU VISIT


AGAIN</MARQUEE></FONT>
</body>
</html>

2. Create a class timetable using table tag.


<html>
<head>
<title>time table</title>
</head>
<body bgcolor="VIOLET">
<H1><FONT COLOR="BLUE"><CENTER>COLLEGE TIME TABLE</FONT></H1>
<table border="2"BGCOLOR="CYAN"cellspacing="3" align="center">
<tr>
<td align="center">
<td>9-10
<td>10-11
<td>11-12
<td>12-1
<td>1-2
<td>2-3
<td>3-4
<td>4-5
</tr>
<tr>
<td align="center">MONDAY
<td align="center">---<td align="center"><font color="blue">CS<br>
<td align="center"><font color="pink">Phy<br>
<td align="center"><font color="red">Botny<br>
<td rowspan="6"align="center">L<br>U<br>N<br>C<br>H
<td align="center"><font color="maroon">kan<br>
<td align="center"><font color="brown">Hindi<br>
<td align="center">Zoolgy
</tr>
<tr>
<td align="center">TUESDAY
<td align="center"><font color="blue">OEC<br>
<td align="center"><font color="red">Maths<br>
<td align="center"><font color="pink">Stat<br>
<td align="center">---
<td align="center"><font color="orange">zology<BR>
<td colspan="3" align="center"><font color="green"> CS lab
</tr>
<tr>
<td align="center">WEDNESDAY
<td align="center"><font color="pink">CS<br>
<td align="center"><font color="orange">Maths<BR>
<td align="center"><font color="brown">Botny<br>
<td align="center">---
<td colspan="3" align="center"><font color="green"> Phy lab
</tr>
<tr>
<td align="center">THURSDAY
<td align="center">Physics<br>
<td align="center"><font color="brown">Maths<br>
<td align="center"><font color="orange">Stat<BR>
<td align="center">---
<td align="center"><font color="blue">zoology<br>
<td colspan="3" align="center"><font color="green">zoology lab
</tr>
<tr>
<td align="center">FRIDAY
<td align="center"><font color="orange">Maths<BR>
<td align="center"><font color="maroon">CS<br>
<td align="center"><font color="blue">Physics<br>
<td align="center">---
<td align="center"><font color="pink">SUB4<br>
<td colspan="3" align="center"><font color="green"> Botny lab
</tr>
<tr>
<td align="center">SATURDAY
<td align="center"><font color="red">Maths<br>
<td colspan="3" align="center">seminar
<td align="center"><font color="pink">cs<br>
<td align="center"><font color="brown">Stat<br>
<td align="center">library
</tr>
</body>
</html>

3. Write a HTML code to design Student registrations form for your college
Admission.

<!DOCTYPE html>
<html>
<!-- Header Section-->
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
Student Registration Form
</title>
</head>
<!--Body of the Webpage-->
<body bgcolor="orange">
<!--Start of Form-->
<div style="margin: auto;width: 30%;">
<form>
<h2>Student Registration Form</h2>
<p>Fill in this form to register</p>
<br>

<!--Input elemets for form-->


<label><b>First Name</b></label>
<input type="text" placeholder="Enter your first name" name="first_name" required>
<br>

<br>
<label><b>Last Name</b></label>
<input type="text" placeholder="Enter your last name" name="last_name" required>
<br>
<br>
<label><b>E-mail</b></label>
<input type="email" placeholder="Enter your e-mail" name="email" required>
<br>
<br>
<label><b>Date of Birth</b></label>
<input type="date" name="dob" required>
<br>
<br>
<label><b>Set Username</b></label>
<input type="text" placeholder="Set Username" name="username" required>
<br>
<br>
<label><b>Set Password</b></label>
<input type="password" placeholder="Set password" name="password" required>
<br>
<br>
<label><b>Gender</b></label><br>
<input type="radio" name="gender" value="Male">
<label for="Male">Male</label><br>
<input type="radio" name="gender" value="Female">
<label for="Female">Female</label><br>
<BR>
<br>
<label><b>Course :</b></label>
<select>
<option value="Course">Course</option>
<option value="A">BSC </option>
<option value="B">BCA </option>
<option value="C">BBA </option>
<option value="D">BCOM</option>
<option value="E">BA</option>
</select>
<br>
<br>
<input type="button" value="Register"/>
</form>
</div>
</body>
</html>

4. Design Web Pages with includes Multi-Media data (Image, Audio, Video, GIFs
etc)
<html>
<body>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video><br>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<img src="file:///C:/Users/ibmr/Desktop/aaa.png">
</body>
</html>

5. Create a web page using frame.


<html>
<frameset cols="*,*,*">
<frameset rows="*,*">
<frame src="frame_1.html">
<frame src="frame_2.html">
</frameset>
<frame src="frame_3.html">
<frame src="frame_4.html">
</frameset>
</html>
6. Write code in HTML to develop a webpage having two frames that divide the
webpage into two equal rows and then divide the row into equal columns fill
each frame with a different background color.

<html>
<head>
</head>
<frameset rows="50%,50%">
<frameset cols="50%,50%">
<frame src="" style="background:red"></frame>
<frame src="" style="background:green"></frame>
</frameset>
<frame src="" style="background:orange"></frame>
</frameset>
</htm
7. Write CSS code to Use Inline CSS to format your ID Card.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 40%;
}

.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.container {
padding: 2px 16px;
}
</style>
</head>
<body>
<h2>Card</h2>
<div class="card">
<img src="img_avatar.png" alt="Avatar" style="width:100%">
<div class="container">
<h4><b>John Doe</b></h4>
<p>Architect & Engineer</p>
</div>
</div>
</body>
</html>

8. Using HTML, CSS create display a text called ―Hello India !ǁ on top of an
image of India-Map using an overlay.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Independence Day</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<body>
<div id="top"></div>
<div id="middle">
<div id="text">Hello India</div>
<img src="C:\Users\ibmr\Desktop\download.jpg">
</div>mm

9. Write a JavaScript Program to perform Basic Arithmetic operations

<html>
<head>
<title>Arithmetic Operations</title>
</head>
<body>
<script type="text/javascript">
var a = 12;
var b = 34;
var result;
document.write("Value of a = " + a + " and b = "+ b);
result = a + b;
document.write("<br>Addition of a & b = " + result );
result = a - b;
document.write("<br>Subtraction of a & b = " + result );
result = a * b;
document.write("<br>Multiplication of a & b = " + result );
result = a / b;
document.write("<br>Division of a & b = " + result );
</script>
</body>
</html>

10. JavaScript Program to Check Prime Number.

<HTML>
<body>
<h1>Prime Numbers </h1>
<p id="piyu"></p>
</p>
<p id="prime-list"></p>
<script>
for (let i = 1; i <= 100; i++) {
let isPrime = true;
for (let j = 2; j < i; j++) {
if (i % j === 0) {
isPrime = false;
break;
}
}
if (isPrime && i > 1) {
const li = document.createElement("li");
li.textContent = i;
document.getElementById("prime-list").appendChild(li);
}
}
</script>
</body>
</HTML>

11. JavaScript Program to implement JavaScript Object Concept.


<html>
<body>
<h1>Creating JavaScript Objects</h1>
<h2>Using an Object Literal</h2>

<p id="demo"></p>

<script>
// Create an empty Object
const person = {};

// Add Properties
person.firstName = "ASHOK";
person.lastName = "KUMAR";
person.age = 20;
person.eyeColor = "blue";

// Display Data from Object


document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>

12. JavaScript Program to Create Array and inserting Data into Array

<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The push() Method</h2>
<p>push() adds new items to the end of an array:</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");
document.getElementById("demo").innerHTML = fruits;
</script>
</body>
</html>

13. JavaScript Program to Validate an Email Address

<html>
<head>
<script>
function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
</script>
</head>
<body>
<h2>JavaScript Validation</h2>
<form name="myForm" action="/action_page.php" onsubmit="return validateForm()"
method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy