WEB ESSENTIAL LAB
1. create a simple interactive web site - Design using HTML and authoring tools
HTML:
<!DOCTYPE html>
<head>
<title>Interactive Webpage</title>
</head>
<body>
<h1>Welcome to My Interactive Webpage</h1>
<button onclick="changeText()">Click Me!</button>
<p id="text">Hello, World!</p>
<script>
function changeText() {
document.getElementById("text").innerText = "You clicked the
button!";
}
</script>
</body>
</html>
Output:
2. Create a simple web page which contains a form to collect student's information
using various input elements
HTML:
<!DOCTYPE html>
<head>
<title>Student Information Form</title>
</head>
<body>
<h2>Student Information Form</h2>
<form>
<label>Name: <input type="text" name="name"></label><br><br>
<label>Age: <input type="number" name="age"></label><br><br>
<label>Email: <input type="email" name="email"></label><br><br>
<label>Gender:
<select name="gender">
<option>Male</option>
<option>Female</option>
<option>Other</option>
</select>
</label><br><br>
<label>Interests:
<input type="checkbox" name="interest" value="Sports">Sports
<input type="checkbox" name="interest" value="Music">Music
<input type="checkbox" name="interest" value="Reading">Reading
</label><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Output:
3. Create and develop a simple HTML program to design a simple home page of our
college website using CSS
HTML:
<!DOCTYPE html>
<head>
<title>SXCCE</title>
<style>
body {text-align: center; padding: 50px;}
button {padding: 10px 20px; font-size: 16px;}
</style>
</head>
<body>
<h1>COLLEGE HOME PAGE</h1>
<a href="https://www.sxcce.edu.in/"><button>go to website</button></a>
<p>Welcome to SXCCE</p>
</body>
</html>
Output:
4. Write an HTML program to design a simple home page of my own personal website
HTML:
<!DOCTYPE html>
<head>
<title>My Personal Website</title>
</head>
<body>
<header>
<h1>Welcome to My Personal Website</h1>
<nav>
<a href="#about">About Me</a> |
<a href="#projects">Projects</a> |
<a href="#contact">Contact</a>
</nav>
</header>
<section id="about">
<h2>About Me</h2>
<p>Hello! I am Sheno, a web developer with a passion for creating
amazing websites.</p>
</section>
<section id="projects">
<h2>Projects</h2>
<p>Here are some of my recent projects:</p>
<ul>
<li>Project 1</li>
<li>Project 2</li>
<li>Project 3</li>
</ul>
</section>
<section id="contact">
<h2>Contact</h2>
<p>You can reach me at: <a
href="mailto:yourname@example.com">yourname@example.com</a></p>
</section>
</body>
</html>
Output:
5. Develop and implement simple HTML programs to demonstrate Inline, Internal and
External CSS
Inline CSS:
HTML:
<!DOCTYPE html><html><body>
<p style="color: blue;">This is an inline CSS example.</p>
</body></html>
Output:
Internal CSS:
HTML:
<!DOCTYPE html><html><head>
<style>p { color: green; }</style></head><body>
<p>This is an internal CSS example.</p>
</body></html>
Output:
External CSS:
HTML:
<!DOCTYPE html><html><head>
<link rel="stylesheet" href="styles.css"></head><body>
<p>This is an external CSS example.</p>
</body></html>
styles.css:
p { color: red; }
Output:
6. Create a web page which validate the form using JavaScript
HTML:
<!DOCTYPE html>
<head>
<title>Form Validation</title>
</head>
<body>
<h2>Sign Up Form</h2>
<form id="signupForm">
<label>Name: <input type="text" id="name"></label><br><br>
<label>Email: <input type="email" id="email"></label><br><br>
<input type="submit" value="Submit">
</form>
<script>
document.getElementById("signupForm").onsubmit = function() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
if (name == "" || email == "") {
alert("Both fields are required!");
return false;
}
return true;
};
</script>
</body>
</html>
Output:
7. Write JavaScript to validate the following fields of the Registration page.
a) first name (should not be empty)
b) password (should not be empty)
c) Email (should not contain any invalid and must follow the standard pattern
name@domain.com)
d) Mobile number (Phone number should contain 10 digits only)
e) Last Name and Address (should not be empty)
HTML
<!DOCTYPE html>
<head>
<title>Registration Form</title>
</head>
<body>
<h2>Registration Form</h2>
<form id="registrationForm">
<label>First Name: <input type="text" id="firstName"></label><br><br>
<label>Last Name: <input type="text" id="lastName"></label><br><br>
<label>Password: <input type="password" id="password"></label><br><br>
<label>Email: <input type="email" id="email"></label><br><br>
<label>Mobile Number: <input type="text" id="mobile"></label><br><br>
<label>Address: <textarea id="address"></textarea></label><br><br>
<input type="submit">
</form>
<script>
document.getElementById("registrationForm").onsubmit = function() {
var firstName = document.getElementById("firstName").value;
var lastName = document.getElementById("lastName").value;
var password = document.getElementById("password").value;
var email = document.getElementById("email").value;
var mobile = document.getElementById("mobile").value;
var address = document.getElementById("address").value;
var emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!firstName || !lastName || !password || !address) {
alert("All fields are required!");
return false;
}
if (!emailPattern.test(email)) {
alert("Invalid email format!");
return false;
}
if (!/^\d{10}$/.test(mobile)) {
alert("Mobile number must be 10 digits!");
return false;
}
return true;
};
</script>
</body>
</html>
Output:
8. Create a simple PHP Script of the following:
a) To print the grade based on a given score
Php:
<?php
$score = 85; // Example score
if ($score >= 90) echo "Grade: A";
elseif ($score >= 80) echo "Grade: B";
elseif ($score >= 70) echo "Grade: C";
else echo "Grade: D";
?>
Output:
b) Create a simple HTML form and accept the user's name and display the name through
PHP echo statement
Php:
<!DOCTYPE html>
<html>
<body>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = htmlspecialchars($_POST['name']);
echo "Hello, " . $name . "!";
} else {
?>
<form method="post" action="">
<input type="text" name="name" placeholder="Enter your name">
<input type="submit" value="Submit">
</form>
<?php
}
?>
</body>
</html>
Output:
9. a) Write a PHP script to find the factorial of a given number
php:
<?php
$num = 5; // Example number
$factorial = 1;
for ($i = 1; $i <= $num; $i++) {
$factorial *= $i;
}
echo "Factorial of $num is: $factorial";
?>
Output:
b) Write a simple HTML code for handling multimedia content in websites
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Multimedia Content Example</title>
</head>
<body>
<h2>Images</h2>
<img src="image.jpg" alt="Example Image" width="300" height="200">
<h2>Videos</h2>
<video width="400" controls>
<source src="video.mp4" type="video/mp4">
</video>
<h2>Audio</h2>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>
</body>
</html>
Output:
10. Write the php scripts for the following.
a) To print the multiplication table of a given number
Php:
<?= implode('<br>', array_map(fn($i) => "7 x $i = " . (7 * $i), range(1,
10))); ?>
Output:
b) To print in the format of
*
**
Php:
<?= "*<br>* *"; ?>
Output:
