Styles and Style sheet
4.
Create a webpage that displays the div element
with the following attributes.
. Font name: Verdana
. Font size: 20 pixels
. Color: red
. Align: center
Note: Use Inline style sheet
<!DOCTYPE html>
<html>
<head>
<title>Styled Div Example</title>
</head>
<body>
<div style="font-family: Verdana; font-size: 20px; color: red; text-align:
center;">
This is a styled div element.
</div>
</body>
</html>
Formatting with CSS
7.
Create a webpage that displays the div element
with the following text properties.
. Text color: Magenta
. Text alignment: right
. Text decoration: underline
. Text transform: uppercase
. Text indent: 60 pixels
HTML page using inline CSS
<!DOCTYPE html>
<html>
<head>
<title>Styled Text Div</title>
</head>
<body>
<div style="color: magenta; text-align: right; text-decoration: underline; text-
transform: uppercase; text-indent: 60px;">
This is a styled div element with text properties.
</div>
</body>
</html>
Links and list
3.
Create a webpage that displays the hyperlink with
the following background color properties.
. Set the background color as %FF0000 for unvisited
link
. Set the background color as %FFFF00 for visited
link
. Set the background color as %FF00FF for mouse
over link
. Set the background color as %0000FF for selected
link
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Background Colors</title>
<style>
/* Unvisited link */
a:link {
background-color: #FF0000; /* Red */
color: white;
padding: 5px;
text-decoration: none;
}
/* Visited link */
a:visited {
background-color: #FFFF00; /* Yellow */
color: black;
}
/* Mouse over link */
a:hover {
background-color: #FF00FF; /* Magenta */
color: white;
}
/* Selected/active link */
a:active {
background-color: #0000FF; /* Blue */
color: white;
}
</style>
</head>
<body>
<h2>Styled Hyperlink Example</h2>
<a href="https://www.example.com" target="_blank">Visit Example.com</a>
</body>
</html>
5.
Create a webpage that displays a list as an
unordered list with the following properties.
. List-style-type: square;
. Text align: left
. Color: red
. Text transform: uppercase
. Text decoration: underline
. Font name: Arial
. Font size: 25pixels
. Font weight: bold
HTML inline CSS
<!DOCTYPE html>
<html>
<head>
<title>Styled Unordered List</title>
</head>
<body>
<ul style="list-style-type: square; text-align: left; color: red; text-transform:
uppercase;
text-decoration: underline; font-family: Arial; font-size: 25px; font-
weight: bold;">
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
<li>Date</li>
</ul>
</body>
</html>
CSS BOX model
5.
Create a webpage that displays four paragraphs
with the following padding properties.
. Set the left padding as 3cm for first paragraph
. Set the right padding as 50% for second paragraph
. Set the bottom padding as 25% for third paragraph
. Set the top padding as 25% for fourth paragraph
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Padding Example</title>
</head>
<body>
<p style="padding-left: 3cm; border: 1px solid black;">
This is the first paragraph with left padding of 3cm.
</p>
<p style="padding-right: 50%; border: 1px solid black;">
This is the second paragraph with right padding of 50%.
</p>
<p style="padding-bottom: 25%; border: 1px solid black;">
This is the third paragraph with bottom padding of 25%.
</p>
<p style="padding-top: 25%; border: 1px solid black;">
This is the fourth paragraph with top padding of 25%.
</p>
</body>
</html>
CSS3
3.
Create a webpage that displays a white text with
black shadow.
<!DOCTYPE html>
<html>
<head>
<title>Text Shadow Example</title>
</head>
<body style="background-color: gray;">
<h2 style="color: white; text-shadow: 2px 2px 4px black;">
This is white text with black shadow
</h2>
</body>
</html>
8.
Create a webpage that displays the div element
with the following properties.
· Skews the
element 20 degrees along the X-axis, and 10
degrees along the Y-axis
. Set the background color as yellow
. Set the border as 1pixels solid black
· Set the width as 200pixels
. Set the height as 100 pixels
<!DOCTYPE html>
<html>
<head>
<title>Skewed Div Example</title>
</head>
<body>
<div style="
width: 200px;
height: 100px;
background-color: yellow;
border: 1px solid black;
transform: skew(20deg, 10deg);
">
Skewed Div Element
</div>
</body>
</html>
Introduction to JavaScript and its basics
3.
Write a JavaScript function that checks whether a
passed string is palindrome or not?
<!DOCTYPE html>
<html>
<head>
<title>Palindrome Checker</title>
<script>
function isPalindrome(str) {
// Remove spaces and convert to lowercase for uniformity
str = str.replace(/\s+/g, '').toLowerCase();
// Reverse the string
let reversed = str.split('').reverse().join('');
// Compare original and reversed
if (str === reversed) {
return true;
} else {
return false;
}
}
// Function to test palindrome
function checkPalindrome() {
let input = document.getElementById('inputString').value;
let result = isPalindrome(input);
if (result) {
alert(`"${input}" is a palindrome.`);
} else {
alert(`"${input}" is NOT a palindrome.`);
}
}
</script>
</head>
<body>
<h2>Palindrome Checker</h2>
<input type="text" id="inputString" placeholder="Enter a string">
<button onclick="checkPalindrome()">Check</button>
</body>
</html>
JavaScript objects
4.
Create an HTML page with two textboxes and a
Calculate button:
When user enters the numbers and clicks the
Calculate button, it has to alert the sum.
<!DOCTYPE html>
<html>
<head>
<title>Sum Calculator</title>
<script>
function calculateSum() {
// Get values from textboxes
let num1 = document.getElementById('num1').value;
let num2 = document.getElementById('num2').value;
// Convert to numbers
let sum = parseFloat(num1) + parseFloat(num2);
// Show alert
alert("The sum is: " + sum);
}
</script>
</head>
<body>
<h2>Sum Calculator</h2>
<label for="num1">Number 1:</label>
<input type="text" id="num1"><br><br>
<label for="num2">Number 2:</label>
<input type="text" id="num2"><br><br>
<button onclick="calculateSum()">Calculate</button>
</body>
</html>
6.
Create a HTML page with 4 hyperlinks named white,
red, blue and pink.
The background colour of the HTML page will change
based on the link which is clicked.
Write a javascript function to implement it.
<!DOCTYPE html>
<html>
<head>
<title>Background Color Changer</title>
<script>
// Function to change background color
function changeBackground(color) {
document.body.style.backgroundColor = color;
}
</script>
</head>
<body>
<h2>Click a link to change background color:</h2>
<a href="#" onclick="changeBackground('white')">White</a> |
<a href="#" onclick="changeBackground('red')">Red</a> |
<a href="#" onclick="changeBackground('blue')">Blue</a> |
<a href="#" onclick="changeBackground('pink')">Pink</a>
</body>
</html>
9.
Create program to display current time in a
textbox (HH:MM:SS) such that the value in the time
textbox is dynamic (Time should get updated every
second) and not static.
[Hint: Use setTimeOut function]
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Clock</title>
<script>
function updateTime() {
const now = new Date();
// Get hours, minutes, seconds
let hours = now.getHours();
let minutes = now.getMinutes();
let seconds = now.getSeconds();
// Add leading zeros if needed
hours = hours < 10 ? "0" + hours : hours;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
// Set time in textbox
document.getElementById('timeBox').value = hours + ":" + minutes + ":"
+ seconds;
// Update every second
setTimeout(updateTime, 1000);
}
// Start clock when page loads
window.onload = updateTime;
</script>
</head>
<body>
<h2>Current Time</h2>
<input type="text" id="timeBox" readonly>
</body>
</html>
JavaScript validation
1.
Write validation functions and modify the onSubmit
event Handler in the form code to validate the
following form fields:
1. Member number
. Must be entered
. Must be a number
2. Password
. Must be entered
. Must be longer than 4 characters
If an error occurs, use an alert box to display an
error message for the first field in error and
place the cursor in the first field in error.
<!DOCTYPE html>
<html>
<head>
<title>Form Validation Example</title>
<script>
function validateForm() {
// Get form field values
const memberNumber =
document.getElementById('memberNumber').value.trim();
const password = document.getElementById('password').value.trim();
// Validate Member Number
if (memberNumber === "") {
alert("Member number must be entered.");
document.getElementById('memberNumber').focus();
return false; // Prevent form submission
}
if (isNaN(memberNumber)) {
alert("Member number must be a number.");
document.getElementById('memberNumber').focus();
return false;
}
// Validate Password
if (password === "") {
alert("Password must be entered.");
document.getElementById('password').focus();
return false;
}
if (password.length <= 4) {
alert("Password must be longer than 4 characters.");
document.getElementById('password').focus();
return false;
}
// All validations passed
return true;
}
</script>
</head>
<body>
<h2>Member Login Form</h2>
<form onsubmit="return validateForm();">
<label for="memberNumber">Member Number:</label>
<input type="text" id="memberNumber" name="memberNumber"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Login">
</form>
</body>
</html>
JavaScript regular expression
3.
Write a validation function to check a password
between 6 to 20 characters which contain at least
one numeric digit, one uppercase and one lowercase
letter
<!DOCTYPE html>
<html>
<head>
<title>Password Validation</title>
<script>
function validatePassword() {
const password = document.getElementById('password').value;
// Regular expression:
// ^ : start of string
// (?=.*\d) : at least one digit
// (?=.*[a-z]) : at least one lowercase letter
// (?=.*[A-Z]) : at least one uppercase letter
// .{6,20} : between 6 and 20 characters
// $ : end of string
const regex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$/;
if (regex.test(password)) {
alert("Password is valid.");
return true;
} else {
alert("Password must be 6-20 characters long and include at least
one numeric digit, one uppercase letter, and one lowercase letter.");
document.getElementById('password').focus();
return false;
}
}
</script>
</head>
<body>
<h2>Password Validation Form</h2>
<form onsubmit="return validatePassword();">
<label for="password">Enter Password:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Validate">
</form>
</body>
</html>
Introduction to bootstrap
3.
Create a OldLook.html web page in the current
project with the following content
Tags - Contents
H1 - Welcome to my page
P - this is a trial for bootstrap
Table
TR
TH - col1
TH - col2
TR
TD - data1
TD - data2
TR
TD - data3
TD - data4
OldLook.html
<!DOCTYPE html>
<html>
<head>
<title>OldLook Page</title>
<!-- You can include Bootstrap if desired -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-4">
<!-- Heading -->
<h1>Welcome to my page</h1>
<!-- Paragraph -->
<p>This is a trial for bootstrap</p>
<!-- Table -->
<table class="table table-bordered mt-3">
<thead>
<tr>
<th>col1</th>
<th>col2</th>
</tr>
</thead>
<tbody>
<tr>
<td>data1</td>
<td>data2</td>
</tr>
<tr>
<td>data3</td>
<td>data4</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Front end framework
5.
Create a webpage called OnlineRead with give look
and feel
Page should display Book Types as buttons with
given background effect:
For All - white
Kids - bark blue
Teens - Green
Scientific - Light Blue
Crime - OrangeHorror - red
Feedback - shown
In next line display the comfort font size with
buttons of varying sizes ranging from big to small
(in 4 steps)
OnlineRead.html
<!DOCTYPE html>
<html>
<head>
<title>OnlineRead</title>
<style>
/* Book type button styles */
.btn {
padding: 10px 20px;
margin: 5px;
border: none;
color: white;
cursor: pointer;
font-family: Arial, sans-serif;
}
.all { background-color: white; color: black; }
.kids { background-color: darkblue; }
.teens { background-color: green; }
.scientific { background-color: lightblue; color: black; }
.crime { background-color: orange; }
.horror { background-color: red; }
.feedback { background-color: gray; }
/* Comfort font size buttons */
.font-btn {
margin: 5px;
padding: 8px 16px;
cursor: pointer;
}
.big { font-size: 24px; }
.medium { font-size: 20px; }
.small { font-size: 16px; }
.smaller { font-size: 12px; }
</style>
</head>
<body>
<h2>Book Types</h2>
<!-- Book type buttons -->
<button class="btn all">All</button>
<button class="btn kids">Kids</button>
<button class="btn teens">Teens</button>
<button class="btn scientific">Scientific</button>
<button class="btn crime">Crime</button>
<button class="btn horror">Horror</button>
<button class="btn feedback">Feedback</button>
<br><br>
<h2>Comfort Font Sizes</h2>
<!-- Font size buttons -->
<button class="font-btn big">Big</button>
<button class="font-btn medium">Medium</button>
<button class="font-btn small">Small</button>
<button class="font-btn smaller">Smaller</button>
</body>
</html>
Bootstrap grid system
1.
Create a webpage with 4 grid sections containing
Contents of some 10 lines. Ensure the grid alters
itself as the browser is resized.
<!DOCTYPE html>
<html>
<head>
<title>Responsive Grid Example</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
box-sizing: border-box;
}
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.grid-item {
background-color: #f2f2f2;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
h3 {
margin-top: 0;
}
</style>
</head>
<body>
<h2>Responsive 4-Section Grid</h2>
<div class="grid-container">
<div class="grid-item">
<h3>Section 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Curabitur sit amet mauris vitae nulla tincidunt.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus.</p>
<p>Integer eu ligula nec metus scelerisque sollicitudin.</p>
<p>Praesent a lorem ac urna malesuada feugiat.</p>
<p>Nulla facilisi.</p>
<p>Maecenas tempor risus sit amet eros vulputate.</p>
<p>Fusce non dui at sapien bibendum dictum.</p>
<p>Aliquam erat volutpat.</p>
<p>Sed at velit nec sapien venenatis.</p>
</div>
<div class="grid-item">
<h3>Section 2</h3>
<p>Curabitur in libero id urna vehicula consequat.</p>
<p>Praesent ac nisi ut sapien blandit convallis.</p>
<p>Fusce eget metus nec justo pretium ultricies.</p>
<p>Morbi eget augue nec purus lacinia.</p>
<p>Integer ut sapien vitae nisl bibendum.</p>
<p>Sed tincidunt felis a eros sollicitudin.</p>
<p>Nulla sed sapien ac purus dignissim.</p>
<p>Aliquam id justo non magna consectetur.</p>
<p>Vestibulum eget augue non lectus suscipit.</p>
<p>Donec vel arcu in leo commodo.</p>
</div>
<div class="grid-item">
<h3>Section 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Curabitur sit amet mauris vitae nulla tincidunt.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus.</p>
<p>Integer eu ligula nec metus scelerisque sollicitudin.</p>
<p>Praesent a lorem ac urna malesuada feugiat.</p>
<p>Nulla facilisi.</p>
<p>Maecenas tempor risus sit amet eros vulputate.</p>
<p>Fusce non dui at sapien bibendum dictum.</p>
<p>Aliquam erat volutpat.</p>
<p>Sed at velit nec sapien venenatis.</p>
</div>
<div class="grid-item">
<h3>Section 4</h3>
<p>Curabitur in libero id urna vehicula consequat.</p>
<p>Praesent ac nisi ut sapien blandit convallis.</p>
<p>Fusce eget metus nec justo pretium ultricies.</p>
<p>Morbi eget augue nec purus lacinia.</p>
<p>Integer ut sapien vitae nisl bibendum.</p>
<p>Sed tincidunt felis a eros sollicitudin.</p>
<p>Nulla sed sapien ac purus dignissim.</p>
<p>Aliquam id justo non magna consectetur.</p>
<p>Vestibulum eget augue non lectus suscipit.</p>
<p>Donec vel arcu in leo commodo.</p>
</div>
</div>
</body>
</html>
