0% found this document useful (1 vote)
2K views42 pages

Web Designing Lab Manual (BCS-353)

Uploaded by

indiandass813
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
0% found this document useful (1 vote)
2K views42 pages

Web Designing Lab Manual (BCS-353)

Uploaded by

indiandass813
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
  • Cover Page
  • Program Overview
  • Program 1: Home Page Creation
  • Program 2: Login Page Creation
  • Program 3: Catalogue Page Creation
  • Program 4: Cart Page Creation
  • Program 5: Registration Page Creation
  • Program 6: JS Validation
  • Program 7: Form Validation
  • Program 8: CSS Styling
  • Program 9: Image and Link Styles
  • Program 10: ToDo List

RAJ KUMAR GOEL INSTITUTE OF TECHNOLOGY

5TH KM STONE DELHI MEERUT ROAD GHAZIABAD [UP]

WEB DESIGNING WORKSHOP


LAB FILE (BCS-353)

SUBMITTED TO :- SUBMITTED BY:-


HIMANSHI MAM MEENAKSHI NEGI

• 2200330130031
IT sec (A)

DEPARTMENT OF INFORMATION
TECHNOLOGY
Raj Kumar Goel Institute of Technology, Ghaziabad
Department of Computer Science & Engineering
INDEX

SNo. PROGRAM NAME SUBMISSION DATE SIGNATURE

1. WAP to create HOME PAGE


using HTML
2. WAP to create LOGIN PAGE
using HTML
3.
WAP to create CATALOGUE PAGE
using HTML
4.
WAP to create CART PAGE
using HTML
5. WAP to create REGISTRATION
PAGE using HTML
6. WAP to show Js VALIDATION

7. WAP to show Js VALIDATION

8. WAP to Design a web page


using CSS(Cascading Style
Sheets)
9. WAP to control the
repetition of the image with
the background-repeat
property
10. WAP to develop static web
page of TO-DO LIST
Program:1
Aim: WAP to create HOME PAGE using HTML

• 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.

Objective:
1. Problem Statement: - To design a Home Page containing details about
the frames.

2. Stepwise Solution: -
• Initiate the HTML Page with simple <html> tags.
• Use the various HTML <FRAME> to create a simple frame
containing the record of home page.
• Save the file using .htm / .html extension.
• Run the file on browser (IE / google-chrome / Mozilla-firefox).

Code & Outcome: - Snapshot of the homepage.


CODE:
<!DOCTYPE>
<html>
<head>
<title>RKGIT</title>
<meta name="viewport"content="width=device-
width,initialscale=1.0">
</head>
<body> <style>
table,th,td{
border:2px solid rgb(0, 0, 0); border-collapse:collapse;
} th,td{
padding:10px;
} a{ color: black;
text-decoration: none;
color: rgb(134, 72, 11);
}
</style>
<table Style="width:100%">
<tr style="background-color: rgb(231, 157, 157);">
<th><img
src="[Link]
[Link]" alt="Rkgit logo" height="70"
width="70"align="center"style="maxwidth:100%;height:auto;"
></th>
<th colspan="4" style="color: rgb(17,
88, 126);"><h1><b>RAJ KUMAR GOEL INSTITUTE OF
TECHNOLOGY</b></h1></th>
</tr>
<tr style="background-color: rgb(235, 203, 203);">
<th>HOME</th>
<th><a href="[Link]">LOGIN</a></th>
<th><a href="[Link]">REGISTRATION</a></th>
<th><a href="[Link]">CATALOGUE</a></th>
<th><a href="[Link]">CART</a></th>
</tr>
<tr>
<td
align="center">CSE<br><br><br>ECE<br><br><br>EEE<br><br><b
r>CIVIL </td>
<td colspan="4" align="center">
<p style="font-size: 20;”>Description of the
Website.</p></td>
</tr>
</table>
</body>
</html>

OUTPUT:
Experiment : 2
Aim: WAP to create LOGIN PAGE using HTML
This page contains following informations:

• User name
• Password
• Submit and reset buttons
Objective:
1. Problem Statement: - To design a Login Pagecontaining details about the
frames.

2. Stepwise Solution: -
• Initiate the HTML Page with simple <html> tags.
• Use the various HTML <FRAME> to createa simple frame containing the
record of home page.
• Save the file using .htm / .html extension.
• Run the file on browser (IE / google-chrome / Mozilla-firefox).

