1.
Write a program in html using heading tags
<html>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
Output : -
2. write a html program to internal and external links in web page
<html>
<body>
<h1 id="top">Links to Sections of The Same Page</h1>
<section>
<ul>
<li><a href="#section1">#section1</a></li>
<li><a href="#section2">#section2</a></li>
<li><a href="[Link] Link </a></li>
</ul>
</section>
<section id="section1">
<h3>(#section1) Section 1</h3>
<p>
<pre>Internal Link : Internal links are hyperlinks that direct the readers to a target page on your website.
Internal link is a link from one page to another page on the same domain.
</pre></p>
</section>
<section id="section2">
<h3>(#section2) Section 2</h3>
<p><pre>External Link : External links are that which wants customers clicking on links that directs
them away from your website.
External links are sometimes called outbound links are an important part of search engine optimization.
</pre> </p>
</section>
<p>
<a href="#top">Back to Page Heading</a> or
<a href="#">Back to Top of Page</a>
</p>
</section>
</body>
</html>
Output :
3. Write a html program to insert image in a webpage and use the image properties
<html>
<body>
<h2> Inserting image to the web page</h2>
<img src="[Link] height="180" width="300" alt="animal image">
</body>
</html>
Output :
4. write a html program to format text using css
<html >
<head>
<style>
.text-color {
color: blue;
}
.text-align-center {
text-align: center;
}
.text-decoration {
text-decoration: underline;
}
.text-indent {
text-indent: 20px;
}
.letter-spacing {
letter-spacing: 2px;
}
.text-transform {
text-transform: uppercase;
}
.word-spacing {
word-spacing: 5px;
}
.text-direction {
direction: rtl;
}
</style>
</head>
<body>
<p class="text-color">Changing Text Color</p>
<p class="text-align-center">Aligning Text</p>
<p class="text-decoration">Adding Text Decoration</p>
<p class="text-indent">Setting Text Indentation</p>
<p class="letter-spacing">Adjusting Letter Spacing</p>
<p class="text-transform">Controlling Text Transformation</p>
<p class="word-spacing">Setting Word Spacing</p>
<p class="text-direction">Specifying Text Direction</p>
</body>
</html>
Output :
5. write a JavaScript program to print the contents of the current window
<body>
<head>
<script language="javascript">
function print_current_page()
{
[Link]();
}
</script >
</head>
<body>
<p></p>
<p>Click the button to print the current page.</p>
<button onclick="print_current_page()">Print this page</button>
</body>
</html>
Output:
[Link] a java script program to get the current date
<html>
<body>
<p>Get the current date and time:</p>
<p id="demo"></p>
<script>
const d = new Date();
[Link]("demo").innerHTML = d;
</script>
</body>
</html>
Output:
[Link] a java script program to convert temperatures to and from Celsius , Fahrenheit
<html>
<head>
<script language="javascript">
alert("welcome");
// Define a function to convert Celsius to Fahrenheit
function cToF(celsius) {
var cTemp = celsius;
var cToFahr = cTemp * 9 / 5 + 32;
var message = cTemp + '\xB0C is ' + cToFahr + ' \xB0F.';
[Link]("convert Celsius to Fahrenheit : "+message);
}
// Define a function to convert Fahrenheit to Celsius
function fToC(fahrenheit) {
var fTemp = fahrenheit;
var fToCel = (fTemp - 32) * 5 / 9;
var message = fTemp + '\xB0F is ' + fToCel + '\xB0C.';
[Link]("convert Celsius to Fahrenheit : "+message);
}
cToF(60);
[Link]("<br>");
fToC(45);
</script>
</head>
<body>
<h1>
convert Fahrenheit to Celsius and convert Celsius to Fahrenheit
</h1>
</body>
Output:
[Link] a java script exercise to create a variable using a user define name
<html>
<body>
<script>
var var_name = 'abcd';
var n = 120;
this[var_name] = n;
[Link](" The User defeine variable name : "+this[var_name]);
</script>
</body>
</html>
Output:
[Link] a java script program to calculate multiplication and division of two numbers (input from user)
<!DOCTYPE html>
<html>
<script language="javascript">
function multiplyBy()
{
num1 = [Link]("firstNumber").value;
num2 = [Link]("secondNumber").value;
[Link]("result").innerHTML = num1 * num2;
}
function divideBy()
{
num1 = [Link]("firstNumber").value;
num2 = [Link]("secondNumber").value;
[Link]("result").innerHTML = num1 / num2;
}
</script>
<form>
1st Number : <input type="text" id="firstNumber" /><br>
2nd Number: <input type="text" id="secondNumber" /><br>
<input type="button" onClick="multiplyBy()" Value="Multiply" />
<input type="button" onClick="divideBy()" Value="Divide" />
</form>
<p>The Result is :
<span id = "result"></span>
</p>
</body>
</html>
Output:
10. write a javascript program to set the background color of a paragraph
<html>
<head>
<script language="javascript">
function set_background() {
docBody = [Link]("body")[0];
myBodyElements = [Link]("p");
myp1 = myBodyElements[0];
[Link] = "rgb(255,0,0)";
myp2 = myBodyElements[1];
[Link] = "rgb(255,255,0)";
}
</script>
</head>
<body>
<input type="button" value="Click to set paragraph background color" onclick="set_background()">
<p>w3resource JavaScript Exercises</p>
<p>w3resource PHP Exercises</p>
</body>
</html>
Output:
[Link] a java script function to get the value of first name and last name and print the result
<html>
<head>
<script language="javascript">
function getFormvalue()
{
var x=[Link]("form1");
for (var i=0;i<[Link];i++)
{
if ([Link][i].value!='Submit')
{
[Link]([Link][i].value);
[Link]("<br>");
}
}
}
</script>
</head>
<head>
<meta charset=utf-8 />
<title>Return first and last name from a form - w3resource</title>
</head><body>
<form id="form1" onsubmit="getFormvalue();">
First name: <input type="text" name="fname" value="Sankara"><br>
Last name: <input type="text" name="lname" value="College"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Output :
[Link] a JavaScript program to highlight the bold words of the following paragraph on mouse over a
certain link
<html>
<head>
<script language="javascript">
var bold_Items;
[Link] = getBold_items();
function getBold_items()
{
bold_Items = [Link]('strong');
}
function highlight()
{
for (var i=0; i<bold_Items.length; i++)
{
bold_Items[i].[Link] = "green";
}
}
function return_normal()
{
for (var i=0; i<bold_Items.length; i++)
{
bold_Items[i].[Link] = "black";
}
}
</script>
</head>
<body>
<p>
[<a href="#" onMouseOver="highlight()" onMouseOut="return_normal()">
On mouse over here bold words of the following paragraph will be highlighted</a>]
</p>
<p><strong>We</strong> have just started <strong>this</strong> section for the users
(<strong>beginner</strong> to intermediate) who <strong>want</strong> to work with
<strong>various</strong> JavaScript <strong>problems</strong> and write scripts online to
<strong>test</strong> their JavaScript<strong>skill</strong>.</p>
</body>
</html>
Output:
[Link] a JavaScript function that create a table by accepting the number of row and column from the
user
<html>
<head>
<script language="javascript">
function createTable()
{
rn = [Link]("Input number of rows", 1);
cn = [Link]("Input number of columns",1);
for(var r=0;r<parseInt(rn,10);r++)
{
var x=[Link]('myTable').insertRow(r);
for(var c=0;c<parseInt(cn,10);c++)
{
var y= [Link](c);
[Link]="Row-"+r+" Column-"+c;
}
}
}
</script>
<meta charset=utf-8 />
<title>Create a table</title>
<style type="text/css">
body {margin: 30px;}
</style>
</head>
<body>
<table id="myTable" border="1">
</table><form>
<input type="button" onclick="createTable()" value="Create the table">
</form></body>
<html>
Output:
14. write a JavaScript program to get the width and height of the window (any time the window is
resized)
<html>
<head>
<script language="javascript">
function getSize()
{
var w = [Link];
var h = [Link];
[Link]('wh').innerHTML = "<h1>Width: " + w + " • Height: " + h + "</h1>";
}
</script>
<title>Window Size : height and width</title>
</head>
<body onload="getSize()" onresize="getSize()">
<div id="wh">
</div>
<body>
</body>
<html>
Output: