Scribd
Upload
10 views16 pages

Webdesign

web technology project file for bca

Uploaded by

m.ksingh782004
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
10 views16 pages

Webdesign

web technology project file for bca

Uploaded by

m.ksingh782004
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/ 16

AMBALIKA INSTITUTE OF HIGHER EDUCATION

ASSIGNMENT FILE
ON
WEB DESIGN LAB
(507P)

BACHELOR OF COMPUTER APPLICATION

Submitted by – Submitted to -
Name – mukesh kumar singh Class Coordinator :
Course – bca 3rd year Mr. Abhishek Verma
Roll no – 2212774040045
INDEX

Serial Name of the topic Page Date of Remarks


no. no. Submission
1. HTML program for form 17/09/2024
creation.
Create a web page to
2. embed an image map in 30/09/2024
a web page using HTML.
Create a web page to
3. get the coordinates from 14/10/2024
an image using java
script.
Design HTML form for
4. keeping student record 25/10/2024
and validate it using
Java script.
HTML program for home
5. page creation using 18/11/2024
frames.

Teacher’s sign :
4. Design HTML form for keeping student record and validate it
using Java script.

<!DOCTYPE html>
<html>
<head>
<title>Student Record Form</title>
<script>
function validateForm() {
var name = document.forms["studentForm"]["name"].value;
var rollno = document.forms["studentForm"]["rollno"].value;
var email = document.forms["studentForm"]["email"].value;
if (name == "" || rollno == "" || email == "") {
alert("All fields must be filled out");
return false;
}
return true;
}
</script>
<style>
body{
background-color: rgb(117, 115, 115);
color: bisque;
align-items: center;
display: flex;
flex-direction: column;
}
</style>
</head>
<body>
<h1>Student Record Form</h1>
<form name="studentForm" onsubmit="return validateForm()"
method="post" action="/submit_record">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name"><br><br>
<label for="rollno">Roll Number:</label><br>
<input type="text" id="rollno" name="rollno"><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Output :
3. Create a web page to get the coordinates from an image using
java script.

<!DOCTYPE html>
<html>
<head>
<title>Get Image Coordinates</title>
<script>
function getCoords(event) {
var x = event.clientX;
var y = event.clientY;
alert("X: " + x + ", Y: " + y);
}
</script>
</head>
<body>
<h1>Click on the Image to Get Coordinates</h1>
<img src="https://www.w3schools.com/w3images/mac.jpg"
onclick="getCoords(event)" alt="Clickable Image">
</body>
</html>
Output :
1. HTML program for form creation.

<!DOCTYPE html>
<html>
<head>
<title>Form Creation</title>
<style>
body{
background-color: rgb(117, 115, 115);
color: bisque;
align-items: center;
display: flex;
flex-direction: column;
}
input{
border-radius: 10px;
}
button{
background-color: rgb(90, 88, 88);
color: wheat;
border-radius: 10px;
transform: translateX(64px);
}
</style>
</head>
<body>
<h2>Registration Form</h2>
<form action="/submit_form" method="post">
<br>
<input type="text" id="name" name="name" placeholder="Enter
Name"><br>
<br>
<input type="email" id="email" name="email" placeholder="Enter
Email"><br>
<br>
<input type="password" id="password" name="password"
placeholder="Enter password"><br> <br>
<button>Submit</button>
</form>
</body>
</html>
Output :
5. HTML program for home page creation using frames.

<!DOCTYPE html>
<html>
<head>
<title>Home Page with Frames</title>
</head>
<frameset rows="50%,50%">
<frame src="https://www.pexels.com/search/landscape/ "
name="headerFrame">
<frameset cols="50%,50%">
<frame src="https://c8.alamy.com/comp/HN577H/industrial-plant-factory-
sketch-vintage-building-vector-illustration-HN577H.jpg" name="menuFrame">
<frame src="https://cdn.vectorstock.com/i/1000v/71/86/old-factory-
engraving-style-drawing-plant-vector-42667186.jpg" name="contentFrame">
</frameset>
</frameset>
</html>
Output :
2. Create a web page to embed an image map in a web page using
HTML.

<! Doctype html>


<html>
<head>
<title>
Image Mapping
</title>
</head>
<body> I
<h2> Image Maps </h2>
<p> Click on the Laptop, the phone, or the cup of coffee
to go to a new page and read more about the topic: </p>
<img src="https://www.w3schools.com/html/workplace.jpg" alt="img-
workspace" usemap="#work">
<map name="work">
<area shape="rect" coords="32,43,273,347" href="./computer.html">
</body>
</html>
➢ Code for Image map in a web page.

<html>
<head>
<title>
Image Mapping
</title>
</head>
<body>
<h1> Laptop </h1><br>
<img src="https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcQAXgRavueujW4ZPy098yEM4eZnaNm
7p18IeQ&s" alt="laptop" height="400px" width=
"700px"><br>
<h1><q> A small computer that is easy to carry and that
can use batteries for power. </q></h1> I
</body>
</html>
• Image map : The <map> tag is used to define an image map. An image
map is an image with clickable areas. The required name attribute of the
<map> element is associated with the <img>'s usemap attribute and
creates a relationship between the image and the map.
• Note : We have to click anywhere at the laptop shows in the above given
image.

You might also like