Webd

1
Practical No. 1
AIM: Design web page for your college use href, list tags.
CODE:
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<div class="left">
<img src="msit.png" alt="logo">
</div>
<div class="right">
<h1>Maharaja Surajmal Institute of Technology</h1>
<p>Affiliated to GGSIPU | NAAC Accredited 'A' Grade | NBA (CSE, IT, ECE,EEE) | Approved by
AICTE | ISO 9001:2015 Certified</p>
</div>
</nav>
<div class="nav2">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Society</a></li>
<li><a href="#">Info Brochure</a></li>
<li><a href="#">Achievments</a></li>
<li><a href="#">Alumni</a></li>
<li><a href="#">Academeic Calendar</a></li>
<li><a href="#">Placements</a></li>
<li><a href="#">Events</a></li>
</ul>
</div>
<main>
<h1>Information Technology (NBA Accredited)</h1>
<h3>Program Description</h3>
<p class="intro">
Information Technology is most prominent and rapidly developing field in todays world. To maintain
speed with latest trends in Information Technology industry, our Information Technology department is fully
empowered. Our fully air-conditioned laboratories contain sufficient number of computer systems with latest
hardware and software configuration. Since IT is composed of data processing and transmission, we are having
latest communication hardware and software with proper multimedia support to each system. A very high speed
internet connection is there in the labs. Net surfing is provided to the students as per their requirements. Guest
Enrollment No.
10115003121 REAZAUR RAHMAN
2
faculty specialized in respective fields of Information Technology are invited from time to time to keep students
in touch with latest trends in technology and to broaden their spectrum of knowledge. All facilities in the labs
are continuously examined and upgraded whenever required. The department has well qualified and
experienced faculty for guiding students in right direction. Our aim here is to expose students to latest and
growing technologies which help them to become highly skilled IT professional.
</p>
<h4>Vison</h4>
<p class="vison">
To build a culture of innovation and research in students and make them capable to solve upcoming
challenges of human life using computing.
</p>
<h4>Mission</h4>
<p class="Mission">
<span class="bullet-point">M1</span> :To develop 'educational pathways' so that students can take
their career towards success <br>
<span class="bullet-point">M2</span> To imbibe curiosity and support innovativeness by providing
guidance to use the technology effectively. <br>
<span class="bullet-point">M3</span>:To inculcate management skills, integrity and honesty through
curricular, co-curricular and extra-curricular activities.
</p>
</main>
</body>
</html>
Style.css
*{
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
nav{
display:flex;
justify-content: space-around;
margin-bottom: 10px;
}
img{
height:100px;
}
a{
text-decoration: none;
}
li {
list-style: none;
}
.nav2{
height:10vh;
background-color: #338FFF
}
.nav2 ul{
Enrollment No.
3
display:flex;
justify-content: space-around;
align-items: center;
padding: 30px 0
}
.nav2 ul li a {
font-weight: 700;
font-size: 14px;
}
.nav2 ul a:hover{
font-weight: 1000;
}
.right h1{
color: #154391;
}
main{
margin-left: 25px;
margin-right: 25px;
}
main h1{
text-align: center;
}
main h3{
text-align: center;
}
main h4{
text-align: center;
color:#FF5722
}
.bullet-point{
color:#FF5722
}
Enrollment No.
4
OUTPUT:
Enrollment No.
5
Practical No. 2
AIM: Write html code 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.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Four Boxes with Grid</title>
<style>
body {
margin: 0;
height: 100vh;
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr;
}
.box {
background-color: #3498db;
display: flex;
align-items: center;
justify-content: center;
}
#box1 {
background-color: #3498db;
}
#box2 {
background-color: #e74c3c;
}
#box3 {
background-color: #2ecc71;
}
#box4 {
background-color: #f39c12;
}
</style>
</head>
<body>
<div class="box" id="box1">
</div>
Enrollment No.
6

