Professional Documents
Culture Documents
APJ Abdul
GL BAJAJ
Institute of Technologies & Management
Kalam Technical University, Lucknow, U.P., India]
Computer Sc. & Engineering (AIML),
Grater Noida Department of Applied Computational Science & Engineering
Lab File
Submitted By:
Student Name: Aryan Shukla
University Roll No.: 2201921530046
Branch: CSAIML
Section: CSAIML-1
Group: 2
Submitted To:
Mr. Rakesh Kumar
Index
S.No Name of experiment Date of Date of Signatur
. Experimen Submissio e
t n
1 Design the following static web pages
required for an online book store website.
HOMEPAGE:
The static home page must contain three
frames.
Top frame: Logo and the college name and
links to Homepage, Login page,
Registration page, Catalogue page and
Cart page (the description of these pages
will be given below).
For example: When you click the link “CSE”
the catalogue for CSE Books should be
displayed in the Right frame. Right frame:
The pages to the links in the left frame must be
loaded here. Initially this page contains
description of the website.
2 LOGINPAGE:
This page looks like below:
2. Author Name.
3. Publisher.
4. Price.
5. Add to cart button.
7 Js VALIDATION:
3. E-mailid (should not contain any invalid and
must follow the standard
pattern(name@domain.com)
4. Phone Number(Phone number should
contain 10 digits only).
8 CSS: Design a web page using CSS(Cascading
Style Sheets) which includes the following:
1) Use different font, styles:
In the style definition you define how each
selector should work (font, color etc.). Then, in
the body of your pages, you refer to these
selectors to activate the styles.
2) Set a background image for both the page
and single elements on the page.
9 CSS:
1) Control the repetition of the image with the
background-repeat property.
2) Define styles for links as
A:link
A:visited
A:active
A:hover
10 Consider a small topic of your choice on
which you can develop static Webpages
and try to implement
all topics of html, CSS and Js within the
topic.
Choose any one topic.
1. Your Own Portfolio
2. To-Do List
3. Survey Form
4. A Tribute Page
5. A Questionnaire
PRACTICAL-1
AIM: Design the following static webpages required for an online book store website.
HOMEPAGE:
• The static home page must contain three frames.
• Top frame: Logo and the college name and links to Homepage, Login page,
Registration page, Catalogue page and Cart page (the description of these
pages will be given below).
For example: When you click the link “CSE” the catalogue for CSE Books
should be displayed in the Right frame. Right frame: The pages to the links in
the left frame must be loaded here. Initially this page contains description of the
web site.
PROGRAM:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web page</title>
</head>
<style>
.myimage{
text-align: center;
</style>
</th>
</tr>
<th>Home</th>
<th colspan="1">Login</th>
<th>Registration</th>
<th>catalogue</th>
<th>cart</th>
</tr>
<tr >
<td>CSE</td>
</tr>
<td>ECE</td>
</tr>
<td>Civil</td>
</tr>
<td>Electrical</td>
</tr>
</table>
</body>
</html>
PRACTICAL-2
AIM: Design the following static webpages required for an online book store website.
LOGIN PAGE: In computer security, logging in is the process by which an individual gains
access to a computer system by identifying and authenticating themselves. The user
credentials are typically some form of username and a matching password, and these
credentials themselves are sometimes referred to as a login.
Theory:
Basic Text Input:
<input type="text"> creates a simple single-line text input.
Placeholder Text:
Use the placeholder attribute to provide a hint or example text inside the input.
Submit Input:
The <input type="submit"> element is used to create a button that, when clicked, submits the
form data to the server for processing.
Reset Input:
The <input type="reset"> element is used to create a button that, when clicked, resets all the
form fields back to their default values.
Program:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web page</title>
</head>
<style>
table { border-collapse: collapse;}
.myimage{
text-align: center;
}
input[type="submit"] {
background-color: #07600a;
border: 6;
color: white;
padding: 10px 20px;
text-align: center;
font-size: 16px;
}
input[type="reset"] {
background-color: #4ca5af;
border: 4;
color: rgb(18, 25, 13);
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
}
input[type="text"], input[type="password"] {
background-color: #f1f2ef;
border: 1px solid #bebbbb;
padding: 10px 10px;
font-size: 15px;
margin: 4px 2px;
}
</style>
<table border="1" width="600" cellpadding="20" >
</tr>
<tr style="background-color:cornsilk; ">
<th>Home</th>
<th colspan="1">Login</th>
<th>Registration</th>
<th>catalogue</th>
<th>cart</th>
</tr>
<tr >
<td>CSE</td>
<td rowspan="4" colspan="4" style="text-align: center; margin-inline: 100px;">
<form action="Login page">
<h2>Login page</h2>
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required> <br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</td>
</tr>
<td>ECE</td>
</tr>
<td>Civil</td>
</tr>
</tr>
</table>
</body>
</html>
PRACTICAL-3
AIM: Design the following static webpages required for an online book store website.
Catalogue Page: A catalog page is a web page or document that presents a curated collection
of products or services, providing users with organized information, visuals, and navigation
options to facilitate browsing and decision-making.
Theory:
In CSS, the term "image tag" is not used directly. Instead, CSS is mainly responsible for
styling and positioning elements on a web page, including images. However, I believe you
might be referring to the <img> tag in HTML, which is used to embed images in a webpage.
In that case, here's a brief overview without specific code:
Source (src):
The src attribute in the <img> tag specifies the URL or file path of the image.
Alternate Text (alt):
The alt attribute provides alternative text for the image, which is displayed if the image
cannot be loaded. It is also used for accessibility.
Program:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web page</title>
</head>
<style>
table { border-collapse: collapse;}
.myimage{
text-align: center;
</style>
<table border="1" width="100" cellpadding="20" >
</tr>
<td>CSE</td>
<br> <br>
<img src="https://m.media-amazon.com/images/W/MEDIAX_792452-T2/images/I/41t-
pVrGX8L._SY445_SX342_.jpg" alt="" width="100" height="100">
<br> <br>
<img src="https://m.media-amazon.com/images/W/MEDIAX_792452-
T2/images/I/61M74Vmgg+L._SY466_.jpg" alt="" width="100" height="100">
</td>
<td rowspan="4" colspan="4" style="text-align: left; margin-inline: 100px;">
<pre>
</pre>
<pre>
Book name:Javascript $30
Author: Sunil Kumar
Publication: Oxford <img src="https://freepngimg.com/save/25486-
add-to-cart-button/763x220" alt="" width="50" height="30"> <br>
</pre>
<pre>
</pre>
</td>
</tr>
<td>ECE</td>
</tr>
</table>
</body>
</html>
PRACTICAL-4
AIM: Design the following static webpages required for an online book store website.
Cart Page:A cart page is a section of an online shopping website where users can view and
manage the items they have selected for purchase before proceeding to checkout.
Theory:
CSS is primarily responsible for styling and layout, and it works in conjunction with HTML,
which defines the structure of a webpage. Tables in HTML are created using the <table>,
<tr> (table row), <th> (table header), and <td> (table data) tags. While CSS doesn't directly
create tables, it can be used to style and enhance them. Here's a short overview:
Styling Table Elements:
CSS is used to style the appearance of <table>, <tr>, <th>, and <td> elements, controlling
aspects like font, color, borders, and spacing.
Program:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web page</title>
</head>
<style>
table { border-collapse: collapse; }
.myimage{
text-align: center;
</style>
<table border="1" cellpadding="20" >
</tr>
<tr style="background-color:cornsilk; ">
<th>Home</th>
<th colspan="1">Login</th>
<th>Registration</th>
<th>catalogue</th>
<th>cart</th>
</tr>
<tr >
<td>CSE</td>
<td rowspan="4" colspan="4" >
<pre><b> Book name Price Quantity Amount </b>
PRACTICAL-5
AIM: Design the following static webpages required for an online book store website.
Cart Page:A cart page is a section of an online shopping website where users can view and
manage the items they have selected for purchase before proceeding to checkout.
Theory:
Text input: Allows users to enter a single line of text.
Password input: Similar to text input but hides the entered characters for password entry.
Textarea: Allows users to input multiple lines of text, suitable for longer responses.
Checkbox: Presents a binary choice, where users can either check or uncheck a box.
Radio button: Allows users to select one option from a group of options.
Dropdown menu (select): Provides a list of options, and users can select one from the
list.
File input: Enables users to upload files from their local device.
Submit button: Submits a form to the server for processing.
Reset button: Resets the form to its default state.
Number input: Allows users to enter a numeric value, with optional restrictions.
Date input: Allows users to pick a date from a date picker.
Email input: Specifically designed for entering email addresses.
URL input: Intended for entering website URLs.
PROGRAM:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web page</title>
</head>
<style>
table { border-collapse: collapse;}
.myimage{
text-align: center;
}
input[type="submit"] {
background-color: #07600a;
border: 6;
color: white;
padding: 10px 20px;
text-align: center;
font-size: 16px;
}
input[type="reset"] {
background-color: #4ca5af;
border: 4;
color: rgb(18, 25, 13);
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
}
input[type="text"], input[type="password"] {
background-color: #f1f2ef;
border: 1px solid #bebbbb;
padding: 10px 10px;
font-size: 15px;
margin: 4px 2px;
}
/* input[type=submit] {
background-color: #4CAF50;
color: white;
}
input[type=submit]:hover {
background-color: #45a049;
}
label {
display: block;
margin-top: 10px;
} */
</style>
</style>
<table border="1" width="600" cellpadding="20" >
</tr>
<tr style="background-color:cornsilk; ">
<th>Home</th>
<th colspan="1">Login</th>
<th>Registration</th>
<th>catalogue</th>
<th>cart</th>
</tr>
<tr >
<td>CSE</td>
<td rowspan="4" colspan="4" style="text-align: center; margin-inline: 1000px;" >
<header ><b> REGISTRATION PAGE</b></header>
<br>
</select>
<br> <br>
<label for="languages">Languages Known:</label>
<input type="checkbox" id="english" name="languages[]" value="English">
<label for="english">English</label>
<input type="checkbox" id="telugu" name="languages[]" value="Telugu">
<label for="telugu">Telugu</label>
<input type="checkbox" id="hindi" name="languages[]" value="Hindi">
<label for="hindi">Hindi</label>
<input type="checkbox" id="tamil" name="languages[]" value="Tamil">
<label for="tamil">Tamil</label>
<br> <br>
<label for="address">Address:</label>
<textarea id="address" name="address" required></textarea>
<br> <br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</td>
</tr>
<tr style="background-color: rgb(228, 228, 227);" >
<td>ECE</td>
</tr>
<tr style="background-color: rgb(237, 231, 241);">
<td>Civil</td>
</tr>
<tr style="background-color: rgb(203, 219, 174);">
<td>Electrical</td>
</tr>
</table>
</body>
</html>
PRACTICAL 6
AIM: Write JavaScript to validate the following fields of the above registration page.
JAVASCRIPT:
JavaScript is a programming language commonly used in web design to add interactivity and
dynamic functionality to websites. It allows developers to manipulate and control various
elements on a webpage, respond to user actions, and modify content in real time, enhancing
the overall user experience.
SOFTWARE REQUIRED: Notepad, SDK
DESCRIPTION:
Validation is the process of ensuring that user-submitted data in a form meets specific
criteria or constraints. In the case of the given credentials, the validation requirements are as
follows:
1) Name: The name should only contain alphabetic characters, and its length should be at
least 6 characters. JavaScript can be used to attach an event listener to the Name input field
that listens for user input or form submission. Upon user input or form submission, the
JavaScript code can retrieve the entered name value, check if it consists of only alphabetic
characters using regular expressions, and verify if its length meets the minimum requirement
of 6 characters. If the validation fails, an error message can be displayed to prompt the user
to correct the input.
2) Password: The password should have a minimum length of 6 characters. JavaScript can be
used to validate the password field. An event listener can be attached to the Password input
field, which triggers the validation process when the user enters data or submits the form.
The JavaScript code would then check if the password length is at least 6 characters. If the
validation fails, an error message can be displayed to guide the user to choose a password
that meets the length requirement.
PROGRAM:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login Page</title>
<style>
html {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px 40px;
}
form label,span {
justify-self: right;
white-space: nowrap;
}
form input,form textarea{
padding: 5px 10px;
border-radius: 5px;
border: solid 1px black;
outline: none;
font-size: 15px;
}
button{
grid-column-start: 1;
grid-column-end: 3;
margin-top: 20px;
padding: 10px 20px;
justify-self: center;
font-weight: bold;
}
.modal::backdrop{
backdrop-filter: blur(5px);
}
.modal{
padding: 1em 2em;
background-color: rgb(240, 212, 177);
border: solid 2px black;
border-radius: 10px;
box-shadow: 0 0 10px black;
}
.modal div{
display: flex;
justify-content: center;
}
#close{
padding: 1em 2em;
font-weight: bold;
}
</style>
</head>
<body>
<div class="header">
<img src="logo.png" alt="Logo">
<h1>BOOKSTORE</h1>
</div>
<div class="container">
<div class="head">
<h3 class="right">Register</h3>
<h3 class="left">Login</h3>
</div>
<form action="#" id="form">
<label for="name">Name :</label>
<input type="text" id="name" name="name[]" placeholder="Name"
autocomplete="name">
<label for="password">Password :</label>
<input type="password" name="password[]" id="password" placeholder="Password"
autocomplete="pas">
<label for="email">E-mail :</label>
<input type="email" id="email" name="email[]" placeholder="email"
autocomplete="email">
<label for="phone">Phone Number :</label>
<input type="text" id="phone" name="phone[]" placeholder="Phone Number"
autocomplete="phone">
<span>Sex :</span>
<div>
<input type="radio" id="male" name="sex">
<label for="male">Male   </label>
<input type="radio" id="female" name="sex">
<label for="female">Female </label>
</div>
<label for="dob">Date of birth :</label>
<input type="date" id="dob">
<span>Languages :</span>
<div>
<input type="checkbox" id="Hindi" name="Language">
<label for="Hindi">Hindi   </label>
<input type="checkbox" id="English" name="Language">
<label for="English">English </label><br>
<input type="checkbox" id="Tamil" name="Language">
<label for="Tamil">Tamil   </label>
<input type="checkbox" id="Telugu" name="Language">
<label for="Telugu">Telugu </label>
</div>
}
close.onclick = function () {
modal.close();
}
</script>
</body>
</html>
PRACTICAL 7
AIM: Write JavaScript to validate the following fields of the above registration page.
JAVASCRIPT:
JavaScript is a programming language commonly used in web design to add interactivity and
dynamic functionality to websites. It allows developers to manipulate and control various
elements on a webpage, respond to user actions, and modify content in real time, enhancing
the overall user experience.
SOFTWARE REQUIRED: Notepad, SDK
DESCRIPTION:
Validation is crucial for ensuring that user-submitted data in a form adheres to specific
criteria. In the given credentials, the form validation requirements for the remaining fields
are as follows:
1) E-mail ID: The e-mail ID should not contain any invalid characters and must follow the
standard pattern of "name@domain.com". To implement this validation, JavaScript can be
used to attach an event listener to the E-mail ID input field. Upon user input or form
submission, the JavaScript code can retrieve the entered e-mail ID value and verify if it
matches the standard pattern using regular expressions.
2) Phone Number: The phone number should contain exactly 10 digits. JavaScript can be
utilized to validate the phone number field. An event listener can be attached to the Phone
Number input field, triggering the validation process with user input or form submission.
PROGRAM: