Scribd
Upload
0 views

Assignment

The document contains multiple assignments related to web development, including creating web pages with links, CSS styling, navigation bars, arithmetic calculations, form validation using JavaScript, and temperature conversion using PHP. Each assignment includes HTML code snippets demonstrating the required functionality and design. The assignments are structured for a student with Roll No. 6675, showcasing various web development concepts and practices.

Uploaded by

d94175385
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0 views

Assignment

The document contains multiple assignments related to web development, including creating web pages with links, CSS styling, navigation bars, arithmetic calculations, form validation using JavaScript, and temperature conversion using PHP. Each assignment includes HTML code snippets demonstrating the required functionality and design. The assignments are structured for a student with Roll No. 6675, showcasing various web development concepts and practices.

Uploaded by

d94175385
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 18

Roll No.

: 6675
Assignment No. :1
Assignment Name : Webpage having link to another page

Q1. Create a web page having link to another web page containing a gallery of
image.

<!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>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: white;
text-align: center;
padding: 1em;
}
.content {
text-align: center;
padding: 20px;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
position: absolute;
bottom: 0;
width: 100%;
}.link a {
text-decoration: none;
color: #333;
font-size: 20px;
font-weight: bold;
}.link a:hover {
color: #007BFF;
}
</style>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>
<div class="content">
<h2>Explore My Image Gallery</h2>
<p>Click the link below to view a collection of beautiful images.</p>
<div class="link">
<a href="p2[2].html">Go to the Gallery</a>
</div>
</div>
<footer>
<p>&copy; 2024 My Website</p>
</footer>
</body>
</html>

Roll No. : 6675


