Scribd
Upload
11 views22 pages

HTML and Javascript Programs - 5830b2d5 3ef2 406e 8572 Eaae6eaf72a9

The document contains multiple HTML and JavaScript code examples focusing on various web design and programming tasks. It includes specifications for styling elements with CSS, creating forms, handling user inputs, and performing calculations with JavaScript. Each section provides a code snippet demonstrating the implementation of the described features.

Uploaded by

diya23822
Copyright
© © All Rights Reserved
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
11 views22 pages

HTML and Javascript Programs - 5830b2d5 3ef2 406e 8572 Eaae6eaf72a9

The document contains multiple HTML and JavaScript code examples focusing on various web design and programming tasks. It includes specifications for styling elements with CSS, creating forms, handling user inputs, and performing calculations with JavaScript. Each section provides a code snippet demonstrating the implementation of the described features.

Uploaded by

diya23822
Copyright
© © All Rights Reserved
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/ 22

HTML

1. Write a program using html with following CSS specification


(1) The background colour of the company name should be in green.
(2) The text colour of the company name should be red.
(3) The heading should be large with font "comic sans ms"
(4) The description of the company should be displayed in blue color in a
paragraph.

<!DOCTYPE html>
<html>
<head>
<title>Company Details</title>
<style>
h1 {
background-color: green;
color: red;
font-family: comic sans ms;
text-align: center;
}
p {
color: blue;
}
</style>
</head>
<body>
<h1>Company Name</h1>
<p>lerem ipsum dolor sit amet, consectetur adipiscing elit.<
</body>
</html>

2. Write Html5 code with CSS as follows:

HTML 1
1. Create form to accept name,age, email address, from the user.
2. Create a submit buttgbbbh ,on to send the data.
3. The heading of the form should have a background colour and a different font
style.

<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
h1 {
background-color: red;
font-style: italic;
text-align: center;
}
</style>
</head>
<body>
<h1>Enter Details</h1>
<form>
Name:<input type="text" name="name" /> <br /><br />
Age:<input type="number" name="age" /><br /><br />
Email:<input type="email" name="email" /><br /><br />
<input type="submit" value="Submit" />
</form>
</body>
</html>

3.Write Html5 code with CSS as follows:


1. Create ordered list with names of tourist Cities.

2. Create unordered list with tourist PLACES of those cities.


3. Divide the list into two sections left and right by using CSS.

HTML 2
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
ol{
float: left;
}
ul{
float: right;
}

</style>
</head>
<body>

<!-- tourist Cities. -->


<ol>
<li>Mumbai</li>
<li>Delhi</li>
<li>Jaipur</li>
<li>Goa</li>
<li>Varanasi</li>
</ol>
<!-- tourist PLACES -->
<ul>
<li>Gateway of India</li>
<li>Red Fort</li>
<li>Hawa Mahal</li>
<li>Beaches</li>
<li>Temples</i>
</ul>

HTML 3
</body>
</html>

4.Design a web page that should accept Personal Details of the user i.e. name of
the user

along with date and time values. The Page must contain submit button.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-s
<title>Document</title>
</head>
<body>
<form>
Name:<input type="text" name="name" /> <br /><br />
Date and Time:<input type="datetime-local" name="datetime"
<input type="submit" value="Submit" />
</form>
</body>
</html>

4. Design a web page that should accept name of the user, Email ID, Number of
years
completed in office, Office phone number(compulsory), image with submit button.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<form name="f1">
Enter Name: <input type="text" id="name" /><br /><br />

HTML 4
Employee Id: <input type="text" id="empid" /><br /><br />
Enter Email: <input type="email" id="email" /><br /><br />
Enter Years: <input type="number" id="years" /><br /><br /
Enter Office Phone: <input type="tel" id="phone" required
<!--image with submit button -->
<input type="image" src="submit.png" />
</form>
</body>
</html>

5. Design a web page that should accept name of the user, select file for upload,
color
picker tool, website URL, search and submit button.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<form>
Name:<input type="text" name="name" /> <br /><br />
Upload file:<input type="file" name="file" /><br /><br />
Color picker : <input type="color" name="color" /><br /><b
Website URL:<input type="url" name="url" /><br /><br />
Search:<input type="search" name="search" /><br /><br />
<input type="submit" value="Submit" />
</form>
</body>
</html>

6.Write a program using html with following CSS specifications :

(a) The background color of the College name should be in red color.

(b) The text color of the College name should be yellow color.

HTML 5
(c) The description of the college should be paragraph with right align.

<!DOCTYPE html>
<html>
<head>
<title>Company Details</title>
<style>
h1 {
background-color: red;
color: yellow;
}
p {
text-align: right;
}
</style>
</head>
<body>
<h1>College name</h1>
<p>lerem ipsum dolor sit amet, consectetur adipiscing elit.<
</body>
</html>

7. Write a program using html with following CSS specifications:

