Webcode

SOURCE CODE:
<!DOCTYPE html>
<html>
<head>
<title>Experiment 1</title>
<style>
body {
background-color: #282C34;
color: white;
font-family: system-ui;
align-content: center;
text-align: center;
}
</style>
</head>
<body>
<h2>Web Technology Experiment 1</h2>
<h2>Image Maps</h2>
<p>Click on the different web Browsers to go to a new page and read more about the
topic:</p>
<img src="https://ahmethakanbesel.com.tr/wp-content/uploads/html-browser-
support.jpg" usemap="#image-map" style="border: solid;">
<map name="image-map">
<area target="_blank" alt="Google Chrome" title="Google Chrome"
href="https://www.google.com/chrome/" coords="136,149,93" shape="circle">
<area target="_blank" alt="Mozilla Firefox" title="Mozilla Firefox"
href="https://www.mozilla.org/firefox" coords="351,149,92" shape="circle">
<area target="_blank" alt="Apple Safari" title="Apple Safari"
href="https://www.apple.com/in/safari/" coords="566,152,93" shape="circle">
<area target="_blank" alt="Microsoft Edge" title="Microsoft Edge"
href="https://www.microsoft.com/in-in/windows/microsoft-edge" coords="774,154,93"
shape="circle">
<area target="_blank" alt="Opera" title="Opera" href="http://www.opera.com/in"
coords="976,148,90" shape="circle">
<area target="_blank" alt="Internet Explorer" title="Internet Explorer"
href="https://www.microsoft.com/in-in/download/internet-explorer.aspx"
coords="1204,154,80" shape="circle">
</map>
<h3>Developed By: Paras Gupta(03111502718)</h5>
</body>
</html>
OUTPUT:
SOURCE CODE:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{
box-sizing: border-box;
}
body {
background-color: #282C34;
font-family: system-ui;
}
.header {
border: 1px solid white;
padding: 15px;
background-color: bisque;
}
.row{
display: flex;
}
ul{
list-style-type: square;}
.col {
float: left;
padding: 15px;
margin:10px;
}
#head-title{
text-align: center
}
.col-3 {width: 25%; background-color: chartreuse; font-size: 1.5rem;}
.col-9 {width: 75%; background-color: yellow; font-size: 1.2rem;}
</style>
</head>
<body>
<div class="header">
<h1 id="head-title">Paras Gupta</h1>
</div>
<div class="row">
<div class="col col-3">
<ul>
<li>Web Technology</li>
<li>Experiment -2 </li>
<li>03111502718</li>
</ul>
</div>
<div class=" col col-9">

<h1>CSS</h1>
<p>
CSS is the language we use to style an HTML document.
</p>
<p>CSS describes how HTML elements should be displayed.</p>
</div>
</div>
<h3 style="color:white;text-align: center;">Developed By : Paras Gupta
(03111502718)</h3>
</body>
</html>
OUTPUT:
SOURCE CODE:
1) wtexp3.html
<!DOCTYPE html>
<html>
<head>
<title>CSS Website</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="header">
External CSS
</div>
<div class="row">
<div class="content col-4">
<p class="info">
Paras Gupta<br />
03111502718<br />
External CSS<br />
Web Technology Experiment 3
</p>
</div>
<div class="content col-8">
<h1 id="heading">About</h1>
<p class="p1">
The external style sheet is generally used when you want to make changes on
multiple pages. It is ideal for this condition because it facilitates you to change the look of
the entire web site by changing just one file.It uses the <link> tag on every pages and
the <link> tag should be put inside the head section.<br />
</p>
<h1 id="heading">Syntax & Example</h1>
<p class="p2"><head><br/> <link rel="stylesheet"
type="text/css" href="mystyle.css"> <br/> </head>
</p>
<br/>
</div>
</div>
<h3 style="text-align: center">Developed By: Paras Gupta 03111502718</h3>
</body>
</html>
2) style.css
body {
font-family: Calibri;
height: 100%;
margin: 0px;
background-color: azure;
}
p{
font-weight: bold; color: blueviolet;
font-style: italic;
justify-content: center;
}
.info{
text-align: center;
font-style: normal; color: black;
font-size: 20px;
}
.row{
display: flex;
}
.header {
color: darkmagenta;
font-size: 50px; font-weight: bold;
font-family: Cambria;
text-align: center;
}
.content {
top: 60px;
padding: 10px;
margin: 20px; z-index: 0;
background-color: gainsboro;
}
#heading {
color: darkgreen;
}
.col-4{
width: 33%;
background-color: coral;
color: white !important;
}
.col-8{
width: 67%;
}
OUTPUT:
SOURCE CODE:
<html>
<head>
<style>
body{
background-color:#282C34;
color:white;
font-family:system-ui;
}
input[type=text]{float:right;}
textarea{float:right;}
form{width:30%;margin-left:auto;margin-right:auto;}
.result_btn{text-align: center;}
.btn{font-family:system-ui;background-color: blue;color: white;border: 1px solid
white;border-radius: 0.4rem;padding: 0.6rem;}
</style>
<script type="text/Javascript">
function reset_details(){
document.getElementById('cgpa').innerHTML = "CGPA : ";
document.getElementById('dis').innerHTML = "Distinction : ";
}
function avg()
{var name=document.getElementById('name');
var reg=document.getElementById('reg');
var dept=document.getElementById('dept');
var sem1=document.getElementById('sem1');
var cgpa=document.getElementById('cgpa');
var dis=document.getElementById('dis');
if(name.value==""){
alert("Please enter name"); return false;
}
else if(reg.value==""){
alert("Please enter registration number");return false;
}
else if(dept.value==""){
alert("Please enter department");return false;
}
else if(sem1.value==""){
alert("Please enter sem1 gpa");return false;
}
else if(sem1.value>10){
alert("Please enter sem1 gpa between 1-10");return false;
}
}
}
}
}
}
alert("Please enter sem4 gpa between 1-10"); return false;
}
}
alert("Please enter sem5 gpa between 1-10"); return false;
}
}
}
alert("Please enter sem7 gpa");return false; }
}
}
}
var sum = parseInt(sem1.value) + parseInt(sem2.value)
+parseInt(sem3.value)+parseInt(sem4.value)+parseInt(sem5.value)+parseInt(sem6.value)+p
arseInt(sem7.value)+parseInt(sem8.value);
var result = sum/8;
cgpa.innerHTML = "CGPA : "+result;
if(result>=7.5) {dis.innerHTML="Distinction: FIRST CLASS";}
else if(result>5) {dis.innerHTML="Distinction: SECOND CLASS";}
else if(result<5) {dis.innerHTML="Distinction: THIRD CLASS";}
}
</script>
</head>
<body>
<form>
<h2><center>STUDENT CGPA VALIDATION</center></h2><br>
<table align="center">
<tr><td>Student Name:<td><td><input type="text" id="name"></td>
</tr>
<tr><td>Registration No:<td><td><input type="text" id="reg"></td>
</tr>
<tr><td>Department:<td><td><input type="text" id="dept"></td>
</tr>
<tr><td>SGPA (Semester 1) :<td><td><input type="text" id="sem1"></td>
</tr>
</tr>
</tr>
</tr>
</tr>
</tr>
</tr>
</tr>
</table>
<div class="result_btn">
<input type="button" class="btn" value="Calculate" onclick="avg();"/>
<input type="Reset" onclick="reset_details();" class="btn" size="25" value="Reset" />
</div>
</form>
<div id="result" style="text-align: center;">
<h3><u><b>Form Data</b></u></h3>
<div id="data" style="text-align: center">
<div id="cgpa">CGPA : </div>
<div id="dis">Distinction : </div>
</div>
</div>
(03111502718)</h3>
</body>
</html>
OUTPUT:
SOURCE CODE:
Exp5.html:
<!DOCTYPE html>
<html>
<head>
<title>Date and Examination</title>
<link href ="style1.css" rel ="stylesheet">
</head>
<body>
<h2 style="text-align: center">Current Date & Time: <span
id="date"></span></h2>
<h1 style="text-align: center">Online Exam!</h1>
<div class="form-div">
<form id="quiz" name="quiz">
<p class = "questions">Which language is used for creating Web Pages?
</p>
<input id = "textbox" type = "text" name = "question1"/>
<p class = "questions">The ____ passes the information given by the user to a
specified program.</p>
<input type = "radio" id = "mc1" name = "question2" value = "User"/><label
for="mc1">User</label>
<input type = "radio" id = "mc2" name = "question2" value = "Programmer"/><label
for="mc2">Programmer</label>
<input type = "radio" id = "mc3" name = "question2" value = "Web Server"/><label
for="mc3">Web Server</label>
<input type = "radio" id = "mc4" name = "question2" value = "Browser"/><label
for="mc4">Browser</label>
<p class = "questions">What is used to store the data within the documents on the
server?
</p>
<input type = "radio" id = "mc5" name = "question3" value = "HTML"/><label
for="mc5">HTML</label>
<input type = "radio" id = "mc6" name = "question3" value = "XML"/><label
for="mc6">XML</label>
<input type = "radio" id = "mc7" name = "question3" value = "DHTML"/><label
for="mc7">DHTML</label>
<input type = "radio" id = "mc8" name = "question3" value = "CGI"/><label
for="mc8">CGI</label><br />
<input id = "button" type = "button" value = "Submit Exam!" onclick = "check();"/>
</form>
</div>
<div class="form-div">
<div id="after_submit">
<p style="margin: 1rem" id = "number_correct"></p>
<p style="margin: 1rem" id = "message"></p>
</div>
</div>
</body>
<script src="./main.js" type="text/javascript"></script>
</html>
Style1.css:
body {
background-color:#282C34;
color:white;
}
#quiz {
margin-left: 10px;
background: #d2def2;
padding: 10px 20px 10px 20px;
width: max-content;
border-radius: 20px;
color: black;
}
.form-div{
display: flex;
width: 100%;
justify-content: center;
}
input {
margin-bottom: 20px;
}
#textbox {
height: 25px;
font-size: 16px;
border-radius: 5px;
border: none;
padding-left: 5px;
}
#button {
background: green;
border: 1px solid green;;
border-radius: 5px;
padding: 10px;
color: white;
font-size: 16px;
transition-duration: .5s;
margin-top: 15px;
}
#button:hover {
background: white;
border: 1px solid green;
color: black;
cursor: pointer;
}
#after_submit {
visibility: hidden;
background: #656ba7;
display: flex;
flex-direction: column;
padding: 10px 20px 10px 20px;
width: max-content;
text-align: center;
border-radius: 20px;
margin-left: 20px;
margin-top: 2rem;
font-size: 30px;
}
main.js:
document.getElementById('quiz').addEventListener('submit',function(e){
e.preventDefault();
});
var today;
var date,time,dateTime;
setInterval(function(){
today = new Date();
date = today.getDate()+'-'+(today.getMonth()+1)+'-'+today.getFullYear();
time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
dateTime = date+' '+time;
document.getElementById("date").innerHTML = dateTime;
},1000)
function check(){
var question1 = document.quiz.question1.value;
var correct = 0
if (question1 == "HTML" || question1=="html") {correct++; }
if (question2 == "Web Server") {correct++;}
if (question3 == "XML") {correct++;}
var messages = ["Great job!", "That's just okay", "You really need to do better"];
var score;
if (correct == 0) {
score = 2;
}
if (correct > 0 && correct < 3) {
score = 1;
}
if (correct == 3) {
score = 0;
}
document.getElementById("after_submit").style.visibility = "visible";
document.getElementById("message").innerHTML = messages[score];
document.getElementById("number_correct").innerHTML = "You got " + correct + "
correct.";
}
OUTPUT:
SOURCE CODE:
Index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<style>
body{background-color:#282C34;
color:white;
text-align: center;}
form{
padding: 1rem;
width: max-content;
display: flex;
flex-direction: column;
margin-left: auto;
margin-right: auto;
}
input[type=submit]{
font-family:system-ui;background-color: blue;color: white;border: 1px solid
white;border-radius: 0.4rem;padding: 0.6rem;
}
input[type=text],input[type=password]{
padding: 0.3rem;
}
input{
margin: 0.5rem;
}
</style>
</head>
<body>
<h1>Login Form</h1>
<form action="Login" method="post">
<table>
<tr>
<td>UserName:</td>
<td><input type="text" name="userName"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="userPassword"></td>
</tr>
</table>
<input type="submit" value="Login">
</form>
(03111502718)</h3>
</body>
</html>
Login.java:
package webtech6;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class Login extends HttpServlet

{
protected void doPost(HttpServletRequest req,HttpServletResponse res)throws
ServletException,IOException{
PrintWriter pw=res.getWriter();
res.setContentType("text/html");
String user=req.getParameter("userName");
String pass=req.getParameter("userPassword");
String htmlResponse = "";
if(user.equals("admin") && pass.equals("paras")){
htmlResponse = "<html><h2 style='color:green; '>Login Success! <br/>
Welcome "+user+" </h2></html>";
pw.println(htmlResponse);
}
else {
htmlResponse = "<html><h2 style='color:red; '>Login
Failed!</h2></html>";
pw.println(htmlResponse);
};
pw.close();
}
}
Web.xml:
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" id="WebApp_ID"
version="4.0">
<display-name>Login</display-name>
<servlet>
<servlet-name>Login</servlet-name>
<servlet-class>webtech6.Login</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Login</servlet-name>
<url-pattern>/Login</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
</web-app>
OUTPUT:

Webcode

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

Webcode

Uploaded by

Copyright:

Available Formats

SOURCE CODE:

<div class=" col col-9">

public class Login extends HttpServlet

You might also like