Create a Web Application for Registration page using CSS.
Aim: To Create a Web Application for Registration page using CSS.
registration.html
<html>
<head>
<title>vignan</title>
<link rel="stylesheet" href="style.css">
</head>
<body><center>
<img src="https://vignanits.ac.in/wp-content/uploads/2020/07/1595497656733.png" width="1300"
height="150"/>
<marquee><h2>BEST ONLINE E-BOOKS WEBSITE</h2></marquee>
<header>
<h3>
<a href="home.html">Home</a>
<a href="login.html">Login</a>
<a href="registration.html">Registration</a>
<a href="cart.html" >Cart</a></h3>
</header>
</center>
<main><center>
<form name="f1">
<h3>Registration Form </h3>
<table cellpadding="1" align="center" >
<tr><td> Name:*</td>
<td><input type="text" name="username"></td></tr>
<tr><td>Password:*</td>
<td><input type="password" name="password"></td></tr>
<tr><td>Email ID:*</td>
<td><input type="text" name="email"></td></tr>
<tr><td>Phone Number:*</td>
<td><input type="text" name="phno"></td></tr>
<tr><td valign="top">Gender:*</td>
<td><input type="radio" name="radio" value="1">Male
<input type="radio" name="radio" value="2">Female</td></tr>
<tr> <td valign="top">Language Known:*</td>
<td>
<input type="checkbox" name="checkbox" value="English">English<br/>
<input type="checkbox" name="checkbox" value="Telugu">Telugu<br>
<input type="checkbox" name="checkbox" value="Hindi">Hindi<br>
<input type="checkbox" name="checkbox" value="Tamil">Tamil
</td></tr>
<tr> <td valign="top">Address:*</td>
<td><textarea name="address"></textarea></td>
<tr><td></td><td><input type="submit" value="submit" hspace="10">
<input type="reset" value="reset"></td></tr>
<tr> <td colspan=2 >*<font color="#FF0000">fields are mandatory</font>
</td>
</tr>
</table>
</form>
</center></main>
</body>
</html>
style.css
body{
font-family: monospace;
background-color: #d480bc;
}
main {
background-color: #9ed5f0;
color: #1f0aa7;
margin-left: 4px;
height: 80vh;
}
center {
align-items: center;
justify-content: center;
}
header {
background-color: #50c95c;
color: #090909;
height: 50px;
}
Output:
Create a Web Application for Home page using BOOTSTRAP.
Aim: To Create a Web Application for Home page using BOOTSTRAP.
Home.html
<html>
<head>
<title>vignan</title>
<meta charset="utf-8" />
<!-- Include bootstrap, CSS and jQuery CDN -->
<meta name="viewport" content=
"width=device-width, initial-scale=1" />
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
</script>
</head>
<body>
<center><img class="img-responsive"
src="https://vignanits.ac.in/wp-content/uploads/2020/07/1595497656733.png" width="500"
alt="nature"></center>
<marquee><h2>BEST ONLINE E-BOOKS WEBSITE</h2></marquee>
<header>
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li><a href="home.html">home</a></li>
<li><a href="login.html">login</a></li>
<li><a href="registration.html">registration</a></li>
<li> <a href="cart.html" >Cart</a></li>
</ul>
</nav>
</header>
<main>
<form class="form-horizontal" action="/home.html">
<center><h2 class="text-success">Welcome to vignandhara Website</h2></center>
<img src="https://www.bookswagon.com/images/promotionimages/web/bwtop100.jpg?
v=5.5" class="img-responsive">
</form></main>
</body>
</html>
Output:
Create a react application for the student management system having login page
Step 1: Create a new React application using the Create React App tool. Create an application with
the
npx create-react-app student-management
Step 2: Setting React Router for navigation with command: npm install react-router-dom
Step 3: Create components for Login page
Step 4: start the application npm start command.
Program
src/pages/Login.js
import React, { useState } from 'react';
const Login = () => (
<div style={{ paddingLeft: '500px' }}>
<h2 style={{ color: 'red', fontSize: '40px' }}>Login Page</h2>
<form> <input type="text" placeholder="Username"
style={{ width: '30%', height: '20px', fontSize: '24px', padding: '10px' }} /><br /><br />
<input type="password" placeholder="Password"
style={{ width: '30%', height: '20px', fontSize: '24px', padding: '10px' }} /><br /><br />
<button type="submit" style={{ width: '30%', height: '50px', fontSize: '30px',
padding: '10px' }} > Login </button>
</form>
</div>
);
export default Login;
output:
JavaScript for doing client – side validation of the Login page.
Aim: To Use JavaScript for doing client – side validation of the Login page.
LOGIN.HTML
<html>
<head>
<title>vignan</title>
</header>
<script language="javascript">
function validate() {
// username validation
var uname = f1.username.value;
if (uname.length<=0)
{
alert("Please Enter UserName");
f1.username.focus();
return false;
}
if (uname.length < 8)
{
alert("Please enter UserName not less than 8");
f1.username.focus();
return false;
}
//password validation
var pwd = f1.password.value;
if (pwd.length<=0)
{
alert("Please Enter password");
f1.password.focus();
return false;
}
if (pwd.length < 6)
{
alert("Please enter Password not less than 6");
f1.password.focus();
return false;
}
// to display Success message
alert("Registration Successful");
}
</script>
</head>
<body>
<center><br>
<h3>login Form </h3>
<form name="f1">
<table cellpadding="1" align="center" >
<tr><td> User Name:*</td>
<td><input type="text" name="username"></td></tr>
<tr><td>Password:*</td>
<td><input type="password" name="password"></td></tr>
<tr><td></td><td><input type="button" value="SUBMIT" hspace="10" onclick="validate()">
<input type="reset" value="RESET"></td></tr>
<tr> <td colspan=2 >*<font color="#FF0000">fields are mandatory</font>
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
Output:
Create a Web Application for Login page using CSS.
Aim: To Create a Web Application for Login page using CSS.
login.html
<html>
<head>
<title>vignan</title>
<link rel="stylesheet" href="style.css">
</head>
<body><center>
<img src="https://vignanits.ac.in/wp-content/uploads/2020/07/1595497656733.png" width="1300"
height="150"/>
<marquee><h2>BEST ONLINE E-BOOKS WEBSITE</h2></marquee>
<header>
<h3><a href="home.html">Home</a>
<a href="login.html">Login</a>
<a href="registration.html">Registration</a>
<a href="cart.html" >Cart</a></h3>
</header>
</center>
<main><center>
<form name="f1">
<h3> Login Details</h3> <br/>
<table>
<tr>
<td> User Name : </td>
<td> <input type="text" name="username"></td>
</tr>
<tr><td><br></td></tr>
<tr>
<td> Password : </td>
<td> <input type="password" name="password"></td>
</tr>
<tr><td><br></td></tr>
<tr><td></td>
<td><input type="submit" value="SUBMIT">
<input type="reset" value="RESET"></td></tr>
</table>
</form>
</main></center>
</body>
</html>
style.css
body{
font-family: monospace;
background-color: #d480bc;
}
main {
background-color: #9ed5f0;
color: #1f0aa7;
margin-left: 4px;
height: 80vh;
}
center {
align-items: center;
justify-content: center;
}
header {
background-color: #50c95c;
color: #090909;
height: 50px;
}
Output :
Create a Web Application for Cart page using CSS.
Aim: To Create a Web Application for Cart page using CSS.
cart.html
<html>
<head>
<title>vignan</title>
<link rel="stylesheet" href="style.css">
</head>
<body><center>
<img src="https://vignanits.ac.in/wp-content/uploads/2020/07/1595497656733.png" width="1300"
height="150"/>
<marquee><h2>BEST ONLINE E-BOOKS WEBSITE</h2></marquee>
<header> <h3>
<a href="home.html">Home</a>
<a href="login.html">Login</a>
<a href="registration.html">Registration</a>
<a href="cart.html" >Cart</a></h3>
</header>
</center><main>
<center>
<h3>Cart</h3>
<table align="center" >
<tr>
<th><hr>BookName<hr></th>
<th><hr>Price<hr></th>
<th><hr>Quantity<hr></th>
<th><hr>Amount<hr></th> </tr>
<tr align=center>
<td>Java Programming </td>
<td>Rs. 2300/-</td>
<td>2</td>
<td>Rs. 4600/-</td></tr>
<tr align=center><td>Web Technologies</td>
<td>Rs. 3000/-</td>
<td>1</td>
<td>Rs. 3000/-</td></tr>
<tr align=center><td></td>
<td><hr>Total Amount:<hr></td>
<td><hr>3<hr></td>
<td><hr>Rs. 7600/-<hr></td> </tr>
</table>
</center>
</main>
</body>
</html>
style.css
body{
font-family: monospace;
background-color: #d480bc;
}
main {
background-color: #9ed5f0;
color: #1f0aa7;
margin-left: 4px;
height: 80vh;
}
center {
align-items: center;
justify-content: center;
}
header {
background-color: #50c95c;
color: #090909;
height: 50px;
}
Output :
Create a Web Application for Home page using CSS.
Aim: To Create a Web Application for Home page using CSS.
home.html
<html>
<head>
<title>vignan</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<center>
<img src="https://vignanits.ac.in/wp-content/uploads/2020/07/1595497656733.png" width="1300"
height="150"/>
<marquee><h2>BEST ONLINE E-BOOKS WEBSITE</h2>
</marquee>
<header>
<h3>
<a href="home.html">Home</a> 
<a href="login.html">Login</a> 
<a href="registration.html">Registration</a>
<a href="cart.html" >Cart</a></h3>
</header>
</center>
<main>
<center>
<form name="f1">
<h2>Welcome to vignandhara Website</h2>
<img src="https://www.bookswagon.com/images/promotionimages/web/bwtop100.jpg?v=5.5">
</form>
</center>
</main>
</body>
</html>
style.css
body{
font-family: monospace;
background-color: #d480bc;
}
main {
background-color: #9ed5f0;
color: #1f0aa7;
margin-left: 4px;
height: 80vh;
}
center {
align-items: center;
justify-content: center;
}
header {
background-color: #50c95c;
color: #090909;
height: 50px;
}
Output :
Create a Web Application for Login page using BOOTSTRAP.
Aim: To Create a Web Application for Login page using BOOTSTRAP.
Login.html
<html>
<head>
<title>vignan</title>
<meta charset="utf-8" />
<!-- Include bootstrap, CSS and jQuery CDN -->
<meta name="viewport" content=
"width=device-width, initial-scale=1" />
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
</script>
</head>
<center><img class="img-responsive"
src="https://vignanits.ac.in/wp-content/uploads/2020/07/1595497656733.png" width="500"
alt="nature"></center>
<marquee><h2>BEST ONLINE E-BOOKS WEBSITE</h2></marquee>
<header>
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li><a href="home.html">home</a></li>
<li><a href="login.html">login</a></li>
<li><a href="registration.html">registration</a></li>
<li> <a href="cart.html" >Cart</a></li>
</ul>
</nav>
</header>
<body>
<main><center>
<form name="f1">
<h3> Login Details</h3> <br/>
<table class="table table-bordered table-striped table-hover">
<tr>
<td> UserName : </td>
<td> <input type="text" id="username" placeholder="Enter username"></td>
</tr>
<tr><td><br></td></tr>
<tr>
<td> Password : </td>
<td> <input type="password" id="password" placeholder="Enter password"></td>
</tr>
<tr><td><br></td></tr>
<tr><td></td>
<td><button class="btn btn-success btn-sm" disabled>submit</button>
<button class="btn btn-danger btn-sm">Reset</button></td>
</tr>
</table>
</form>
</main></center>
</body>
</html>
Output:
Create a Web Application for Cart page using BOOTSTRAP.
Aim: To Create a Web Application for Cart page using BOOTSTRAP
Cart.html
<html>
<head>
<meta charset="utf-8" />
<!-- Include bootstrap, CSS and jQuery CDN -->
<meta name="viewport" content=
"width=device-width, initial-scale=1" />
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
</script>
</head>
<center><img class="img-responsive"
src="https://vignanits.ac.in/wp-content/uploads/2020/07/1595497656733.png" width="500"
alt="nature"></center>
<marquee><h2>BEST ONLINE E-BOOKS WEBSITE</h2></marquee>
<header>
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li><a href="home.html">home</a></li>
<li><a href="login.html">login</a></li>
<li><a href="registration.html">registration</a></li>
<li> <a href="cart.html" >Cart</a></li>
</ul>
</nav>
</header>
</center><main>
<center>
<h3>Cart</h3>
<table class="table table-bordered">
<tr>
<th><hr>BookName<hr></th>
<th><hr>Price<hr></th>
<th><hr>Quantity<hr></th>
<th><hr>Amount<hr></th> </tr>
<tr>
<td>Java Programming </td>
<td>Rs. 2300/-</td>
<td>2</td>
<td>Rs. 4600/-</td></tr>
<tr><td>Web Technologies</td>
<td>Rs. 3000/-</td>
<td>1</td>
<td>Rs. 3000/-</td></tr>
<tr><td></td>
<td><hr>Total Amount:<hr></td>
<td><hr>3<hr></td>
<td><hr>Rs. 7600/-<hr></td> </tr>
</table>
</center>
</main>
</body>
</html>
Output:
Create an xml for the bookstore.
Aim: Create an xml for the bookstore.
bookstore.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE bookstore[
<!ELEMENT bookstore (book+)>
<!ELEMENT book (title, author, price)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT author (#PCDATA)>
<!ELEMENT price (#PCDATA)>
]>
<bookstore>
<book>
<title>Introduction to XML</title>
<author>John Doe</author>
<price>29.99</price>
</book>
<book>
<title>Programming with XML</title>
<author>Jane Smith</author>
<price>39.99</price>
</book>
</bookstore>
Create a react application for the student management system having about page
Step 1: Create a new React application using the Create React App tool. Create an application with
the
npx create-react-app student-management
Step 2: Setting React Router for navigation with command: npm install react-router-dom
Step 3: Create components for About page
Step 4: start the application npm start command.
Program
src/pages/About.js
import React from 'react';
const About = () => (
<div style={{ padding: '30px' }}>
<p style={{ color: 'blue', fontSize: '40px', textAlign: 'left' }}>This application is designed to
manage Student Information effectively.</p>
</div>
);
export default About;
output:
Create a react application for the student management system having contact page
Step 1: Create a new React application using the Create React App tool. Create an application with
the
npx create-react-app student-management
Step 2: Setting React Router for navigation with command: npm install react-router-dom
Step 3: Create components for Contact page
Step 4: start the application npm start command.
Program
src/pages/Contact.js
import React from 'react';
const Contact = () => (
<div style={{ padding: '20px' }}>
<h1 style={{ color: 'red', fontSize: '40px', textAlign: 'left' }}>Contact Us</h1>
<p style={{ color: 'green', fontSize: '40px', textAlign: 'left' }}><b>Email:</b>
info@vignanits.ac.in <br/><b>Phone:</b> 9866399776</p>
</div>
);
export default Contact;
output:
Create a react application for the student management system having registration page
Step 1: Create a new React application using the Create React App tool. Create an application with
the
npx create-react-app student-management
Step 2: Setting React Router for navigation with command: npm install react-router-dom
Step 3: Create components for Registration page
Step 4: start the application npm start command.
Program
src/pages/Registration.js
import React from 'react';
const Registration = () => (
<div style={{ paddingLeft: '500px' }}>
<h2 style={{ color: 'red', fontSize: '40px' }}>Registration Page</h2>
<form>
<input type="text" placeholder="Full Name" style={{ width: '30%', height: '20px', fontSize:
'24px', padding: '10px' }} /><br /><br />
<input type="email" placeholder="Email" style={{ width: '30%', height: '20px', fontSize: '24px',
padding: '10px' }}/><br /><br />
<input type="password" placeholder="Password" style={{ width: '30%', height: '20px', fontSize:
'24px', padding: '10px' }}/><br /><br />
<button type="submit" style={{ width: '30%', height: '50px', fontSize: '30px', padding:
'10px' }}>Register</button>
</form>
</div>
);
export default Registration;
output:
