0% found this document useful (0 votes)

11 views59 pages

FSD Lab

The document outlines various HTML and CSS experiments, including creating lists, hyperlinks, images, tables, forms, and frames. It demonstrates the use of HTML5 semantic tags, audio/video embedding, and different CSS styles and selectors. Each section includes aims, code examples, and expected outputs for better understanding and practical application.

Uploaded by

kdsiddu7

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

11 views59 pages

FSD Lab

Uploaded by

kdsiddu7

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 59

Experiment 1: Lists, Links, and Images

1a.Working with Lists in HTML

Aim: To create an HTML document that demonstrates ordered lists,

unordered lists, nested lists, and definition lists.

<!DOCTYPE html>
<html>
<head>
<title>Lists in HTML</title>
</head>
<body>
<h2>Ordered List</h2>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

<h2>Unordered List</h2>
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>

<h2>Nested List</h2>
<ul>
<li>Fruits
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Carrot</li>
<li>Broccoli</li>
</ul>
</li>
</ul>

<h2>Definition List</h2>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
</body>
</html>
Output:-

Ordered List

1. Item 1
2. Item 2
3. Item 3

Unordered List

 Item A
 Item B
 Item C

Nested List

 Fruits

o Apple
o Banana
 Vegetables

o Carrot
o Broccoli

Definition List

 HTML: HyperText Markup Language

 CSS: Cascading Style Sheets
b. Working with Hyperlinks in HTML

Aim: To create an HTML document that demonstrates the use of

hyperlinks using the <a> tag with href and target attributes.

<!DOCTYPE html>
<html>
<head>
<title>Hyperlinks in HTML</title>
</head>
<body>
<h2>Links with Target Attribute</h2>
<a href="https://www.google.com" target="_blank">Open Google in
New Tab</a>
<br>
<a href="https://www.wikipedia.org" target="_self">Open Wikipedia
in Same Tab</a>
</body>
</html>

Output:-

Links with Target Attribute

Open Google in New Tab
Open Wikipedia in Same Tab

c. Displaying Images with Links

Aim: To create an HTML document that displays images of the user and

<!DOCTYPE html>
<html>
<head>
<title>Image Links</title>
</head>
<body>
<h2>Profile Images with Links</h2>
<a href="https://www.example.com/myprofile" target="_blank">
<img src="myimage.jpg" alt="My Image" width="200"
height="200">
</a>
<a href="https://www.example.com/friendprofile" target="_blank">
<img src="friendimage.jpg" alt="Friend's Image" width="200"
height="200">
</a>
</body>
</html>
Output:-
https://www.example.com/myprofile

d. Creating an Image Gallery using Thumbnails

Aim :To create an image gallery using thumbnail images that link to full-sized
versions.

<!DOCTYPE html>
<html>
<head>
<title>Image Gallery</title>
</head>
<body>
<h2>Thumbnail Image Gallery</h2>
<a href="fullsize1.jpg" target="_blank">
<img src="thumb1.jpg" alt="Image 1" width="100" height="100">
</a>
<a href="fullsize2.jpg" target="_blank">
<img src="thumb2.jpg" alt="Image 2" width="100" height="100">
</a>
<a href="fullsize3.jpg" target="_blank">
<img src="thumb3.jpg" alt="Image 3" width="100" height="100">
</a>
</body>
</html>
Output:-
Experiment 2: HTML Tables, Forms and Frames

a. HTML Program to Explain the Working of Tables

Aim: To understand how to work with tables and use tags such as <table>, <tr>,
<th>, <td>, and attributes like border, rowspan, and colspan.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>HTML Tables Example</title>
</head>
<body>
<h2>HTML Table Example</h2>
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Mary</td>
<td>22</td>
<td>Los Angeles</td>
</tr>
<tr>
<td colspan="2">Total</td>
<td>2</td>
</tr>
</table>
</body>
</html>

Output:-

HTML Table Example

Name Age City
John 25 New York
Mary 22 Los Angeles
Total 2
b. HTML Program to Explain the Working of Tables with
Timetable

Aim: To create a timetable using tables, utilizing tags like <caption>, and attributes
such as cellspacing, cellpadding, border, rowspan, colspan.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Timetable Example</title>
</head>
<body>
<h2>Weekly Timetable</h2>
<table border="1" cellspacing="0" cellpadding="10">
<caption>Class Timetable</caption>
<tr>
<th>Day</th>
<th>8:00 AM - 9:00 AM</th>
<th>9:00 AM - 10:00 AM</th>
<th>10:00 AM - 11:00 AM</th>
</tr>
<tr>
<td>Monday</td>
<td>Math</td>
<td>English</td>
<td rowspan="2">Break</td>
</tr>
<tr>
<td>Tuesday</td>
<td>Science</td>
<td>History</td>
</tr>
<tr>
<td>Wednesday</td>
<td>Art</td>
<td>Physical Education</td>
<td>Music</td>
</tr>
</table>
</body>
</html>
Output:-

Weekly Timetable

Class Timetable

8:00 AM - 9:00 9:00 AM - 10:00 10:00 AM - 11:00

Day
AM AM AM

Monday Math English

Break
Tuesday Science History

Physical
Wednesday Art Music
Education

c. HTML Program to Design a Registration Form