Assignment No. :2
Assignment Name : Webpage having use of CSS properties.
Q. Design a web page to demonstrate the use of – CSS text, color, border and size
properties.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Text, Color, Border & Size Properties</title>
<style>
/* General Body Styling */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
text-align: center;
}
/* Header Styling */
header {
background-color: #4CAF50;
color: white;
padding: 20px;
}
h1 {
font-size: 3em;
margin: 0;
}
h2 {
font-size: 2em;
color: #333;
margin-top: 0;
}
/* Text Styling */
.text-demo {
font-size: 1.5em;
color: #2c3e50;
text-align: left;
padding: 20px;
margin: 10px;
background-color: #ecf0f1;
border: 2px solid #bdc3c7;
border-radius: 10px;
.text-demo strong {
color: #e74c3c;
}
/* Border Styling */
.border-demo {
border: 4px solid #3498db;
padding: 20px;
margin-top: 30px;
width: 80%;
margin-left: auto;
margin-right: auto;
border-radius: 15px;
}
<p>This section demonstrates the <code>border</code> property. The border has a
<code>4px</code> solid blue color and a <code>border-radius</code> of <code>15px</code> to
give it rounded corners. It also has padding and margin for spacing.</p>
</section>

<section class="color-demo">
<h3>Color Styling</h3>
<p>The background color of this section is set using the <code>background-color</code>
property, and the text color is set using the <code>color</code> property. The link inside changes
color when hovered over using the <code>a:hover</code> selector.</p>
<p>For example, visit <a href="https://www.example.com">this link</a> to see the hover
effect!</p>
</section>
<section class="size-demo">
<h3>Size Styling</h3>
<p>This section demonstrates how the <code>font-size</code> property affects the size of the
text. We have a heading with a larger font size, and the text is wrapped in a box with padding and
background color. The font size also adjusts responsively for smaller screens using the
<code>@media</code> query.</p>
</section>
</body>
</html>
Roll No. : 6675
Assignment No. :3
Assignment Name : Webpage having use of header, footer and navigation.

Q3. Design a web page having three section Header, Footer and Navigation bar. Use
<div>, <spam> ,<ul>, and CSS

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Web Page with Header, Footer, and Navigation Bar</title>
<style>
/* General Body Styling */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
/* Header Section */
header {
background-color: #4CAF50;
color: white;
padding: 20px 0;
text-align: center;
}
header h1 {
margin: 0;
}
/* Navigation Bar Styling */
nav {
background-color: #333;
overflow: hidden;
}
nav ul li {
float: left;
}
nav ul l a {
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
nav ul lia:hover {
background-color: #575757;
.content h2 {
color: #333;
}
.content p {
font-size: 1.1em;
line-height: 1.6;
color: #555;
}
/* Footer Section */
footer {
background-color: #333;
color: white;}
/* Clearfix for Navigation Bar */
nav::after {
content: "";
display: table;
clear: both;
}
</style>
</head>
</header>
<!-- Navigation Bar Section -->
<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 Content Section -->
<div class="content">
<h2>About Us</h2>
with CSS styling. We have a header, a navigation bar, and a footer, all styled using basic CSS
properties.</p>
<p>Feel free to modify and experiment with the layout to suit your needs!</p>
</div>
<!-- Footer Section -->
<footer>
<span>&copy; 2024 My Website. All rights reserved.</span>
</footer>
</body>
Roll No. : 6675
Assignment No. :4
Assignment Name : Webpage to perform simple arithmetic operation.

Q4. Create a web page to perform simple arithmetic calculation.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Arithmetic Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
text-align: center;
padding: 20px;
border: 2px solid #ccc;
border-radius: 8px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
margin-top: 10px;
}
button:hover {
background-color: #45a049;
}
.result {
margin-top: 20px;
font-size: 18px;
font-weight: bold;
}
</style>
</head>
<body>

<div class="container">
<h1>Simple Calculator</h1>
<input type="number" id="num1" placeholder="Enter number" />
<br>
<input type="number" id="num2" placeholder="Enter number" />
<br>
<select id="operation">
<option value="add">Add (+)</option>
<option value="subtract">Subtract (-)</option>
<option value="multiply">Multiply (×)</option>
<option value="divide">Divide (÷)</option>
</select>
<br>
<button onclick="calculate()">Calculate</button>
<div class="result" id="result"></div>
</div>
var result;
switch (operation) {
case "add":
result = num1 + num2;
break;
case "subtract":
result = num1 - num2;
break;
case "multiply":
result = num1 * num2;
break;
case "divide":
if (num2 === 0) {
resultDiv.textContent = "Error: Division by zero is not allowed.";
resultDiv.style.color = "red";
return;
}
result = num1 / num2;
break;
default:
resultDiv.textContent = "Please select a valid operation.";
resultDiv.style.color = "red";
return;
}

resultDiv.textContent = "Result: " + result;


resultDiv.style.color = "green";
}
</script>

</body>
</html>
Roll No. : 6675
Assignment No. :4
Assignment Name : HTML form using javascript.

Q4. Design a HTML form with the following fields and validate user input using
JavaScript: Roll No., Name and Email address.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0
button:hover {
background-color: #45a049;
}
.error {
color: red;
font-size: 14px;
margin-top: 5px;
}
</style>
</head>
<body>
<div class="container">
<h2>Form Validation</h2>
<form id="userForm" onsubmit="return validateForm()">
<label for="rollNo">Roll No.</label>
<input type="number" id="rollNo" name="rollNo" placeholder="Enter Roll No." required>
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Enter Name" required>
<label for="email">Email Address</label>
<input type="email" id="email" name="email" placeholder="Enter Email" required>
<button type="submit">Submit</button>
</form>
<div id="errorMessages"></div>
</div>
<script>
function validateForm() {
// Clear previous error messages
document.getElementById("errorMessages").innerHTML = "";

// Validate Roll No.


var rollNo = document.getElementById("rollNo").value;
if (rollNo === "" || isNaN(rollNo)) {
displayError("Please enter a valid Roll No.");
return false;
}
// Validate Name (must contain only letters and spaces)
var name = document.getElementById("name").value;
var nameRegex = /^[a-zA-Z\s]+$/;
if (name === "" || !nameRegex.test(name)) {
displayError("Please enter a valid Name (only letters and spaces).");
return false;
}
// Validate Email Address (must match standard email format)
var email = document.getElementById("email").value;
var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (email === "" || !emailRegex.test(email)) {
displayError("Please enter a valid Email Address.");
return false;
}
// If everything is valid, allow the form to be submitted
alert("Form submitted successfully!");
return true;
}
function displayError(message) {
var errorMessages = document.getElementById("errorMessages");
var errorMessage = document.createElement("div");

errorMessage.classList.add("error");
errorMessage.textContent = message;
errorMessages.appendChild(errorMessage);
}
</script>

</body>
</html>
Roll No. : 6675
Assignment No. :5
Assignment Name : Webpage converting degree celsius to fahrenheit.

Q5. Design a web page to input temperature in degree Celsius. Convert the
temperature to degree Fahrenheit using PHP script.
<?php
// Initialize variable to store the Fahrenheit result
$fahrenheit = "";

// Check if the form has been submitted


if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Get the Celsius value from the form
$celsius = $_POST['celsius'];

// Convert Celsius to Fahrenheit


$fahrenheit = ($celsius * 9/5) + 32;
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Temperature Converter</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f9;
}
.container {
background-color: #fff;
padding: 30px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border-radius: 8px;
width: 300px;
}
input[type="number"] {
padding: 8px;
font-size: 16px;
width: 100%;
margin-bottom: 15px;
}
button {
padding: 10px;
font-size: 16px;
cursor: pointer;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
width: 100%;
}
button:hover {
background-color: #45a049;
}
.result {
margin-top: 20px;
font-size: 18px;
color: #333;
}
</style>
</head>
<body>

<div class="container">
<h2>Temperature Converter</h2>
<form method="POST">
<label for="celsius">Enter temperature in Celsius:</label><br><br>
<input type="number" id="celsius" name="celsius" required step="any" value="<?=
isset($_POST['celsius']) ? $_POST['celsius'] : ''; ?>">
<button type="submit">Convert to Fahrenheit</button>
</form>

<?php if ($fahrenheit !== ""): ?>


<div class="result">
<strong>Converted Temperature:</strong> <?= number_format($fahrenheit, 2); ?> °F
</div>
<?php endif; ?>
</div>

