Scribd
Upload
43 views25 pages

Web Technology

Wehwbwwbwbb twtagahaja

Uploaded by

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

Web Technology

Wehwbwwbwbb twtagahaja

Uploaded by

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

Web Technology

Lab Manual

1. WAP in HTML for displaying a form using checkboxes and radio buttons.
Program –
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form with Checkboxes and Radio Buttons</title>
</head>
<body>
<h2>Form Example with Checkboxes and Radio Buttons</h2>
<form action="#">

<!-- Radio Buttons -->


<p>Choose your gender:</p>
<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>

<!-- Checkboxes -->


<p>Select your hobbies:</p>
<input type="checkbox" id="reading" name="hobbies" value="reading">
<label for="reading">Reading</label><br>
<input type="checkbox" id="traveling" name="hobbies" value="traveling">
<label for="traveling">Traveling</label><br>

<input type="checkbox" id="sports" name="hobbies" value="sports">


<label for="sports">Sports</label><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Output –

2. WAP in HTML to create frames using percentage.


Program –
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Frames Using Percentage</title>
</head>
<body>
<h2>Web Page with Frames</h2>
<frameset cols="30%, 70%">
<frame src="https://www.example.com" name="left">
<frame src="https://www.example.com" name="right">
</frameset>
</body>
</html>
Note: The <frameset> element is deprecated in HTML5. It's better to use iframes or other
layout techniques for modern web design.
Output –

3. WAP code to create a Home Page having two links: About Us, Our Services.
Program –
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page</title>
</head>
<body>
<h1>Welcome to Our Website</h1>
<ul>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="services.html">Our Services</a></li>
</ul>
</body>
</html>
Output –
4. WAP for displaying a flower image in HTML document.
Program –
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flower Image</title>
</head>
<body>
<h1>Beautiful Flower</h1>
<img src="https://cdn2.stylecraze.com/wp-content/uploads/2013/10/1668-Top-
25-Beautiful-Orchid-Flowers-is.jpg.avif" alt="Flower" width="200">
</body>
</html>
Output –
5. WAP code to display your education details in a tabular format.
Program –
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Education Details</title>
<style>
table {
width: 50%;
border-collapse: collapse;}
th, td {
border: 1px solid black; padding: 8px;
text-align: center;}
th {
background-color: #f2f2f2;}
</style>
</head>
<body>
<h2>Education Details</h2>
<table>
<tr>
<th>Degree</th>
<th>Institution</th>
<th>Year</th>
</tr>
<tr>
<td>Bachelor's in Computer Science</td>
<td>XYZ University</td>
<td>2018 - 2022</td>
</tr>
<tr>
<td>High School</td>
<td>ABC School</td>
<td>2016 - 2018</td>
</tr>
</table>
</body>
</html>
Output –

6. WAP code to add border images to an HTML element.


Program –
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Border Image</title>
<style>
.bordered {
border: 20px solid transparent;
border-image: url('border-pattern.png') 30 stretch;
}
</style>
</head>
<body>
<h2>Element with Border Image</h2>

<div class="bordered" style="width: 300px; height: 200px;"> This element has a border
image.
</div>
</body>
</html>
Output –

7. WAP code to set a background-image for the body element.


Program –
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Image</title>
<style>
body {
background-image: url('background.jpg'); background-size: cover;
background-position: center;
}
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This page has a background image.</p>
</body>
</html>
Output –

8. WAP code to set all the border properties in one CSS declaration.
Program –
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shorthand Border Properties</title>
<style>
.bordered-box {
border: 5px solid #4CAF50; /* width, style, and color */ padding: 20px;
width: 300px;
}
</style>
</head>
<body>
<h2>Box with All Border Properties in One Declaration</h2>
<div class="bordered-box">
This box has a border with all properties set in one declaration.
</div>
</body>
</html>
Output –

9. WAP code to create a frameset having a header, navigation, and content section with the
help of CSS.
Program –
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

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


<title>Frameset Layout with CSS</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
display: flex;
flex-direction: column; height: 100vh;
}

header {
background-color: #4CAF50; color: white;
padding: 15px; text-align: center;
}

nav {
background-color: #333; color: white;
padding: 15px; width: 20%;
height: 100%; position: fixed;
top: 60px; /* Adjust according to header height */
}

