EXPERIMENT – 1
Question: Introduction to HTML, CSS and applications of
them.
1. HTML (HyperText Markup Language):
HTML is the standard markup language used to create and structure
content on web pages. It describes the structure of web documents
using tags and elements.
Each web page is built using HTML to define headings, paragraphs,
images, links, tables, forms, etc.
Basic Structure of an HTML Document:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to HTML</h1>
<p>This is my first HTML page.</p>
</body>
</html>
OUTPUT:
Common HTML Tags:
<html> – defines the root of the HTML document
<head> – contains meta information and links to CSS/JS
<title> – defines the title of the webpage
<body> – contains visible content
<h1>…<h6> – headings
<p> – paragraph
<a> – hyperlink
<img> – image
<table>, <form> – for data and user input
2. CSS (Cascading Style Sheets):
CSS is used to style and design HTML elements. It defines how HTML
elements should appear on screen, paper, or other media.
Types of CSS:
1. Inline CSS: inside an HTML element using the style attribute
2. Internal CSS: inside <style> tag in the head section
3. External CSS: in a separate .css file linked using <link> tag
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML with CSS</title>
<style>
body {
background-color: lightblue;
font-family: Arial;
}
h1 {
color: darkblue;
}
p{
color: black;
}
</style>
</head>
<body>
<h1>Welcome to CSS</h1>
<p>CSS makes web pages look beautiful.</p>
</body>
</html>
OUTPUT
Applications of HTML and CSS:
1. Building and designing websites and web applications.
2. Creating the structure (HTML) and styling (CSS) of webpages.
3. Designing online forms, tables, navigation menus, and layouts.
4. Used in combination with JavaScript for dynamic, responsive
websites.
5. Essential for front-end web development and UI/UX design.
EXPERIMENT-2
QUESTION: Design the following static web pages required for an online book
store website. As it must contain three frames — Home page, Login page, and
Catalogue page.
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Book Store - Home</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<h1>Welcome to the Online Book Store</h1>
<nav>
<ul>
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]">Catalogue</a></li>
<li><a href="[Link]">Cart</a></li>
<li><a href="[Link]">Login</a></li>
<li><a href="[Link]">Register</a></li>
</ul>
</nav>
</header>
<section class="intro">
<h2>Find Your Next Great Read </h2>
<p>Welcome to our online bookstore! Explore a wide variety of books across genres,
add them to your cart, and enjoy a smooth reading experience. < /p>
<a href="[Link]" class="btn">Browse Books</a>
</section>
<footer>
<p>© 2025 Online Book Store | Designed by Nitish Kumar</p>
</footer>
</body>
</html>
CSS CODE:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background:
url('[Link]
[Link]') no-repeat center center fixed;
background-size: cover;
color: black;
/* Header and navigation */
header {
background-color: rgba (0, 0, 0, 0.8);
color: white;
padding: 20px 0;
text-align: center;
header h1 {
margin: 0;
font-size: 28px;
nav ul {
list-style-type: none;
margin: 15px 0 0 0;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 15px;
nav ul li a {
text-decoration: none;
color: white;
font-weight: bold;
nav ul li a: hover {
color: #00aaff;
/* Intro section */
.intro {
text-align: center;
background-color: rgba (255, 255, 255, 0.85);
margin: 60px auto;
width: 70%;
padding: 40px;
border-radius: 10px;
.intro h2 {
color: #0077cc;
margin-bottom: 15px;
.intro p {
font-size: 18px;
margin-bottom: 25px;
}
.btn {
background-color: #0077cc;
color: white;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
font-weight: bold;
.btn:hover {
background-color: #005fa3;
/* Footer */
footer {
text-align: center;
padding: 15px;
background-color: rgba(0, 0, 0, 0.8);
color: white;
position: fixed;
bottom: 0;
width: 100%;
font-size: 14px;
OUTPUT :
EXPERIMENT – 3
QUESTION: A Login page for the online book store website containing Username
and Password.
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Book Store - Login</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<h1>Online Book Store</h1>
<nav>
<ul>
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]">Catalogue</a></li>
<li><a href="[Link]">Cart</a></li>
<li><a href="[Link]">Login</a></li>
<li><a href="[Link]">Register</a></li>
</ul>
</nav>
</header>
<section class="login-box">
<h2>Login</h2>
<form>
<label>Username:</label><br>
<input type="text" name="username" required><br>
<label>Password:</label><br>
<input type="password" name="password" required><br>
<input type="submit" value="Login">
<input type="reset" value="Clear">
</form>
<p>Don’t have an account? <a href="[Link]">Register here</a></p>
</section>
<footer>
<p>© 2025 Online Book Store | Designed by Nitish Kumar</p>
</footer>
</body>
</html>
CSS CODE:
/* General page styling */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background: url('[Link]
old-bookcase-in-a-library-picture-image_2760144.jpg') no-repeat center center fixed;
background-size: cover;
color: #333;
/* Header and navigation */
header {
background-color: rgba(0, 0, 0, 0.8);
color: white;
padding: 20px 0;
text-align: center;
header h1 {
margin: 0;
font-size: 28px;
nav ul {
list-style-type: none;
margin: 15px 0 0 0;
padding: 0;
nav ul li {
display: inline;
margin: 0 15px;
nav ul li a {
text-decoration: none;
color: #fff;
font-weight: bold;
nav ul li a:hover {
color: #00aaff;
/* Login box styling */
.login-box {
background-color: rgba(255, 255, 255, 0.9);
width: 350px;
margin: 80px auto;
padding: 30px;
border-radius: 10px;
box-shadow: 0 0 10px gray;
text-align: left;
}
.login-box h2 {
text-align: center;
color: #0077cc;
margin-bottom: 20px;
label {
font-weight: bold;
input[type="text"],
input[type="password"] {
width: 95%;
padding: 8px;
margin-top: 5px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 5px;
input[type="submit"],
input[type="reset"] {
background-color: #0077cc;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
margin-right: 10px;
input[type="submit"]:hover,
input[type="reset"]:hover {
background-color: #005fa3;
p{
text-align: center;
a{
color: #0077cc;
text-decoration: none;
a:hover {
text-decoration: underline;
/* Footer */
footer {
text-align: center;
padding: 15px;0
background-color: rgba(0, 0, 0, 0.8);
color: white;
position: fixed;
bottom: 0;
width: 100%;
font-size: 14px;
OUTPUT
EXPERIMENT – 4
QUESTION: Catalogue Page: The catalogue page should contain the details of
all the books available on the website in a table.
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Book Store - Catalogue</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<h1>Online Book Store</h1>
<nav>
<ul>
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]">Catalogue</a></li>
<li><a href="[Link]">Cart</a></li>
<li><a href="[Link]">Login</a></li>
<li><a href="[Link]">Register</a></li>
</ul>
</nav>
</header>
<section class="catalogue-container">
<h2>Book Catalogue</h2>
<div>
<h3>Motivational</h3>
<div class="book">
<img src="[Link]
[Link]?v=1701690525&width=1920" alt="Atomic Habits">
<h3>Atomic Habits</h3>
<p>Author: James Clear</p>
<p>Price: ₹450</p>
<button>Add to Cart</button>
</div>
<div class="book">
<img
src="[Link]
_t__1607410877_44fb96ac-[Link]?v=1659004008&width=1445" alt="Rich Dad
Poor Dad">
<h3>Rich Dad Poor Dad</h3>
<p>Author: Robert Kiyosaki</p>
<p>Price: ₹300</p>
<button>Add to Cart</button>
</div>
<div class="book">
<img src="[Link]
50/2018/09/[Link]" alt="The Alchemist">
<h3>The Alchemist</h3>
<p>Author: Paulo Coelho</p>
<p>Price: ₹400</p>
<button>Add to Cart</button>
</div>
<div class="book">
<img src="[Link]
q=tbn:ANd9GcQ5Iju9NczA06g6PP6o9DKjcIZMPpK1EeH5TQ&s" alt="Think Like a Monk">
<h3>Think Like a Monk</h3>
<p>Author: Jay Shetty</p>
<p>Price: ₹350</p>
<button>Add to Cart</button>
</div>
<div class="book">
<img src="[Link]
[Link]?q=90" alt="Wings of Fire">
<h3>Wings of Fire</h3>
<p>Author: Dr. A.P.J Abdul Kalam</p>
<p>Price:₹120</p>
<button>Add to Cart</button>
</div>
</div>
</section>
<footer>
<p>© 2025 Online Book Store | Designed by Nitish Kumar</p>
</footer>
</body>
</html>
CSS CODE:
/* General styling */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background: url('[Link]
[Link]') no-repeat center center fixed;
background-size: cover;
color: #333;
/* Header and navigation */
header {
background-color: rgba(0, 0, 0, 0.8);
color: white;
padding: 20px 0;
text-align: center;
header h1 {
margin: 0;
font-size: 28px;
nav ul {
/* list-style-type: none; */
margin: 15px 0 0 0;
padding: 0;
nav ul li {
display: inline;
margin: 0 15px;
nav ul li a {
text-decoration: none;
color: #fff;
font-weight: bold;
nav ul li a:hover {
color: #00aaff;
/* Catalogue container */
.catalogue-container {
background-color: rgba(255, 255, 255, 0.9);
width: 85%;
margin: 50px auto;
padding: 30px;
border-radius: 10px;
box-shadow: 0 0 10px gray;
text-align: center;
.catalogue-container h2 {
color: #0077cc;
margin-bottom: 30px;
/* Book cards */
.book {
display: inline-block;
width: 220px;
background-color: #fff;
margin: 15px;
padding: 15px;
border-radius: 10px;
box-shadow: 0 0 8px #ccc;
vertical-align: top;
.book img {
width: 100%;
height: 250px;
border-radius: 5px;
.book h3 {
color: #0077cc;
margin-top: 10px;
.book p {
margin: 5px 0;
font-size: 15px;
button {
background-color: #0077cc;
color: white;
border: none;
padding: 8px 15px;
border-radius: 5px;
cursor: pointer;
margin-top: 10px;
button:hover {
background-color: #005fa3;
/* Footer */
footer {
text-align: center;
padding: 15px;
background-color: rgba(0, 0, 0, 0.8);
color: white;
position: fixed;
bottom: 0;
width: 100%;
font-size: 14px;
}
OUTPUT:
EXPERIMENT – 5
QUESTION: Cart Page: The cart page contains the details about the books which
are added to the cart.
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cart</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<h1>Online Book Store</h1>
<nav>
<ul>
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]">Catalogue</a></li>
<li><a href="[Link]">Cart</a></li>
<li><a href="[Link]">Login</a></li>
<li><a href="[Link]">Register</a></li>
</ul>
</nav>
</header>
<section class="cart-container">
<h2>Your Shopping Cart</h2>
<table>
<tr>
<th>Book Title</th>
<th>Author</th>
<th>Quantity</th>
<th>Price</th>
<th>Total</th>
</tr>
<tr>
<td>Atomic Habits</td>
<td>James Clear</td>
<td><input type="number" value="1" min="1"></td>
<td>₹450</td>
<td>₹450</td>
</tr>
<tr>
<td>Rich Dad Poor Dad</td>
<td>Robert Kiyosaki</td>
<td><input type="number" value="2" min="1"></td>
<td>₹300</td>
<td>₹600</td>
</tr>
</table>
<div class="cart-summary">
<p><strong>Grand Total: ₹1050</strong></p>
<button>Proceed to Checkout</button>
</div>
</section>
<footer>
<p>© 2025 Online Book Store | Designed by Nitish Kumar</p>
</footer>
</body>
CSS CODE:
/* General styling */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background: url('[Link] no-repeat center
center fixed;
background-size: cover;
color: #333;
}
/* Header and navigation */
header {
background-color: rgba(0, 0, 0, 0.8);
color: white;
padding: 20px 0;
text-align: center;
header h1 {
margin: 0;
font-size: 28px;
nav ul {
list-style-type: none;
margin: 15px 0 0 0;
padding: 0;
nav ul li {
display: inline;
margin: 0 15px;
nav ul li a {
text-decoration: none;
color: #fff;
font-weight: bold;
nav ul li a:hover {
color: #00aaff;
/* Cart container */
.cart-container {
background-color: rgba(255, 255, 255, 0.9);
width: 80%;
margin: 60px auto;
padding: 30px;
border-radius: 10px;
box-shadow: 0 0 10px gray;
text-align: center;
.cart-container h2 {
color: #0077cc;
margin-bottom: 20px;
/* Table styling */
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
table, th, td {
border: 1px solid #ccc;
th {
background-color: #0077cc;
color: white;
padding: 10px;
td {
padding: 10px;
background-color: #f9f9f9;
input[type="number"] {
width: 60px;
text-align: center;
/* Cart summary */
.cart-summary {
text-align: right;
margin-top: 15px;
.cart-summary p {
font-size: 18px;
button {
background-color: #0077cc;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
button:hover {
background-color: #005fa3;
/* Footer */
footer {
text-align: center;
padding: 15px;
background-color: rgba(0, 0, 0, 0.8);
color: white;
position: fixed;
bottom: 0;
width: 100%;
font-size: 14px;
OUTPUT :
EXPERIMENT – 6
QUESTION: Registration Page: Create a “registration form” with some specific
fields.
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<title>Online Book Store - Registration</title>
<!-- Link to external CSS file -->
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>User Registration</h1>
<form>
<label>Full Name:</label><br>
<input type="text" name="fullname" required><br>
<label>Email:</label><br>
<input type="email" name="email" required><br>
<label>Username:</label><br>
<input type="text" name="username" required><br>
<label>Password:</label><br>
<input type="password" name="password" required><br>
<label>Confirm Password:</label><br>
<input type="password" name="confirmpassword" required><br>
<label>Gender:</label><br>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<input type="radio" name="gender" value="other"> Other
<br><br>
<label>Address:</label><br>
<textarea name="address" rows="4" cols="40"></textarea><br>
<label>Mobile Number:</label><br>
<input type="tel" name="mobile" pattern="[0-9]{10}" placeholder="10-digit
number"><br>
<input type="submit" value="Register">
<input type="reset" value="Clear">
</form>
<p>
Already have an account? <a href="[Link]">Login Here</a><br>
<a href="[Link]">Back to Home</a>
</p>
</body>
</html>
CSS CODE:
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
margin: 0;
padding: 0;
text-align: center;
h1 {
background-color: #0077cc;
color: white;
padding: 15px 0;
margin: 0 0 30px 0;
form {
background-color: white;
width: 400px;
margin: auto;
padding: 25px;
border-radius: 10px;
box-shadow: 0 0 10px gray;
text-align: left;
label {
font-weight: bold;
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
textarea {
width: 95%;
padding: 8px;
margin-top: 5px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 5px;
input[type="radio"] {
margin-right: 5px;
}
input[type="submit"],
input[type="reset"] {
background-color: #0077cc;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
margin-right: 10px;
input[type="submit"]:hover,
input[type="reset"]:hover {
background-color: #005fa3;
a{
color: #0077cc;
text-decoration: none;
a:hover {
text-decoration: underline;
p{
margin-top: 15px;
OUTPUT:
EXPERIMENT – 7
QUESTION: JS Validation: Write JavaScript to validate the
following fields of the above registration page, such as name
and password.
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<title>Registration Form Validation</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="container">
<h2>Registration Form</h2>
<form onsubmit="return validateForm()">
<label>Name:</label>
<input type="text" id="name">
<p id="nameError" class="error"></p>
<label>Password:</label>
<input type="password" id="password">
<p id="passError" class="error"></p>
<button type="submit">Submit</button>
</form>
</div>
<script src="[Link]"></script>
</body>
</html>
CSS CODE:
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
.container {
width: 350px;
margin: 40px auto;
padding: 20px;
background: white;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
input {
width: 100%;
padding: 8px;
margin: 8px 0;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
.error {
color: red;
font-size: 14px;
}
JS CODE:
function validateForm() {
let name = [Link]("name").[Link]();
let password = [Link]("password").[Link]();
let isValid = true;
// Reset error messages
[Link]("nameError").innerHTML = "";
[Link]("passError").innerHTML = "";
// Validate Name
if (name === "") {
[Link]("nameError").innerHTML = "Name cannot be empty";
isValid = false;
}
else if (!/^[A-Za-z ]+$/.test(name)) {
[Link]("nameError").innerHTML = "Name must contain only
alphabets";
isValid = false;
}
else if ([Link] < 3) {
[Link]("nameError").innerHTML = "Name should be at least 3
characters";
isValid = false;
}
// Validate Password
if (password === "") {
[Link]("passError").innerHTML = "Password cannot be empty";
isValid = false;
}
else if ([Link] < 6) {
[Link]("passError").innerHTML = "Password must be at least 6
characters long";
isValid = false;
}
else if (!/[0-9]/.test(password)) {
[Link]("passError").innerHTML = "Password must contain at
least one number";
isValid = false;
}
return isValid;
}
OUTPUT
EXPERIMENT – 8
QUESTION: JS Validation on email and phone number.
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<title>Email & Phone Validation</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="container">
<h2>Email & Phone Validation</h2>
<form onsubmit="return validateForm()">
<label>Email:</label>
<input type="text" id="email">
<p id="emailError" class="error"></p>
<label>Phone Number:</label>
<input type="text" id="phone">
<p id="phoneError" class="error"></p>
<button type="submit">Submit</button>
</form>
</div>
<script src="[Link]"></script>
</body>
</html>
CSS CODE:
body {
font-family: Arial, sans-serif;
background-color: #eef2f3;
}
.container {
width: 350px;
margin: 50px auto;
padding: 20px;
background: white;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
input {
width: 100%;
padding: 8px;
margin: 8px 0;
border-radius: 4px;
border: 1px solid #ccc;
}
button {
width: 100%;
padding: 10px;
background: #2196F3;
color: white;
border: none;
cursor: pointer;
border-radius: 4px;
}
button:hover {
background: #1976D2;
}
.error {
font-size: 14px;
color: red;
}
JS CODE:
body {
font-family: Arial, sans-serif;
background-color: #eef2f3;
}
.container {
width: 350px;
margin: 50px auto;
padding: 20px;
background: white;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
input {
width: 100%;
padding: 8px;
margin: 8px 0;
border-radius: 4px;
border: 1px solid #ccc;
}
button {
width: 100%;
padding: 10px;
background: #2196F3;
color: white;
border: none;
cursor: pointer;
border-radius: 4px;
}
button:hover {
background: #1976D2;
}
.error {
font-size: 14px;
color: red;
}
OUTPUT
EXPERIMENT – 9
QUESTION: CSS: Design a web page using CSS (Cascading Style Sheets) which
contains different font styles and background image.
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<title>CSS Fonts & Background Image</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="content">
<h1 class="heading">Welcome to Experiment 9</h1>
<p class="para1">
This paragraph uses the first font style. CSS helps in designing beautiful web pages.
</p>
<p class="para2">
This paragraph uses a different font. You can control size, color, weight, and
spacing.
</p>
<p class="para3">
This paragraph uses the third font. Using multiple fonts helps create visual
hierarchy.
</p>
</div>
</body>
</html>
CSS CODE:
body {
margin: 0;
padding: 0;
background-image:
url('[Link]
pid=Api&P=0&h=180');
background-size: cover;
background-position: center;
font-family: Arial, sans-serif;
.content {
background: rgba(255,255,255,0.85);
width: 70%;
margin: 80px auto;
padding: 25px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
.heading {
font-family: 'Georgia', serif;
font-size: 32px;
text-align: center;
color: #2c3e50;
.para1 {
font-family: 'Verdana', sans-serif;
font-size: 18px;
color: #444;
.para2 {
font-family: 'Courier New', monospace;
font-size: 18px;
color: #222;
.para3 {
font-family: 'Trebuchet MS', sans-serif;
font-size: 18px;
color: #333;
font-style: italic;
OUTPUT
EXPERIMENT – 10
QUESTION: CSS: For controlling the background image and different types of
style links.
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<title>Background & Hyperlink Styling</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="container">
<h1>Experiment 10</h1>
<h2>CSS for Background & Link Styling</h2>
<p>
This page demonstrates controlling the <b>background image</b>, formatting
text,
and applying CSS styles to <b>hyperlinks</b>.
</p>
<p>Click the links below:</p>
<ul>
<li><a href="[Link] target="_blank">Visit Google</a></li>
<li><a href="[Link] target="_blank">Visit Wikipedia</a></li>
<li><a href="[Link] target="_blank">Visit AKTU Website</a></li>
</ul>
</div>
</body>
</html>
CSS CODE
/* Background control */
body {
margin: 0;
font-family: Arial, sans-serif;
background-image: url("[Link]");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
/* Page formatting */
.container {
width: 70%;
margin: 60px auto;
background: rgba(255, 255, 255, 0.88);
padding: 25px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
h1 {
text-align: center;
color: #2c3e50;
}
h2 {
color: #34495e;
}
/* Link Styling (fly links) */
a{
text-decoration: none;
font-size: 18px;
color: #1e88e5;
font-weight: bold;
}
/* Hover effect */
a:hover {
color: #0d47a1;
text-decoration: underline;
}
/* Visited link */
a:visited {
color: #6a1b9a;
}
/* Active click effect */
a:active {
color: red;
}
OUTPUT:
Output After visting websites using links
EXPERIMENT – 11
QUESTION : “Consider a small topic of your own on which you can develop static web
pages and try to implement all concepts of HTML, CSS and JavaScript within the topic.
As your own portfolio, include: To-Do List, Survey Form, Tribute Page, and 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>Questionnaire - Experiment 11</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="container">
<h2>Simple Questionnaire</h2>
<p>Please answer the following questions:</p>
<form id="quizForm">
<label>1. What does HTML stand for?</label>
<input type="text" id="q1" required>
<label>2. Which language is used for styling webpages?</label>
<input type="text" id="q2" required>
<label>3. JavaScript is used for?</label>
<select id="q3" required>
<option value="">--Select--</option>
<option value="Styling">Styling</option>
<option value="Structure">Structure</option>
<option value="Interactivity">Interactivity</option>
</select>
<label>4. Write any two web browsers.</label>
<input type="text" id="q4" required>
<button type="button" onclick="submitQuiz()">Submit</button>
</form>
<div id="result"></div>
</div>
<script src="[Link]"></script>
</body>
</html>
CSS CODE:
body {
font-family: Arial, sans-serif;
background: #eef3ff;
margin: 0;
padding: 0;
}
.container {
width: 420px;
background: white;
margin: 50px auto;
padding: 25px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
h2 {
text-align: center;
color: #003cff;
}
label {
font-weight: bold;
margin-top: 15px;
display: block;
}
input, select {
width: 100%;
padding: 10px;
margin-top: 6px;
border: 1px solid #999;
border-radius: 5px;
}
button {
width: 100%;
background: #003cff;
color: white;
padding: 12px;
margin-top: 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background: #002bb8;
}
#result {
margin-top: 20px;
font-weight: bold;
color: green;
text-align: center;
}
JS CODE:
function submitQuiz() {
let q1 = [Link]("q1").[Link]();
let q2 = [Link]("q2").[Link]();
let q3 = [Link]("q3").[Link]();
let q4 = [Link]("q4").[Link]();
if (!q1 || !q2 || !q3 || !q4) {
alert("Please fill all questions.");
return;
}
[Link]("result").innerHTML = "Your responses have been
submitted successfully!";
}
OUTPUT (QUESTIONNAIRE)