DEPARTMENT OF B.

TECH SECOND YEAR

SESSION 2025-26, THIRD SEMESTER

LAB RECORD

WEB DESIGNING WORKSHOP LAB

Subject code: - BCS353

SUBMITTED TO: SUBMITTED BY:

[Link] P STUDENT NAME: NANDAN KUMAR

ASSISTANT PROFESSOR STUDENT ID: 2500907

DEPT. OF CSE SECTION: 2C

FacultyName: SignWithDate
 WEB DESIGNING WORKSHOP LAB ( BCS353)

INDEX
[Link]. PROGRAM DATE SIGNATURE

1 Create an HTML page that demonstrates the use of various HTML elements
(heading, paragraph, links) and attributes (class, id, href, src, alt).

2 Create a table that displays student marks using rows and columns. Add table headers,
and use colspan and rowspan attributes.

3 Design a page having a suitable background color and text color with the title “My First
Web Page” using all the attributes of the Font tag.

4 Create a webpage and apply inline, internal, and external CSS styles to various
elements. Explain the difference between each type.

5 Style an unordered list and a table using CSS. Add borders, background color, and
spacing between cells.

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

7 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.
8 Design the following static web pages required for an online bookstore 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

9 Create a login page in the right frame of the homepage which include
username,password submit button and reset button.

10 CATOLOGUE PAGE: The catalogue page should contain the details of all the books
available in the website in a table. The details should contain the following: 1. Snap
shot of Cover Page. 2. Author Name. 3. Publisher. 4. Price. 5. Add to cart button.

11 CARTPAGE: The cart page contains the details about the books which are added to the
cart [Link] name ,price ,quantity and amount.

12 REGISTRATION PAGE : Create a“ registration form“ with the following fields

1)Name (Text field) 2)Password (password field) 3) E-mailid(text field) 4) Phone
Number(text field) 5) Sex(radio button) 6) Date of birth(3 select boxes) 7) Languages
known(checkboxes–English, Telugu, Hindi, Tamil) 8) Address(text area)

13 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).

14 Implement a webpage that changes its layout based on different screen widths (mobile,
tablet, desktop) using media queries.

15 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

FacultyName: SignWithDate
 DATE://2025

EXPERIMENT NO:01
NAME:NANDAN KUMAR ROLL NO:

Create an HTML page that demonstrates the use of various HTML elements
(heading, paragraph, links) and attributes (class, id, href, src, alt).

AIM: To create an HTML page that uses different HTML elements such as headings,
paragraphs, and links, along with common attributes including class, id, href, src, and alt.

DESCRIPTION: This program shows how basic HTML elements are used to structure a
webpage. It includes headings for titles, paragraphs for text content, image embedding using src
and alt, and a hyperlink using the href attribute. The example also demonstrates the use of id and
class attributes for identifying and styling elements.

PROGRAM:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Elements Demo</title>
<style>
/* Example styles using class and id */
#main-title {
color: darkblue;
text-align: center;
}
#info{
color:red
}
.highlight {
background-color: yellow;
font-weight: bold;
}
.image-box {
border: 2px solid #333;
width: fit-content; padding:
5px;
margin-top: 10px;
}
</style>
</head>
<body>
<!-- Heading Example -->
 EXPERIMENTNO:02 DATE://2025
NAME:NANDAN KUMAR ROLLNO:
<h1 id="main-title">Welcome to HTML Elements Demo</h1>
<h2>Subheading Example</h2>

<!-- Paragraph Example -->

<p>This is a simple paragraph. You can <span class="highlight">highlight text</span> using a class
attribute.</p>
<p id="info">This paragraph has an <strong>id</strong> so it can be styled or targeted
individually.</p>

<!-- Link Example -->

<p>Visit <a href="[Link] target="_blank">Wikipedia</a> for more
information.</p>

<!-- Image Example -->

<div class="image-box">
<p>Example of an image with <code>src</code> and <code>alt</code> attributes:</p>
<img src="[Link]" alt="Placeholder Image">
</div>
</body>
</html>

OUTPUT:

FacultyName: SignWithDate
 DATE://2025

EXPERIMENT NO:01
NAME:NANDAN KUMAR ROLL NO:

RESULT:
When you open this HTML file in a browser, you’ll see a clear title at the top, followed by a few
simple paragraphs that explain the content. There’s also a link you can click that opens in a new
tab, along with an image that includes a short description in case the picture doesn’t load.
 EXPERIMENTNO:02 DATE://2025
NAME:NANDAN KUMAR ROLLNO:

Create a table that displays student marks using rows and columns. Add table headers,
and use colspan and rowspan attributes.

AIM: To create an HTML table that displays student marks using rows and columns, including
table headers and the use of colspan and rowspan attributes.

DESCRIPTION: This program shows how to build a structured table in HTML to organize
student marks. It uses table headers for clarity and demonstrates how colspan is used to merge
columns and how rowspan is used to merge rows.