Code & Outcome:- Snapshot of the login page


CODE:
<!DOCTYPE>
<html>
<head>
<title>RKGIT</title> <meta
name="viewport"
content="width=device-width,
initial-scale=1.0">
</head>
<body> <style>
table,th,td{
border:2px solid black;
border-collapse:collapse;
} th,td{
padding:10px;
} a{
color: black; text-
decoration: none; color:
rgb(134, 72, 11);
}
</style>

<table Style="width:100%">
<tr style="background-color: rgb(242, 167, 167);">
<th><img

src="[Link]
[Link]"height="70"
width="70"align="center"style="maxwidth:100%;height:auto;"></
th>
<th colspan="4" style="background-color=red"><h1><b>RAJ
KUMAR GOEL INSTITUTE OF TECHNOLOGY</b></h1></th>
</tr>
<tr style="background-color: rgb(235, 203, 203);">
<th><a href="[Link]">HOME</a></th>
<th>LOGIN</th>
<th><a href="[Link]">REGISTRATION</a></th>
<th><a href="[Link]">CATALOGUE</a></th>
<th><a href="[Link]">CART</a></th>
</tr>
<tr>
<td align="center">
<pre>CSE<br><br><br><br>ECE<br><br><br><br>EEE<br><br><br><b
r>CIVIL</pre>
</td>
<td colspan="5"align="center">
<h2><b>LOGIN PAGE:</b></h2>
<form>
USER NAME: <input type="text" user name="user
name"placeholder="user name"/> <br><br/>
PASSWORD: <input type="password"

password="password"placeholder="password"/> <br><br/>
<input type="Submit" value="Submit"> <input
type="Reset" value="Reset">
</form>
</td>
</tr>
</table>
</body>
</html>

OUTPUT:
Program : 3
Aim: WAP to create CATALOGUE PAGE using HTML
The catalogue page should contain the details of all the books available
in the website in a table. The details should contain the following:
• Snap shot of Cover Page
• Author Name
• Publisher
• Price
• Add to cart button.
Objective:
1. Problem Statement: - To design a Catalogue Pagecontaining details about
the frames.

2. Stepwise Solution: -
• Initiate the HTML Page with simple <html> tags.
• Use the various HTML <FRAME> to createa simple frame containing
the record of home page.
• Save the file using .htm / .html extension.
• Run the file on browser (IE / google-chrome / Mozilla-firefox).

Code & Outcome:- Snapshot of the Catalogue page.


CODE:
<!DOCTYPE>
<html>
<head>
<title>RKGIT</title>
<meta name="viewport"content="width=device-
width,initialscale=1.0">
<link rel="stylesheet"
href="[Link]
/css/[Link]">
</head>
<body> <style>
table,th,td{ border:2px
solid black; border-

collapse:collapse;
} th,td{
padding:10px;
} a{ color: black;
text-decoration: none;
color: rgb(134, 72, 11);
} .btn{
border-radius: 20px;
border-width: 1px;
cursor: pointer;
width: 60%; }
.btn:active{
background-color: grey;
} .icon { padding:
10px; min-width:
50px; text-align:

center; }
</style>
<table Style="width:100%">
<tr style="background-color: rgb(231, 157, 157);">
<th><img

src="[Link]
[Link]" alt="Rkgit logo" height="70"
width="70"align="center"style="maxwidth:100%;height:auto;"></t
h>
<th colspan="4" style="background-color=red"><h1><b>RAJ
KUMAR GOEL INSTITUTE OF TECHNOLOGY</b></h1></th>
</tr>
<tr style="background-color: rgb(235, 203, 203);">
<th><a href="[Link]">HOME</a></th>
<th><a href="[Link]">LOGIN</a></th>
<th><a href="[Link]">REGISTRATION</a></th>
<th>CATALOGUE</th>
<th><a href="[Link]">CART</a></th>
</tr>
<tr>
<td
align="center"><pre>CSE<br><br><br><br><br><br>ECE<br><br><b
r><br><br><br>EEE<br><br><br><br><br><br>CIVIL
<pre></td>
<td align="center">
<img src="[Link]
[Link]/images/I/[Link]" alt="XML Bible book"
height="70"style="max-width:100%"><br><br> <img
src="[Link]
[Link]/images/S/[Link]/books/138
5600294i/[Link]" alt="AI book"
height="70"style="maxwidth:100%"><br><br> <img
src="[Link]
[Link]"
alt="Java 2 book" height="70"style="max-width:100%"><br><br>
<img src="[Link]
[Link]/images/I/[Link]" alt="HTML in 24 hours
book" height="70">
</td>
<td><pre> Book : XML Bible
Author : Winsten
Publication : Wiely
<br><br>
Book : AI
Author : [Link]
Publication : Pricetonhall
<br><br>
Book : Java 2
Author : Watson
Publication : BPBpublication
<br><br>
Book : HTML in 24 hours
Author : Sam Peter
Publication : Sam Publication
</pre></td>
<td align="center">
₹40.5<br><br><br><br><br>
₹63<br><br><br><br><br>
₹35.5<br><br><br><br><br>
₹50
</td>
<td align="center">
<button class="btn" ><i class="fa fa-shopping-cart
icon"></i> Add to Cart </button><br><br><br><br>
<button class="btn" ><i class="fa fa-shopping-cart
icon"></i> Add to Cart </button><br><br><br><br>
<button class="btn" ><i class="fa fa-shopping-cart
icon"></i> Add to Cart </button><br><br><br><br>
<button class="btn" ><i class="fa fa-shopping-cart
icon"></i> Add to Cart </button>
</td>
</tr>
</table>
</body>
</html>
OUTPUT:
Program : 4
Aim: WAP to create CART
PAGE using HTML
The cart page contains the details about the books which are
added to the cart.
Objective:
1. Problem Statement: - To design a Cart Page containing details about the
frames.

2. Stepwise Solution: -
• Initiate the HTML Page with simple <html> tags.
• Use the various HTML <FRAME> to createa simple frame
containing the record of homepage.
• Save the file using .htm / .html extension.
• Run the file on browser (IE / google-chrome / Mozilla-firefox).

Code & Outcome: - Snapshot of the Cart page.


CODE:
<!DOCTYPE>
<html>
<head>
<title>RKGIT</title>
<meta name="viewport"content="width=device-
width,initialscale=1.0">
</head>
<body> <style>
table,th,td{
border:2px solid black;
border-collapse:collapse;
} th,td{
padding:10px;
} a{
color: black; text-
decoration: none; color:
rgb(134, 72, 11);
}
</style>

<table Style="width:100%">
<tr style="background-color: rgb(231, 157, 157);">
<th><img

src="[Link]
[Link]" alt="Rkgit logo" height="70"
width="70"align="center"style="maxwidth:100%;height:auto;"></t
h>
<th colspan="4" style="background-color=red"><h1><b>RAJ
KUMAR GOEL INSTITUTE OF TECHNOLOGY</b></h1></th>
</tr>
<tr style="background-color: rgb(235, 203, 203);">
<th><a href="[Link]">HOME</a></th>
<th><a href="[Link]">LOGIN</a></th>
<th><a href="[Link]">REGISTRATION</a></th>
<th><a href="[Link]">CATALOGUE</a></th>
<th>CART</th>
</tr>
<tr>
<td
align="center">CSE<br><br>ECE<br><br>EEE<br><br>CIVIL
</td>
<td colspan="4" style="font-size: 17;">
<pre>
<b> Book name Price Quantity
Amount</b><br>
Java 2 ₹35.5 2 ₹70<br>
XML bible ₹40 1 ₹40.5<br>
<b>Total amount:- ₹130.5</b>
</pre>
</td>
</tr>
</table>
</body>
</html>

OUTPUT:
Program : 5
Aim: WAPto create REGISTRATION PAGE
using HTML
Create a Registration form with the following fields:

• Name (Text field)


• Password (password field)
• E-mail id (text field)
• Phone Number (text field)
• Sex (radio button)
• Date of birth (3 select boxes)
• Languages known (checkboxes-English, Telugu, Hindi, Tamil)
Address (text area)

Objective:
1. Problem Statement: - To design a Registration Pagecontaining details
about the frames.

2. Stepwise Solution: -
• Initiate the HTML Page with simple <html> tags.
• Use the various HTML <FRAME> to create a simple frame
containing the record of home page.
• Save the file using .htm / .html extension.
• Run the file on browser (IE / google-chrome / Mozilla-firefox).

