Scribd
Upload
4 views

Web Technology 1

The document contains a series of HTML and JavaScript code examples for web development, including creating a college webpage, class timetable, student registration form, multimedia page, frameset, ID card, and overlay text. It also includes JavaScript programs for basic arithmetic operations, prime number checking, object demonstration, array manipulation, and email validation. Each example is structured with HTML and styled with CSS where applicable.

Uploaded by

codewithmanju
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
4 views

Web Technology 1

The document contains a series of HTML and JavaScript code examples for web development, including creating a college webpage, class timetable, student registration form, multimedia page, frameset, ID card, and overlay text. It also includes JavaScript programs for basic arithmetic operations, prime number checking, object demonstration, array manipulation, and email validation. Each example is structured with HTML and styled with CSS where applicable.

Uploaded by

codewithmanju
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/ 16

Web Technology -JS,HTML,CSS LAB

1.

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>My College</title>

</head>

<body>

<h1>My College</h1>

<img src="college-logo.png" alt="College Logo" width="150">

<h2>Departments</h2>

<ul>

<li><a href="computer_science.html">Computer Science</a></li>

<li><a href="electronics.html">Electronics</a></li>

<li><a href="mechanical.html">Mechanical Engineering</a></li>

<li><a href="civil.html">Civil Engineering</a></li>

<li><a href="business.html">Business Administration</a></li>

</ul>

</body>

</html>

2. Create a class timetable using table tag.


<!DOCTYPE html>

<html>

<head>

<title>Class Timetable</title>

<style>

table { width: 100%; border-collapse: collapse; text-align: center; }


th, td { border: 1px solid black; padding: 10px; }