main {
margin-left: 20%; /* Make space for the nav */ padding: 20px;
height: 100%; overflow-y: auto;
}
</style>
</head>
<body>
<header>
<h1>Website Header</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main>
<h2>Main Content Area</h2>
<p>This is where the main content will be displayed.</p>
</main>
</body>
</html>
Output –
10. WAP code to create rounded corners by using CSS.
Program –
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rounded Corners</title>
<style>
.rounded-box { width: 300px; height: 200px;
background-color: #4CAF50; color: white;
padding: 20px;
border-radius: 15px; /* This property creates rounded corners */ text-align: center;
}
</style>
</head>
<body>
<h2>Element with Rounded Corners</h2>
<div class="rounded-box">
This box has rounded corners.
</div>
</body>
</html>
Output –

11. Write a JS code to print a string "Hello World".


Program –
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World</title>
</head>
<body>
<script>
// Printing "Hello World" to the
console.log("Hello World")
</script>
</body>
</html>

12. Write a JS code for the addition of two numbers.


Program –
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Addition of Two Numbers</title>
</head>
<body>
<script>
// Declare two numbers

let num1 = 5; let num2 = 10;


// Add the numbers
let sum = num1 + num2;
console.log("Sum of 5 & 10 = ",sum)

// Display the result alert("The sum is: " + sum);


</script>
</body>
</html>
Output –
13. Write a JS code to include a function style and display it on the screen.
Program –
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Function Style Display</title>
<style>
.message { color: blue;
font-size: 20px; font-weight: bold;
}
</style>
</head>
<body>
<div id="output"></div>

<script>
function displayMessage() {
document.getElementById('output').innerHTML = "Hii, Bhim Singh"
}

displayMessage();

// Call the function to display the message displayMessage();


</script>
</body>
</html>
Output –

14. Write a JS code to display browser information.


Program –
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Browser Information</title>
</head>
<body>
<h1 id="Browser">""</h1>
<script>
// Get the browser information
let browserInfo = "Browser Name: " + navigator.appName + "<br>" + "Browser Version: "
+ navigator.appVersion + "<br>" + "User-Agent: " + navigator.userAgent;
document.getElementById('Browser').innerHTML = browserInfo;
// Display the browser information document.write(browserInfo);
</script>
</body>
</html>
Output –

15. Write a JS code to store multiple values in a single variable using an array.
Program –
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Array Example</title>
</head>
<body>
<script>
// Create an array to store multiple values
let colors = ["Red", "Green", "Blue", "Yellow", "Purple"];
// Display the array contents
alert("Array contents: " + colors.join(", "));
</script>
</body>
</html>

Output –
16. Write a program to display the Date object in JavaScript.
Program –
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Date Object Example</title>
</head>
<body>
<script>
// Create a new Date object
let currentDate = new Date();

// Display the current date and time


alert("Current Date and Time: " + currentDate);
</script>
</body>
</html>

Output –
17. Write a program to reverse a string in JavaScript.
Program –
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reverse a String</title>
</head>
<body>
<script>

function reverseString(str) {
return str.split("").reverse().join("");
}
let originalString = "Hello World!";
let reversedString = reverseString(originalString);
alert("Original String: " + originalString + "\nReversed String: " + reversedString);
</script>
</body>
</html>
Output –

18. Write a program to create an array in JavaScript.


Program –
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create an Array</title>
</head>
<body>
<script>
// Creating an array
let fruits = ["Apple", "Banana", "Cherry", "Date"];
// Displaying the array
alert("Fruits Array: " + fruits.join(", "));
</script>
</body>
</html>

Output –
19. Write a program to add an event handler to a particular element.
Program –
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Handler Example</title>
</head>
<body>
<button id="myButton">Click Me!</button>
<script>
// Adding an event handler to the button
document.getElementById("myButton").addEventListener("click", function() {
alert("Button clicked!");
});
</script>
</body>
</html>

Output –
20. Write a CSS code to set the text color for different elements.
Program –
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Color Styling</title>
<style>
/* Setting the text color for different elements */ body {
color: #333; /* Default text color for body */
}
h1 {
color: red; /* Red text color for h1 */
}
p{
color: green; /* Green text color for paragraph */
}
.important-text {
color: blue; /* Blue color for elements with class 'important-text' */
}
</style>
</head>
<body>
<h1>This is a Heading (Red)</h1>
<p>This is a paragraph (Green)</p>
<p class="important-text">This is some important text (Blue)</p>
</body>
</html>

Output –

You might also like