Aim: To design a registration form with various input fields (text, password, number,
date, checkboxes, radio buttons, list boxes) using tables for layout.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Registration Form</title>
</head>
<body>
<h2>Registration Form</h2>
<form action="#" method="post">
<table border="0">
<tr>
<td>Name:</td>
<td><input type="text" name="name" required></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="password"
required></td>
</tr>
<tr>
<td>Age:</td>
<td><input type="number" name="age" required></td>
</tr>
<tr>
<td>Date of Birth:</td>
<td><input type="date" name="dob" required></td>
</tr>
<tr>
<td>Gender:</td>
<td>
<input type="radio" name="gender" value="Male">
Male
<input type="radio" name="gender" value="Female">
Female
</td>
</tr>
<tr>
<td>Hobbies:</td>
<td>
<input type="checkbox" name="hobbies"
value="Reading"> Reading
<input type="checkbox" name="hobbies"
value="Traveling"> Traveling
</td>
</tr>
<tr>
<td>Country:</td>
<td>
<select name="country">
<option value="USA">USA</option>
<option value="India">India</option>
<option value="UK">UK</option>
</select>
</td>
</tr>
<tr>
<td>Comments:</td>
<td><textarea name="comments" rows="4"
cols="50"></textarea></td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</td>
</tr>
</table>
</form>
</body>
</html>
Output:-

d. HTML Program to Explain the Working of Frames

Aim: To divide the page into 3 frames with different content such as an image,
paragraph, and hyperlink, and to use the "no frame" attribute to ensure fixed frames.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Frames Example</title>
</head>
<body>
<h2>HTML Frames Example</h2>
<frameset rows="30%, 40%, 30%">
<frame src="image.jpg" />
<frame src="paragraph.html" />
<frame src="link.html" />
</frameset>
<noframes>
<p>Your browser does not support frames. Please update your
browser.</p>
</noframes>
</body>
</html>
Output (If Files Exist)

The first frame will display image.jpg.

1. If the image exists, it will be shown.

2. If not, a broken image icon will appear.

The second frame will load paragraph.html

1. This should contain a paragraph of text.

The third frame will load link.html.

1. This should contain hyperlinks.

Experiment 3:. HTML 5 and Cascading Style Sheets, Types of CSS

a. HTML Program Using <article>, <aside>, <figure>, <figcaption>, <footer>, <header>,

<main>, <nav>, <section>, <div>, and <span> Tags

Aim: To demonstrate the use of various HTML5 semantic tags for structuring the web
page content.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>HTML5 Semantic Tags</title>
</head>
<body>
<header>
<h1>Website Header</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>

<main>
<section>
<h2>Main Content Section</h2>
<article>
<h3>Article Title</h3>
<p>This is the main content of the article.</p>
</article>
<aside>
<h4>Related Information</h4>
<p>Here is some additional information related to the
article.</p>
</aside>
</section>
</main>

<footer>
<p>Website Footer Information © 2025</p>
</footer>

<div>
<h2>Another Section Inside a div</h2>
<p>This is wrapped in a div tag for layout purposes.</p>
<span>This is a span tag, typically used for styling specific
text.</span>
</div>

<figure>
<img src="image.jpg" alt="Example Image">
<figcaption>Example Image Caption</figcaption>
</figure>
</body>
</html>

Output:-

b. HTML Program to Embed Audio and Video

Aim: To demonstrate how to embed audio and video elements using HTML5.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Audio and Video Embedding</title>
</head>
<body>
<h2>Audio and Video Example</h2>

<h3>Audio Player</h3>
<audio controls>
<source src="audio.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>

<h3>Video Player</h3>
<video controls width="600">
<source src="video.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
</body>
</html>

Output:-

c. Program to Apply Inline, Internal, and External CSS Styles

Aim: To demonstrate how to apply different types of CSS (inline, internal, and
external) to HTML elements.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>CSS Types Example</title>

<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is an H1 Header</h1>
<p class="highlight">This is a paragraph with internal CSS
applied for the background color and font weight.</p>

<p style="color: red; font-size: 18px;">This is a paragraph with
inline CSS.</p>

<div>
<h2>This is a Heading Inside a Div</h2>
<p>This paragraph is styled using external CSS (if the file
`styles.css` exists).</p>
</div>
</body>
</html>

Output:-
Experiment 4: Selector forms

a. Program to Apply Different Types of Selector Forms

Aim: To demonstrate how to use various CSS selectors, including simple selectors,
combinator selectors, pseudo-classes, pseudo-elements, and attribute selectors.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>CSS Selectors Example</title>

/* ID Selector */
#unique {
font-size: 24px;
font-weight: bold;
}

/* Class Selector */
.highlight {
background-color: yellow;
}

/* Group Selector */
h2, h3 {
color: green;
}

/* Universal Selector */
* {
font-family: Arial, sans-serif;
}

/* Combinator Selectors */
/* Descendant Selector */
article p {
color: purple;
}

/* Child Selector */
section > p {
font-style: italic;
}

/* Adjacent Sibling Selector */

h1 + p {
color: red;
}
/* General Sibling Selector */
h2 ~ p {
color: orange;
}

/* Pseudo-class Selector */
/* :hover */
a:hover {
color: red;
}

/* :nth-child */
ul li:nth-child(2) {
font-weight: bold;
}

/* Pseudo-element Selector */
/* ::before */
p::before {
content: "Note: ";
font-weight: bold;
color: red;
}

/* ::after */
p::after {
content: " [End of paragraph]";
font-style: italic;
}

/* Attribute Selector */
/* Selecting all anchor tags with a specific href attribute
*/
a[href^="https"] {
color: green;
}
</style>
</head>
<body>
<h1 id="unique">Simple CSS Selectors Example</h1>
<p class="highlight">This is a paragraph with a class selector
applied.</p>

<section>
<p>This paragraph is selected using the child selector.</p>
</section>

<article>
<p>This paragraph is selected using the descendant
selector.</p>
</article>

<h2>Combinator Selectors</h2>
<p>This is a paragraph following an h1 tag and selected by the
adjacent sibling selector.</p>
<h3>General Sibling Selector Example</h3>
<p>This paragraph is a sibling of the h2 element and selected by
the general sibling selector.</p>

<a href="https://www.example.com">This is a link with an

attribute selector applied.</a>
<ul>
<li>First item</li>
<li>Second item (bold)</li>
<li>Third item</li>
</ul>

<p>Hover over this text to change its color.</p>