PROGRAM:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Student Marks Table</title>
<style> table {
border-collapse: collapse;
width: 70%;
margin: 20px auto;
}
th, td { border: 1px
solid black; padding:
8px; text-align: center;
}
th { background-color:
#f2f2f2;
}
</style>
</head>
<body>
<h2 style="text-align:center;">Student Marks Table</h2>

<table>
<tr>
<th rowspan="2">Student Name</th>
<th colspan="3">Marks</th>
<th rowspan="2">Total</th>
</tr>

FacultyName: SignWithDate
 EXPERIMENT NO:02 DATE: / /2025
NAME:NANDAN KUMAR ROLL NO:

<tr>
<th>Math</th>
<th>Science</th>
<th>English</th>
</tr>
<tr>
<td>Alice</td>
<td>85</td>
<td>90</td>
<td>78</td>
<td>253</td>
</tr>
<tr>
<td>Bob</td>
<td>70</td>
<td>65</td>
<td>80</td>
<td>215</td>
</tr>
<tr>
<td>Charlie</td>
<td>92</td>
<td>88</td>
<td>95</td>
<td>275</td>
</tr>
</table>
</body>
</html>

OUTPUT:
EXPERIMENT NO:02 DATE: / /2025
NAME:NANDAN KUMAR ROLL NO:

RESULT: When the file is opened in a browser, it shows a neatly formatted table with students
and their marks. The main header for marks spans three columns using colspan, while the
“Student Name” header stretches vertically across two rows using rowspan.

FacultyName: SignWithDate
 EXPERIMENT NO:03 DATE: / /2025
NAME:NANDAN KUMAR ROLL NO:

Design a page having a suitable background color and text color with the title “My First
Web Page” using all the attributes of the Font tag.

AIM: To create a webpage with a background color, text color, and a title using all attributes of
the font tag.

DESCRIPTION: This program creates a basic webpage with a colored background and styled
text. It demonstrates how the <font> tag can be used to control text color, size, and typeface.

PROGRAM:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Web Page</title>
</head>
<body bgcolor="lightblue" text="darkblue">

<!-- Title -->

<h1 align="center">
<font face="Arial" size="7" color="navy">
My First Web Page
</font>
</h1>

<!-- Paragraph with font variations -->

<p>

This is an example of using the <b>&lt;font&gt;</b> tag in HTML.<br>

Although modern HTML recommends using <b>CSS</b> for styling, this
demonstrates how the <b>font</b> tag works with its attributes:

</p>

<ul>
<li><font face="Verdana" size="4" color="green">face → sets the font type</font></li>
<li><font face="Courier New" size="3" color="red">size → sets the font size</font></li>
<li><font face="Georgia" size="5" color="purple">color → sets the font color</font></li>
</ul>

<p>
<font face="Comic Sans MS" size="6" color="darkorange">
This page has a <b>background color</b> (light blue) and <b>text color</b> (dark blue)
 EXPERIMENT NO:0 DATE://2025
NAME:NANDAN KUMAR ROLLNO:

set using the <code>bgcolor</code> and <code>text</code> attributes of the &lt;body&gt; tag.
</font>
</p>

</body> </html>
OUTPUT:

RESULT: When opened in a browser, the page shows a light blue background with a large styled
title at the top. The text below appears in different colors, sizes, and fonts, demonstrating all key
attributes of the <font> tag.

Create a webpage and apply inline, internal, and external CSS styles to various elements.
Explain the difference between each type.

AIM: To create a webpage that uses inline, internal, and external CSS and show how each type
styles elements differently.

FacultyName: SignWithDate
 EXPERIMENT NO:04 DATE://2025
NAME:NANDAN KUMAR ROLLNO:
DESCRIPTION: This program demonstrates three ways to style a webpage using CSS. Inline CSS is
written directly inside an HTML tag, internal CSS is written inside a <style> block within the same
file, and external CSS is written in a separate .css file. Each method affects how styles are applied
and maintained in a project.

PROGRAM:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Styling Demo</title>

<!-- Internal CSS -->

<style> h1
{ color:
darkblue; text-
align: center;
text-decoration: underline;
} p{ font-
size: 18px;
color: darkgreen;
}
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>

<!-- External CSS -->

<link rel="stylesheet" href="[Link]">
</head>
<body>

<!-- Inline CSS -->

<h1 style="color: crimson; font-family: Arial;"> <!--shows the priority of inline style>

Welcome to CSS Styling Demo

</h1>

<p>This paragraph is styled using <b>internal CSS</b> (from the <code>&lt;style&gt;</code> tag).</p>

<p class="highlight">This text has both internal CSS (font-size, color) and external CSS (padding,
border).</p>
 EXPERIMENT NO:04 DATE://2025
NAME:NANDAN KUMAR ROLLNO:
<button class="btn">Click Me</button>

</body>
</html>

[Link]-
/* External CSS */
.highlight { padding:
10px; border: 2px
solid red;
}

.btn {
background-color: darkorange;
color: white;
border: 1; padding:
10px 20px; cursor:
pointer; font-size:
16px; border-radius:
5px;
}

.btn:hover {
background-color: brown;
}
OUTPUT:

Create a webpage and apply inline, internal, and external CSS styles to various elements.
Explain the difference between each type.

<!DOCTYPE html>

FacultyName: SignWithDate
 EXPERIMENT NO:04 DATE://2025
NAME:NANDAN KUMAR ROLLNO:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Styling Example</title>

<!-- External CSS -->

<link rel="stylesheet" href="[Link]">

<!-- Internal CSS -->

<style> body
{ background-color: #f0f8ff;
font-family: Arial, sans-serif;
margin: 20px;
}

h1 { color:
darkblue; text-
align: center;
}

.internal-style {
color: green; font-size:
18px; border: 1px solid
green; padding: 10px;
}
</style>
</head>
<body>
<h1>CSS Styling Example</h1>

<!-- Inline CSS -->

<p style="color: red; font-weight: bold;">
This paragraph uses <b>inline CSS</b>.
</p>

<!-- Internal CSS -->

<p class="internal-style">
This paragraph uses <b>internal CSS</b>.
</p>

<!-- External CSS -->

<p class="external-style">
This paragraph uses <b>external CSS</b>.
</p>
 EXPERIMENT NO:04 DATE://2025
NAME:NANDAN KUMAR ROLLNO:
</body>
</html>
Css file- .external-style
{ color: purple; font-size:
20px; border: 2px dashed
purple; padding: 10px; }

RESULT: When you open the webpage in a browser, you see the heading styled with inline CSS,
another heading styled through internal CSS, and a paragraph styled using an external stylesheet.
This clearly shows how each CSS method affects page elements differently.

FacultyName: SignWithDate
 EXPERIMENT NO:05 DATE://2025
NAME:NANDAN KUMAR ROLLNO:

Style an unordered list and a table using CSS. Add borders, background color, and spacing
between cells.

AIM: To style an unordered list and a table using CSS with borders, background colors, and
proper spacing.

DESCRIPTION: This program shows how CSS can be used to improve the appearance of basic
HTML elements. The unordered list is styled with background color and spacing, while the table
is given borders, cell padding, and colored headers. These styles make the content easier to
read and visually appealing.

PROGRAM:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Styled List and Table</title>
<style> body { font-
family: Arial, sans-serif;
margin: 20px; background-
color: #f9f9f9;
}

/* Styling Unordered List */

ul {
list-style-type: square; /* Change bullet style */
background-color: #e0f7fa; /* Light cyan background */
padding: 15px; border: 2px solid #00796b; /* Teal
border */ border-radius: 8px;
width: 200px;
} ul li { margin: 8px 0; /* Spacing
between items */ color: #004d40;
font-weight: bold;
}

/* Styling Table */

table { border-collapse: separate; /* Keep spacing

*/ border-spacing: 10px; /* Space between cells
 EXPERIMENT NO:05 DATE://2025
NAME:NANDAN KUMAR ROLLNO:
*/ background-color: #fff; border: 2px solid
#4a148c; /* Purple border */ margin-top: 20px;
}
th, td
{
border: 1px solid #4a148c;
padding: 12px 18px; text-align:
center;
}
th { background-color: #7b1fa2; /* Dark
purple */ color: white;
}
td { background-color: #ede7f6; /* Light
lavender */
}
</style>
</head>
<body>
<h1>Styled List and Table</h1>

<h2>Unordered List</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>

<h2>Student Marks Table</h2>

<table>
<tr>
<th>Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td>Ravi</td>
<td>Math</td>

<td>85</td>
</tr>
<tr>
<td>Priya</td>
<td>Science</td>
<td>90</td>
</tr>
<tr>
FacultyName: SignWithDate
 EXPERIMENT NO:05 DATE://2025
NAME:NANDAN KUMAR ROLLNO:
<td>Amit</td>
<td>English</td>
<td>78</td>
</tr>
</table>
</body>
</html>

OUTPUT:

RESULT: When opened in a browser, the unordered list appears with a soft background,
borders, and neat spacing. The table displays styled headers, bordered cells, and spacing between
rows and columns. Both elements look clean and visually structured because of the applied CSS.
 EXPERIMENT NO:06 DATE://2025
NAME:NANDAN KUMAR ROLLNO:

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.

AIM: To control background image repetition and style different link states using CSS.

DESCRIPTION: This program shows how to manage background image repetition using the
background-repeat property and how to style links in their various states: normal, visited,
active, and hover. These CSS features help improve the look and feel of a webpage.