th { background-color: #f2f2f2; }

</style>

</head>

<body>

<h2>Class Timetable</h2>

<table>

<tr>

<th>Day</th><th>9-10</th><th>10-11</th><th>11-12</th><th>12-1</th><th>Lunch</
th><th>2-3</th><th>3-4</th>

</tr>

<tr>

<td>Mon</td><td>Math</td><td>Sci</td><td>Eng</td><td>Hist</td><td
rowspan="6">Break</td><td>Phy</td><td>Comp</td>

</tr>

<tr>

<td>Tue</td><td>Eng</td><td>Math</td><td>Phy</td><td>Sci</td><td>Hist</
td><td>Sports</td>

</tr>

<tr>

<td>Wed</td><td>Sci</td><td>Comp</td><td>Eng</td><td>Math</td><td>Hist</
td><td>Phy</td>

</tr>

</table>

</body>

</html>

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

<!DOCTYPE html>

<html>
<head>

<title>Student Registration</title>

<style>

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

form { width: 50%; margin: auto; padding: 20px; border: 1px solid #ccc; background:
#f9f9f9; }

input, select, textarea { width: 100%; margin-top: 5px; padding: 8px; }

button { margin-top: 10px; padding: 10px; background: #28a745; color: white; border:
none; }

</style>

</head>

<body>

<h2>Student Registration Form</h2>

<form>

<input type="text" placeholder="Full Name" required>

<input type="date" required>

<select><option>Male</option><option>Female</option><option>Other</option></
select>

<input type="email" placeholder="Email" required>

<input type="tel" placeholder="Phone" required>

<textarea placeholder="Address" rows="3" required></textarea>

<select><option>B.Sc</option><option>B.Com</option><option>B.A</option><option>B.Te
ch</option></select>

<button type="submit">Submit</button>

</form>

</body>

</html>

4. design webpages with includes multi media data(image,audio,video,gifs


etc)
<html lang="en">
<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Multimedia Page</title>

<style>

body { font-family: Arial, sans-serif; text-align: center; background: #f4f4f4; }

.container { background: white; padding: 20px; border-radius: 10px; box-shadow: 0 0


10px rgba(0, 0, 0, 0.1); width: 80%; max-width: 500px; margin: auto; }

img, video, audio { width: 100%; margin: 10px 0; }

</style>

</head>

<body>

<div class="container">

<h2>Multimedia Showcase</h2>

<img src="https://via.placeholder.com/600x300" alt="Image">

<video controls><source src="sample-video.mp4" type="video/mp4"></video>

<audio controls><source src="sample-audio.mp3" type="audio/mp3"></audio>

<img src="https://media.giphy.com/media/26AHONQ79FdWZhAI0/giphy.gif"
alt="GIF">

</div>

</body>

</html>

5.Create a webpage using Frames


<!DOCTYPE html>
<html>
<head>
<title>Frameset Example</title>
</head>
<frameset rows="20%,80%">
<frame src="header.html" name="headerFrame" noresize>
<frameset cols="20%,80%">
<frame src="sidebar.html" name="sidebarFrame" noresize>
<frame src="content.html" name="contentFrame">
</frameset>
</frameset>
<noframes>
<body>
<p>Your browser does not support frames.</p>
</body>
</noframes>
</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.
<!DOCTYPE html>
<html>
<head>
<title>Two Row Frames with Columns</title>
<style>
body, html {
margin: 0;
height: 100%;
}
.row {
display: flex;
height: 50%;
}

.column {
flex: 1;
}

.top-left {
background-color: #FF6666; /* Red */
}

.top-right {
background-color: #66B2FF; /* Blue */
}

.bottom-left {
background-color: #66FF66; /* Green */
}

.bottom-right {
background-color: #FFFF66; /* Yellow */
}
</style>
</head>
<body>
<div class="row">
<div class="column top-left"></div>
<div class="column top-right"></div>
</div>
<div class="row">
<div class="column bottom-left"></div>
<div class="column bottom-right"></div>
</div>
</body>
</html>
7. Write CSS code to Use Inline CSS to format your ID Card.
<!DOCTYPE html>
<html>
<head>
<title>ID Card</title>
</head>
<body>
<div style="width: 300px; height: 180px; border: 2px solid #000; padding:
10px; font-family: Arial, sans-serif; background-color: #f2f2f2; border-radius:
10px; text-align: center;">

<img src="https://via.placeholder.com/80" alt="Profile Photo"


style="border-radius: 50%; margin-bottom: 10px;">
<h2 style="margin: 5px; font-size: 20px; color: #333;">John Doe</h2>

<p style="margin: 5px; font-size: 14px;"><strong>ID:</strong>


123456789</p>
<p style="margin: 5px; font-size: 14px;"><strong>Department:</strong>
IT</p>
<p style="margin: 5px; font-size: 14px;"><strong>Role:</strong> Web
Developer</p>

</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>
<head>
<title>Hello India Overlay</title>
</head>
<body>

<div style="position: relative; width: 600px; max-width: 100%; margin: 0


auto;">
<!-- India Map Image -->
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/India-
locator-map-blank.svg/1200px-India-locator-map-blank.svg.png"
alt="India Map"
style="width: 100%; height: auto; display: block;">

<!-- Overlay Text -->


<div style="
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
color: white;
font-size: 36px;
font-weight: bold;
background-color: rgba(0, 0, 0, 0.5);
padding: 10px 20px;
border-radius: 10px;
text-align: center;
">
Hello India!
</div>
</div>

</body>
</html>
PART-B
1. Write a JavaScript Program to perform Basic Arithmetic operations
<!DOCTYPE html>
<html>
<head>
<title>Arithmetic Operations</title>
</head>
<body>

<h2>Basic Arithmetic Operations</h2>

<label>Enter first number: </label>


<input type="number" id="num1"><br><br>

<label>Enter second number: </label>


<input type="number" id="num2"><br><br>

<button onclick="calculate()">Calculate</button>

<h3>Results:</h3>
<p id="add"></p>
<p id="sub"></p>
<p id="mul"></p>
<p id="div"></p>
<script>
function calculate() {
var a = parseFloat(document.getElementById("num1").value);
var b = parseFloat(document.getElementById("num2").value);

document.getElementById("add").innerHTML = "Addition: " + (a + b);


document.getElementById("sub").innerHTML = "Subtraction: " + (a -
b);
document.getElementById("mul").innerHTML = "Multiplication: " + (a
* b);

if (b !== 0) {
document.getElementById("div").innerHTML = "Division: " + (a / b);
} else {
document.getElementById("div").innerHTML = "Division: Cannot
divide by zero";
}
}
</script>

</body>
</html>
2. JavaScript Program to Check Prime Number
<!DOCTYPE html>
<html>
<head>
<title>Prime Number Checker</title>
</head>
<body>

<h2>Check Prime Number</h2>

<label>Enter a number: </label>


<input type="number" id="numberInput">
<button onclick="checkPrime()">Check</button>

<h3 id="result"></h3>

<script>
function checkPrime() {
let num = parseInt(document.getElementById("numberInput").value);
let isPrime = true;

if (num <= 1) {
isPrime = false;
} else {
for (let i = 2; i <= Math.sqrt(num); i++) {
if (num % i === 0) {
isPrime = false;
break;
}
}
}

if (isPrime) {
document.getElementById("result").innerHTML = num + " is a Prime
Number.";
} else {
document.getElementById("result").innerHTML = num + " is NOT a
Prime Number.";
}
}
</script>

</body>
</html>
3.JavaScript Program to implement JavaScript Object Concept
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Object Example</title>
</head>
<body>

<h2>JavaScript Object Demo</h2>


<button onclick="showDetails()">Show Student Details</button>
<p id="output"></p>

<script>
// Create a JavaScript object
var student = {
name: "Aarav",
age: 21,
course: "Computer Science",
display: function() {
return `Name: ${this.name} <br> Age: ${this.age} <br> Course: $
{this.course}`;
}
};

// Function to show details


function showDetails() {
document.getElementById("output").innerHTML =
student.display();
}
</script>

</body>
</html>
4. JavaScript Program to Create Array and inserting Data into Array
<!DOCTYPE html>
<html>
<head>
<title>Array Example</title>
</head>
<body>

<h2>JavaScript Array: Insert & Display</h2>

<input type="text" id="item" placeholder="Enter item">


<button onclick="addItem()">Add to Array</button>

<h3>Array Contents:</h3>
<p id="output"></p>
<script>
// Create an empty array
let myArray = [];

// Function to add item


function addItem() {
let value = document.getElementById("item").value;
if (value !== "") {
myArray.push(value); // insert into array
document.getElementById("item").value = ""; // clear input
displayArray();
}
}

// Function to display array


function displayArray() {
document.getElementById("output").innerHTML = myArray.join(",
");
}
</script>

</body>
</html>
5. JavaScript Program to Validate an Email Address
<!DOCTYPE html>
<html>
<head>
<title>Email Validation</title>
</head>
<body>

<h2>Email Validator</h2>

<input type="text" id="email" placeholder="Enter your email">


<button onclick="validateEmail()">Validate</button>
<p id="result"></p>

<script>
function validateEmail() {
var email = document.getElementById("email").value;

// Simple email regex pattern


var pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

if (pattern.test(email)) {
document.getElementById("result").innerHTML = "✅ Valid Email
Address";
document.getElementById("result").style.color = "green";
} else {
document.getElementById("result").innerHTML = "❌ Invalid Email
Address";
document.getElementById("result").style.color = "red";
}
}
</script>

</body>
</html>

You might also like