A) A paragraph containing text “All that glitters is not gold”. Bold face and
italicize this text
B) Create equation: x = 1/3(y12 + z12 )
C) Put a background image to a page and demonstrate all attributes of
background image
D) Create unordered list of 5 fruits and ordered list of 3 flowers
<html>
<head>
<title>SAMPLE XHTML PAGE</title>
</head>
<body>
<style>
body {
background-image: url("image.jpg");
background-repeat: no-repeat;
background-position: right bottom;
background-attachment: fixed;
}
</style>
<h4>Paragraph</h4>
<p>
<b><i>All that glitters is not gold</i></b> is an aphorism stating that not everything
that looks precious or true turns out to be so.
While early expressions of the idea are known from at least the 12th-13th century, the
current saying is derived from a 16th-century line by William Shakespeare,
<b><i>All that glisters is not gold</i></b>.
<br><br>
<b><i>All that glisters is not gold</i></b><br>
Often have you heard that told.<br>
Many a man his life hath sold<br>
But my outside to behold.<br>
Gilded tombs do worms enfold.<br>
Had you been as wise as bold,<br>
Young in limbs, in judgment old,<br>
Your answer had not been inscrolled<br>
Fare you well. Your suit is cold<br>
-William Shakespeare, Merchant of Venice, Act II Scene 7
</p>
<h4>Equation</h4>
<i>x</i> = 1/3(<i>y</i><sub>1</sub><sup>2</sup>
+<i>z</i><sub>1</sub><sup>2</sup>)
<h4>Unordered Fruit List</h4>
<ul>
<li>Banana</li>
<li>Mango</li>
<li>Grapes</li>
<li>Apples</li>
</ul>
<h4>Ordered Flower List</h4>
<ol>
<li>Jasmine</li>
<li>Rose</li>
<li>Lotus</li>
<li>Tulip</li>
</ol>
<br />
</body>
</html>
Program 2:Write a Java Script program that on clicking a button, displayscrolling text which moves from left to right with a small delay.
<!DOCTYPE html>
<html>
<head>
<title>Scrolling Text Example</title>
<style>
#scrollingText {
font-size: 24px; font-weight: bold;
white-space: nowrap; overflow: hidden;
}
</style>
</head>
<body>
<button id="startBtn">Start Scrolling</button>
<div id="scrollingText">This is some scrolling text!</div>
<script>
var scrollingText = document.getElementById("scrollingText");
var startBtn = document.getElementById("startBtn");
var textWidth = scrollingText.clientWidth;
var containerWidth = scrollingText.parentNode.clientWidth;
var currentPosition = 0;
function scrollText() {
if (currentPosition<containerWidth) {
scrollingText.style.transform = "translateX(-" + currentPosition + "px)";
currentPosition += 1;
setTimeout(scrollText, 20);
}
else {
currentPosition = -textWidth;
scrollText();
}
}
startBtn.addEventListener("click", function() {
currentPosition = 0;
scrollText();
});
</script>
</body>
</html>
Program 4: Write a JavaScript to design a simple calculator to perform the
following operations: sum, product, difference and quotient.
<html>
<head>
<title>Calculator</title>
</head>
<body>
<script type="text/javascript">
operation=-1;
while(operation!=0)
{
var operation=prompt("Which operation do you wish to do?\n0:End
Program\n1:Addition\n2:Substraction\n3:Multiplication\n4:Division\n","");
if(operation>0 && operation<=4)
{
var num1=parseInt(prompt("Enter the first number.",""));
var num2=parseInt(prompt("Enter the second number.",""));
if(operation==1) alert("The sum is "+(num1+num2));
if(operation==2) alert("The difference is "+(num1-num2));
if(operation==3) alert("The product is "+(num1*num2));
if(operation==4) alert("The quotient is "+(num1/num2));
}
else
{
if(operation!=0) alert("That wasn't one of the options");
}
}
</script>
</body>
</html>
Program 6: Write a html program to create simple table with Rows and Column.
<html>
<head><title>Table in WT</title></head>
<body>
<h1>Table in web development<h1>
<table border="5">
<tr>
<th>Department</th>
<th>staff Name</th>
<th colspan="2">Mobile</th>
</tr>
<tr>
<th> CSE </th>
<th> VAISH </th>
<th>12345 </th>
<th> 99723 </th>
</tr>
<tr>
<th> ME </th>
<th>Kommi</th>
<th> 46536 </th>
<th> 78690 </th>
</tr>
<tr>
<th> Civil </th>
<th>Trivi</th>
<th> 78965 </th>
<th> 98765 </th>
</tr>
<tr>
</table>
</body>
</html>
Program 7:Create a html page to display the moment of information (Direction
UP) with marquee tag.
<html>
<head>
<title>HTML Marquee Tag</title>
</head>
<body>
<table border="5" width="100%">
<tr height="100"><td colspan="2"><marquee direction="left"> I am moving to left
side.</marquee></td></tr>
<tr height="100"><td colspan="2"><marquee direction="right"> I am moving to right
side.</marquee></td></tr>
<tr height="500">
<td><marquee direction="up"> I am moving to up side.<br>
I am moving to up side.<br>
I am moving to up side.<br>
I am moving to up side.<br>
I am moving to up side.<br>
</marquee></td>
<td><marquee direction="down"> I am moving to down side.<br>
I am moving to down side.<br>
I am moving to down side.<br>
I am moving to down side.<br>
I am moving to down side.<br>
</marquee></td>
</tr>
</table>
</body>
</html>
Program 8: Write a JavaScript that calculates the squares and cubes of the
numbers from 0 to 10 and outputs html text that displays the resulting values in
an html table format.
<html>
<head><title> Squares and Cubes </title></head>
<script>
document.write('<p><b>SQUARES AND CUBES FROM 0 TO 10</b></p>');
document.write('<table border="2" cellspacing="2">');
document.write('<th> Number </th><th> Square </th><th> Cube </th>');
for(var i=1;i<=10;i++)
document.write("<tr><td>"+ i +"</td><td>"+ i*i + "</td><td>"+ i*i*i
+"</td></tr>");
document.write("</table>");
</script>
</html>
Program 9: Write a javascript code that displays text “text-growing” with
increasing font size in the interval of 100ms in red color, when the font size
reaches 50pt it displays “text-shrinking” in blue color. then the font size
decreases to 5pt
<html>
<body>
<div id="h"></div>
<script>
var v = 0, f = 1,t="TEXT-GROWING",color;
function a()
{
if(f==1)
v+=5,color="red";
else
v-=5,color="blue";
document.getElementById("h").innerHTML = "<h1 style=\"font-size: "+v+"px ;
margin: 0px; color : "+color+"\"><b> "+t+"</b></h1>";
if(v==50)
f = 0, t="TEXT-SHRINKING";
if(v==5)
f = 1, t="TEXT-GROWING";
c();
}
function c()
{
setTimeout(a,300);
}
c();
</script>
</body>
</html>
Program 10: Develop and demonstrate a html5 file that includes Javascript that
uses functions for the following problems:
a) Parameter: a string
b) Output: the position in the string of the left-most vowel
c) Parameter: a number
d) Output: the number with its digits in the reverse order
<html>
<body>
<script type="text/javascript">
var str = prompt("Enter the Input","");
if(!(isNaN(str)))
{
var num,rev=0,remainder;
num = parseInt(str);
while(num!=0)
{
remainder = num%10;
num = parseInt(num/10);
rev = rev * 10 + remainder;
}
alert("Reverse of "+str+" is "+rev);
}
else
{
str = str.toUpperCase();
for(var i = 0; i < str.length; i++)
{
var chr = str.charAt(i);
if(chr == 'A' || chr == 'E' || chr == 'I' || chr == 'O' || chr ==
'U')break;
}
if( i < str.length )
alert("The position of the left most vowel is "+(i+1));
else
alert("No vowel found in the entered string");
}
</script>
</body>
</html>
Program 12.Write a program to display Date and Time using JavaScript
<!DOCTYPE html>
<html>
<body>
<h2>My First JavaScript</h2>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>
Program 13.Write a JavaScript program to Display sum of two integer numbers
using html.
<htmllang=“en”><body><h1>SumofTwonumbers</h1>
<p>Myfirstparagraph.</p>
<SCRIPTTYPE="text/javascript">
var firstNumber,secondNumber,number1,number2,sum;
firstNumber = window.prompt("Enter first integer", "" );
secondNumber=window.prompt("Enter second integer","");
number1=parseInt(firstNumber);
number2=parseInt(secondNumber);
sum=number1+number2;
document.writeln("<H1>The sum is"+sum+"</H1>");
</SCRIPT>
</body>
</html>
Program 14: Execute a block of code based on user input
JavaScript switch Statement.
<html>
<body>
<p>Write Banana, Orange or Apple in the input field and click the button.</p>
<p>The switch statement will execute a block of code based on your input.</p>
<input id="myInput" type="text">
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var text;
var fruits = document.getElementById("myInput").value;
switch(fruits) {
case "Banana":
text = "Banana is good!";
break;
case "Orange":
text = "I am not a fan of orange.";
break;
case "Apple":
text = "How you like them apples?";
break;
default:
text = "I have never heard of that fruit...";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
Program 15 : Write a JavaScript program with array to display current day.
<html>
<body>
<h1>JavaScript Dates</h1>
<h2>The getDay() Method</h2>
<p>Return the weekday as a number.</p>
<p>You can use an array of names to return the weekday as a name:</p>
<p id="demo"></p>
<script>
const days =
["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
const d = new Date();
let day = days[d.getDay()];
document.getElementById("demo").innerHTML = day;
</script>
</body>
</html>