Code & Outcome: - Snapshot of the Registration page.


CODE:
<!DOCTYPE>
<html>
<head>
<title>RKGIT</title>
<meta name="viewport"content="width=device-
width,initialscale=1.0">
</head>
<body> <style>
table,th,td{
border:2px solid black;
border-collapse:collapse;
} th,td{
padding:10px;}
a{
color: black; text-
decoration: none; color:
rgb(134, 72, 11);
}
</style>

<table Style="width:100%">
<tr style="background-color: rgb(231, 157, 157);">
<th><img

src="[Link]
[Link]" alt="Rkgit logo" height="70"
width="70"align="center"style="maxwidth:100%;height:auto;"></
th>
<th colspan="4" style="background-color=red"><h1><b>RAJ
KUMAR GOEL INSTITUTE OF TECHNOLOGY</b></h1></th>
</tr>
<tr style="background-color: rgb(235, 203, 203);">
<th><a href="[Link]">HOME</a></th>
<th><a href="[Link]">LOGIN</a></th>
<th\>REGISTRATION</th>
<th><a href="[Link]">CATALOGUE</a></th>
<th><a href="[Link]">CART</a></th>
</tr>
<tr>
<td colspan="5" align="center">
<form>
Name : <input type="text"
placeholder="name"><br><br>
Password: <input type="password"
placeholder="password"><br><br>
Email id: <input type="text" placeholder="Email
id"><br><br>
Phone : <input type="text"
placeholder="Mobile"><br><br>
Sex :
<input type="radio" value="Male"
name="Sex">Male
<input type="radio" value="Female"
name="Sex">Female
<input type="radio" value="Others"
name="Sex">Others <br><br>

Date of Birth : <input type="date" ><br><br>


Languages Known:<br>
<input type="checkbox" value="Hindi"
name="Languages">Hindi
<input type="checkbox" value="English"
name="Languages">English
<input type="checkbox" value="Telugu"
name="Languages">Telugu
<input type="checkbox" value="Tamil"
name="Languages">Tamil<br><br>
Address : <input type="text"
placeholder="Address"><br><br>
<input type="submit">
<input type="reset">
</form>
</td>
</tr>
</table>
</body>
</html>
OUTPUT:
Program:6

AIM: WAP to show Js VALIDATION


Write JavaScript to validate the following fields of the above
registration page.
1. Name (Name should contains alphabets and the length
should not be less than 6 characters).
2. Password (Password should not be less than 6 characters
length).

CODE:
[Link]
<!DOCTYPE html>
<html>
<head>
<title>RKGIT</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="[Link]" defer></script>
<style>
table, th, td {
border: 2px solid black;
border-collapse: collapse;
}

th, td {
padding: 10px;
}

a{
color: black;
text-decoration: none;
color: rgb(134, 72, 11);
}
</style>
</head>
<body>
<table style="width:100%">
<tr style="background-color: rgb(231, 157, 157);">
<th><img src="rkgit [Link]" alt="Rkgit logo"></th>
<th colspan="4" style="background-color: rgb(204, 129, 129);"><h1><b>RAJ
KUMAR GOEL INSTITUTE OF TECHNOLOGY</b></h1></th>
</tr>
<tr style="background-color: rgb(235, 203, 203);">
<th><a href="[Link]">HOME</a></th>
<th><a href="[Link]">LOGIN</a></th>
<th>REGISTRATION</th>
<th><a href="[Link]">CATALOGUE</a></th>
<th><a href="[Link]">CART</a></th>
</tr>
<tr>
<td colspan="5" align="center">
<form onsubmit="return validateForm()">
<!-- Add ID to the input field for easy access in JavaScript -->
Name: <input type="text" id="name" name="name" placeholder="Enter
your" required><br><br>
Password: <input type="password" id="password" name="password"
placeholder="password" required><br><br>
Email id: <input type="text" placeholder="Email id"
required><br><br>
Phone: <input type="text" placeholder="Mobile" required><br><br>
Sex:
<input type="radio" name="Sex" value="Male">Male
<input type="radio" name="Sex" value="Female">Female
<input type="radio" name="Sex" value="Others">Others <br><br>
Date of Birth: <input type="date"><br><br>
Languages Known:<br>
<input type="checkbox" value="Hindi" name="Languages">Hindi
<input type="checkbox" value="English" name="Languages">English
<input type="checkbox" value="Telugu" name="Languages">Telugu
<input type="checkbox" value="Tamil" name="Languages">Tamil<br><br>
Address: <input type="text" placeholder="Address"><br><br>
<input type="submit">
<input type="reset">
</form>
</td>
</tr>
</table>
</body>
</html>