</div>
</div>
</div>
</body>
</html>
OUTPUT:
Enrollment No.
7
Practical No. 3
AIM: Design a webpage of your choice with html and css
CODE:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('https://assets.iplt20.com/bcci/articles/1708604741_2.jpg');
background-size: cover;
font-family: Arial, sans-serif;
}
.navbar {
display: flex;
justify-content: space-between;
background-color: #1667e0;;
color: white;
padding: 27px;
font-size: 20px;
}
.navbar div {
margin-right: 20px;
}
.navbar img {
height: 50px;
}
.navbar2{
background-color: #073376;
color: white;
padding: 15px;
}
</style>
</head>
<body>
<div class="navbar">
<div><img src="https://www.iplt20.com/assets/images/ipl-logo-new-old.png" alt="IPL Logo"></div>
<div>MATCHES | VIDEOS | STATS | POINTS TABLE | TEAMS | NEWS | AUCTION | MORE</div>
<div>FOLLOW US | SEARCH</div>
</div>
<div class="navbar2">
Home / News / Schedule For First Two Weeks Of Tata Ipl 2024 Announced
</div>
</body>
</html>
Enrollment No.
8
OUTPUT:
Enrollment No.
9
Practical No. 4
AIM: Create XML file to store student information like Enrolment Number, Name Mobile
Number , Email Id.
CODE:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type='text/xsl' href='cgpa.xsl'?>
<link rel="stylesheet" href="styles.css">
<class>
<h4>STUDENT DATABASE</h4>
<student>
<id> 00115003121 </id><br>
<name>Aarav</name><br>
<email>Aarav@gmail.com</email><br>
<phone> 9999999</phone><br><br>
</student>
<student>
<id> 002215003121 </id><br>
<name>Ananya</name><br>
<email>ananya@gmail.com </email><br>
<phone> 8888888 </phone><br><br>
</student>
<student>
<id> 00315003121</id><br>
<name> rajat</name><br>
<email>rajat@gmail.com </email><br>
<phone>77777777</phone><br>
</student>
</class>
Styles.css
body {
}
h4 {
color: #4CAF50;
}
student {
border: 1px solid #ddd;
padding: 20px;
border-radius: 5px;
}
id, name, email, phone {
font-weight: bold;
margin-bottom: 5px;
Enrollment No.
10
}
email, phone {
color: #007BFF;
}
email:hover, phone:hover {
color: #0056b3;
text-decoration: underline;
}
OUTPUT:
Enrollment No.
11
Practical No. 5
AIM: Create HTML Page with JavaScript which takes Integer number as input and tells
whether the number is ODD or EVEN.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Odd or Even Checker</title>
<style>
body {
text-align: center;
margin: 50px;
}
input {
padding: 10px;
font-size: 16px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
p{
font-size: 18px;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Odd or Even Checker</h1>
<label for="numberInput">Enter an integer:</label>
<input type="number" id="numberInput">
<button onclick="checkOddOrEven()">Check</button>
<p id="result"></p>
<script>
function checkOddOrEven() {
var inputValue = document.getElementById('numberInput').value;
var result = (inputValue % 2 === 0) ? 'Even' : 'Odd';
document.getElementById('result').innerText = 'The number is ' + result + '.';
}
Enrollment No.
12
</script>
</body>
</html>
OUTPUT:
Enrollment No.
13
Practical No. 6
AIM: Create HTML Page that contains form with fields Name, Email, Mobile No, Gender ,
Favourite Colour and a button.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Form</title>
<style>
body {
background-color: #f4f4f4;
}
.container {
width: 400px;
margin: 50px auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin-bottom: 5px;
}
input, select {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 3px;
box-sizing: border-box;
}
button {
width: 100%;
background-color: #007bff;
color: #fff;
border: none;
padding: 10px;
border-radius: 3px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
Enrollment No.
14
}
</style>
</head>
<body>
<div class="container">
<h2>My Form</h2>
<form id="myForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="mobile">Mobile No:</label>

<input type="tel" id="mobile" name="mobile" required>
<label for="gender">Gender:</label>
<select id="gender" name="gender" required>
<option value="">Select</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
<label for="color">Favorite Color:</label>

<select id="color" name="color" required>
<option value="">Select</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
<option value="magenta">Magenta</option>
<option value="cyan">Cyan</option>
<option value="black">Black</option>
<option value="white">White</option>
</select>
<button type="submit">Submit</button>
</form>
</div>
</body>
</html>
Enrollment No.
15
OUTPUT:
Enrollment No.
16
Practical No. 7
AIM: Write a php script to read data from txt file and display it in html table (the file
contains info in format Name: Password: Email).
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Display Data from TXT File</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<?php
$file_path = 'file1.txt';
if (file_exists($file_path)) {
$lines = file($file_path, FILE_IGNORE_NEW_LINES);
echo "<table>";
echo "<tr><th>Name</th><th>Password</th><th>Email</th></tr>";
foreach ($lines as $line) {

// Split the line by ':'
$data = explode(':', $line);
// Display data in table rows

echo "<tr>";
foreach ($data as $value) {
echo "<td>$value</td>";
}
echo "</tr>";
}
Enrollment No.
17
echo "</table>";
} else {
echo "File not found!";
}
?>
</body>
</html>
OUTPUT:
Enrollment No.
18
Practical No. 8
AIM: Write a PHP Script for login authentication. Design an html form which takes username
and password from user and validate against stored username and password in file.
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
</head>
<body>
<h2>Login</h2>
<form action="login.php" method="post">
<label for="username">Username:</label><br>
<input type="text" id="username" name="username" required><br><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password" required><br><br>
<input type="submit" value="Login">
</form>
</body>
</html>
<?php
function validateLogin($username, $password, $file_path) {
$lines = file($file_path, FILE_IGNORE_NEW_LINES);
foreach ($lines as $line) {
$data = explode(':', $line);
if ($data[0] === $username && $data[1] === $password) {
return true;
}
}
return false;
}
$file_path = 'users.txt';
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$username = $_POST['username'];
$password = $_POST['password'];
if (validateLogin($username, $password, $file_path)) {
echo "<h2>Login successful!</h2>";
} else {
echo "<h2>Login failed. Invalid username or password.</h2>";
}
}
?>
Enrollment No.
19
OUTPUT:
Enrollment No.
20
Practical No. 9
AIM: Write PHP Script for storing and retrieving user information from MySql table. a.
Design A HTML page which takes Name, Address, Email and Mobile No. From user
(register.php) b. Store this data in Mysql database / text file. c. Next page display all user in
html table using PHP (display.php)
CODE:
a. Design a HTML page for user registration (register.php):
<!DOCTYPE html>
<html>
<head>
<title>User Registration</title>
</head>
<body>
<h2>User Registration</h2>
<form action="register.php" method="post">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name" required><br><br>
<label for="address">Address:</label><br>
<input type="text" id="address" name="address" required><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" required><br><br>
<label for="mobile">Mobile No.:</label><br>
<input type="text" id="mobile" name="mobile" required><br><br>
<input type="submit" value="Register">
</form>
</body>
</html>
b. PHP script to store user information in MySQL database (register.php):
<?php
$servername = "localhost";
$username = "root";
$password = "";
$database = "users";
$conn = new mysqli($servername, $username, $password, $database);

if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = $_POST['name'];
$address = $_POST['address'];
$email = $_POST['email'];
$mobile = $_POST['mobile'];
Enrollment No.
21
$sql = "INSERT INTO users (name, address, email, mobile) VALUES ('$name', '$address', '$email',
'$mobile')";
if ($conn->query($sql) === TRUE) {

echo "New record created successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
}
$conn->close();
?>
c. PHP script to display all users in HTML table (display.php):
<!DOCTYPE html>
<html>
<head>
<title>User List</title>
</head>
<body>
<h2>User List</h2>
<table border="1">
<tr>
<th>Name</th>
<th>Address</th>
<th>Email</th>
<th>Mobile No.</th>
</tr>
<?php
$servername = "localhost";
$username = "root";
$password = "";
$database = "users";
$conn = new mysqli($servername, $username, $password, $database);

if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT * FROM users";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo "<tr>";
echo "<td>".$row["name"]."</td>";
echo "<td>".$row["address"]."</td>";
echo "<td>".$row["email"]."</td>";
echo "<td>".$row["mobile"]."</td>";
echo "</tr>";
Enrollment No.
22
}
} else {
echo "0 results";
}
$conn->close();
?>
</table>
</body>
</html>
OUTPUT:
Enrollment No.
23
Practical No. 10
AIM: Create a HTML page that contains forms with different fields and validate it using JS .
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Form Validation</title>
<style>
/* Basic styling for the form */
form {
max-width: 400px;
margin: auto;
padding: 20px;
border-radius: 8px;
}
input {
width: 100%;
padding: 8px;
margin: 8px 0;
border-radius: 4px;
}
/* Styling for error messages */
.error {
color: red;
font-size: 0.9em;
}
</style>
</head>
<body>
<h2>Form Validation</h2>
<form id="myForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<div id="nameError" class="error"></div>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<div id="emailError" class="error"></div>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<div id="passwordError" class="error"></div>
<button type="submit">Submit</button>
Enrollment No.
24
</form>
<script>
const form = document.getElementById('myForm');
// Function to validate the form
function validateForm(event) {
// Prevent form submission
event.preventDefault();
// Clear previous error messages
document.getElementById('nameError').textContent = '';
document.getElementById('emailError').textContent = '';
document.getElementById('passwordError').textContent = '';
// Get input values
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
let valid = true;
// Validate name
if (name.trim() === '') {
document.getElementById('nameError').textContent = 'Name is required.';
valid = false;
}
// Validate email
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailPattern.test(email)) {
document.getElementById('emailError').textContent = 'Invalid email format.';
valid = false;
}
// Validate password
if (password.length < 6) {
document.getElementById('passwordError').textContent = 'Password must be at
least 6 characters long.';
valid = false;
}
// If valid, submit the form
if (valid) {
form.submit();
}
}
// Attach event listener to the form's submit event
form.addEventListener('submit', validateForm);
</script>
</body>
</html>
Enrollment No.
25
OUTPUT:
Enrollment No.

Webd

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Webd

Uploaded by

Copyright:

Available Formats

1

<div class="box" id="box2">

<label for="mobile">Mobile No:</label>

<label for="color">Favorite Color:</label>

$lines = file($file_path, FILE_IGNORE_NEW_LINES);

foreach ($lines as $line) {

// Display data in table rows

$conn = new mysqli($servername, $username, $password, $database);

if ($conn->query($sql) === TRUE) {

$conn = new mysqli($servername, $username, $password, $database);

You might also like