[Link] a static webpage using table tags of HTML.
CODE-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Indian Cities and Monuments</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h2>Indian Cities and Monuments</h2><table>
<tr>
<th>City</th>
<th>Monument</th>
</tr>
<tr>
<td>Delhi</td>
<td>Red Fort</td>
</tr>
<tr>
<td>Agra</td>
<td>Taj Mahal</td>
</tr>
<tr>
<td>Jaipur</td>
<td>Hawa Mahal</td>
</tr>
<tr>
<td>Mumbai</td>
<td>Gateway of India</td>
</tr></table>
</body>
</html>
OUTPUT:
[Link] an html code to show the use of different types of lists.
CODE-
<!DOCTYPE html>
<html lang="en">
<head>
<title>List Example</title>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language is the standard markup language for
creating web pages.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets is a style sheet language used for
describing the presentation of a document
written in a markup language like HTML.</dd>
</dl>
</body>
</html>
OUTPUT:
[Link] a web page consisting Background image implement some
background properties
CODE-
<!DOCTYPE html>
<html>
<head>
<title>Image Insertion Example</title>
</head>
<body>
<h1>image insertion</h1>
<img witdh= "200px"
height="200" src="[Link]
7701126_1280.jpg">
</body>
</html>
OUTPUT:
[Link] the use of different styles sheet
a) Inline
b) Internal
c) External
CODE-
<!DOCTYPE html>
<html>
<head>
<title>Stylesheet Demo</title>
<style>
/* Internal Styles */
h1 {
color: blue;
}
p {
font-size: 18px;
}
</style>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1 style="color: red;">Inline Style</h1>
<p>This is a paragraph with internal style.</p>
<h1>External Style</h1>
<p>This is a paragraph with external style.</p>
</body>
</html>
CSS CODE:
OUTPUT:
[Link] an html code to divide the page into four division using div tag with
proper margin , border and some CSS properties .
CODE-
<!DOCTYPE html>
<html>
<head>
<style>
.d1{
background-color: red;
height:200px;
width:200px;
}
.d2{
background-color: green;
height:200px;
width:200px;
margin-left: 200px;
margin-top: -200px;
}
.d3{
background-color: yellow;
height:200px;
width:200px;
}
.d4{
background-color:blue ;
height: 200px;
width: 200px;
margin-left: 200px;
margin-top: -200px;
}
</style>
</head>
<body>
<div class="d1">this is divion 1</div>
<div class="d2">this is divion 2</div>
<div class="d3">this is divion 3</div>
<div class="d4">this is divion 3</div>
</body>
OUTPUT:
[Link] target names are reserved while using <a href >.Explain each by
designing single HTML document.
i) _blank
ii) _self
iii) _parent
Code-
<!DOCTYPE html>
<html>
<head>
<title>Target Attribute Example</title>
</head>
<body>
<h1>Target Attribute Demonstration</h1>
<p>Click the following links to see the different target attribute
behaviors:</p>
<ul>
<li><a href="[Link] target="_blank">Open Google in a
new tab</a></li>
<li><a href="[Link] target="_self">Open Google in the
same tab (default)</a></li>
</ul>
</body>
</html>
OUTPUT:
[Link] a JavaScript code to change the background content on button click
.
CODE-
<!DOCTYPE html>
<html>
<head>
<title>Change Background Color</title>
</head>
<body>
<button onclick="changeColor()">Click to Change Color</button>
<script>
function changeColor() {
const colors = ["red", "green", "blue", "yellow"];
const randomIndex = [Link]([Link]() * [Link]);
const randomColor = colors[randomIndex];
[Link] = randomColor;
}
</script>
</body>
</html>
OUTPUT:
Q8. Write a JavaScript code to create four functions addition, subtraction ,
multiplication , division .create two buttons for submit and reset the output
must be displayed in two Text fields.
CODE-
<!DOCTYPE html>
<html>
<head>
<title>Arithmetic Operations</title>
<script>
function addition() {
let num1 = parseInt([Link]("num1").value);
let num2 = parseInt([Link]("num2").value);
let result = num1 + num2;
[Link]("result").value = result;
}
function subtraction() {
let num1 = parseInt([Link]("num1").value);
let num2 = parseInt([Link]("num2").value);
let result = num1 - num2;
[Link]("result").value = result;
}
function multiplication() {
let num1 = parseInt([Link]("num1").value);
let num2 = parseInt([Link]("num2").value);
let result = num1 * num2;
[Link]("result").value = result;
}
function division() {
let num1 = parseInt([Link]("num1").value);
let num2 = parseInt([Link]("num2").value);
if (num2 === 0) {
alert("Division by zero is not allowed.");
return;
}
let result = num1 / num2;
[Link]("result").value = result;
}
function reset() {
[Link]("num1").value = "";
[Link]("num2").value = "";
[Link]("result").value = "";
}
</script>
</head>
<body>
<h1>Arithmetic Operations</h1>
<label for="num1">Number 1:</label>
<input type="text" id="num1"><br><br>
<label for="num2">Number 2:</label>
<input type="text" id="num2"><br><br>
<button onclick="addition()">Add</button>
<button onclick="subtraction()">Subtract</button>
<button onclick="multiplication()">Multiply</button>
<button onclick="division()">Divide</button>
<button onclick="reset()">Reset</button><br><br>
<label for="result">Result:</label>
<input type="text" id="result" readonly>
</body>
</html>
OUTPUT:
[Link] an HTML code for the below login page: using internal CSS.
i)Name ii)Course iii)Email-id iv)Password
CODE-
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: aqua;
}
form {
width: 300px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #fff;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"],
input[type="email"],
input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="course">Course:</label>
<input type="text" id="course" name="course" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<button type="submit">Login</button>
</form>
</body>
</html>
OUTPUT:
[Link] an HTML code to demonstrate the use of hover selector with <a>
tag using CSS.
Code-
<!DOCTYPE html>
<html>
<head>
<title>Hover Effect on Links</title>
<style>
a:hover {
color: blue;
text-decoration: underline;
}
</style>
</head>
<body>
<p>Hover over the links below to see the effect:</p>
<ul>
<li><a href="[Link]
<li><a href="[Link]
<li><a href="[Link]
</ul>
</body>
</html>
OUTPUT:
[Link] an HTML code to display a drop down menu(list) on a mouse-
hover event (using hover selector) on the web page.
CODE:
!DOCTYPE html>
<html>
<head>
<title>Hover Dropdown Menu</title>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div class="dropdown">
<button class="dropbtn">Menu</button>
<div class="dropdown-content">
<a href="[Link]
<a href="[Link]
<a href="[Link]
</div>
</div>
</body>
</html>
OUTPUT:
[Link] student registration webpage using HTML form objects.
CODE-
<!DOCTYPE html>
<html>
<head>
<title>BO Registration Form</title>
</head>
<body bgcolor="yellow">
<form>
<table align="center" border="5px">
<tr>
<td><label for="fname">First Name: </label></td>
<td><input type="text" id="frame" name="fname"></td>
</tr>
<tr>
<td><label for="Iname">Last Name: </label></td>
<td><input type="text" id="name" name="Iname"></td>
</tr>
<tr>
<td><label for="contact">Contact: </label></td>
<td><input type="text" id="contact" name="contact"></td>
</tr>
<tr>
<td><label for="email">Email: </label></td>
<td><input type="email" id="email" name="email"></td>
</tr>
<tr>
<td><label for="password">Password: </label></td>
<td><input type="password" id="password" name="password"></td>
</tr>
<tr>
<td><label for="dob">Date of Birth: </label></td>
<td><input type="date" id="dob" name="dob"></td>
</tr>
<tr>
<td><label>Gender: </label></td>
<td>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
</td>
</tr>
<tr>
<td><label for="hobbies">Hobbies: </label></td>
<td>
<input type="checkbox" id="dancing" name="hobby" value="dancing">
<label for="dancing">Dancing</label><br>
<input type="checkbox" id="singing" name="hobby" value="singing">
<label for="singing">Singing</label>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="Submit" onclick="alert('Alert: Do you want to
submit?')">
<input type="reset" value="Reset">
</td>
</tr>
</table>
</form>
</body>
</html>
OUTPUT:
Q13. Write a JavaScript to validate inputs to a form consists of four different
functions:
a) Email validation will check to see if a value lives up to the general
syntax of an [Link] validate it with @ .
b) Empty validation will check to see if a field is empty or not.
c) Username validation will check to see if a value consists of a number , a
capital letter ,a small letter and length should be greater than 8
character.
d) A proper alert box should be displayed if the user doesn’t enter the
value in the above format.
CODE-
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
<script>
function validateEmail(email) {
const re = /^[\w.+_-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
return [Link](email);
}
function isEmpty(value) {
return [Link]() === "";
}
function validateUsername(username) {
const re = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,}$/;
return [Link](username);
}
function validateForm() {
const email = [Link]("email").value;
const name = [Link]("name").value;
if (!validateEmail(email)) {
alert("Invalid email format. Please enter a valid email
address.");
return false;
}
if (isEmpty(name)) {
alert("Please enter your name.");
return false;
}
if (!validateUsername(name)) {
alert("Invalid username format. Username must contain at least
8 characters, a number, a lowercase letter, and an uppercase letter.");
return false;
}
return true;
}
</script>
</head>
<body>
<h1>Registration Form</h1>
<form onsubmit="return validateForm()">
<label for="email">Email:</label>
<input type="email" id="email" required><br><br>
<label for="name">Username:</label>
<input type="text" id="name" required><br><br>
<button type="submit">Submit</button>
</form>
</body>
</html>
OUTPUT:
[Link] a JavaScript to validate a password field for:
a) Minimum length of password should be greater than 6 characters
b) There should be two fields for password and none of the field should
be left empty
c) Both the password should be same
d) The verification should be done on button click .
A proper alert box should be displayed if the user doesn’t enter the values in
the above format.
CODE-
<!DOCTYPE html>
<html>
<head>
<title>Password Validation</title>
<style>
input[type="password"] {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button[type="submit"] {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<form>
<label for="password1">Password:</label>
<input type="password" id="password1" name="password1" aria-
label="Password">
<label for="password2">Confirm Password:</label>
<input type="password" id="password2" name="password2" aria-label="Confirm
Password">
<button type="submit" onclick="return validatePassword()">Submit</button>
</form>
<script>
function validatePassword() {
const password1 = [Link]("password1").value;
const password2 = [Link]("password2").value;
if (!password1 || !password2) {
alert("Please fill in both password fields.");
return false;
}
if ([Link] < 6) {
alert("Password must be at least 6 characters long.");
return false;
}
if (password1 !== password2) {
alert("Passwords do not match.");
return false;
}
return true;
}
</script>
</body>
</html>
OUTPUT:
[Link] a program in JavaScript to concatenate two strings.
CODE-
<!DOCTYPE html>
<html>
<head>
<title>Concatenate Strings</title>
</head>
<body>
<script>
const string1 = "ISHANT, ";
const string2 = "BHANDARI!";
const result = string1 + string2;
[Link](result);
</script>
</body>
</html>
OUTPUT:
Q16. Write a program in JavaScript to implement any 5 string methods .
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<title>String Methods</title>
</head>
<body>
<h1>String Methods in JavaScript</h1>
<div id="results"></div>
<script>
let str = "Hello, World!";
let output = "";
let newStr = str + " How are you?";
output += "1. Concatenation: " + newStr + "<br>";
let subStr = [Link](0, 5);
output += "2. Substring extraction (0, 5): " + subStr + "<br>";
let index = [Link]("World");
output += "3. Index of 'World': " + index + "<br>";
let replacedStr = [Link]("World", "JavaScript");
output += "4. Replacing 'World' with 'JavaScript': " + replacedStr +
"<br>";
let upperCaseStr = [Link]();
output += "5. Uppercase: " + upperCaseStr + "<br>";
[Link]("results").innerHTML = output;
</script>
</body>
</html>
OUTPUT:
Q17. Write a program in JavaScript to print the square of the first natural
numbers
CODE-
<!DOCTYPE html>
<html>
<head>
<title>Square of Natural Numbers</title>
</head>
<body>
<h1>Squares of Natural Numbers</h1>
<div id="output"></div>
<script>
function printSquares(n) {
let output = "";
for (let i = 1; i <= n; i++) {
output += `Square of ${i}: ${i * i}<br>`;
}
[Link]("output").innerHTML = output;
}
printSquares(5);
</script>
</body>
</html>
OUTPUT:
Q18. Write a program in JavaScript to print the cube of a number take value
from the user.
CODE-
<!DOCTYPE html>
<html>
<head>
<title>Cube of a Number</title>
</head>
<body>
<input type="number" id="numberInput" placeholder="Enter a number">
<button onclick="calculateCube()">Calculate Cube</button>
<p id="result"></p>
<script>
function calculateCube() {
const number = parseInt([Link]("numberInput").value);
const cube = number * number * number;
[Link]("result").textContent = `The cube of ${number}
is ${cube}`;
}
</script>
</body>
</html>
OUTPUT:
[Link] a program in JavaScript to create a user defined array.
CODE-
<!DOCTYPE html>
<html>
<head>
<title>User-Defined Array</title>
</head>
<body>
<script>
function createUserDefinedArray() {
let size = parseInt(prompt("Enter the size of the array:"));
let array = [];
for (let i = 0; i < size; i++) {
let element = prompt(`Enter element ${i + 1}:`);
[Link](element);
}
return array;
}
let myArray = createUserDefinedArray();
[Link]("User-defined array:", myArray);
// Print each element of the array
for (let i = 0; i < [Link]; i++) {
[Link](`Element ${i + 1}:`, myArray[i]);
}
</script>
</body>
</html>
OUTPUT:
Q20. Write a program in JavaScript to implement any five methods of an
array..
CODE-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Array method example</title>
<script src="[Link]"></script>
</head>
<body>
<h1>javascript Array method</h1>
<p>open the console to see the output of the array operation.</p>
</body>
</html>
JAVA SCRIPT:
const numbers = [1,2,3,4,5];
[Link](6);
[Link](numbers);
const last = [Link]();
[Link](last);
[Link](numbers);
const morenumbers = [7,8,9];
const combined = [Link](morenumbers);
[Link](combined);
const sliced = [Link](1,3);
[Link](sliced);
const evennumbers = [Link](num => num % 2 === 0);
[Link](evennumbers);
OUTPUT:
Q21 Write a program in JavaScript to show alert() , confirm() ,prompt().
CODE-
<!DOCTYPE html>
<html>
<head>
<title>Alert, Confirm, and Prompt</title>
</head>
<body>
<script>
alert("This is an alert message.");
let isConfirmed = confirm("Are you sure you want to continue?");
if (isConfirmed) {
alert("You confirmed.");
} else {
alert("You canceled.");
}
let name = prompt("Please enter your name:");
alert("Hello, " + name + "!");
</script>
</body>
</html>
OUTPUT:
