SHRI RAM GROUP OF COLLEGES
WEB DESIGNING WORKSHOP
COMPUTER SCIENCE AND ENGINEERING
DEPARTEMENT (2024-25)
SUBMITTED TO SUBMITTED BY
MS HIMANI MAM MAYANK BHATIA
ASSITANT PROFESSOR(CSE) 2306950100086
BTECH CSE(B)
2ND YR &3RD SEM
QUES 1 DESIGN THE FOLLOWING STATIC WEBPAGES
REQUIRED FOR AN ONLINE BOOK STORE WEBSITE
CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Bookstore Homepage</title>
</head>
<body>
<frameset rows="20%, 80%" border="1">
<!-- Top Frame: Contains logo, college name, and navigation links -->
<frame name="topFrame" src="[Link]" noresize scrolling="no">
<!-- Main Frame: Divided into Left and Right -->
<frameset cols="20%, 80%" border="1">
<!-- Left Frame: Navigation links -->
<frame name="leftFrame" src="[Link]" noresize>
<!-- Right Frame: Default description -->
<frame name="rightFrame" src="[Link]" noresize>
</frameset>
</frameset>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Top Frame</title>
</head>
<body>
<h1>Online Bookstore</h1>
<nav>
<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>
</nav>
</body>
</html>
<title>Left Frame</title>
</head>
<body>
<h3>Departments</h3>
<ul>
<li><a href="[Link]" target="rightFrame">CSE</a></li>
<li><a href="[Link]" target="rightFrame">ECE</a></li>
<li><a href="[Link]" target="rightFrame">EEE</a></li>
<li><a href="[Link]" target="rightFrame">CIVIL</a></li>
</ul>
</body>
<title>Description</title>
</head>
<body>
<h2>Welcome to the Online Bookstore</h2>
<p>This is the homepage of the Online Bookstore. Use the navigation links to
explore the various sections.</p>
</body>
</html>
OUTPUT
QUES 2 DESIGN A LOGIN PAGE FOR ONLINE BOOK
STORE WEBSITE
CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f9;
}
.login-container {
width: 400px;
padding: 20px;
background: #fff;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.login-container h2 {
margin-bottom: 20px;
text-align: center;
color: #333;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #555;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 14px;
}
.button-container {
display: flex;
justify-content: space-between;
}
button {
padding: 10px 20px;
font-size: 14px;
border: none;
border-radius: 5px;
cursor: pointer;
}
[Link] {
background-color: #4CAF50;
color: white;
}
[Link] {
background-color: #f44336;
color: white;
}
button:hover {
opacity: 0.9;
}
</style>
</head>
<body>
<div class="login-container">
<h2>Login Page</h2>
<form action="submitLogin" method="post">
<div class="form-group">
<label for="username">User Name:</label>
<input type="text" id="username" name="username" placeholder="Enter
your username" required>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" name="password"
placeholder="Enter your password" required>
</div>
<div class="button-container">
<button type="submit" class="submit">Submit</button>
<button type="reset" class="reset">Reset</button>
</div>
</form>
</div>
</body>
</html>
OUTPUT
QUES 3 THE CATOLOGUE PAGE SHOULD CONTAIN
THE DETAILS OF ALL THE BOOKS AVAILABLE IN THE
WEBSITE IN A TABLE
CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Catalogue Page</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f9;
}
.container {
margin: 20px auto;
width: 90%;
max-width: 1200px;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th, td {
border: 1px solid #ddd;
padding: 10px;
text-align: center;
}
th {
background-color: #4CAF50;
color: white;
}
img {
width: 80px;
height: auto;
}
.btn {
display: inline-block;
padding: 8px 12px;
background-color: #4CAF50;
color: white;
text-decoration: none;
border-radius: 4px;
font-size: 14px;
}
.btn:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="container">
<h1>Catalogue Page</h1>
<table>
<tr>
<th>Book Cover</th>
<th>Book Title</th>
<th>Author</th>
<th>Publisher</th>
<th>Price</th>
<th>Add to Cart</th>
</tr>
<tr>
<td><img
src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBx
ITEhUSExMWFhUWFhcVGBgXFRUYGBUYFhcXFxgXGBcYHiggGBolHRcWITE
hJSkrLi4uFx8zODMtNygtLisBCgoKDg0OGxAQGy0mICUwLS8tMC4rLy0tLystLi0t
LS8tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tNS0tLf/AABEIAPwAyAMBIgACEQ
EDEQH/xAAcAAACAgMBAQAAAAAAAAAAAAAFBgQHAAIDAQj/xABVEAA
CAQMCAwUDBQkMBwUJAAABAgMABBESIQUxQQYTIlFhMnGBBxRSkaEjQn
KCkrGywdEVJDM0Q2JzdLPD4fAWJVNjosLSFzU2o/EIJkRUZIOEk+L/xAAbAQA
CAwEBAQAAAAAAAAAAAAACAwEEBQAGB//EADoRAAEEAAQDBQcCBQ
MFAAAAAAEAAgMRBBIhMQVBURNhcbHBFCIygZGh8NHhBhVikvFCgrIjM1N
jcv/aAAwDAQACEQMRAD8AsKuUdwjEqrKSOYDAkdNwOVdaUDiK5v2jGkiDW
MfSKhifrJNfPYohJf5zpeijjz3+cwPVMUkiPkKysV2IBBIPqByqMkyhtGoasZ05GrHnj
nS7waBYprEoMGaKTvP522rf44+oVBK+D51/K/PcZ64xnT7qtjCi6vT1sj0T/ZBm38P
GyPRN9xfAHTqGrGcZGceeOdRhfnJGRkcxnl76XeIQMlw8jIcCQy95tjQExp9/TFbc
Pu1VtLA947ZY48IZhlUz5hcD4UXswy2NUl+GOXM03p/n6Ivxm9Jt5x5wyfoNVM2
pq2uL/wAXm/opP0GqorZq1OGNAY6uqXh3aonGa6ZqOj1vrq+QtQO0XXNeZrQGth
XUiBtbrXTFcxXQUKYFFdCp9K2FSDg1GZCDRA2lubl2XQCtGWtkc/RNelvQ1y7
QrkDWFqxvca8MXwqUGvJeFjWE7V5sOW9Yu5qUDnULXoBrm+ alt="XML Bible
Cover"></td>
<td>XML Bible</td>
<td>Winston</td>
<td>Wiley</td>
<td>$40.5</td>
<td><a href="#" class="btn">Add to Cart</a></td>
</tr>
<tr>
<td><img
src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBx
ITEhUTExMVFhUXFxgYGBgXFxcaGhcXGBgdHRcXFxoYHSggGB0lHRcXIjEhJS
krLi4uFx8zODMtNygtLisBCgoKDg0OGxAQGy0fHSUtLS0tLS0rLS0tLS0tLS0tLS0t
LSstLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLf/AABEIAPcAzAMBIgACEQEDEQ
H/xAAcAAABBQEBAQAAAAAAAAAAAAAFAQIDBAYABwj/xABSEAACAQI
DBAQGDgYIBAYDAAABAhEAAwQSIQUxQVEGEyJhFDJxgbHRIzM0QlJUcnOR
kpOhstIHFVNiwfAkY4KUorPT4RdDZPF0g6OkwuIWNUT/xAAaAQADAQEBAQA
AAAAAAAAAAAAAAQIDBAUG/8QAKBEAAgIABgEFAQADAQAAAAAAAAE
CEQMSITFBURMUIjJhcfDB0eEj/9oADAMBAAIRAxEAPwDE2rYRQACCRuPAH
n30h7zNPxFzMxYjeSd/OmA1zHtI4mmzSk01qRQuc13WGozSUDJDdPOm56jNJNA
EvWHnSdY3M1FSzQIkFw0mY86jrgaAJIPOky99Nmu89AHFO+lyHnTZpQ9AChTz
NdLV3WGlFykM4seVDto4EN2lBDcRz/3okLndXdYOVNNoicFJUzJMO76aPdFmss
TYugAXDqx1LQOwi8LepJLaseyoiTKbRwYftKIb8X+9XsK1rE4ZbT3Ft3rTOUGiAs
3vnAGuiKvZGm8ySY6FKzzcXDcHTBCK9hzbuCQpEle0BmEqQRpBBmiqppIMjuq
TZzJl8Axam325VxK9uT2nkgOx8UFtN3iw00equ4aOsANpj2SDmBncw7jrvicrRuNR
OF6o2wMfL7ZbFvKDvpXYiBM6cdalS+hAO8cxUeIyz2ZiONZR3OzE2LRpKU0lM
EIaYaeaaRQUMIpIqfFYd7bsjqVdTDKd4PI1CaQxpFNy1ctYC61u5dVCbdrKLjcFzm
FnymrGzuj+JvqHtWiys+RdVGZoJOUEgkCDJ3SImaBOSXILK0hSnlTxqxf2fdS3bus
hCXc3VtpDZDDR5CaQFQJXBKsYPCvcdbdtcztookCT5zFLi8K9q41pxDoxVhIMM
N4kaGgPor5a7LRHaGx79hVa7aKK/iklTm7xBMjvofTBNPYTLS5aUqdJB11HeOY5j
SruyNk3cTcFqyoZzrBZV05yxFANpFGK4Cro2bd8H8KyjqcwXNmWcxnTLM8DvFd
tPZt3DuEvLlYqrgSD2WEqdDQJSRTiuilpKRQmWqWOwGbtKYcagjSY3a8D31fFc
KE6ehMoKapkeyryYt1s4tiGRClpR2ZcjV3aCSwCqAN2g5ZWnwzjq3wmLbq7gMJm
zAkRoxaCG3cpIVVnQCqG0MDn1XRxuO6fL66h2ntxrtgWbiDrVYZrhGpRR2VPeC
T5dOQjojLMeZi4LgyN7V3CXOruqYOo3gEfCWRPmMHnFEWYNBXUEaUIxO1rt
22lp2lEMjTUnUDMeMSY+UTvJNNw7kDQka/wocLLhjOMaZpjSGuNNrFneLRXox
hDcxAIXN1Stdy8zb1Ua83KDz0JmrlnHKLN20bQJulZfMRAQyq5YgjNqeenKgJXVI
0v6RcGc9jFspXr7a9YNJF1BDjlJH4aIbL2Tg8PtLC2kN9rpa04zZCkPZdiDuMzBmN
OFZUbeXwJcG1gFFc3FbOwYMZnKAIAIJEd81NiOlDHF2cWtlVe1kGXOzKwRco
BkadkkT56doyySrL+/wDCxfwVp8PtG7be+OruWuyzKFfPfykuqjtQcxEniONHmwG
GvYrZ1ucQjHBpldGRIUC4dSAWDHWY01rKP0gXq8VaXDqqYllZvZXOTI2dcpI1
7cnXnG6rFrpflvWLww65sPa6lB1jwVEgFtNTDN9PdRaBwl/fhHg9l4e1YsX8ULjDE
NcCi2wXq1QxnPZJck+900767G7NTwbZ7g3265rysk5oyXEUiysQCxJMcSRNQp0g3
xJM14lh8di7Qy27z5d2XMSPqtp/GvQP02bc6pMPYGpdjcYfupov+Jv8NeY2tq2zvlfK
P4iolqzownJLQsfrIqxa6mcndnLkgxAK67930CpcMWuRnOnIRJ+UR6BVHaDBghB
BEmTIgeWq77S0yqYHPj5uVTSRTt61R6F0V28mHvpYRgpugpooOU71kbtSMu/3wr
0a1jr3V6syu
+dcvVouoJKjXySdw46cSfIKkV1dQOqENKBXV1IaOpaWuoKQkVHefWkrqEKR//Z
" alt="AI Book Cover"></td>
<td>AI</td>
<td>S. Russel</td>
<td>Princeton Hall</td>
<td>$63</td>
<td><a href="#" class="btn">Add to Cart</a></td>
</tr>
<tr>
<td><img
src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBx
MTEhUTExMVFRUXFxcYFxcXGBcXFxcXGBcXFxcdFx0dHSggGB0lHRgYITEhJ
SktLi4uFx8zODMtNygtLisBCgoKDg0OGhAQGi0mHSUtLS0tLS0uLS0tLS03LS0xL
S0tKy0tLS0tLS0tLS0tLS02LS0tLS0tLS0tLS0tLSstLf/AABEIAQEAxAMBIgACEQE
DEQH/xAAcAAABBQEBAQAAAAAAAAAAAAABAAIFBgcDBAj/xABLEAACA
QMCAgUGCgcFBwUBAAABAgMABBESIQUxBhMiQVEHFGFxgZEVIzJSkpOhw
dHSQlNUYoKx4RYkM3KiQ0RjdIOz8HOkw+LxNP/EABoBAQEBAQEBAQAAAA
AAAAAAAAABAgMEBQb/xAA0EQACAQICCAIKAgMBAAAAAAAAAQIDER
RSBBIVITFRkaFB8AUTYWJxscHR4fEigTNCUyP/2gAMAwEAAhEDEQA/APC8h
+2kLp8YycD7KaTtXJm7q+YfurCDk5PjvQGaPdypKTUFgZpZNGhigsKlRxSxQtgin
ZoCjQ2kDelg+NE0aEsMJoZNP2oHFQlhlEmnUiaEsMU0QacKVUWGtSyacamuj3C
utIwcE5JJAOhVI3XO2snAHhknerGN2cNJrqjDWZFR2ch04AJbO2QCMMEOc4xufs
Nc5UdThhg4B9h5Gr7f8LVY5GWBWbBO6KzFvWRz9VQ8vCerh1tuwAMiDYEBS
AdjtjUezyx9volQsr3Pj0vS+tPVt5+Nysq1O6rJzXa6tyjYZdPeBkNseWD30I+MScZZ2
xk4HyRgAAb+k+AHjFdbaTSwPprkaIoDaej9/19qAdyBpPs5fd7q8U8W2CPQai+gVx
8Uw9X31OyrUBkd7DokdPmsV9x2+yuS1KdKo9N1L6dJ96LUSDQDs04CgDmmUA
4rQxTs0iaAKijQWlQDmoZp0hrnigH1zNOxtTMUBauinQK6v4WmhaFVVzH8Yzglg
qscBUO2GG+fGvF0SJS70sMNpdSD47H7q1byDn+4Tf82//
dWHICDcBsaRgc8g5qBzSzSzWXJvidqdKFNWihZpUs0tVQ63Eaa1EtQzQtxqoPGn
HFANSJFAKm7U40QtAT1txiBY4R1ep4wwPYQZJjkA7RJJ7TIeW2k89q433EYntw
gjCyayx0ooUAvK2Ac5Iw6ADH6HPYVEgCicVddnBaNBO/je/wA/uTtvxW3IiR4wAi
R5cIrMzK8TMO7YiNlySflnuyKV9eWskIQDq36oLqES7MOoO+CCc6JN/wB/0moLI
pmoVdcmGgndNlie/tNavoGhWduq6lO0cylctndTqjGg7djuwMsiu7UYUopUKwVjCm
QetfQz4GXwnV5yTnSR3nMBkUsimuTDR5ssq3llgZRdQK9rq+w28eslRyHZYgdwY
jB5VA8SaMyv1fyM9nYDb0DAwM57h6hyrz53oMBRyuIUVB3Tf9jSRSpYHooVD
YJf0vX95rnJSpVThHgIcvbSelSqHVcB6f8Anurv3D1UqVZZpCblSXlSpUNhWmSfd
SpUIONJqVKqUZ+j7KP9KVKhB6U8cqVKodEOrlJSpVAwmuJpUqqIxw76J7qVKh
Brc6J5ez76FKqYZzNKlSoZP//Z" alt="Java 2 Cover"></td>
<td>Java 2</td>
<td>Watson</td>
<td>BPP Publications</td>
<td>$35.5</td>
<td><a href="#" class="btn">Add to Cart</a></td>
</tr>
<tr>
<td><img
src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBx
ASEhURExIVFhUXGBgWGBgYGB8aGBsXFxkfFxgYGBggHyggHxolHRUYITEiJ
ykrLi4uGCAzODMtNygtLisBCgoKDg0OGhAQGy0lICYwLS0tLS0vLy0tLS0tLS0tL
S0tLS8tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLf/AABEIAPoAyQMBEQACEQE
DEQH/xAAcAAABBQEBAQAAAAAAAAAAAAAAAwQFBgcCAQj/xABREAAC
AQMBBAQKAw0DCgcBAAABAgMABBESBRMhMQYiQVEHFDIzUmFxcpGxI4
GSFTQ1QlNic3ShsrPB0UOCkxYkNmODotLT4fAXRVSEtMLDdf/EABsBAQADA
QEBAQAAAAAAAAAAAAACAwQBBQYH/8QAPxEAAgECBAQDBgMFBQkA
AAAAAAECAxEEEiExBRNBUTJhkQYUIlJxgTPR8DRCobHBFjVDc/EVJCVTYm
NyouH/2gAMAwEAAhEDEQA/ANmtLWPQnUXyV/FHdQCvisfoL9kUAeKx+gv2R
QB4rH6C/ZFAHisfoL9kUAeKx+gv2RQB4rH6C/ZFAHisfoL9kUAeKx+gv2RQB4rH
6C/ZFAHisfoL9kUAeKx+gv2RQB4rH6C/ZFAHisfoL9kUAeKx+gv2RQB4rH6C/ZF
AHisfoL9kUAeKx+gv2RQB4rH6C/ZFAHisfoL9kUAeKx+gv2RQB4rH6C/ZFAHisfo
L9kUAeKx+gv2RQB4rH6C/ZFAZluE9FfgKA02082nur8qAWoAoAoAoAoAoAoAo
AoAoAoAoAoAoAoAoAoAoAoAoAoAoAoAoDMKA0m082nur8qAWoAoAoAoAo
AoAoAoAoAoAoAoAoAoAoAoAoAoAoAoAoBvcXQQgHPGvOx/E6WDy8xPXsW
Qpuex7Y3IljSQAgOoYA88EZ4+ut1OanFSXXUrasL1MGYUBpNp5tPdX5UBxPtCF
Dh5Y1OpEwzAHVJwReJ8pjyHb2UAW20IZGZI5Edk8oKwJXrMnHHLrRSL7UYdl
AOaAKAKAKASuLhIwC7BQWVAScZZ2CqPaSQProD25nSNGkdgqKCzMeAAAy
ST3UApQBQBQBQBQBQBQBQBQFN6abalRW8WnQiPqzqhBkTVyYniVHA9xGP
/AEbg9y0/
7vQPVyIzipc1b2PNfs5iPBnVrlJhUgAE5PafX21VfU+sw1Hk0o0+yI2rD5o+qNxvIN3
qZNUenUh0uuVxlW7GHYa0HyBWovB1Z5ZneeVnEgZpHBJeVN00uAoG80dUHH
DuySSApD4PrFQB9IxUsVZmBZdUC2wx1cYWNFxkcCM8aAX2d0Mt4pYZt7PJuE
CQpI4KR4jERZAFByVHfjJJABNAWWgCgPDQGV+F3YZDrdqOqwEcnqYeQx9Rz
j2gd9Za8f3j3+B4tU55GZqR2GoQm46o+0qUqeJp5ZbPtoe5ruZnVh4L/Vhmlzvu8P02
GaXY93h+mPdk7XuLVjJbybtyunVpVuBIPJgR2Cik0ZsVwyjiYZZ39ST/AMu9r/8Ar
T/gw/8ALqfMZ5v9msN3Y22l0s2lcRtDNdF43GGXdxDIBzzCAjiOynMZOn7PYeE1J
N6EXDKVZXHNSGHtU5HD2ioXZ60sLTlFxd9fMldp9LdpXEbwzXRaN+DLuohkZ
zzCZHEDtqfMZ5MPZ7DRmpxb0IbNQuz2Fh4fpnuaXO+7w/TDNLs57vD9Nhml2Pd
4fphmlx7vD9MM0ux7vDz9QzS7Hu8P0z0UuPd4fpkTU7ny3LibTBtGfSv00nkj8du72
1pPkxT7pT/lpPtt/WgD7pT/AJaT7bf1oA+6U/5aT7bf1oA+6U/5aT7bf1oA+6U/5aT7bf
1oD0bSn/LSfbb+tAMdtXszW8ytI5BjfILEjyT2ZqM/Cyyk7TRkkkrekfjWdJH1WHrV
Mq+J+pxvm9I/GpWNPPq/M/Vnu+b0j8aWHPq/M/Vnm+b0j8a5Yc+r8z9WG+b0j8aD
n1fmfqw3zekfjQ5z6vzP1YCZvSPxrtjvPq/M/Vhvm9I/GuWHPq/M/Vhvm9I/Glhz6vzP
1YCZvSPxpYc+p8z9WBmb0j8aDn1Pmfqw3zekfjQc+r8z9WG+b0j8a7Yc+r8z9WG9
b0j8a5Yc+r8z9WG+b0j8a6OfV+Z+rDfN6R+NcHPq/M/Vnomb0j8aWOqvUv4n6sYaz
3muni8yfdn/2Q==" alt="HTML in 24 Hours Cover"></td>
<td>HTML in 24 Hours</td>
<td>Sam Peter</td>
<td>Sam Publications</td>
<td>$50</td>
<td><a href="#" class="btn">Add to Cart</a></td>
</tr>
</table>
<title>Cart Page</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f9;
}
.container {
margin: 20px auto;
width: 90%;
max-width: 1200px;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th, td {
border: 1px solid #ddd;
padding: 10px;
text-align: center;
}
th {
background-color: #4CAF50;
color: white;
}
</style>
</head>
</body>
</html>OUTPUT
QUES 4 THE CART PAGE CONTAINS THE DETAILS
ABOUT THE BOOKS WHICH ARE ADDED TO THE CART
CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cart Page</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f9;
}
.container {
margin: 20px auto;
width: 90%;
max-width: 1200px;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th, td {
border: 1px solid #ddd;
padding: 10px;
text-align: center;
}
th {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<div class="container">
<h1>Cart Page</h1>
<table>
<tr>
<th>Department</th>
<th>Book Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Amount</th>
</tr>
<tr>
<td>CSE</td>
<td>Java 2</td>
<td>$35.5</td>
<td>2</td>
<td>$71</td>
</tr>
<tr>
<td>EEE</td>
<td>XML Bible</td>
<td>$40.5</td>
<td>1</td>
<td>$40.5</td>
</tr>
<tr>
<td colspan="4"><strong>Total Amount</strong></td>
<td><strong>$111.5</strong></td>
</tr>
</table>
</div>
</head>
</body>
</html>
OUTPUT
QUES 5CREATE A “REGISTRATION FORM” WITH THE
FOLLOWING FIELDS
1) Name (Text field)
2) Password (password field)
3) E-mail id (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)
CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Page</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
margin: 0;
padding: 0;
}
.container {
max-width: 500px;
margin: 50px auto;
padding: 20px;
background: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
}
form {
display: flex;
flex-direction: column;
}
label {
margin-bottom: 5px;
color: #333;
}
input, select, textarea {
margin-bottom: 15px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
}
.radio-group, .checkbox-group {
display: flex;
gap: 10px;
margin-bottom: 15px;
}
button {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px;
font-size: 16px;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="container">
<h1>Registration Page</h1>
<form id="registrationForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="phone">Phone Number:</label>
<input type="text" id="phone" name="phone" required>
<label>Sex:</label>
<div class="radio-group">
<label><input type="radio" name="sex" value="Male" required>
Male</label>
<label><input type="radio" name="sex" value="Female" required>
Female</label>
</div>
<label for="dob">Date of Birth:</label>
<select id="dob-day" name="dob-day">
<option value="">Day</option>
<!-- Add day options -->
</select>
<select id="dob-month" name="dob-month">
<option value="">Month</option>
<!-- Add month options -->
</select>
<select id="dob-year" name="dob-year">
<option value="">Year</option>
<!-- Add year options -->
</select>
<label>Languages Known:</label>
<div class="checkbox-group">
<label><input type="checkbox" name="languages" value="English">
English</label>
<label><input type="checkbox" name="languages" value="Telugu">
Telugu</label>
<label><input type="checkbox" name="languages" value="Hindi">
Hindi</label>
<label><input type="checkbox" name="languages" value="Tamil">
Tamil</label>
</div>
<label for="address">Address:</label>
<textarea id="address" name="address"></textarea>
<button type="button" onclick="validateForm()">Submit</button>
</form>
</div>
<script>
function validateForm() {
const name = [Link]('name').value;
const password = [Link]('password').value;
const email = [Link]('email').value;
const phone = [Link]('phone').value;
// Name validation
if ([Link] < 6 || !/^[a-zA-Z ]+$/.test(name)) {
alert('Name must be at least 6 characters long and contain only alphabets.');
return false;
}
// Password validation
if ([Link] < 6) {
alert('Password must be at least 6 characters long.');
return false;
}
// Email validation
const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
if () {
alert('Please enter a valid email address.');
return false;
}
// Phone validation
if ([Link] !== 10 || !/^\d{10}$/.test(phone)) {
alert('Phone number must be 10 digits long.');
return false;
}
Alert('Form submitted successfully!');
}
</script>
</body>
</html>
OUTPUT
QUES 6 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. 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.
CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styled Web Page</title>
<style>
/* General page styles */
body {
font-family: 'Arial', sans-serif;
background-image: url('[Link]'); /* Replace with your image URL */
background-size: cover;
background-attachment: fixed;
margin: 0;
padding: 0;
color: #333;
}
h1 {
font-family: 'Georgia', serif;
color: #ffffff;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}
p{
font-size: 18px;
line-height: 1.6;
}
.highlight {
font-style: italic;
color: #ff5733;
}
/* Specific element background styling */
.box {
background-image: url('[Link]'); /* Replace with your image
URL */
background-size: cover;
background-position: center;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.button {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
color: #fff;
background-color: #007BFF;
border: none;
border-radius: 5px;
text-decoration: none;
cursor: pointer;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<h1>Welcome to My Styled Web Page</h1>
<p>This page demonstrates the use of different <span
class="highlight">fonts</span> and styles. You can also see background images
applied to the page and specific elements.</p>
<div class="box">
<p>This is a box with a background image. You can customize the styles further
to suit your design.</p>
</div>
<a href="#" class="button">Click Me</a>
</body>
</html>
OUTPUT
QUES 7 3/4
1) Control the repetition of the image with the background-repeat
property.
2) Define styles for links as
CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styled Web Page</title>
<style>
/* General page styles */
body {
font-family: 'Arial', sans-serif;
background-image: url('[Link]'); /* Replace with your image URL */
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
margin: 0;
padding: 0;
color: #333;
}
h1 {
font-family: 'Georgia', serif;
color: #ffffff;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}
p{
font-size: 18px;
line-height: 1.6;
}
.highlight {
font-style: italic;
color: #ff5733;
}
/* Specific element background styling */
.box {
background-image: url('[Link]'); /* Replace with your image URL
*/
background-repeat: repeat;
background-size: contain;
background-position: center;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.button {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
color: #fff;
background-color: #007BFF;
border: none;
border-radius: 5px;
text-decoration: none;
cursor: pointer;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #0056b3;
}
/* Link styles */
a{
text-decoration: none;
color: #007BFF;
}
a:visited {
color: #551A8B;
}
a:active {
color: #FF0000;
}
a:hover {
text-decoration: underline;
color: #0056b3;
}
</style>
</head>
<body>
<h1>Welcome to My Styled Web Page</h1>
<p>This page demonstrates the use of different <span class="highlight">fonts</span>
and styles. You can also see background images applied to the page and specific
elements.</p>
<div class="box">
<p>This is a box with a background image. You can customize the styles further to
suit your design.</p>
</div>
<a href="#" class="button">Click Me</a>
<br>
<a href="#">This is a styled link</a>
</body>
</html>
OUTPUT
QUES 8 Consider a small topic of your choice on which you can
develop static Webpages and try t 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
HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do List</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<h1>To-Do List</h1>
</header>
<main>
<div class="todo-container">
<input type="text" id="todo-input" placeholder="Add a new task..." />
<button id="add-button">Add</button>
<ul id="todo-list"></ul>
</div>
</main>
<footer>
<p>Made with by [MAYANK]</p>
</footer>
<script src="[Link]"></script>
</body>
</html>
CSS CODE
/* General Reset */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Body Styling */
body {
font-family: Arial, sans-serif;
background-color: #f3f4f6;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
}
/* Header */
header {
margin-bottom: 20px;
}
header h1 {
color: #333;
}
/* To-Do Container */
.todo-container {
background: #ffffff;
border-radius: 8px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
padding: 20px;
width: 100%;
max-width: 400px;
}
#todo-input {
width: calc(100% - 70px);
padding: 10px;
margin-right: 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
#add-button {
padding: 10px 15px;
background-color: #007BFF;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
#add-button:hover {
background-color: #0056b3;
}
#todo-list {
list-style: none;
margin-top: 20px;
padding: 0;
}
.todo-item {
display: flex;
justify-content: space-between;
align-items: center;
background: #f9f9f9;
border: 1px solid #ddd;
padding: 10px;
border-radius: 4px;
margin-bottom: 10px;
}
.todo-item button {
background-color: #dc3545;
color: #fff;
border: none;
border-radius: 4px;
padding: 5px 10px;
cursor: pointer;
transition: background-color 0.3s;
}
.todo-item button:hover {
background-color: #a71d2a;
}
/* Footer */
footer {
margin-top: 20px;
color: #666;
}
JAVA CODE
// Select elements
const todoInput = [Link]("todo-input");
const addButton = [Link]("add-button");
const todoList = [Link]("todo-list");
// Function to add a new task
const addTask = () => {
const taskText = [Link]();
if (taskText === "") {
alert("Please enter a task!");
return;
}
// Create list item
const listItem = [Link]("li");
[Link] = "todo-item";
// Add task text
const taskSpan = [Link]("span");
[Link] = taskText;
[Link](taskSpan);
// Add delete button
const deleteButton = [Link]("button");
[Link] = "Delete";
[Link]("click", () => {
[Link](listItem);
});
[Link](deleteButton);
// Append list item to the list
[Link](listItem);
// Clear input field
[Link] = "";
};
// Add event listener to the Add button
[Link]("click", addTask);
// Add event listener to handle "Enter" key
[Link]("keypress", (e) => {
if ([Link] === "Enter") {
addTask();
}
});
OUTPUT