Question 1.
JavaScript Program to Print Hello
World.
Code
Question 2. JavaScript Program to Find the
Factorial of a Number.
Code
Question 3. JavaScript Program to Find the
greatest of 3 Numbers.
Code
Question 4. JavaScript Program to display the
usage of all 3 dialog boxes.
Code
Question 5. JavaScript Program to Call
function code from links.
Code
Question 6. JavaScript Program to Call
function code from image-maps.
Code
<!DOCTYPE html>
<html>
<head>
<title>Image Map with JavaScript</title>
</head>
<body>
<h2>Click on the different areas of the image</h2>
<img src="heart.jpg" alt="Image" usemap="#myMap">
<map name="myMap">
<area shape="rect" coords="390,260,200,600" alt="Area 1"
onclick="myFunction()">
<area shape="rect" coords="590,600,464,264" alt="Area 2"
onclick="anotherFunction()">
</map>
<script>
function myFunction() { alert("deoxegenated blood");
}
function anotherFunction() { alert("oxegenated blood");
}
</script>
</body>
</html>
Question 7. JavaScript Program to Find square
of a Number.
Code
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<script>
function square(number) { return number * number;}
let number=parseInt(prompt("enter a number")); const
squarenum = square(number);
document.write("The square of ", number, " is ", squarenum);
</script>
</body>
</html>
Question 8. JavaScript Program to Find square
root of a Number.
Code
<!DOCTYPE html>
<html>
<head>
<title>Square Root Calculator</title>
</head>
<body>
<script>
let number
=parseInt(prompt("ente
r a number")); if
(number < 0) {
document.write("Error: Negative numbers don't have real
square roots.");
} else {
let squareRoot = Math.sqrt(number);
document.write("The square root of " + number + " is " +
squareRoot);}
</script>
</body>
</html>
Question 9. JavaScript Program to show the
usage of date functions.
Code
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<script>
let myd = new Date(); let d = myd.getDate();
let m = myd.getMonth() + 1; let y = myd.getFullYear();
document.write("Today's date is: " + d + "/" + m + "/" + y);
</script>
</body>
</html>
Question 10. JavaScript Program to show the
usage of string function.
Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title> </head>
<body>
<script> const myString = "Hello, World!";
// Access individual characters
document.write("First
character:",myString[0],"<br>");
document.write("Last
character:",myString[myString.length -
1],"<br>");
// String length document.write("String
length:",myString.length,"<br>");
// String concatenation
const newString = myString + " How are
you?" + "<br>";
document.write("Concatenated
string:",newString);
// String methods
document.write("Uppercase:",myString.toUpperCase()
,"<br>");
document.write("Lowercase:",myString.toLowerCase()
,"<br>");
document.write("Includes'World':",myString.includes(
"World"),"<br>");
document.write("Starts
with 'Hello':",myString.startsWith("Hello"),"<br>");
document.write("Ends
with'World':",myString.endsWith("World"),"<br>");
document.write("Substring from index
7:",myString.substring(7),"<br>")
document.write("Substring from index 7 to
12:",myString.substring(7, 12),"<br>");
document.write("Replace 'World' with
'Universe':",myString.replace("World", "Universe"),"<br>");
document.write("Split into
words:",myString.split(" ")+"<br>");
</script>
</body>
</html>
Question 11. JavaScript Program to implement
handling onclick, onmouseover, onmouseout
events.
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Event Handling in JavaScript</title>
<style>
#myButton {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<button id="myButton">Hover or Click Me!</button>
<script>
const button = document.getElementById('myButton');
button.onclick = function() {
alert('Button Clicked!');
};
button.onmouseover = function() {
button.style.backgroundColor = 'lightblue';
button.innerText = 'Mouse Over!';
};
button.onmouseout = function() {
button.style.backgroundColor = '';
button.innerText = 'Hover or Click Me!';
};
</script>
</body>
</html>
Question 12. Program to show the usage of
inline CSS using font styling.
Code
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<p style="font-family: Arial; font-size: 24px; font-weight:
bold; color: blue;">This is a paragraph with inline
CSS</p>
</body>
</html>
Question 13. Program to show the usage of
internal CSS using text styling.
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Internal CSS Example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 20px;
}
h1 {
color: #333;
text-align: center;
text-transform: uppercase;
}
p{
color: #666;
font-size: 18px;
line-height: 1.6;
text-align: justify;
}
.highlight {
color: #ff6347;
font-weight: bold;
}
text-decoration: underline;
</style>
</head>
<body>
<h1>Welcome to Internal CSS Styling</h1>
<p>This is an example of how to use internal CSS to style text in
an HTML document. The CSS rules are defined within a <style>
element inside the <head> section of the document.</p>
<p>Some text can be <span
specific class.</p>
</body>
</html>
Question 14. Program to show the usage of
External CSS using styling.
Code
Step 1: Create the HTML File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial
scale=1.0">
<title>External CSS Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to External CSS Styling</h1>
<p>This is an example of how to use external CSS to style text
in an
HTML document. The CSS rules are defined in a separate file
called
<em>styles.css</em>.</p>
<p>Some text can be <span
class="highlight">highlighted</span>
to draw attention using a specific class.</p>
</body>
</html>
Step 2: Create the External CSS File
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 20px;
}
h1 {
color: #333;
text-align: center;
text-transform: uppercase;
}
p{
color: #666;
font-size: 18px;
line-height: 1.6;
text-align: justify;
}
.highlight {
color: #ff6347;
font-weight: bold;
text-decoration: underline;
}
Question 15. Simple web page containing
almost all the tags of HTML.
Code
<!DOCTYPE html>
<head>
<title>HTML Tags</title>
</head>
<body style="background-color:black;color: aqua;">
<header>
<h1>Welcome to My Web Page</h1>
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
</ul>
</header>
<main>
<section id="section1">
<h2>Section 1: Introduction</h2>
<p>This is a paragraph with some <b>bold</b> and
<i>italic</i> text.</p>
<p>Here is a list of items:</p>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<p>Here is an image:</p>
<img src="https://placehold.co/300x200?text=Hello+World"
alt="Image">
</section>
<section id="section2">
<h2>Section 2: More Content</h2>
<p>Here is a table:</p>
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<p>Here is a form:</p>
<form action="#">
</tr>
</table>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
<section id="section3">
<h2>Section 3: Audio</h2>
<p>Here is an audio file:</p>
<audio controls>
</form>
</section>
<source src="audiofile.mp3" type="audio/mpeg"> </audio>
</section>
</main>
<footer>
<p>Contact information: <a
href="https://mail.google.com">Gmail</a>
<a href="https://instagram.com">instagram</a></p>
</footer>
</body>
</html>
Question 16. Web page for Crime against Poor
Community.
Code
Question 17. Html table
Code
Question 18. Web page by Adding Frames.
Code
Question 19. Write a program to display the
bookstore details in XML?
Code
<?xml version="1.0" encoding="UTF-8"?>
<bookstore>
<book>
<title lang="en">The Great Gatsby</title>
<author>F. Scott Fitzgerald</author>
<genre>Fiction</genre>
<price>10.99</price>
<publish date>1925-04-10</publish date>
</book>
<book>
<title lang="en">To Kill a Mockingbird</title>
<author>Harper Lee</author>
<genre>Fiction</genre>
<price>7.99</price>
<publish date>1960-07-11</publish date>
</book>
<book>
<title lang="en">A Brief History of Time</title>
<author>Stephen Hawking</author>
<genre>Science</genre>
<price>15.99</price>
<publish date>1988-04-01</publish date>
</book>
<book>
<title lang="en">The Art of Computer Programming</title>
<author>Donald E. Knuth</author>
<genre>Programming</genre>
<price>199.99</price>
<publish date>1968-01-01</publish date>
</book>
</bookstore>
Question 20. Write a program to display the
menu of a restaurant in XML?
Code
<?xml version="1.0" encoding="UTF-8"?>
<menu>
<category name="Starters">
<item>
<name>Spring Rolls</name>
<description>Delicious vegetable spring rolls served with
sweet chili sauce</description>
<price>4.99</price>
</item>
<item>
<name>Garlic Bread</name>
<description>Toasted bread with garlic and
herbs</description>
<price>3.49</price>
</item>
</category>
<category name="Main Course">
<item>
<name>Margherita Pizza</name>
<description>Classic pizza with fresh tomatoes,
mozzarella,
and basil</description>
<price>8.99</price>
</item>
<item>
<name>Grilled Chicken</name>
<description>Grilled chicken breast served with roasted
vegetables</description>
<price>12.99</price>
</item>
</category>
<category name="Desserts">
<item>
<name>Chocolate Cake</name>
<description>Rich and moist chocolate cake with a
creamy
frosting</description>
<price>5.99</price>
</item>
<item>
<name>Ice Cream Sundae</name>
<description>A classic sundae with vanilla ice cream,
chocolate
syrup, and a cherry on top</description>
<price>4.49</price>
</item>
</category>
<category name="Beverages">
<item>
<name>Coffee</name>
<description>Freshly brewed coffee</description>
<price>2.99</price>
</item>
<item>
<name>Orange Juice</name>
<description>Freshly squeezed orange
juice</description>
<price>3.49</price>
</item>
</category>
</menu>
Question 21. Write a program to display the
mobile phones details in XML using internal
DTD?
Code
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mobiles [
<!ELEMENT mobiles (mobile+)>
<!ELEMENT mobile (brand, model, price, features)>
<!ELEMENT brand (#PCDATA)>
<!ELEMENT model (#PCDATA)>
<!ELEMENT price (#PCDATA)>
<!ELEMENT features (feature+)>
<!ELEMENT feature (#PCDATA)>
]>
<mobiles>
<mobile>
<brand>Apple</brand>
<model>iPhone 14</model>
<price>999.99</price>
<features>
<feature>5G</feature>
<feature>Dual Camera</feature>
<feature>Face ID</feature>
</features>
</mobile>
<mobile>
<brand>Samsung</brand>
<model>Galaxy S22</model>
<price>849.99</price>
<features>
<feature>5G</feature>
<feature>Quad Camera</feature>
<feature>Fingerprint Sensor</feature>
</features>
</mobile>
<mobile>
<brand>Google</brand>
<model>Pixel 7</model>
<price>699.99</price>
<features>
<feature>5G</feature>
<feature>Triple Camera</feature>
<feature>Google Assistant</feature>
</features>
</mobile>
</mobiles>
Question 22. Write a program to store the car
details of a company “XYZ” in XML using
external DTD?
Code
Step 1: Create the External DTD File
<!ELEMENT cars (car+)>
<!ELEMENT car (brand, model, price, features)>
<!ELEMENT brand (#PCDATA)>
<!ELEMENT model (#PCDATA)>
<!ELEMENT price (#PCDATA)>
<!ELEMENT features (feature+)>
<!ELEMENT feature (#PCDATA)>
Step 2: Create the XML File
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE cars SYSTEM "car.dtd">
<cars>
<car>
<brand>Toyota</brand>
<model>Corolla</model>
<price>20000</price>
<features>
<feature>Air Conditioning</feature>
<feature>Navigation System</feature>
<feature>Bluetooth Connectivity</feature>
</features>
</car>
<car>
<brand>Ford</brand>
<model>Mustang</model>
<price>35000</price>
<features>
<feature>Leather Seats</feature>
<feature>Heated Seats</feature>
<feature>Sunroof</feature>
</features>
</car>
<car>
<brand>Honda</brand>
<model>Civic</model>
<price>22000</price>
<features>
<feature>Rearview Camera</feature>
<feature>Keyless Entry</feature>
<feature>Adaptive Cruise Control</feature>
</features>
</car>
</cars>
Question 23. Design a website of few web
pages using HTML, CSS, JavaScript. Also make
use of bootstrap to make it responsive.
Code
1. HTML for Home Page (index.html)
2. CSS for Styling (css/styles.css)
3. JavaScript for Interaction (js/script.js)
4. Other Pages (e.g., about.html)
Adding Responsiveness with Bootstrap
Final Output