</body>
</html>

113
Roll No. : 6675
Assignment No. :6
Assignment Name : Webpage having use of php to check number is odd/even.
Q6. Design a web page to input a number. Using PHP script check whether given
number is Odd/Even
<?php
// Initialize variable to store the result
$result = "";

// Check if the form is submitted


if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Get the number from the form input
$number = $_POST['number'];

// Check if the number is even or odd


if ($number % 2 == 0) {
$result = "The number " . $number . " is Even.";
} else {
$result = "The number " . $number . " is Odd.";
}
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Odd or Even Checker</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f9;
}
.container {
background-color: #fff;
padding: 30px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border-radius: 8px;
width: 300px;
}
input[type="number"] {
padding: 8px;
font-size: 16px;
width: 100%;
margin-bottom: 15px;
}
button {
padding: 10px;
font-size: 16px;
cursor: pointer;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
width: 100%;
}
button:hover {
background-color: #45a049;
}
.result {
margin-top: 20px;
font-size: 18px;
color: #333;
}
</style>
</head>
<body>

<div class="container">
<h2>Odd or Even Checker</h2>
<form method="POST">
<label for="number">Enter a number:</label><br><br>
<input type="number" id="number" name="number" required>
<button type="submit">Check</button>
</form>

<?php if ($result !== ""): ?>


<div class="result">
<strong>Result:</strong> <?php echo $result; ?>
</div>
<?php endif; ?>
</div>

</body>
</html>

Odd
Roll No. : 6675
Assignment No. :7
Assignment Name : Webpage having use of php to check number is palindrome or
armstrong.
Q12. Design a web page to input a number. Using PHP script check whether given
number is Palindrome / Armstrong and display message in web page accordingly.

<?php
// Initialize variables to store the results
$palindromeResult = "";
$armstrongResult = "";

// Check if the form is submitted


if ($_SERVER["REQUEST_METHOD"] == "POST") {
$number = $_POST['number'];

// Check if the number is a palindrome


$originalNumber = $number;
$reversedNumber = 0;
while ($number > 0) {
$remainder = $number % 10;
$reversedNumber = ($reversedNumber * 10) + $remainder;
$number = (int)($number / 10);
}
if ($originalNumber == $reversedNumber) {
$palindromeResult = "The number is a Palindrome.";
} else {
$palindromeResult = "The number is not a Palindrome.";
}

// Check if the number is an Armstrong number


$sum = 0;
$digits = strlen((string)$originalNumber);
$temp = $originalNumber;

while ($temp > 0) {


$remainder = $temp % 10;
$sum += pow($remainder, $digits);
$temp = (int)($temp / 10);
}

if ($sum == $originalNumber) {
$armstrongResult = "The number is an Armstrong number.";
} else {
$armstrongResult = "The number is not an Armstrong number.";
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Palindrome and Armstrong Checker</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f9;
button {
button:hover {
background-color: #45a049;
}
.result {
margin-top: 20px;
font-size: 18px;
color: #333;
}
</style>
</head>
<body>
<div class="container">
<h2>Palindrome and Armstrong Checker</h2>
<form method="POST">
<label for="number">Enter a number:</label><br><br>
<input type="number" id="number" name="number" required>
<button type="submit">Check</button>
</form>
<?php if ($palindromeResult !== "" || $armstrongResult !== ""): ?>
<div class="result">
<strong>Result:</strong><br>
<?php echo $palindromeResult; ?><br>
<?php echo $armstrongResult; ?>
</div>
<?php endif; ?>
</div>
</body>
</html>

NO
NO
Roll No. : 6675
Assignment No. :8
Assignment Name : Webpage having use php to check number is prime or not.

Q13. Design a web page to input a number. Using PHP script check whether given
number is prime or not.
<?php
// Initialize the result message
$primeResult = "";

// Check if the form is submitted


if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Get the number from the form
$number = $_POST['number'];

// Prime number check logic


if ($number <= 1) {
$primeResult = "The number " . $number . " is not a prime number.";
} else {
$isPrime = true;
for ($i = 2; $i <= sqrt($number); $i++) {
if ($number % $i == 0) {
$isPrime = false;
break;
if ($isPrime) {
$primeResult = "The number " . $number . " is a prime number.";
} else {
$primeResult = "The number " . $number . " is not a prime number.";
}
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prime Number Checker</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f9;
text-align: center;
color: #333;
button {
padding: 10px;
font-size: 16px;
cursor: pointer;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
width: 100%;
}
button:hover {
background-color: #45a049;
}
.result {
margin-top: 20px;
font-size: 18px;
color: #333;
}
</style>
</head>
<body>

<div class="container">
<h2>Prime Number Checker</h2>
<form method="POST">
<label for="number">Enter a number:</label><br><br>
<input type="number" id="number" name="number" required>
<button type="submit">Check</button>
</form>

<?php if ($primeResult !== ""): ?>


<div class="result">
<strong>Result:</strong> <?php echo $primeResult; ?>
</div>
<?php endif; ?>
</div>

</body>
</html>

Not prime

You might also like