(a) The page should contain heading as XII IT in blue color


(b) Create Unordered List of topics in IT

(c)Change the font to comic Sans

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
h1 {
color: blue;

HTML 6
}

li {
font-family: comic Sans;
}
</style>
</head>
<body>
<h1>XII IT</h1>
<ul>
<li>Advanced web design</li>
<li>E commerce</li>
<li>Python</li>
<li>Java</li>
<li>Database management</li>
</ul>
</body>
</html>

9. Write a program using html with following CSS specifications :

(a) To create a form that should accept name, age, date of appointment from the
user

(b) Create submit button to send the data.


(c) The heading of the form should have orange background color with different
font style

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
h1 {
background-color: orange;
font-style: italic;
}

HTML 7
</style>
</head>
<body>
<h1>Doctor's Appointment</h1>
<form>
Name:<input type="text" name="name" /> <br /><br />
Age:<input type="number" name="age" /><br /><br />
Date of Appointment:<input type="date" name="date" /><br /
<input type="submit" value="Submit" />
</form>
</body>
</html>

10.Write a program using html with following CSS specifications :


(a) To create a form that should accept name, number of present students
(compulsory),
time and file to upload from the user
(b) Create submit button to send the data.

(c) The heading of the form should have border with blank spaces around the
contents

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
h1 {
border: 1px solid;
padding: 20px;
}
</style>
</head>
<body>
<h1>Student Details</h1>

HTML 8
<form>
Name:<input type="text" name="name" /> <br /><br />
Number of students:<input
type="number"
name="number"
required
/><br /><br />
Time:<input type="time" name="time" /><br /><br />
Upload file : <input type="file" name="file" /><br /><br /
<input type="submit" value="Submit" />
</form>
</body>
</html>

11. Write a program using html with following CSS specifications :


(a) To create a form that should accept name, contact number of office
(compulsory),

month, number of years completed (between 1-30) from the user.


(b) Create submit button to send the data and refresh button to reload the
(c) The heading of the form should have border, text color should be red. Page.

12. Write a program using html to create inline frame. It should contain image.

14. Write a html program to insert an inline frame on web page. Use abc.html file
as a

source for inline frame Size of Inline frame should be 200 × 200 pixels.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>

HTML 9
<iframe src="abc.html" width="200" height="200"></iframe>
</body>
</html>

15. Write a html program using internal CSS to display two paragraphs. The first
paragraph should have cyan background color and second should have yellow

