Scribd
Upload
2 views

exp6surya

The document outlines a lab manual for creating a login page using HTML, CSS, and JavaScript. It includes the aim, objectives, required apparatus and software, as well as a detailed procedure with code snippets for the HTML structure, JavaScript functionality, and CSS styling. The final section indicates that the experiment concludes with the implementation of the login page design.

Uploaded by

Naveen Lucky
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

exp6surya

The document outlines a lab manual for creating a login page using HTML, CSS, and JavaScript. It includes the aim, objectives, required apparatus and software, as well as a detailed procedure with code snippets for the HTML structure, JavaScript functionality, and CSS styling. The final section indicates that the experiment concludes with the implementation of the login page design.

Uploaded by

Naveen Lucky
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

CO2_Designing Web Page _LAB MANUAL

EXP 6- Creating Login Page in HTML, CSS and Javascript

1.1 AIM: - To create login page in HTML, CSS and Javascript.

1.2 Objectives: To understand concept of Design of simple static web page


with HTML, CSS and Javascript.

1.3 Apparatus: Desktop or Laptop with any operating system like UNIX,
LINUX and Windows.

1.4 Software: Notepad or Notepad++ or Visual Studio Code and any web
Browser like Internet Explorer, Goggle Chrome, and Mozilla Firefox etc .

1.5 Procedure:
<html>
<head>
<link rel="stylesheet" href="login.css">
<script src="login.js"></script>
</head>
<body>
<div class="box">
<img src="kl_logo Background Removed.png"><br>
<label style="color:rgb(78, 250, 4);"><h1>LOGIN PAGE</h1></label>
<font color="white">USER NAME:</font><input type="text" name="name"
id="logName" required><br><br>
<font color="white">PASSWORD:</font><input type="password"
name="password" id="logPassword" required>
<br><br><input type="submit" value="LOGIN" onclick="onbuttonclick()">
</div>
</body>
</html>
JAVASCRIPT
function onbutton()
{
var usid=document.getElementById("logName").Value;
var psw=document.getElementById("logPassword").Value;
alert(usid);
alert(psw);
if(usid=="surya" && psw=="varma"){
alert("login approved");
}
else{
alert("wrong password");
}
}
CSS(CASCADING STYLE SHEETS)
body {
background-image: url(https://cdn.vectorstock.com/i/500p/93/46/abstract-
gradient-background-with-circles-striped-vector-54489346.jpg);
background-repeat:no-repeat ;
background-attachment:scroll;
background-size: cover;
}
.box{
background-color:rgba(21, 20, 21, 0.649);
align-content: center;
width: 380px;
height: 500px;
padding: 20px;
margin: 8% auto 0;
text-align: center;
position: relative;
box-sizing: border-box;
flex-direction: column;
}
.box img{
width:100px;
margin-top:-50px ;

1.6 Result:

You might also like