[Link]
function validateForm() {
var name = [Link]("name").value;
var password = [Link]("password").value;

// Validate Name
if (!isValidName(name)) {
alert("Name should contain alphabets and have a minimum length of 6
characters.");
return false;
}

// Validate Password
if ([Link] < 6) {
alert("Password should have a minimum length of 6 characters.");
return false;
}

return true; // Form is valid


}

function isValidName(name) {
// Use regular expression to check if the name contains alphabets and has
a minimum length of 6 characters
return /^[a-zA-Z]{6,}$/.test(name);
}

Output:
1. Name Character Validation
2. Password Validation
Program: 7
AIM: WAP to show Js VALIDATION
3. E-mail (should not contain any invalid and must follow the
standard pattern(name@[Link])
4. Phone Number(Phone number should contain 10 digits
only).

CODE:
[Link]
<!DOCTYPE html>
<html>
<head>
<title>RKGIT</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="[Link]" defer></script>
<style>
table, th, td {
border: 2px solid black;
border-collapse: collapse;
}
Type your text
th, td {
padding: 10px;
}

a{
color: black;
text-decoration: none;
color: rgb(134, 72, 11);
}
</style>
</head>
<body>
<table style="width:100%">
<tr style="background-color: rgb(231, 157, 157);">
<th><img src="rkgit [Link]" alt="Rkgit logo"></th>
<th colspan="4" style="background-color: rgb(204, 129, 129);"><h1><b>RAJ
KUMAR GOEL INSTITUTE OF TECHNOLOGY</b></h1></th>
</tr>
<tr style="background-color: rgb(235, 203, 203);">
<th><a href="[Link]">HOME</a></th>
<th><a href="[Link]">LOGIN</a></th>
<th>REGISTRATION</th>
<th><a href="[Link]">CATALOGUE</a></th>
<th><a href="[Link]">CART</a></th>
</tr>
<tr>
<td colspan="5" align="center">
<form onsubmit="return validateForm()">
<!-- Add ID to the input field for easy access in JavaScript -->
Name: <input type="text" id="name" name="name" placeholder="Minimum
6 characters" required><br><br>
Password: <input type="password" id="password" name="password"
placeholder="minimum 6 characters" required><br><br>
Email id: <input type="text" id="email" placeholder="email id"
required><br><br>
Phone: <input type="text" id="phone" placeholder="Mobile"
required><br><br>
Sex:
<input type="radio" name="Sex" value="Male">Male
<input type="radio" name="Sex" value="Female">Female
<input type="radio" name="Sex" value="Others">Others <br><br>
Date of Birth: <input type="date"><br><br>
Languages Known:<br>
<input type="checkbox" value="Hindi" name="Languages">Hindi
<input type="checkbox" value="English" name="Languages">English
<input type="checkbox" value="Telugu" name="Languages">Telugu
<input type="checkbox" value="Tamil" name="Languages">Tamil<br><br>
Address: <input type="text" placeholder="Address"><br><br>
<input type="submit">
<input type="reset">
</form>
</td>
</tr>
</table>
</body>
</html>

[Link]
function validateForm() {
var name = [Link]("name").value;
var password = [Link]("password").value;
var email = [Link]("email").value;
var phone = [Link]("phone").value;
// Validate Name
if (!isValidName(name)) {
alert("Name should contain alphabets and have a minimum length of 6
characters.");
return false;
}

// Validate Password
if ([Link] < 6) {
alert("Password should have a minimum length of 6 characters.");
return false;
}

// Validate Email
if (!isValidEmail(email)) {
alert("Please enter a valid email address.");
return false;
}

// Validate Phone Number


if (!isValidPhoneNumber(phone)) {
alert("Phone number should contain 10 digits only.");
return false;
}

return true; // Form is valid


}

function isValidName(name) {
return /^[a-zA-Z]{6,}$/.test(name);
}

function isValidEmail(email) {
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

function isValidPhoneNumber(phone) {
return /^\d{10}$/.test(phone);
}

Output:

1. Email domain Validation


2. Phone number Validation
Program: 8
AIM: WAP to Design a web page using CSS(Cascading
Style Sheets) which includes-
1) Use different font, styles: In the style definion you define how
each selector should work(font, colour etc.). Then, in the body of
your pages, you refer to these selectors to acvate the styles.
2) Set a background image for both the page and single elements

on
the page. CODE:
[Link]
<!DOCTYPE html>
<html>
<head>
<title>RKGIT</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="[Link]" defer></script>
<link rel="stylesheet" type="text/css" href="[Link]"/>
<style>
table, th, td {
border: 2px solid black;
border-collapse: collapse;
}

th, td {
padding: 10px;
}

a{
color: black;
text-decoration: none;
color: rgb(134, 72, 11);
}
</style>
</head>
<body>
<table style="width:100%">
<tr style="background-color: rgb(231, 157, 157);">
<th><img src="rkgit [Link]" alt="Rkgit logo"></th>
<th colspan="4" style="background-color: rgb(204, 129, 129);"><h1><b>RAJ KUMAR GOEL
INSTITUTE OF TECHNOLOGY</b></h1></th>
</tr>
<tr style="background-color: rgb(235, 203, 203);">
<th><a href="[Link]">HOME</a></th>
<th><a href="[Link]">LOGIN</a></th>
<th>REGISTRATION</th>
<th><a href="[Link]">CATALOGUE</a></th>
<th><a href="[Link]">CART</a></th>
</tr>
<tr>
<td colspan="5" align="center">
<form onsubmit="return validateForm()">
<!-- Add ID to the input field for easy access in JavaScript -->
Name: <input type="text" id="name" name="name" placeholder="Minimum
6 characters" required><br><br>
Password: <input type="password" id="password" name="password"
placeholder="minimum 6 characters" required><br><br>
Email id: <input type="text" id="email" placeholder="email id"
required><br><br>
Phone: <input type="text" id="phone" placeholder="Mobile"
required><br><br>
Sex:
<input type="radio" name="Sex" value="Male">Male
<input type="radio" name="Sex" value="Female">Female
<input type="radio" name="Sex" value="Others">Others <br><br>
Date of Birth: <input type="date"><br><br>
Languages Known:<br>
<input type="checkbox" value="Hindi" name="Languages">Hindi
<input type="checkbox" value="English" name="Languages">English
<input type="checkbox" value="Telugu" name="Languages">Telugu
<input type="checkbox" value="Tamil" name="Languages">Tamil<br><br>
Address: <input type="text" placeholder="Address"><br><br>
<input type="submit">
<input type="reset">
</form>
</td>
</tr>
</table>
</body>
</html>

[Link]
/* CSS styles for the entire page */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Change
the font stack to your desired font */
background-image: url('background_image.jpg'); /* Replace
'background_image.jpg' with the path to your image */
background-size: cover;
background-repeat: no-repeat;
color: #333; /* Text color */
}

/* CSS styles for the form */


form {
background-image: url('form_background_image.jpg'); /* Replace
'form_background_image.jpg' with the path to your form background image */
background-size: cover;
background-repeat: no-repeat;
padding: 20px; /* Add padding to the form for better visibility */
}

/* Additional styles for form elements */


input[type="text"],
input[type="password"],
input[type="date"] {
width: 100%;
padding: 8px;
margin: 5px 0;
box-sizing: border-box;
font-size: 16px; /* Increase font size for better readability */
}

input[type="submit"],
input[type="reset"] {
background-color: #3498db; /* Change the color to your desired color */
color: white;
padding: 10px;
margin: 10px 0;
border: none;
border-radius: 5px;
cursor: pointer;
}

input[type="submit"]:hover,
input[type="reset"]:hover {
background-color: #2980b9; /* Darker color on hover */
}

Output:

Common questions

Powered by AI

The main structural components of designing a home page using HTML include using the <html> and <body> tags for the webpage structure, <table> for layout, styled with CSS. The page is organized into different frames: a top frame for the logo and navigation links, a left frame possibly for categories (CSE, ECE, EEE, CIVIL), and a right frame for content display. These are managed through links that change the content displayed in the right frame based on user interaction .

The login page design enhances user experience through organized layout and CSS styling, employing HTML forms with input fields for username and password. CSS contributes by styling the table, text color, and padding, ensuring fields are distinct and readable. The page also includes links to main site sections, providing intuitive navigation and ensuring users can quickly transition between pages .

Foundational HTML elements used in setting up a catalogue page include the <table> element to organize book details into rows and columns. Each row provides structured information about books, such as cover image, author name, publisher, price, and an 'Add to Cart' button for user interaction. These elements collectively facilitate a systematic presentation making content easily accessible and engaging .

Crucial HTML and CSS practices for ensuring cross-browser compatibility include using standard HTML tags, avoiding deprecated attributes, and employing CSS for layout and styling to ensure consistent rendering. External stylesheets promote reusable and maintainable code. Utilizing meta tags for responsive design makes pages adaptable across devices. Consistent testing in multiple browsers ensures that visual and functional aspects perform as intended .

HTML forms facilitate data collection from users, structured with input fields, radio buttons, checkboxes, etc. JavaScript validation enhances data integrity by ensuring inputs meet required formats and constraints before submission, providing immediate feedback on errors. This combination improves user interaction by preventing incorrect data entry, reducing server-side validation load, and ensuring data accuracy, essential for robust web applications .

The web design workshop aims to teach foundational skills in HTML, CSS, and JavaScript, focusing on practical application in creating functional web pages. These objectives are reflected in tasks requiring students to construct basic web pages like home, login, and catalogue pages, use structural and styling elements, and implement client-side validation. These exercises help students gain hands-on experience and comprehensively understand web development technologies .

The choice of font and color scheme greatly influences readability and aesthetic appeal. Using a family like 'Segoe UI', known for clarity, ensures text is legible. Colors are used strategically; for example, text color contrasts with backgrounds enhancing readability. Soft backgrounds and distinct link colors make interactive elements stand out, contributing to a cohesive and visually appealing design .

The design of a cart page contributes to an efficient online shopping experience by clearly listing items added to the cart, displaying essential information such as book name, price, quantity, and total cost. It provides users with a straightforward view of their purchases, facilitating decision-making. This organized presentation is critical for a seamless shopping process, reducing confusion and enhancing user control over transactions .

Benefits of JavaScript validation include real-time feedback to users, increasing form submission accuracy by ensuring data integrity, and reducing server load by catching errors on the client side. Limitations include potential bypassing if JavaScript is disabled in the user's browser, necessitating server-side validation as a backup. The validation implemented checks for input length and pattern compliance effectively, contributing to robust data collection .

CSS influences the webpage's aesthetic by defining styles for layout, font choices, text color, and background images. In forms, it enables styling of input fields and buttons for better readability and user interaction, such as using padding, margin, and hover effects. Background images enhance visual appeal, set to cover the form area while ensuring no repeat, thus maintaining a clean and structured appearance .

RAJ KUMAR GOEL INSTITUTE OF TECHNOLOGY 
5TH
 KM STONE DELHI MEERUT ROAD GHAZIABAD [UP] 
 
SUBMITTED TO :- 
HIMANSHI MAM
SUBMI
Raj Kumar Goel Institute of Technology, Ghaziabad 
Department of Computer Science & Engineering 
INDEX 
10. 
SNo. 
1. 
2. 
3.
Program:1 
Aim: WAP to create HOME PAGE using HTML 
• 
•
• 
The static home page must contain three frames. 
Top frame: Logo
CODE: 
<!DOCTYPE> 
<html> 
<head> 
<title>RKGIT</title> 
<meta name="viewport"content="width=device- 
width,initialscale=1.0"
</tr> 
<tr> 
<td 
align="center">CSE<br><br><br>ECE<br><br><br>EEE<br><br><b 
r>CIVIL </td> 
<td colspan="4" align="center">
Experiment : 2 
Aim: WAP to create LOGIN PAGE using HTML 
This page contains following informations: 
• User name 
• Password
CODE: 
<!DOCTYPE> 
<html> 
<head> 
<title>RKGIT</title> <meta
name="viewport"
content="width=device-width,
initial-scale=1.0"
password="password"placeholder="password"/> 
<input type="Submit" value="Submit"> 
type="Reset" value="Reset"> 
</form> 
</td

You might also like