</body>
</html>

Output:-
Experiment5. CSS with Color, Background, Font, Text and CSS Box
Model

a. Demonstrating Various Ways to Reference Color in CSS

Aim: To showcase different ways to define colors in CSS.

<!DOCTYPE html>

<head>

/* Hexadecimal */
.hex-color {
background-color: #ff5733;
}

/* RGB */
.rgb-color {
background-color: rgb(60, 179, 113);
}

/* RGBA */
.rgba-color {
background-color: rgba(255, 0, 0, 0.5);
}

/* HSL */
.hsl-color {
background-color: hsl(240, 100%, 50%);
}

/* HSLA */
.hsla-color {
background-color: hsla(120, 100%, 50%, 0.7);
}

div {
width: 200px;
height: 50px;
margin: 10px;
color: white;
text-align: center;
line-height: 50px;
}
</style></head><body>
<div class="named-color">Named Color</div>
<div class="hex-color">Hex Color</div>
<div class="rgb-color">RGB Color</div>
<div class="rgba-color">RGBA Color</div>
<div class="hsl-color">HSL Color</div>
<div class="hsla-color">HSLA Color</div></body></html>

Output:-
b. Background Image Fixed and Positioned
Halfway
Aim: To position a background image halfway down the page while keeping it fixed
when scrolling.

<!DOCTYPE html><html lang="en"><head>

<!DOCTYPE html><html lang="en"><head>

.font-weight {
font-weight: bold;
}

.font-style {
font-style: italic;
}

.text-decoration {
text-decoration: underline;
}

.text-transform {
text-transform: uppercase;
}

.text-align {
text-align: center;
}
</style></head><body>
<p class="font-size">This text has a font size of 24px.</p>
<p class="font-weight">This text is bold.</p>
<p class="font-style">This text is italic.</p>
<p class="text-decoration">This text is underlined.</p>
<p class="text-transform">This text is uppercase.</p>
<p class="text-align">This text is centered.</p></body></html>
Output:-

This text has a font size of 24px.

This text is bold.

This text is italic.

This text is underlined.

THIS TEXT IS UPPERCASE.

This text is centered.

d. CSS Box Model Demonstration

Aim: To explain the CSS box model using content, padding, border, and margin.

<!DOCTYPE html><html lang="en"><head>

a. Embed Internal and External JavaScript

Aim: To demonstrate both internal and external JavaScript in an HTML page.

Internal and External JavaScript in HTML

<!DOCTYPE html><html lang="en"><head>

Output:-
b. Different Ways to Display Output
Aim: To demonstrate various methods to display output in JavaScript.

<!DOCTYPE html><html lang="en"><head>

// 2. Using console.log()
console.log("This is displayed in the console.");

// 3. Using document.write()
document.write("<p>This is displayed using
document.write().</p>");

// 4. Using innerHTML
document.getElementById("output").innerHTML = "This is
displayed using innerHTML.";

</script></body></html>

Output:-
c. Different Ways to Take Input
Aim: To demonstrate various methods for getting input in JavaScript.

<!DOCTYPE html><html lang="en"><head>

<label for="textInput">Enter something:</label>

<input type="text" id="textInput">
<button onclick="getInput()">Submit</button>

// 2. Using input field

var inputValue =
document.getElementById("textInput").value;
document.getElementById("displayInput").innerHTML = "You
entered (input field): " + inputValue;
}
</script></body></html>

Output:-
d. Voter Eligibility Check
Aim: To create a webpage that asks for a voter's name and age using prompt(), then
displays their eligibility in a table.

<!DOCTYPE html><html lang="en"><head>

<h1>Voter Eligibility Check</h1>

<button onclick="checkVoter()">Check Eligibility</button>

// Convert age to a number

age = parseInt(age);
// Determine voter eligibility
var eligibility = (age >= 18) ? "Eligible to Vote" : "Not
Eligible to Vote";
// Display results in a table
var output = `
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Eligibility</th>
</tr>
<tr>
<td>${name}</td>
<td>${age}</td>
<td>${eligibility}</td>
</tr>
</table>
`;
document.getElementById("voterInfo").innerHTML = output;
}
</script>
</body></html>

Output:-

Voter Eligibility Check

Check Eligibility

Name Age Eligibility

ybmathi 19 Eligible to Vote

Experiment 7: Java Script Pre-defined and User-defined Objects

a. Document Object Properties and Methods

Aim: To demonstrate document object properties ( title, URL) and methods
(getElementById(), write()).

<!DOCTYPE html><html lang="en"><head>

function changeTitle() {
document.title = "New Title Set!";
document.write("<h2>Page Title Changed</h2>");
}
</script></body></html>

Output:-

b. Window Object Properties and Methods

Aim: To demonstrate window object methods (alert(), confirm(), prompt(),
open(), close()).

<!DOCTYPE html><html lang="en"><head>

function showPrompt() {
var name = prompt("Enter your name:");
alert("Hello, " + name);
}

function openWindow() {
window.open("https://www.google.com", "_blank",
"width=600,height=400");
}
</script></body></html>

Output:-

c. Array Object Properties and Methods

Aim: To demonstrate array methods like push(), pop(), sort(), join().

<!DOCTYPE html><html lang="en"><head>