PROGRAM:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Background & Links Example</title>
<style>
/* 1) Background image control */
body {
background-image: url("image url paste”) background-repeat: repeat; /*
Options: repeat, repeat-x, repeat-y, no-repeat */ background-position: center
top; background-size: 200px 200px; /* Resize image */
font-family: Arial, sans-serif;
padding: 30px;
}

/* 2) Link Styling */
a:link { color: blue;
text-decoration: none;
font-weight: bold;
}

a:visited
{ color: purple;
}

a:hover { color:
white; background-
color: blue; padding: 3px
6px; border-radius:
4px;
}

a:active
{ color:
red;
}
</style>
</head>
<body>
<h1>CSS Background & Links Example</h1>
<p>
This page demonstrates <b>background-repeat</b> and link styles.
</p>

<h2>Try the Links</h2>

<ul>
<li><a href="[Link] target="_blank">Google</a></li>
<li><a href="[Link] target="_blank">Wikipedia</a></li>
<li><a href="[Link] target="_blank">GitHub</a></li> </ul>
</body>
</html>

OUTPUT:
EXPERIMENTNO:06 DATE://2025
NAME:NANDAN KUMAR ROLLNO:

RESULT: When you open the page, the background image appears without repeating, and the
link changes style as you interact with it. The link shows one color normally, another after it’s
visited, changes appearance when hovered, and briefly changes again when clicked.

FacultyName: SignWithDate
 EXPERIMENT NO:07 DATE://2025
NAME:NANDAN KUMAR ROLLNO:

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.

AIM: To design a webpage using CSS with custom font styles and background images for the
page and individual elements.

DESCRIPTION: This page demonstrates how CSS selectors define styles such as fonts, colors,
and text formatting. It also shows how to apply background images to the entire webpage and to
specific elements. The body uses a full-page background image, while a content box has its own
separate background image.

PROGRAM:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Fonts & Background Example</title>
<style>
/* ===== 1) Fonts and Styles ===== */
body { font-family: "Arial", sans-
serif; margin: 0; padding: 0;
color: #333; line-height: 1.6;
}

h1 { font-family:
"Georgia", serif; font-size:
36px; color: darkblue;
text-align: center;
margin-top: 20px;
}

h2 {

font-family: "Courier New", monospace;

 color: darkgreen;
}
p{ font-
size: 18px;
font-style: italic;
margin: 10px 20px;
}

/* ===== 2) Background Images ===== */ body { background-

image: url("[Link]
background-repeat: repeat; /* Repeats across the page */
}

.highlight-box {
background-image: url("[Link]
background-color: #f0f8ff; /* fallback if image fails */ border: 2px solid #00796b;
padding: 20px; margin: 20px;
border-radius: 8px;
}

.note {
background-image: url("[Link]
background-repeat: no-repeat; background-size: cover; padding: 15px; border:
1px solid #aaa; margin: 20px;
}
</style>
</head>
<body>
<h1>CSS Fonts & Backgrounds Demo</h1>

<h2>1. Fonts and Styles</h2>

<p>This paragraph demonstrates <b>italic text</b> with a different font size and style defined in the CSS
selector.</p>

<h2>2. Background Image on a Section</h2>

<div class="highlight-box">
This box has its <b>own background image</b> applied separately from the body.
</div>

<h2>3. Background Image on a Smaller Element</h2>

<div class="note">

FacultyName: SignWithDate
 EXPERIMENT NO:07 DATE://2025
NAME:NANDAN KUMAR ROLLNO:
This smaller note section uses a <b>cover background image</b> with no repeat.
</div>
</body>
</html>

OUTPUT:

RESULT: When you open the page in a browser, the entire background is covered with an image.
The heading and paragraph use different fonts and colors based on CSS selectors. Inside the page,
a content box shows a separate background image, making the layout visually appealing.
 EXPERIMENT NO:08 DATE: / /2025
NAME:NANDAN KUMAR ROLL NO:

Design the following static web pages required for an online bookstore 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.

AIM: To design a static online bookstore homepage using frames for navigation and content
display.

DESCRIPTION: This task involves creating a homepage layout divided into three frames: a top
frame for the logo and navigation links, a left frame for categories like CSE, ECE, etc., and a
right frame where the selected pages or book catalogues will open. The right frame initially
shows a short introduction about the website. Clicking any link in the left frame should load the
relevant content into the right frame.

PROGRAM:
[Link]
<!DOCTYPE html>
<html>
<head>
<title>Online Bookstore</title>
</head>
<frameset rows="20%,*">
<frame src="[Link]" name="topFrame" noresize scrolling="no">
<frameset cols="20%,*">
<frame src="[Link]" name="leftFrame" noresize>
<frame src="[Link]" name="rightFrame">
</frameset>
</frameset></html>
Top
<!DOCTYPE html>
<html>
 EXPERIMENT NO:08 DATE://2025
NAME:NANDAN KUMAR ROLLNO:
<head>

<style> body
{ background-color: #f0f8ff;
font-family: Arial, sans-serif;
margin: 0; padding: 10px;
text-align: center;
}
.logo { font-
size: 24px; font-
weight: bold;
color: darkblue;
}
a{
margin: 0 10px; text-
decoration: none; font-weight:
bold;
color: #00796b;
}
a:hover
{ color:
red;
}
</style>
</head>
<body>
<div class="logo"> Online Bookstore - CSE Department</div>
<div>
<a href="[Link]" target="rightFrame">Home</a>
<a href="[Link]" target="rightFrame">Login</a>
<a href="[Link]" target="rightFrame">Registration</a>
<a href="[Link]" target="rightFrame">Catalogue</a>
<a href="[Link]" target="rightFrame">Cart</a>
</div>
</body>
</html>
Left
<!DOCTYPE html>
<html>
<head> <style> body
{ background-color:
#e8f5e9; font-family: Arial,
sans-serif; padding: 10px;
}
ul {
 87

list-style-type: none;
padding: 0;
}
li {
margin: 10px 0;
}
a{
text-decoration: none; font-
weight: bold;
color: #004d40;
}
a:hover {
color: darkred;
}
</style>
</head>
<body>
<h3>Categories</h3>
<ul>
<li><a href="catalogue_cse.html" target="rightFrame">CSE</a></li>
<li><a href="catalogue_it.html" target="rightFrame">IT</a></li>
<li><a href="catalogue_ece.html" target="rightFrame">ECE</a></li>
<li><a href="catalogue_mech.html" target="rightFrame">Mechanical</a></li>
</ul>
</body>
</html>
Right
<!DOCTYPE html>
<html>
<head> <style> body
{ font-family: Arial, sans-
serif; padding: 20px;
}
</style>
</head>
<body>
<h2>Welcome to the Online Bookstore</h2>
<p>
This website provides a catalogue of books for various departments like CSE, IT, ECE, and Mechanical.
You can browse, add books to the cart, and register for a personal account. </p>
</body>
</html>

FacultyName: SignWithDate
EXPERIMENT NO:08 DATE: / /2025
NAME:NANDAN KUMAR ROLL NO:

OUTPUT:

RESULT: A static bookstore homepage opens with a three-frame layout where the top shows
the logo and links, the left shows categories, and the right displays the selected pages.

Faculty Name: Sign With Date

EXPERIMENT NO:09 DATE: / /2025
NAME:NANDAN KUMAR ROLL NO:

Create a login page in the right frame of the homepage which include
username,password submit button and reset button.

AIM: To create a login page that loads inside the right frame of the homepage.

DESCRIPTION: This task involves designing a simple login form containing a username field, a
password field, a submit button, and a reset button. The page is saved separately and linked so it
opens inside the right frame of the bookstore homepage when selected.

PROGRAM:
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
label { display: block; margin: 10px 0 5px; }
</style>
</head>
<body>
<h2>Login</h2>
<form>
<label>Username:</label>
<input type="text" name="username">
<label>Password:</label>
<input type="password" name="password">
<br><br>
<input type="submit" value="Login">
</form>
</body>
</html>

OUTPUT:

FacultyName: SignWithDate
 EXPERIMENT NO:09 DATE: / /2025
NAME:NANDAN KUMAR ROLL NO:

RESULT: A clean login form appears in the right frame, allowing users to enter their username and
password, submit the form, or reset the fields.
 EXPERIMENT NO:10
NAME:NANDAN KUMAR DATE://2025

ROLL NO:

CATOLOGUE PAGE: The catalogue page should contain the details of all the books
available in the website in a table. The details should contain the following: 1. Snap shot of
Cover Page. 2. Author Name. 3. Publisher. 4. Price. 5. Add to cart button.

AIM: To create a catalogue page that displays book details in a table.

DESCRIPTION: This page presents all available books in a structured table format. Each row
includes the book’s cover image, author name, publisher, price, and an “Add to Cart” button. The
page is designed to load inside the right frame of the bookstore homepage when the catalogue
link is clicked.

PROGRAM:

<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
table { border-collapse: collapse; width: 80%;
}
th, td { border: 1px
solid #333; padding:
8px; text-align: center;
}
th {
background-color: #00796b;
color: white;
}
</style>
</head>
<body>
<h2>CSE Books Catalogue</h2>

<table>
 <tr>
<th>Book Name</th>
<th>Author</th>
<th>Price</th>
</tr>
<tr>
<td>Introduction to Algorithms</td>
<td>Cormen</td>
<td>₹750</td>
</tr>
<tr>
<td>Database System Concepts</td>
<td>Korth</td>
<td>₹600</td>
</tr>
<tr>
<td>Operating System Concepts</td>
<td>Silberschatz</td>
<td>₹700</td>
</tr>
</table>
</body>
</html>

OUTPUT:

RESULT: A well-organized catalogue page appears with book images and details listed neatly in
a table, along with functional “Add to Cart” buttons for each book.
 EXPERIMENT NO:11 DATE://2025
NAME:NANDAN KUMAR ROLLNO:
87
CARTPAGE: The cart page contains the details about the books which are added to the cart i.e.
book name, price, quantity and amount.

AIM: To create a cart page that displays the books added to the cart.

DESCRIPTION: This page shows the list of selected books in a table format. Each entry includes the
book name, price, quantity, and the total amount for that item. It is designed to open in the right frame
of the bookstore homepage when the cart link is clicked.

PROGRAM:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>My Cart</title>
<style>
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica
Neue',Arial;margin:0;background:#f6f7fb;color:#111}
header{background:#fff;border-bottom:1px solid #e6e9ef;padding:12px
20px;display:flex;alignitems:center;justify-content:space-between}
.brand{font-weight:700;font-size:20px;color:#0b74db}
.container{max-width:900px;margin:28px auto;padding:0 20px}

table{width:100%;border-collapse:collapse;background:#fff;box-shadow:0 6px 18px

rgba(30,40,60,0.04);border-radius:8px;overflow:hidden} thead th{background:#fafbfd;padding:12px
16px;text-align:left;font-weight:600;color:#334155;borderbottom:1px solid #eef2f7} tbody
td{padding:12px 16px;vertical-align:middle;border-bottom:1px solid #f1f5f9} tbody tr:last-child
td{border-bottom:0}

.price,.amount{font-weight:700}
[Link]{width:60px;padding:6px;border:1px solid #e5e7eb;border-radius:6px;text-align:center}

.btn{display:inline-block;padding:8px 12px;borderradius:8px;border:0;background:#0b74db;color:#fff;font-
weight:600;cursor:pointer} .[Link]{background:#f1f5f9;color:#0f172a;border:1px solid #e6eef8}

.total{margin-top:20px;font-size:18px;font-weight:700;text-align:right}
</style>
</head>

FacultyName: SignWithDate
 EXPERIMENT NO:12 DATE://2025
NAME:NANDAN KUMAR ROLLNO:

<body>
<header>
<div class="brand">My Bookstore - Cart</div>
<a href="[Link]" class="btn secondary">Back to Catalogue</a>
</header>

<main class="container">
<h1 style="margin:18px 0 14px">Shopping Cart</h1>

<table aria-label="Cart table">

<thead>
<tr>
<th>Book Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Amount</th>
</tr>
</thead>
<tbody id="cartTable">
<!-- rows dynamically filled with JS -->
</tbody>
</table>

<div class="total" id="totalAmount">Total: ₹0</div>

<div style="margin-top:20px;text-align:right">
<button class="btn" onclick="checkout()">Proceed to Checkout</button>
</div>
</main>

<script>
// Demo cart items - in practice, fetch from localStorage or backend
const demoCart = [
{id:"book1", name:"Introduction to Algorithms", price:1299, qty:1},
{id:"book2", name:"Clean Code", price:799, qty:2},
{id:"book3", name:"Design Patterns", price:899, qty:1}
];

function renderCart(){ const tbody =

[Link]('cartTable');
[Link]
 EXPERIMENT NO:12 DATE://2025
NAME:NANDAN ROLLNO:
KUMAR
:

OUTPUT:

RESULT: A simple cart page appears with a table showing all added books along with their price,
quantity, and calculated amount.

FacultyName: SignWithDate
 EXPERIMENT NO:12 DATE://2025
NAME:NANDAN ROLLNO:
KUMAR
REGISTRATION PAGE : Create a“ registration form“ with the following fields 1)Name (Text
field) 2)Password (password field) 3) E-mailid(text field) 4) Phone Number(text field) 5)
Sex(radio button) 6) Date of birth(3 select boxes) 7) Languages known(checkboxes–English,
Telugu, Hindi, Tamil) 8) Address(text area)

AIM: To create a registration form with multiple input fields for user details.

DESCRIPTION: This task involves designing a complete registration page that collects user
information through different form elements. The form includes text fields for name, email, and
phone number, a password field, radio buttons for gender, three dropdowns for date of birth,
checkboxes for known languages, and a text area for the address. The page will be linked to the
homepage so it opens inside the right frame.

PROGRAM:
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
</head>
<body bgcolor="#f2f2f2" text="black">
<h2 align="center">Registration Form</h2>
<form action="[Link]" method="post" align="center">

<!-- Name -->

<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>

<!-- Password -->

<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br><br>

<!-- Email -->

<label for="email">E-mail ID:</label>
<input type="text" id="email" name="email" required><br><br>

<!-- Phone -->

<label for="phone">Phone Number:</label>
<input type="text" id="phone" name="phone" maxlength="10" required><br><br>

<!-- Gender -->

 EXPERIMENT NO:12 DATE://2025
NAME:NANDAN ROLLNO:
KUMAR
:

<label>Sex:</label>
<input type="radio" name="sex" value="Male"> Male
<input type="radio" name="sex" value="Female"> Female
<input type="radio" name="sex" value="Other"> Other
<br><br>

<!-- DOB -->

<label>Date of Birth:</label>
<select name="day">
<option>Day</option>
<option>1</option><option>2</option><option>3</option>
<option>4</option><option>5</option><option>6</option>
<option>7</option><option>8</option><option>9</option>
<option>10</option> <!-- Add up to 31 -->
</select>

<select name="month">
<option>Month</option>
<option>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>

<select name="year">
<option>Year</option>
<option>1990</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option>1994</option>

FacultyName: SignWithDate
EXPERIMENT NO:12 DATE://2025
NAME:NANDAN ROLLNO:
<option>1995</option>
KUMAR
<option>2000</option>
<option>2005</option>
</select>
<br><br>

<!-- Languages -->

 EXPERIMENT NO:12 DATE: / /2025
NAME:NANDAN KUMAR ROLL NO:
<label>Languages Known:</label><br>
<input type="checkbox" name="lang" value="English"> English
<input type="checkbox" name="lang" value="Telugu"> Telugu
<input type="checkbox" name="lang" value="Hindi"> Hindi
<input type="checkbox" name="lang" value="Tamil"> Tamil
<br><br>

<!-- Address -->

<label for="address">Address:</label><br>
<textarea id="address" name="address" rows="4" cols="30"></textarea>
<br><br>

<!-- Submit and Reset -->

OUTPUT:

RESULT: A full registration form appears with all required fields, allowing the user to enter
personal details, choose options, and fill out the form in an organized and user-friendly layout.

FacultyName: SignWithDate
 EXPERIMENT NO:13 DATE://2025
NAME:NANDAN ROLLNO:
KUMAR
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).

AIM: To validate the name and password fields in the registration form using JavaScript.

DESCRIPTION: You write JavaScript that checks two conditions before the form is submitted:
• The name must contain only alphabets and must be at least 6 characters long.
• The password must also be at least 6 characters long.
If any rule is broken, an alert message appears and the form is stopped from submitting.

PROGRAM:
<!DOCTYPE html>
<html>
<head>
<title>Registration Form with Validation</title>
<script type="text/javascript">
function validateForm() {
// Get values
var name = [Link]("name").value;
var password = [Link]("password").value;

// Name validation: alphabets only and at least 6 chars

var namePattern = /^[A-Za-z ]+$/; if
() { alert("Name must
contain alphabets only."); return false;
}
if ([Link] < 6) { alert("Name must
be at least 6 characters long."); return false;
}

// Password validation: at least 6 chars if

([Link] < 6) { alert("Password must be at
least 6 characters long."); return false;
}

// If all checks pass

return true;
}
</script>
</head>
 EXPERIMENT NO:13 DATE: / /2025
NAME:NANDAN KUMAR ROLL NO:
<body bgcolor="#f2f2f2" text="black">
<h2 align="center">Registration Form</h2>
<form action="[Link]" method="post" onsubmit="return validateForm()" align="center">

<!-- Name -->

<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>

<!-- Password -->

<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br><br>

<!-- Other fields (Email, Phone, etc.) can go here... -->

<input type="submit" value="Register">

<input type="reset" value="Clear">
</form>
</body>
</html>

OUTPUT:

FacultyName: SignWithDate
EXPERIMENT NO:13 DATE://2025
NAME:NANDAN ROLLNO:
KUMAR

RESULT: When the user submits the form, the JavaScript validation runs and only allows the
form to proceed if both the name and password meet the required conditions.
 EXPERIMENT NO:14 DATE: / /2025
NAME:NANDAN KUMAR ROLL NO:

Implement a webpage that changes its layout based on different screen widths (mobile, tablet,
desktop) using media queries.

AIM: To create a webpage that adjusts its layout for mobile, tablet, and desktop using media
queries.

DESCRIPTION: This task involves designing a responsive webpage where the layout changes
automatically based on the screen size. CSS media queries are used to modify styles such as font
size, column layout, and element positioning. Smaller screens show a single-column layout for
mobile, medium screens show a two-column layout for tablets, and larger screens display a full
multi-column layout for desktops.

PROGRAM:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Webpage</title>
<style> body { margin:
0; font-family: Arial, sans-
serif;
}

header
{ background: #333;
color: white; text-
align: center;
padding: 15px;
}

nav
{ background:
#444; padding:
10px; text-align:
center;
}

FacultyName: SignWithDate
 EXPERIMENT NO:14 DATE://2025
NAME:NANDAN ROLLNO:
navKUMAR
a
{ color:
white;
text-decoration: none;

margin: 0 10px;
}

.container { display: grid;

grid-template-columns: 1fr 3fr;
gap: 20px; padding: 20px;
}

aside
{ background:
#f4f4f4;
padding: 15px;
}

main
{ background:
#e2e2e2;
padding: 15px;
}

footer
{ background: #333;
color: white; text-
align: center;
padding: 10px;
}

/* Tablet view (600px to 900px) */

@media (max-width: 900px) {
.container { grid-template-
columns: 1fr;
}

nav { text-
align: left;
}
}
 87
/* Mobile view (less than 600px) */
@media (max-width: 600px) {
nav { display: flex;
flex-direction: column;
align-items: center;
}

nav a { display:
block;
margin: 5px 0;
}

.container
{ padding: 10px;
}

aside
{ order: 2;
}

main
{ order: 1;
}
}
</style>
</head>
<body>

<header>
<h1>My Responsive Webpage</h1>
</header>

<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</nav>

<div class="container">
<aside>
<h2>Sidebar</h2>
<p>This is sidebar content.</p>
</aside>

FacultyName: SignWithDate
 EXPERIMENT NO:14 DATE://2025
NAME:NANDAN ROLLNO:
<main>
KUMAR
<h2>Main Content</h2>
<p>This is the main content section. Resize the window to see how the layout changes for desktop, tablet,
and mobile devices.</p>
</main>
</div>

<footer>
4

<p>&copy; 2025 Responsive Design Demo</p>

</footer>
</body>
</html>

OUTPUT:

RESULT: A responsive webpage that smoothly adapts to different devices. The content
rearranges itself for mobile, tablet, and desktop screens, ensuring a clean and readable layout on
all screen sizes.
 EXPERIMENT NO:15 DATE: / /2025
NAME:NANDAN KUMAR ROLL NO:

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

AIM: Create a personal portfolio site that demonstrates HTML, CSS, and JavaScript features from
the course.

DESCRIPTION: A multi-page (or single-page) portfolio that includes: a home/intro section, an

about section, a projects/gallery area, a skills list, a contact form (with JS validation), and a
resume/download link. It will use semantic HTML elements, tables/lists/images, forms, and attributes
(id, class, src, alt, href). CSS will show inline/internal/external usage, selectors, fonts, colors,
background images, responsive layouts via media queries, and visual styling for lists and tables.
JavaScript will handle form validation, simple interactivity (project filtering or modal view),
localStorage for a small “notes” widget, and link state styling. The design will be responsive
(mobile/tablet/desktop).

PROGRAM:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>General Knowledge Quiz</title>
<style> body { font-
family: Arial, sans-serif;
margin: 0; padding: 0;
background: #f2f2f2;
}

header
{ background: #333;
color: white; text-
align: center;
padding: 15px;
}

FacultyName: SignWithDate
EXPERIMENT NO:15 DATE: / /2025
NAME:NANDAN KUMAR ROLL NO:
background: #444;
text-align: center;
padding: 10px;
}

nav a { color:
white; margin: 0
15px; text-
decoration: none;
font-weight: bold;
}

.container { max-width:
800px; margin: auto;
padding: 20px; background:
white; box-shadow: 0px 0px
10px gray; border-radius: 8px;
}

h2
{ color:
#333;
}

.question { margin-
bottom: 15px;
}

.question p { font-
weight: bold;
}

input[type="radio"] { margin-
right: 5px;
}

.btn {
background: #007BFF;
color: white;

.padding: 10px 20px;

border: none; border-
radius: 5px; cursor:
pointer; margin-top:
10px;
}
 .btn:hover
{ background:
#0056b3;
}

footer
{ background: #333;
color: white; text-
align: center;
padding: 10px;
margin-top: 20px;
}

/* Responsive */
@media (max-width: 600px) {
.container
{ width: 90%;
padding: 15px;
}
}
</style>
</head>
<body>

<header>
<h1>General Knowledge Quiz</h1>
</header>

<nav>
<a href="#">Home</a>
<a href="#">Quiz</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>

FacultyName: SignWithDate
 EXPERIMENT NO:15 DATE: / /2025
NAME:NANDAN KUMAR ROLL NO:

<div class="container">
<h2>Answer the following questions:</h2>
<form id="quizForm">

<!-- Question 1 -->

<div class="question">
<p>1. What is the capital of India?</p>
<input type="radio" name="q1" value="Delhi"> Delhi <br>
<input type="radio" name="q1" value="Mumbai"> Mumbai <br>
<input type="radio" name="q1" value="Kolkata"> Kolkata <br>
</div>

<!-- Question 2 -->

<div class="question">
<p>2. Which planet is known as the Red Planet?</p>
<input type="radio" name="q2" value="Mars"> Mars <br>
<input type="radio" name="q2" value="Jupiter"> Jupiter <br>
<input type="radio" name="q2" value="Venus"> Venus <br>
</div>

<!-- Question 3 -->

<div class="question">
<p>3. Who is known as the Father of Computers?</p>
<input type="radio" name="q3" value="Charles Babbage"> Charles Babbage <br>
<input type="radio" name="q3" value="Alan Turing"> Alan Turing <br>
<input type="radio" name="q3" value="Bill Gates"> Bill Gates <br>
</div>

<button type="button" class="btn" onclick="checkAnswers()">Submit</button>

</form>

<h3 id="result"></h3>
</div>

<footer>
<p>&copy; 2025 Quiz Project | Designed with HTML, CSS & JS</p>
</footer>

EXPERIMENT NO:15 DATE: / /2025

NAME:NANDAN KUMAR ROLL NO:
 <script> function
checkAnswers() { let
score = 0; // Correct answers
let answers = { q1:
"Delhi", q2: "Mars",
q3: "Charles Babbage"
};

let form = [Link]["quizForm"];

for (let key in answers) { let

userAnswer = form[key].value; if
(userAnswer === answers[key])
{ score++;
}
}

[Link]("result").innerHTML =
"Your Score: " + score + "/3";
}
</script>

</body>
</html>

OUTPUT:

FacultyName: SignWithDate
RESULT: A polished, responsive portfolio that loads quickly and works across devices. Visitors see
a clear introduction, browse projects with images and details, filter or open project modals, view
skills and education, and use the contact form which validates input before submission. The site
demonstrates practical use of HTML elements, CSS techniques (including backgrounds and media
queries) and JavaScript behaviors (validation, DOM updates, and small client-side storage).