text color with blue background color. (Write topic of your choice in paragraph

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
.firstPara {
background-color: cyan;
}
.secondPara {
color: yellow;
background-color: blue;
}
</style>
</head>
<body>
<p class="firstPara">
Lorem ipsum dolor sit amet consectetur adipisicing elit. P
doloremque unde deleniti blanditiis. Esse, numquam minus q
perferendis tempora magnam, ipsam harum quasi sit molestia
Recusandae, aspernatur iste.
</p>
<p class="secondPara">
Lorem ipsum dolor sit amet consectetur adipisicing elit. P
doloremque unde deleniti blanditiis. Esse, numquam minus q
perferendis tempora magnam, ipsam harum quasi sit molestia
Recusandae, aspernatur iste.
</p>

HTML 10
</body>
</html>

16. Write a html program to display "Digital India" having underline using inline
CSS. Add any two sentences about "IT" subject below having yellow color

background for the text.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
h1 {
text-decoration: underline;
}
p {
background-color: yellow;
}
</style>
</head>
<body>
<h1>Digital India</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. I
obcaecati voluptatum consequatur sequi eius voluptate quos
veritatis adipisci quas modi illo sint libero enim aliquid
tempore!
</p>
</body>
</html>

17. Write a html program to display "Ecommerce" having underline using internal
CSS. Add any two sentences about "Ecommerce" subject below having cyan colo

background for the text.

HTML 11
18. Write a html program to display "Digital world" having underline using inline
CSS. Add an ordered list having any two advantages of it.

19. Write a html program to display "Ecommerce" having "Arial" font using inline
CSS. Add an ordered list having any two advantages of it.

13. Write a html program to display "Cyber world" having Arial font and
background colour cyan. Add any two advantages having red color for the text.

Javascript

1. Write an event-driven JavaScript program to accept number and determine if


it is
greater than 200 ,less than 200 or equal to 200.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script type="text/javascript">
function compareNum() {
var num = f1.name.value;

if (num > 200) {


document.write("Number is greater than 200");
} else if (num < 200) {
document.write("Number is less than 200");

HTML 12
} else {
document.write("Number is equal to 200");
}
}
</script>
</head>
<body>
<form name="f1">
Enter Number: <input type="text" id="name" /><br /><br
<input type="button" value="Click!" onclick="compareNum
</form>
</body>
</html>

2. Write an event driven JavaScript program to accept pin code and check
whether it
is an integer.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script type="text/javascript">
function checkPincode() {
var pincode = f1.pincode.value;
if (isNaN(pincode)) {
document.write("Pincode is not a number");
} else {
document.write("Pincode is a number");
}
}
</script>
</head>
<body>

HTML 13
<form name="f1">
Enter pincode: <input type="text" id="pincode" /><br />
<input type="button" value="Click!" onclick="checkPinco
</form>
</body>
</html>

3. Display Addition, substraction, multiplication, division of two numbers, which


were
accepted from user.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script type="text/javascript">
function calculate() {
var fnum = parseInt(f1.fnum.value);
var snum = parseInt(f1.snum.value);
var sum = fnum + snum;
document.write("Sum of two numbers is: " + sum);
var diff = fnum - snum;
document.write("<br />Difference of two numbers is: "
var prod = fnum * snum;
document.write("<br />Product of two numbers is: " +
var div = fnum / snum;
document.write("<br />Division of two numbers is: " +
}
</script>
</head>
<body>
<form name="f1">
Enter first number: <input type="number" id="fnum" /><b
Enter second number: <input type="number" id="snum" /><

HTML 14
<input type="button" value="Click!" onclick="calculate(
</form>
</body>
</html>

4. Program to print numbers from 1-10 using do while loop.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script>
// document.write(1);
// document.write(2);
// document.write(3);
// document.write(4);
// for (var i = 1; i <= 100; i++) {
// document.write(i + "<br />");
// }

// var i = 1;
// while(i <= 100){
// document.write(i + "<br />");
// i++
// }
var i = 1;
do {
document.write(i + "<br />");
i++;
} while (i <= 100);
</script>
</head>
<body></body>
</html>

HTML 15
5. Find and display factorial of given number.

<!-- 5!=1*2*3*4*5=120 -->


<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script>
var num = 5;
var fact = 1;
for (var i = 1; i <= 5; i++) {
fact = fact * i;
}

document.write("Factorial is:" + fact);


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

6. Accept any string from user and count and display number of vowels occurs in
it.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script>
function countVowels() {
var str = f1.str.value;
document.write(str[0] + "<br />");
var count = 0;

HTML 16
for (var i = 0; i < str.length; i++) {
if (
str[i] == "a" ||
str[i] == "e" ||
str[i] == "i" ||
str[i] == "o" ||
str[i] == "u"
) {
count++;
}
}

document.write("Number of vowels: " + count);


}
</script>
</head>
<body>
<form name="f1">
Enter a string: <input type="text" id="str" /><br /><br
<input type="button" value="Click!" onclick="countVowel
</form>
</body>
</html>

7. Program to print 4 different Greeting messages using switch case

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script>
var time = prompt("Enter time of the day");
switch (time) {
case "morning":

HTML 17
document.write("Good Morning");
break;
case "afternoon":
document.write("Good Afternoon");
break;
case "evening":
document.write("Good Evening");
break;
case "night":
document.write("Good Night");
break;
default:
document.write("Hello");
}
</script>
</head>
<body></body>
</html>

8. Program to check whether the entered number is Odd or Even.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script>
var num = prompt("Enter a number");
if (num % 2 == 0) {
document.write("Number is even");
} else {
document.write("Number is odd");
}
</script>
</head>

HTML 18
<body></body>
</html>

9. Program to check whether the number is prime number of not.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script type="text/javascript">
// 2=1,2
// 5=2,3,4
// 6=2,3
var num = prompt("Enter a number");
var isPrime = true;
for (var i = 2; i <= num / 2; i++) {
if (num % i == 0) {
isPrime = false;
break;
}
}

if (isPrime == true) {
document.write("Number is prime");
} else {
document.write("Number is not prime");
}
</script>
</head>
<body></body>
</html>

10. Program to make use of some properties of Window object.

HTML 19
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script type="text/javascript">
window.open("https://www.google.com");
window.print();
window.close();
</script>
</head>
<body></body>
</html>

11. Program to display alert, prompt and confirm methods of Window Object.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script type="text/javascript">
alert("Hello World");
var num = prompt("Enter your name");
document.write("Hello " + num);
var con = confirm("Are you sure?");
document.write(con);
</script>
</head>
<body></body>
</html>

12. Program to change background colour of the page in every 4 seconds, there
should be
altleast 4 distinct colours except default colour.

HTML 20
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script>
function background1() {
document.bgColor = "red";
setTimeout(background2, 4000);
}
function background2() {
document.bgColor = "yellow";
setTimeout(background3, 4000);
}

function background3() {
document.bgColor = "green";
setTimeout(background4, 4000);
}

function background4() {
document.bgColor = "blue";
}

setTimeout(background1, 4000);
</script>
</head>
<body></body>
</html>

13. Program to make use of open, close and print methods of Window object.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>

HTML 21
<script type="text/javascript">
window.open("https://www.google.com");
window.print();
window.close();
</script>
</head>
<body></body>
</html>

HTML 22

You might also like