document.write("Array after operations: " + fruits.join(",

"));
</script></body></html>
Output:-

d. Math Object Properties and Methods

Aim: To demonstrate Math object methods (random(), ceil(), floor(), sqrt(),
pow()).

<!DOCTYPE html><html lang="en"><head>

Output:-
e. String Object Properties and Methods
Aim: To demonstrate string methods like length, toUpperCase(), substring().

<!DOCTYPE html><html lang="en"><head>

Output:-

f. Regular Expressions (RegEx)

Aim: To demonstrate RegEx using test() and match().

<!DOCTYPE html><html lang="en"><head>

Output:-
Match Found: true
g. Date Object Properties and Methods
Aim: To demonstrate Date object methods.

<!DOCTYPE html><html lang="en"><head>

Output:-
Today's Date: Thu Feb 20 2025
Current Time: 3:30:59 PM

h. User-Defined Object
Aim: To create a user-defined object with properties, methods, and constructor.

<!DOCTYPE html><html lang="en"><head>

var person1 = new Person("Hema", 25);

document.write(person1.display());
</script></body></html>
Output:-

Name: Hema, Age: 25Name: Hema, Age: 25

Experiment 8:Java Script Conditional Statements and Loops

a. Find the Largest Number or Check for

Equality
Aim: To take three integers from the user and determine the largest number or check
if they are equal.

<!DOCTYPE html><html lang="en"><head>

if (num1 === num2 && num2 === num3) {

document.write("<h2>EQUAL NUMBERS</h2>");
} else {
let largest = Math.max(num1, num2, num3);
document.write(`<h2>${largest} - LARGER NUMBER</h2>`);
}
</script></body></html>

Output:-

User enters 87, 18, 555

555 LARGER NUMBER

b. Display Weekdays Using Switch Case

Aim: To display the day of the week based on user input.

<!DOCTYPE html><html lang="en"><head>

document.write(`<h2>Day: ${dayName}</h2>`);
</script></body></html>

Output Scenarios:

 If the user enters 1, the output will be:

Day: Sunday
 If the user enters 2, the output will be:
Day: Monday
 If the user enters 3, the output will be:
Day: Tuesday
 If the user enters 4, the output will be:
Day: Wednesday
 If the user enters 5, the output will be:
Day: Thursday
 If the user enters 6, the output will be:
Day: Friday
 If the user enters 7, the output will be:
Day: Saturday
 If the user enters any other number (e.g., 8, -1, 0, "hello"), the output will be:
Day: Invalid input!

c. Print 1 to 10 Using For, While, and Do-

While Loops
Aim: To print numbers from 1 to 10 using different loop structures.

<!DOCTYPE html><html lang="en"><head>

Output:-
Using For Loop:

1 2 3 4 5 6 7 8 9 10

Using While Loop:

1 2 3 4 5 6 7 8 9 10

Using Do-While Loop:

1 2 3 4 5 6 7 8 9 10

d. Print Data in Object Using for-in, for-

each, and for-of Loops
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Looping through Object</title></head><body>
<script>
let person = {name: "Alice", age: 25, city: "New York"};

document.write("<h3>Using for-in Loop:</h3>");

for (let key in person) {
document.write(`${key}: ${person[key]}<br>`);
}

document.write("<h3>Using forEach Loop:</h3>");

let arr = ["Apple", "Banana", "Cherry"];
arr.forEach(fruit => document.write(fruit + "<br>"));

document.write("<h3>Using for-of Loop:</h3>");

for (let fruit of arr) {
document.write(fruit + "<br>");
}
</script></body></html>
Output:-

e. Check for Armstrong Number

Aim: To determine if a number is an Armstrong number.

<!DOCTYPE html><html lang="en"><head>

if (sum === num) {

document.write(`<h2>${num} is an Armstrong Number</h2>`);
} else {
document.write(`<h2>${num} is NOT an Armstrong
Number</h2>`);
}
</script></body></html>

Output:-

Example 1: Input → 153

13+53+33=1+125+27=153

153 is an Armstrong Number

f. Display Bank Denomination Breakdown

Aim: To display the breakdown of a bank amount into currency notes.

<!DOCTYPE html><html lang="en"><head>

for (let note of denominations) {

if (amount >= note) {
result[note] = Math.floor(amount / note);
amount = amount % note;
}
}

document.write("<h2>Denomination Breakdown:</h2>");
for (let key in result) {
document.write(`${result[key]} x Rs.${key}<br>`);
}
</script></body></html>

Output:-

Input → 786

Breakdown:

7 x Rs.100
1 x Rs.50
1 x Rs.20
1 x Rs.10
1 x Rs.5
1 x Rs.1

Experiment 9:Java Script Functions and Events

a. JavaScript Functions for Factorial,

Fibonacci, Prime Numbers, and Palindrome
Aim: To create functions to calculate factorial, Fibonacci series, prime numbers, and
palindrome check.

<!DOCTYPE html><html lang="en"><head>

// Function to generate Fibonacci series up to n

function fibonacci(n) {
let series = [0, 1];
for (let i = 2; i < n; i++) {
series[i] = series[i - 1] + series[i - 2];
}
return series;
}

// Function to check prime numbers up to n

// Function to check if a number is palindrome

function isPalindrome(n) {
let str = n.toString();
return str === str.split('').reverse().join('');
}

// Example Usage
let num = parseInt(prompt("Enter a number:"));
document.write(`<h3>Factorial of ${num}:
${factorial(num)}</h3>`);
document.write(`<h3>Fibonacci Series: ${fibonacci(num).join(',
')}</h3>`);
document.write(`<h3>Prime Numbers up to ${num}:
${primeNumbers(num).join(', ')}</h3>`);
document.write(`<h3>${num} is ${isPalindrome(num) ? '' :
'not'} a Palindrome</h3>`);
</script></body></html>

b. Interactive HTML Form with Buttons

Aim: To create an interactive webpage with buttons to trigger JavaScript functions.
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Function Calculator</title></head><body>
<h2>Enter a Number:</h2>
<input type="number" id="numInput">
<button onclick="displayFactorial()">Factorial</button>
<button onclick="displayFibonacci()">Fibonacci</button>
<button onclick="displayPrimes()">Prime Numbers</button>
<button onclick="displayPalindrome()">Palindrome</button>

<h3>Result:</h3>
<p id="result"></p>

function displayFactorial() {
let num = getNumber();
document.getElementById("result").innerHTML = `Factorial:
${factorial(num)}`;
}

function displayFibonacci() {
let num = getNumber();
document.getElementById("result").innerHTML = `Fibonacci
Series: ${fibonacci(num).join(', ')}`;
}

function displayPrimes() {
let num = getNumber();
document.getElementById("result").innerHTML = `Prime
Numbers: ${primeNumbers(num).join(', ')}`;
}

Output:-

c. Registration Form Validation

Aim: To validate form fields in a registration page using JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Registration Form</title>
<script>
function validateForm() {
let name = document.getElementById("name").value;
let email = document.getElementById("email").value;
let password = document.getElementById("password").value;
let confirmPassword = document.getElementById("confirmPassword").value;
let age = document.getElementById("age").value;

if (name.length < 3) {
alert("Name must be at least 3 characters.");
return false;
}
if (!email.includes("@")) {
alert("Enter a valid email.");
return false;
}
if (password.length < 6) {
alert("Password must be at least 6 characters.");
return false;
}
if (password !== confirmPassword) {
alert("Passwords do not match.");
return false;
}
if (age < 18) {
alert("You must be 18 or older.");
return false;
}

alert("Registration Successful!");
return true;
}
</script>
</head>
<body>
<h2>Registration Form</h2>
<form onsubmit="return validateForm()">
<label>Name:</label>
<input type="text" id="name" required><br><br>

<label>Email:</label>
<input type="email" id="email" required><br><br>

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

<label>Confirm Password:</label>
<input type="password" id="confirmPassword" required><br><br>

<button type="submit">Register</button>
</form>
</body>
</html>

Output:-
Explanation
Experiment 1: Lists, Links, and Images
1A:

Explanation:

 The <!DOCTYPE html> tag declares the document as an HTML5 document.

 The <html> tag is the root element of the HTML document.
 The <head> section contains metadata such as the <title> tag, which sets the page title.
 The <body> tag contains the main content of the webpage.
 The <h2> tag defines section headings.
 The <ol> (ordered list) tag creates a numbered list, with <li> tags representing each list
item.
 The <ul> (unordered list) tag creates a bullet-point list.
 The <dl> (definition list) tag is used for definitions, where <dt> represents the term and
<dd> provides the definition.

1B:

Explanation:

 The <a> (anchor) tag is used to create hyperlinks.

 The href attribute specifies the URL of the destination page.
 The target attribute determines how the link opens:

o _blank opens the link in a new tab.

o _self opens the link in the same tab.

The <br> tag inserts a line break to separate the links

1C:

Explanation:

 The <img> tag is used to embed an image.

 The src attribute specifies the image file path.
 The alt attribute provides alternative text for accessibility.
 The width and height attributes define the image size.
 The <a> tag wraps the image to make it a clickable link.

1D:Explanation:
 This program uses small thumbnail images (100x100 pixels) as clickable links to their full-size
versions.
 Each <a> tag links to a larger version of the image.
 The <img> tag inside <a> creates a clickable thumbnail image.
 The target="_blank" attribute ensures the full-sized image opens in a new tab.

Experiment2: HTML Tables, Forms and Frames

Explanation 2a:

 <table>: Defines the table.

 <tr>: Represents a table row.
 <th>: Represents a header cell, usually in bold and centered.
 <td>: Represents a table data cell.
 border="1": Adds a border around the table.
 colspan="2": Makes a cell span across two columns.

Explanation2d:

 <caption>: Adds a caption to the table.

 cellspacing: Defines the space between cells.
 cellpadding: Defines the space inside each cell.
 rowspan="2": Makes a cell span two rows (used for the "Break" cell).

Explanation2c:

 <form>: Used to define a form.

 <input type="text">: Creates a text field.
 <input type="password">: Creates a password field.
 <input type="number">: Creates a number input field.
 <input type="date">: Creates a date picker.
 <input type="radio">: Creates a radio button (single choice).
 <input type="checkbox">: Creates a checkbox (multiple choice).
 <select>: Creates a dropdown list.
 <textarea>: Creates a multi-line text box.
 <input type="submit">: Creates a submit button.
 <input type="reset">: Creates a reset button.

Explanation2d:

 <frameset>: Defines the layout of frames (rows or columns).

 rows="30%, 40%, 30%": Divides the screen into three horizontal parts.
 <frame src="URL">: Loads content into each frame.
 <noframes>: Provides content for browsers that do not support frames (a fallback
message).
Experiment 3:. HTML 5 and Cascading Style Sheets, Types of CSS

Explanation3a:

 <header>: Defines the top section of the page, typically for navigation and introductory
content.
 <nav>: Defines a navigation menu.
 <main>: Contains the primary content of the document.
 <section>: Represents a section of related content.
 <article>: Represents a self-contained article.
 <aside>: Represents content related to the surrounding content, such as a sidebar.
 <footer>: Defines the footer of the document.
 <div>: A generic container element used for grouping other elements.
 <span>: A generic inline container for styling text.

Explanation 3b:

 <audio>: Embeds an audio file, with the controls attribute providing play, pause, and
volume control.
 <source>: Specifies the file source for audio or video content and its type.
 <video>: Embeds a video file, with the controls attribute allowing playback controls.
 width="600": Sets the width of the video player.

Explanation 3c:

1. Inline CSS:

o The style attribute is applied directly to an HTML element, specifying CSS rules
like color: red; and font-size: 18px;.

2. Internal CSS:

o CSS is written inside the <style> tag within the <head> section.
o Example: body { font-family: Arial, sans-serif; background-
color: #f4f4f4; }.

3. External CSS:

o The external CSS file is linked using the <link> tag with the href attribute
pointing to the external stylesheet (styles.css in this case).

Selectors, Properties, and Values:

 Selectors: body, h1, .highlight, p, etc.

 Properties: color, font-family, background-color, font-weight, font-size.
 Values: blue, Arial, #f4f4f4, yellow, bold, red, 18px.
Experiment 4: Selector forms

Explanation of Selectors:

i. Simple Selectors

Element Selector:

1. Selector: h1
2. Description: Targets all <h1> elements and changes their text color to blue.
3. Example: h1 { color: blue; }

ID Selector:

1. Selector: #unique
2. Description: Targets an element with the id="unique", changing its font size and
making it bold.
3. Example: #unique { font-size: 24px; font-weight: bold; }

Class Selector:

1. Selector: .highlight
2. Description: Targets all elements with the class highlight and applies a yellow
background.
3. Example: .highlight { background-color: yellow; }

Group Selector:

1. Selector: h2, h3
2. Description: Targets both <h2> and <h3> elements, making their text color green.
3. Example: h2, h3 { color: green; }

Universal Selector:

1. Selector: *
2. Description: Applies the Arial font family to all elements on the page.
3. Example: * { font-family: Arial, sans-serif; }

ii. Combinator Selectors

Descendant Selector:

1. Selector: article p
2. Description: Selects <p> elements inside <article> tags and sets the text color
to purple.
3. Example: article p { color: purple; }

Child Selector:

1. Selector: section > p

2. Description: Selects direct <p> children of <section> and applies italic font style.
3. Example: section > p { font-style: italic;

Adjacent Sibling Selector:

1. Selector: h1 + p
2. Description: Selects the first <p> immediately following an <h1> and changes the
text color to red.
3. Example: h1 + p { color: red; }

General Sibling Selector:

1. Selector: h2 ~ p
2. Description: Selects all <p> elements that are siblings of <h2> and applies orange
color.
3. Example: h2 ~ p { color: orange; }

iii. Pseudo-class Selector

:hover:

1. Selector: a:hover
2. Description: Changes the link color to red when the mouse hovers over it.
3. Example: a:hover { color: red;

:nth-child:

1. Selector: ul li:nth-child(2)
2. Description: Targets the second <li> in an unordered list and makes it bold.
3. Example: ul li:nth-child(2) { font-weight: bold; }

iv. Pseudo-element Selector

::before:

1. Selector: p::before
2. Description: Adds content before the text of each <p> element, labeled as "Note:".
3. Example: p::before { content: "Note: "; font-weight: bold;
color: red; }

::after:
1. Selector: p::after
2. Description: Adds content after each <p> element, labeled as "[End of paragraph]".
3. Example: p::after { content: " [End of paragraph]"; font-
style: italic; }

v. Attribute Selector

1. [href^="https"]:

1. Selector: a[href^="https"]
2. Description: Selects all anchor tags (<a>) where the href attribute starts with
"https", coloring them green.
3. Example: a[href^="https"] { color: green;
Experiment5. CSS with Color, Background, Font, Text and CSS Box
Model

Explanation 5a:

 background-color: red; → Uses named color.

 background-color: #ff5733; → Uses hexadecimal notation.
 background-color: rgb(60, 179, 113); → Uses RGB values.
 background-color: rgba(255, 0, 0, 0.5); → Uses RGBA (transparency).
 background-color: hsl(240, 100%, 50%); → Uses HSL notation.
 background-color: hsla(120, 100%, 50%, 0.7); → Uses HSLA
(transparency).

Explanation 5b:

 background-position: center 50%; → Centers the image and moves it halfway

down the page.
 background-attachment: fixed; → Keeps the background image fixed when
scrolling.
 background-repeat: no-repeat; → Prevents the image from repeating.
 background-size: cover; → Stretches the image to cover the whole background.

Explanation 5c:

 font-size: 24px; → Increases text size.

 font-weight: bold; → Makes text bold.
 font-style: italic; → Makes text italic.
 text-decoration: underline; → Underlines text.
 text-transform: uppercase; → Converts text to uppercase.
 text-align: center; → Centers the text.

Explanation 5d:

1. Content: The actual text inside the box ("CSS Box Model Example").
2. Padding (padding: 20px;): Creates space between content and border.
3. Border (border: 5px solid black;): A black border around the box.
4. Margin (margin: 30px;): Adds space outside the border, separating it from other
elements.
Experiment6: Applying JavaScript - internal and external, I/O,
Type Conversion

Explanation 6a:

 Internal JavaScript is defined within <script> inside the HTML file.

 External JavaScript is linked using <script src="script.js"></script>.

Explanation 6b:

1. alert("message") → Displays a pop-up box.

2. console.log("message") → Outputs to the browser console.
3. document.write("message") → Writes directly to the webpage.
4. innerHTML → Updates the content of an HTML element.

Explanation 6c:

 prompt() → Shows a pop-up input box.

 document.getElementById("textInput").value → Gets input from a text field.

Explanation 6d:

1. prompt("Enter your name:") → Takes input for the voter's name.

2. prompt("Enter your age:") → Takes input for age.
3. parseInt(age) → Converts input from a string to a number.
4. Uses the ternary operator to determine voter eligibility (age >= 18).
5. Outputs data in an HTML table using innerHTML.
Experiment 7: Java Script Pre-defined and User-defined Objects

a. Document Object Properties and Methods

 Demonstrates document object properties and methods.

 Displays the current page URL using document.URL.
 Changes the page title dynamically using document.title.
 Uses document.write() to modify the page content.

b. Window Object Properties and Methods

 Demonstrates window object methods:

o alert(): Shows an alert popup.

o prompt(): Takes user input and displays it in an alert.
o window.open(): Opens a new browser window with given dimensions.

c. Array Object Properties and Methods

 Demonstrates array methods:

o push(): Adds an element to the end.

o pop(): Removes the last element.
o sort(): Sorts the array alphabetically.
o join(): Converts the array into a string with separators.

d. Math Object Properties and Methods

 Demonstrates Math functions:

o Math.random(): Generates a random number.

o Math.sqrt(): Computes square root.
o Math.ceil(): Rounds up.
o Math.floor(): Rounds down.
o Math.pow(): Computes exponentiation.

e. String Object Properties and Methods

 Demonstrates string methods:

o length: Finds string length.

o toUpperCase(): Converts to uppercase.
o substring(): Extracts part of a string.
f. Regular Expressions (RegEx)

 Uses test() to check if a pattern exists in a string.

 Case-insensitive search for "JavaScript" in a given text.

g. Date Object Properties and Methods

 Uses Date object to display:

o Current date in readable format (toDateString()).

o Current time (toLocaleTimeString()).

h. User-Defined Object

 Defines a Person object with properties (name, age).

 Implements a display() method to return formatted details.
 Creates an instance of Person and prints details.
Experiment 8: JavaScript Conditional Statements and Loops
a. Find the Largest Number or Check for Equality

 Uses prompt() to take three integers from the user.

 Checks if all three numbers are equal using ===.
 If equal, displays "EQUAL NUMBERS".
 Otherwise, finds the largest number using Math.max().

b. Display Weekdays Using Switch Case

 Uses switch to map user input (1-7) to corresponding weekdays.

 If input is outside 1-7, displays "Invalid input!".
 document.write() prints the result on the webpage.

c. Print 1 to 10 Using Loops

 For Loop: Iterates from 1 to 10 using a counter variable.

 While Loop: Uses a condition to print numbers from 1 to 10.
 Do-While Loop: Ensures at least one execution before checking the condition.

d. Print Data in Object Using Loops

 For-in: Iterates over an object's keys and prints key-value pairs.

 ForEach: Used on an array to print each element.
 For-of: Iterates over an array’s values directly.

e. Check for Armstrong Number

 Takes input and extracts digits using the modulus operator (%).
 Cubes each digit and sums them.
 If sum equals the original number, it's an Armstrong number.

f. Display Bank Denomination Breakdown

 Uses an array of currency notes [100, 50, 20, 10, 5, 2, 1].

 Iterates over the denominations, calculates how many of each note can be used.
 Displays the breakdown of the amount into notes.
Experiment 9: JavaScript Functions and Events
a. JavaScript Functions for Factorial, Fibonacci, Prime Numbers, and Palindrome

 Factorial Function: Uses a loop to multiply numbers from 1 to n.

 Fibonacci Function: Uses an array to generate a series up to n.
 Prime Number Check: Iterates from 2 to n, checking divisibility.
 Palindrome Check: Converts a number to a string and compares it with its reverse.

b. Interactive HTML Form with Buttons

 Uses an input field and buttons to take user input.

 Calls JavaScript functions on button clicks (onclick).
 Displays results dynamically using document.getElementById().innerHTML.

c. Registration Form Validation

 Uses onsubmit to validate form inputs.

 Checks conditions like:

o Name should be at least 3 characters.

o Email must contain "@".
o Password should be at least 6 characters.
o Passwords must match.
o Age must be 18 or older.
 If all conditions are met, shows a success message. Otherwise, alerts the user.

Bcom&bsc Lab Manuel
No ratings yet
Bcom&bsc Lab Manuel
17 pages
FSD - Aiml
No ratings yet
FSD - Aiml
97 pages
64-A-Jivesh Mishra
No ratings yet
64-A-Jivesh Mishra
39 pages
Full Stack Soc
No ratings yet
Full Stack Soc
46 pages
Web Designing Final
No ratings yet
Web Designing Final
32 pages
Grade 8 Physics Binder
100% (1)
Grade 8 Physics Binder
188 pages
Hankook Brochure Manual
No ratings yet
Hankook Brochure Manual
22 pages
Web Lab Study Material
No ratings yet
Web Lab Study Material
29 pages
Lohithwebtech 1
No ratings yet
Lohithwebtech 1
25 pages
Experimentes
No ratings yet
Experimentes
59 pages
MAD - Practical FIle
No ratings yet
MAD - Practical FIle
46 pages
HTML Table and List
No ratings yet
HTML Table and List
69 pages
Web Technology Practical
No ratings yet
Web Technology Practical
40 pages
Week 1: A) Write A HTML Program, To Explain The Working of Lists
No ratings yet
Week 1: A) Write A HTML Program, To Explain The Working of Lists
50 pages
HTML Programs
No ratings yet
HTML Programs
15 pages
Full Stack
No ratings yet
Full Stack
46 pages
WT File (For Internal Practical)
No ratings yet
WT File (For Internal Practical)
84 pages
NSX Administration Guide NSX For Vsphere 6.2
No ratings yet
NSX Administration Guide NSX For Vsphere 6.2
370 pages
HTML Css
0% (1)
HTML Css
55 pages
Lab Manual
No ratings yet
Lab Manual
55 pages
3011 1635156242052 Practical - 5.2
No ratings yet
3011 1635156242052 Practical - 5.2
6 pages
RAHUL - Practical File Web Designing (2
No ratings yet
RAHUL - Practical File Web Designing (2
28 pages
LALIT - Practical File Web Designing
No ratings yet
LALIT - Practical File Web Designing
28 pages
Programes 2
No ratings yet
Programes 2
10 pages
WT Lab Programs (Prog.1 - Prog.40)
No ratings yet
WT Lab Programs (Prog.1 - Prog.40)
40 pages
FSD Final Lab Manual
No ratings yet
FSD Final Lab Manual
46 pages
HTML Short Programs
No ratings yet
HTML Short Programs
4 pages
Riiiiii
No ratings yet
Riiiiii
24 pages
Anshu 1
No ratings yet
Anshu 1
58 pages
WPD Lab Manual
No ratings yet
WPD Lab Manual
27 pages
Untitled Document
No ratings yet
Untitled Document
38 pages
Experiment-1: 1a) OUTPUT
No ratings yet
Experiment-1: 1a) OUTPUT
36 pages
Andy Clark - Associative Engines
100% (3)
Andy Clark - Associative Engines
248 pages
HTML XML Applets
No ratings yet
HTML XML Applets
26 pages
Image Recognition Using CIFAR 10
100% (1)
Image Recognition Using CIFAR 10
56 pages
Pankajrawat
No ratings yet
Pankajrawat
26 pages
WT Practical 6 To 10
No ratings yet
WT Practical 6 To 10
14 pages
Tables: Program:: Doctype HTML Head Style
No ratings yet
Tables: Program:: Doctype HTML Head Style
12 pages
WT Ans
No ratings yet
WT Ans
10 pages
Web Dev 2
No ratings yet
Web Dev 2
72 pages
Web Practicals 1
No ratings yet
Web Practicals 1
23 pages
What Is Trip Circuit Supervision (TCS) Protection
No ratings yet
What Is Trip Circuit Supervision (TCS) Protection
7 pages
Web Lab Practice
No ratings yet
Web Lab Practice
40 pages
DOCTYPE
No ratings yet
DOCTYPE
5 pages
Particulate Nature of Matter
100% (1)
Particulate Nature of Matter
16 pages
LAB Manual Frontend
No ratings yet
LAB Manual Frontend
32 pages
HTML Programs Unit 2
No ratings yet
HTML Programs Unit 2
9 pages
Ip Full Manual
No ratings yet
Ip Full Manual
36 pages
CMT-CS Course Outline
No ratings yet
CMT-CS Course Outline
9 pages
Unit - 5-1
No ratings yet
Unit - 5-1
16 pages
Experiment NO. 1: Aim: Description
No ratings yet
Experiment NO. 1: Aim: Description
19 pages
WDP Lab Manual
No ratings yet
WDP Lab Manual
8 pages
(Pooja Ashok Dange) March - Full - Stack24 (HTML) Assignments
No ratings yet
(Pooja Ashok Dange) March - Full - Stack24 (HTML) Assignments
13 pages
JKLMN
No ratings yet
JKLMN
17 pages
Lecture 3 - HTML - Links Table & List
No ratings yet
Lecture 3 - HTML - Links Table & List
34 pages
HTML Programs
No ratings yet
HTML Programs
7 pages
Week 1 - HTML
No ratings yet
Week 1 - HTML
20 pages
Jitendra WD
No ratings yet
Jitendra WD
18 pages
Web Developement
No ratings yet
Web Developement
17 pages
Diploma in Electrical Engineering Industrial Traning Report
No ratings yet
Diploma in Electrical Engineering Industrial Traning Report
42 pages
Ghattu Internal
No ratings yet
Ghattu Internal
17 pages
HTML & Css - Lesson 2: IT Lecturerer: Ngo Dinh Cuong
No ratings yet
HTML & Css - Lesson 2: IT Lecturerer: Ngo Dinh Cuong
31 pages
HTML LAB Programs
No ratings yet
HTML LAB Programs
5 pages
Star Wars: The Force Awakens: Task 16. Quiz Assignment (Logic 5.1)
0% (1)
Star Wars: The Force Awakens: Task 16. Quiz Assignment (Logic 5.1)
2 pages
Assignment
No ratings yet
Assignment
6 pages
Lab2 HTML
No ratings yet
Lab2 HTML
13 pages
Iwd Practical Assignments
No ratings yet
Iwd Practical Assignments
24 pages
Lecture-6 Dialog Boxes
No ratings yet
Lecture-6 Dialog Boxes
15 pages
An Empirical Assessment of Empirical Corporate Finance
No ratings yet
An Empirical Assessment of Empirical Corporate Finance
40 pages
STAT140 Formula Sheet Updated 15 October
No ratings yet
STAT140 Formula Sheet Updated 15 October
2 pages
German Volume Training (GVT) Program Spreadsheet
No ratings yet
German Volume Training (GVT) Program Spreadsheet
26 pages
One Step Extraction of Essential Oils and Pectin From Pomelo (Citrus Grandis) Peels
No ratings yet
One Step Extraction of Essential Oils and Pectin From Pomelo (Citrus Grandis) Peels
5 pages
HTML Tags: A Very Simple HTML Document
No ratings yet
HTML Tags: A Very Simple HTML Document
8 pages
Asco Numatics ATEX General Info
No ratings yet
Asco Numatics ATEX General Info
18 pages
008 ISO 10421998 Laboratory Glassware One Mark Volum
100% (1)
008 ISO 10421998 Laboratory Glassware One Mark Volum
2 pages
Design of Unde Ground Water Tank
100% (2)
Design of Unde Ground Water Tank
18 pages
K-Nearest Neighbor
No ratings yet
K-Nearest Neighbor
1 page
Boot Reference List
No ratings yet
Boot Reference List
6 pages
RES320 - Preisinger, Carrie FINAL EXAM
100% (1)
RES320 - Preisinger, Carrie FINAL EXAM
5 pages
BODY Tag: - : HTML Common Tags
No ratings yet
BODY Tag: - : HTML Common Tags
15 pages
Cambridge International AS & A Level: Computer Science 9618/32
No ratings yet
Cambridge International AS & A Level: Computer Science 9618/32
12 pages
1704875755
No ratings yet
1704875755
4 pages
Appendices: A B C D
No ratings yet
Appendices: A B C D
14 pages
4G CN PDF
No ratings yet
4G CN PDF
2 pages
Final Exam SEE3433 Mei (Solution)
No ratings yet
Final Exam SEE3433 Mei (Solution)
9 pages
ATS - Daily Trading Plan 27agustus2018
No ratings yet
ATS - Daily Trading Plan 27agustus2018
1 page
Philosophy of Science 134E
No ratings yet
Philosophy of Science 134E
4 pages
Grafik Kalkulator
No ratings yet
Grafik Kalkulator
2 pages
Easy html and css
From Everand
Easy html and css
S VASIST
No ratings yet

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.