Web Tech File Code Only

PROGRAM-1
Program to display some basic tags.(Example:-Body,html,heading
h1-h6,paragraph,comments,title etc)
CODE
<!doctype html>
<html>
<head>
<title>SAHIL PATHAK</title>
</head>
<body>
<h1 align="center">SAHIL</h1>
<h2 align="right">this is heading tag h2</h1>this is comment
<h3 align="left">this is heading tag h3</h1>
<h4 align="center">this is heading tag h4</h1>
<h5 align="right">this is heading tag h5</h1>
<h6 align="left">this is heading tag h6</h1>
<p>hello my name is sahil pathak</p>
</body>
</html>
1
OUTPUT
PROGRAM-2
Prints an hl level heading followed by a horizontal line whose width is 100%. Below the
horizontal line print a paragraph relating to the text in the heading.
CODE
<!doctype html>
<html>
<head>
</head>
<body>
<h1 align="center">SAHIL</h1><hr>
<p>hello my name is sahil pathak</p>
2
</body>
</html>
OUTPUT
PROGRAM-3
i. Print a paragraph that is a description of a book, include the title of the book as well as its
author. Names and titles should be underlined. Use italics and bold and other text formatting tags
wherever necessary.
CODE
<!doctype html>
<html>
<head>
</head>
<body>
<p align="center"><b><u><i>Three Men In A Boat</i></u></b><br></p>
<p align="center"><b><i><u>by Jerome K.Jerome</i></u></b><br></p>
<p align="justify"><big><quote>Three Men in a Boat</quote></big> (To Say Nothing of the Dog),
<mark>published in <del>1990</del><ins><big>1889</big></ins></mark>, is a humorous
account by English writer <i><b><tt>Jerome K. Jerome</tt></b></i> of
a two-week boating holiday on the Thames from Kingston
upon Thames to Oxford and back to Kingston. <strike>The book was initially
intended to be a serious travel guide</strike>The book was initially
intended to be a serious travel guide, with accounts of local history along the
route, but the humorous elements took over to the point where the serious and somewhat
3
sentimental passages seem a distraction to the comic novel. <strong>One of the most</strong>
praised things about <em>Three Men in a Boat</em> is how undated it appears to modern readers
– the jokes have been praised as fresh and witty. </p>
</body>
</html>
OUTPUT
ii. Print your name to the screen with every letter being a different heading size.
CODE
4
<!doctype html>
<html>
<head>
</head>
<body>
<h1>s</h1><h2>a</h2><h3>h</h3><h4>i</h4><h5>l</h5>
</body>
</html>
OUTPUT
PROGRAM-4
Print the squares of the numbers 1 - 10. Each number should be on a separate line, next to it the
number 2 superscripted, an equal sign and the result. (Example: 12 = 1)
CODE
<!doctype html>
<html>
<head>
5
</head>
<body>
1<sup>2</sup>=1<br>
2<sup>2</sup>=4 <br>
3<sup>2</sup>=9 <br>
4<sup>2</sup>=16<br>
10<sup>2</sup>=100<br>
</body>
</html>
OUTPUT
6
PROGRAM-5
Print two addresses in the same format used on the front of envelopes (sender’s address in top
left corner, receivers address in the center)
CODE
<!doctype html>
<html>
<head>
</head>
<body>
<address><pre>sahil pathak
ashok vihar,delhi-110052</pre></address>
<address align="center"><pre>vips college
pitampura,delhi-110034</pre></address>
</body>
</html>
7
OUTPUT
PROGRAM-6
Create a web page giving the following train details: Train name. Starting place, Destination,
Arrival and Departure time., Fare.
Place a border for the table and use cell padding to present cell data with clarity with colors too.
Align the table in center of the screen. Use a caption saying - Time Table and Fare list".
CODE
<!doctype html>
<html>
<head>
</head>
<body>
<table border="1" cellpadding="10">
<tr bgcolor="red" align="center">
<th rowspan="2" >Name of Train</th>
<th rowspan="2">Place</th>
<th rowspan="2">Destination</th>
<th colspan="2">Time</th>
<th rowspan="2">Fare</th>
</tr>
<tr bgcolor="red" align="center">
8
<th >Arrival</th>
<th >Departure</th>
</tr>
<tr bgcolor="yellow" align="center">
<td >Rajdhani</td>
<td >Bombay</td>
<td >Delhi</td>
<td>07:30</td>
<td>09:45</td>
<td >Rs.100</td>
</tr>
<td >Deccan</td>
<td >Madras</td>
<td >Delhi</td>
<td>05:30</td>
<td>02:45</td>
<td >Rs.200</td>
</tr>
<td >Madras Mail</td>
<td >Delhi</td>
<td >Bombay</td>
<td>02:30</td>
<td>06:10</td>
<td >Rs.200</td>
9
</tr>
<caption style="caption-side:bottom">Time Tabe and Fare list</caption>
</table>
</body>
</html>
OUTPUT
PROGRAM-7
Write a program to create Nested Tables in HTML.
10
CODE
<!doctype html>
<html>
<head>
</head>
<body>
<table border="5" cellpadding="10"bordercolor="grey">
<tr>
<th colspan="2">HTML Table</th>
</tr>
<tr>
<td rowspan="2">cell 1</td>
<td align="center">cell 2
<table border="5" bordercolor="grey" >
<tr>
<th colspan="2">Nested HTML Table</th>
</tr>
<tr>
<td align="center">cell 2.1</td>
</tr>
<tr>
</tr>
11
</table>
</td>
</tr>
</table>
</body>
</html>
OUTPUT
PROGRAM-8
Write an HTML code using list tags to generate the following output:-
Website outline
1.Home page
2.Links page
A. News sites
B .Stock sites
3.Feedback page
 Item 1
 Item 2
* Contacts
* Html example
Coding
12
It should be done for HTML
Newsgroup
These are created for data sharing.
CODE
<!doctype html>
<html>
<head>
</head>
<body>
<h3 align="center">Website outline</h3>
<ol type="1">
<li>Home Page</li>
<li>Links Page</li>
<ol type="A">
<li>News sites</li>
<li>Stock sites</li>
</ol>
<li>Feedback page</li>
<ul type="disc">
<li>Item 1</li>
<li>Item 2</li>
<ul type="circle">
<li>Contacts</li>
<li>HTML example</li>
</ul>
13
<dl>
<dt>Coding</dt>
<dd>It should be done fror HTML</dd>
<dt>Newsgroup</dt>
<dd>These are created for data sharing</dd>
</dl>
</ul>
</ol>
</body>
</html>
OUTPUT
14
PROGRAM-9
Write a program in HTML using anchor element to show the following output with
hyperlinks.
Here are my favorite Internet Search Engines
and email address:
Yahoo: http://www.yahoo.com
Google: http://www.google.com
My email address is:
[email protected]
CODE
<!doctype html>
<html>
<head>
</head>
<body>
<h3 align="center">Here are my favourite Internet Search Engine<br>
and email address:</h3>
<p align="center"><b>Yahoo:</b><a
href="http:://www.yahoo.com">http:://www.yahoo.com</a></p>
<p align="center"><b>Google:</b><a
href="http:://www.google.com">http:://www.google.com</a></p>
<p align="center"><b>My email address is:</b><br><a

href="mailto:[email protected]">[email protected]</a></p>
</body>
</html>
15
OUTPUT
PROGRAM-10
Write HTML code to design the form below:-

CODE
<body bgcolor="#87FF14">
<form align="center">
<form method="post"action="/cgi-bin/formmail">
<input type="hidden"name="recipient"value="[email protected]">
16
<h3 align="center" style="color:red" >Personal Details</h3>
Name:<input type="text" size="45px"name="name">
<br><br>
Password:<input type="password"size="45px"name="password" >
<br><br>
Email id:<input type="email"size="45px" name="email">
<br><br>
Gender:<input type="hidden" name="gender">
<input type="radio" name="gender">Male
<input type="radio" name="gender">Female
<br><br>
Contacts:<input type="text"size="45px" name="contact">
<br><br>
<h3 align="center" style="color:red" >Educational Qualification</h3>
Degree:<input type="hidden"size="45px" name="degree">
<select name="degree" >
<option selected>--Select Group--
<option>B.COM
<option>M.COM
<option>B.A
<option>M.A
<option>B.Sc
</select>
<br><br>
Engineering:<input type="hidden"size="45px" name="Engineering">
17
<select name="Engineering" >
<option slected>--Select Group--
<option>B.Tech
<option>M.Tech
<option>BCA
<option>MCA
</select>
<br><br>
Hobbies:<input type="hidden" name="hobbies">
<input type="checkbox" name="hobbies">Playing Chess
<input type="checkbox" name="hobbies">Reading Books
<br>
<h3 align="center" style="color:red" >Address</h3>
<textarea rows="4"col="50" size="50px"></textarea>
<br><br>
Attach Resume:<input type="file" name="attach file">
<br><br>
<input type="submit"size="45px" >
</form>
</body>
</html>
OUTPUT
PROGRAM-11
Create employee registeration webpage using HTML form elements

18
CODE
<!doctype html>
<html>
<head>
</head>
<body >
<form align="center">
<form method="post"action="/cgi-bin/formmail">
<input type="hidden"name="recipient"value="[email protected]">
<h3 align="center" style="color:red"><img

src="officeboy.jpg"height="50px"width="50px">Employee Registeration Form</h3>
<input type="radio" name ="gender"checked>Mr.
<input type="radio" name ="gender">Mrs.
<input type="radio" name ="gender">Ms.
<br>
First Name:<input type="text" size="45px"name="fname"placeholder="First name">
<br><br>
Last Name:<input type="text" size="45px"name="lname"placeholder="Last name">
<br><br>
Mail Address 1:<input type="email"size="45px" name="mail1">
<br><br>
Mail Address 2:<input type="email"size="45px" name="mail2">
<br><br>
city:<input type="text" size="45px"name="city">
<br><br>
19
<label for="State"align = "left">State</label>
<select name = "state" >
<option>Delhi
<option>Gujarat
<option>Mumbai
<option>Punjab
<option>Bangalore
</select>
<br><br>
zip:<input type="text" size="45px"name="zip">
<br><br>
Upload Photo:<input type="file" value ="browse"name="photo">
<br><br>
Email:<input type="email"size="45px" name="email">
<br><br>
Mobile:<input type="Text"placeholder="+91" name="mobile">
<br><br>
Languages known:<input type="hidden" name="language">
<input type="checkbox" name="language">Gujarati<br>
<input type="checkbox" name="language">Hindi<br>
<input type="checkbox" name="language">English<br>
<input type="checkbox" name="language">Marathi<br>
Additional Information:<textarea placeholder="optional"name="addinfo"rows="3"></textarea><br>
<input type="submit">
<input type="reset">
</form>
20
</body>
</html>
OUTPUT
PROGRAM-12
Write an HTML code to demonstrate various types of frames and also use meta tag in it.
I). SIMPLE FRAME

CODE
<!doctype html>
<html>
<head>
<meta name="prog12.3" content="flower,frame,sunflower">
</head>
<frameset cols="20,80">
<frame src="flower1.jfif">
</frameset>
</html>
OUTPUT
II). NESTED FRAME
21
CODE
<!doctype html>
<html>
<head>
<meta name="prog12.3" content="flower,frame,sunflower,nestedframe">
</head>
<frameset rows="20,80">
<frameset cols ="30,70">
</frameset>
</frameset>
</html>
OUTPUT
III). FLOATING FRAME

CODE
<!doctype html>
<html>
<head>
<meta name="prog12.3" content="flower,iframe,sunflower">
</head>
<iframe name="float1" src="flower1.jfif" height="500" width="500">
22
</html>
OUTPUT
IV). LINKED FRAME

CODE
<!doctype html>
<html>
<head>
<meta name="prog12.3" content="flower,frame,sunflower">
</head>
<frameset cols="20,80">
<frame src="prog9for12.4.html" name="f1">
<frame src="prog8for12.4.html"name="f2">
</frameset>
</html>
OUTPUT
AFTER CLICKING ON GEEKSFORGEEKS LINK OUTPUT
23
PROGRAM-13
Write HTML code using image map and its various attributes
CODE
<!doctype html>
<html>
<head>
</head>
<body>
<img src="flower1.jfif" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="10,20,400,450" alt="nextflower" href="flower2.jfif">
</map>
</body>
24
</html>
OUTPUT
AFTER CLICKING ON IMAGE OUTPUT
PROGRAM-14
Write HTML code to show the use of name attribute for internal linking concept.
CODE
<!doctype html>
<html>
<head>
25
</head>
<body>
<h1><a>This is a sample for name attribute internal linking</h1><br><br><br><br>
<h3><a href="#ch1">Chapter1</a><br></h3><br>
<h3><a href="#ch6">Chapter6</a><br></h3><br><br><br><br><br>
<p><a name="ch1"></a>Chapter 1</p>
<p>HTML Basics</p><br><br><br><br>
<p>HTML Commands</p><br><br><br><br>
<p>HTML Attributes</p><br><br><br><br>
<p>HTML Tables</p><br><br><br><br>
<p>HTML Frames</p><br><br><br><br>
<p>HTML Floating Frames</p><br><br><br><br>
</body>
</html>
OUTPUT
26
27
AFTER CLICKING ON CHAPTER 3 LINK OUPUT
PROGRAM-15
Demonstrate the use of different types of selectors in CSS

CODE
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="stylesheet.css" type="">
<meta charset="UTF-8" content="CSS Practice!">
<title>Document</title>
</head>
<body>
<h1>Welcome <br /> to DeBugging !</h1>
<h4 id="mainIntro">Here we debug everything, from life to lines of code! <br> Hope you enjoy!
</h4>
<p class="para1">
<pre>This is an imaginary brand started by happikin a legendary low level programmer
in pursuit of treating all socially insignificant problems using technology.
28
</pre>
</p>
<hr noshade width="75%" color="brown">
<p>Keep calm and breathe air!</p>
</body>
</html>
CSS FILE
*{ /* universal selector */
text-align: center;
h1 { /* element selector */
font-family: Consolas;
color:red;
#mainIntro { /* id selector */
background-color: aquamarine;
.para1 {
background-color:blueviolet;
OUTPUT
29
PROGRAM-16
Write code in HTML to show various types of CSS inclusion such as :

a) External Stylesheet
CODE
<!doctype html>
<html>
<head>
<title>Types of Style Sheets</title>
<link rel="stylesheet" type="text/css"href="stylep16.css">
</head>
<body>
<h1>This is heading</h1>
<p>This is paragraph</p>
</body>
</html>
CSS FILE
body
background-color:lightblue
h1
color:navy
margin-left:20px
30
OUTPUT
b) Internal Stylesheet
CODE
<!doctype html>
<html>
<head>
<style>
body
31
{
background-color:linen
h1
color:maroon
margin-left:40px
</style>
</head>
<body>
<p>This is paragraph</p>
</body>
</html>
OUTPUT
32
c) Inline Stylesheet
CODE
<!doctype html>
<html>
<head>
</head>
<body>
<h1 style="color:blue;text-align:center">This is heading</h1>
<p style="color:red">This is paragraph</p>
<p style="font-size:20pt;color:#0000FF">Sahil with 20 point text size</p>
</body>
</html>
OUTPUT
33
PROGRAM-17
Write code in HTML to style the shopping list given below using CSS
CODE
<!doctype html>
<html>
<head>
<title>Linking External Style Sheets</title>
<link rel="stylesheet" type="text/css"href="stylep17.css">
</head>
<body>
<h1>Shopping List for<em>Monday</em>:</h1>
<ul>
<li>bread</li>
<ul>
<li> white bread</li>
<li> Rye bread</li>
34
<li> whole wheat bread</li>
</ul>
<li>Rice</li>
<li>Potatoes</li>
<li>Pizza <em>with mushrooms</em></li>
</ul>
<a href="http://www.deitel.com">Grocery Store</a>
</body>
</html>
CSS File
text-decoration:none
A:hover
text-decoration:underline;color:red;background-color:#CCFFCC
li em
color:green;font-weight:bold
ul
margin-left:2cm
35
ul ul
text-decoration:underline;margin-left:.15cm
OUTPUT
PROGRAM-18
Write code in CSS to set positioning of elements

CODE
<!doctype html>
<html>
36
<head>
<style>
#sticky
height:150px;
width:150px;
background:yellow;
border:1px solid #000;
position:sticky;
top:10px;
left:100px;
#fixed
height:150px;
width:150px;
background:pink;
position:fixed;
top:70px;
left:400px;
#relative
37
{
height:150px;
width:150px;
background:red;
position:relative;
top:150px;
left:200px;
#absolute
height:150px;
width:150px;
background:green;
position:absolute;
top:500 px;
left:100px;
#static
height:150px;
width:150px;
background:orange;
38
position:static;
body
background-color:linen
h1
color:maroon
margin-left:40px
</style>
</head>
<body>
<p><pre>different types
of postions in html
Elements are
then positioned using
the top, bottom,
left, and right
properties. However,
39
these properties
will not work unless
the position
property is
set first.
They also work
differently depending
on the position value.</p></pre>
<div id="sticky">sticky:- moves when scrolling</div>
<div id="relative">relative</div>
<p><pre>different types
of postions in html
Elements are
then positioned using
the top, bottom,
left, and right
properties. However,
these properties
will not work unless
the position
property is
set first.They also work
differently depending
on the position value.</p></pre>
<div id="static">static:- not affected by top ,bottom,left,right </div>
<div id="fixed">fixed:not affected by scrolling</div>
40
<div id="absolute">absolute</div>
</body>
</html>
OUTPUT
AFTER SCROLLING OUTPUT
41
PROGRAM-19
Write code in CSS to set properties of links

CODE
<!doctype html>
<html>
<head>
<style>
a:visited
{
color:brown
}
a:hover
{
color:aqua
}
a:link
{
color: darkgreen;
}
a:active
{
color: red;
}
</style>
</head>
<body>
<h1>program to set link properties</h1>
<a href="https://practice.geeksforgeeks.org">geeks for geeks</a><br>
<a href="https://en.wikipedia.org/wiki/.org">wikipedia</a><br>

</body>
</html>
OUTPUT
HOVERED OVER LINK OUTPUT
CLICKED ON LINK OUTPUT
42
PROGRAM-20
Write code in CSS and HTML to style the following table:
CODE
<!DOCTYPE html>
<html>
<head>
<style>
table
{
43
empty-cells: hide;
border-collapse: collapse;
}
table, td, th
{
border: 4px solid black;
border-spacing: 20px;
}
caption
{
caption-side: bottom;
}
#customers tr:nth-child(even)
{
background-color:yellow;
}
th
{
background-color:green;
color: white;
}
</style>
</head>
<body>
<h2>Setting Table properties:</h2>
<table id="customers">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
44
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Philip Cramer</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
<tr>
<td>Paris spcialits</td>
<td>Marie Bertrand</td>
</tr>
</table>
</body>
OUTPUT
45
PROGRAM-21
Write code in CSS to style Lists using various list style setting properties
CODE
<html>
<head>
<style>
ul.a
{
list-style-position: inside;
list-style-type:circle;
}
ol.b
{
list-style-position: outside;
list-style: upper-roman;
}
ul.c
{
list-style-position:inside;
list-style-image: url("coffee.png");
}
</style>
</head>
<body>
<p>example of unordered list</p>
<ul class ="a">
<li>coffee</li>
<li>tea</li>
<li>coca cola</li>
</ul>
<p>example of ordered list</p>
<ol class ="b">
<li>coffee</li>
<li>tea</li>
<li>coca cola</li>
</ol>
<p>example of unordered list</p>
<ul class ="c">
<li>coffee</li>
<li>tea</li>
<li>coca cola</li>
46
</ul>
</body>
</html>
OUTPUT
47
PROGRAM-22
Write code in CSS using Font properties

CODE
<html>
<head>

<style>
p.normal
{
font-size: "40px";
font-family:Times New Roman ;
font-weight: normal;
font-style: normal;
}
p.italic
{
font-size: "14px";
font-family:Arial ;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
}
</style>
</head>
<body>
<p class="normal">this is a para in normal</p>
<p class="normal">normal text continued</p>
<p class="italic">this is a para in italic</p>
</body>
</html>
OUTPUT
48
PROGRAM-23
Write code in CSS for conflicting styles or setting precedence of stylesheets

CODE
<html>
<head>
<link rel="stylesheet" href="stylebg.css">
<style>
p
{
background-color: burlywood;
}
</style>
</head>
<body>
<p style="background-color:aqua">hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
</body>
</html>
CSS CODE
p
{
background-color:pink;
}
OUTPUT
49
PROGRAM-24
Write program in javascript to display various data types and their types using typeof
operator
CODE
<!doctype html>
<html>
<head>
<title>data types of js</title>
</head>
<body>
<script>
var x="hello";
var y=24;
var z=34.5;
var a;
var b=null;
var c=["red","yellow","green"];
var d={"name":"sahil","surname":"pathak"};
var f=function()
{
return "hello world";
}

document.writeln(typeof x+"<br>");
document.writeln(typeof y+"<br>");
document.writeln(typeof z+"<br>");
document.writeln(typeof a+"<br>");
document.writeln(typeof b+"<br>");
document.writeln(typeof c+"<br>");
document.writeln(typeof d+"<br>");
document.writeln(typeof f+"<br>");
</script>

</body>
</html>
50
OUTPUT
51
PROGRAM-25
Write program in javascript to demonstrate different ways to present output like

document write,console etc
CODE
<!DOCTYPE html>
<html>
<head>
<script>
function update()
{
document.getElementById("demo").innerHTML = "New text in p tag using getelementb
yid"
}
</script>
</head>
<body>
<p id="demo">This is sample text in p tag.</p>
<script>
window.alert("Using alert box");
document.write("This output is using document.write:"+5);
console.log(15+6);
</script>
<button onclick="update()">Try it</button>
</body>
</html>
52
OUTPUT
AFTER PRESSING TRY IT BUTTON OUTPUT
53
PROGRAM-26
Write a program in javascript to demonstrate array operation.

CODE
<!DOCTYPE html>
<html>
<head>
<title>array functions</title>
</head>
<body>
<script>
var arr=["red","yellow","green"];
arr.push("blue");
document.write("<b>push blue:</b> ")
for(var i=0;i<arr.length;i++)
document.writeln(arr[i]+"\t");

arr.pop();
document.write("<br>");
document.write("<b>pop:</b> ");
arr.reverse();
document.write("<b>reverse: </b>");
arr.sort();
document.write("<b>sort: </b>");
arr.splice(0,2,["purple","orange","white"]);
document.write("<b>splice(0,2,['purple','orange','white']: </b>");
arr.unshift("brown");
document.write("<b>unshift brown:</b> ");

</script>
54

</body>
</html>
OUTPUT
55
PROGRAM-27
Write a javascript to find the area of a triangle where lengths of the three of its sides are
5,6,7.
CODE
<html>
<head>
<title>area of triangle</title>
</head>
<body>
<script>
var a=5,b=6,c=7,area=0,s=0;
s=(a+b+c)/2;
area=Math.sqrt(s*(s-a)*(s-b)*(s-c));
document.write("area of triangle is "+Math.round(area));
</script>
</body>
</html>
OUTPUT
56
PROGRAM-28
Write a javascript program to determine whether a given year is leap year in the
Gregorian calendar.
CODE
<html>
<head>
<title>leap year</title>
</head>
<body>
<script>
var year=prompt("enter year: ");
document.write(year+"<br>");
if(year%4==0)
{
document.write("leap year");2012
}
else
{
document.write("Not a leap year");
}
</script>
</body>
</html>
OUTPUT
57
PROGRAM-29
Write a JavaScript program to calculate multiplication and division of two numbers(input

from user).
CODE
<html>
<head>
<title>multiplication and division</title>
</head>
<body>
<form>
1st number:<input type="number" id="a"><br>
2nd number: <input type="number" id="b"><br>
<input type="button" value=multiply onclick="multiply()">
<input type="button" value=divide onclick="divide()">
</form>
<p>The result is </p>
<p id="result"></p>
<script>
function multiply()
{
num1=document.getElementById("a").value;
num2=document.getElementById("b").value;
document.getElementById("result").innerHTML=num1*num2;
}
function divide()
{
num1=document.getElementById("a").value;
num2=document.getElementById("b").value;
document.getElementById("result").innerHTML=num1/num2;
}
</script>
</body>
</html>
58
OUTPUT
59
PROGRAM-30
WAP to find list of prime numbers between 1 to 100.

CODE
<html>
<head>
<title>prime number from 1 to 100</title>
</head>
<body>
<script>
for (var counter = 1; counter <= 100; counter++)
{
var notPrime = false;
for (var i = 2; i <= counter; i++)
{
if ((counter%i)==0 && i!=counter)
{
notPrime = true;
}
}
if (notPrime == false)
{
document.write(counter+"<br>");
}
}
</script>
</body>
</html>
60
OUTPUT
61
PROGRAM-31
WAP to demonstrate various methods of string object in JavaScript.

CODE
<!DOCTYPE html>
<head>
<title>String methods</title>
</head>
<body>
<h3>String methods in JavaScript</h3>
<hr>
<label id="label"></label>
<script>
var str1 = new String("Sahil");
var str2 = new String(" Pathak");
var str3 = str1.concat(str2);
document.write("Concat() : " + str3 + "<br>");
document.write("charAt(3) : " + str2.charAt(3) + "<br>");
document.write("charCodeAt(3) : " + str2.charCodeAt(3) + "<br>");
document.write("indexOf(\"Pathak\"): " + str3.indexOf("Pathak") + "<br>");
document.write("Slice() : " + str3.slice(9,14) + "<br>");
</script>
</body>
</html>
62
OUTPUT
63
PROGRAM-32
WAP to demonstrate various methods of Date object in JavaScript.

CODE
<!DOCTYPE html>
<html lang="en">
<head>
<title>Date methods</title>
</head>
<body>
<h3>Date Object Methods Demonstration</h3>
<hr>
<script>
var dateObj = new Date();
document.write("Current date : " + dateObj.getDate() + "<br>");
document.write("Date.now() : " + Date.now() + "<br>");
document.write("getFullYear() : " + dateObj.getFullYear() + "<br>");
document.write("getTimezoneOffset() : " + dateObj.getTimezoneOffset() + "<br>");
dateObj.setMilliseconds(19987);
document.write("getSeconds() : " + dateObj.getSeconds() + "<br>");
</script>
</body>
</html>
64
OUTPUT
65
PROGRAM-33
WAP to demonstrate various methods of Math object in JavaScript.

CODE
<html>
<head>
<title>Math objects</title>
</head>
<body>
<script>
var flr,lg,mx,mn,pw,rnd,srt,ep,as,cl;
flr=Math.floor(9.2);
lg=Math.log(2.718282);
mx=Math.max(10,20);
mn=Math.min(10,20);
pw=Math.pow(2,6);
rnd=Math.round(9.75);
srt=Math.sqrt(400);
ep=Math.exp(1);
as=Math.abs(-23);
cl=Math.ceil(9.2);
document.write("<br>"+"floor is "+flr);
document.write("<br>"+"log is "+lg);
document.write("<br>"+"sqrt is "+srt);
document.write("<br>"+"max is "+mx);
document.write("<br>"+"min is "+mn);
document.write("<br>"+"absolute value is "+as);
document.write("<br>"+"ceil is "+cl);
document.write("<br>"+"round is "+rnd);
document.write("<br>"+"power is "+pw);
document.write("<br>"+"exponent is "+ep);
</script>
</body>
</html>
66
OUTPUT
67
PROGRAM-34
WAP to demonstrate various methods of Window object in JavaScript.

CODE
<html>
<head>
<title>Window object</title>
</head>
<body>
<script>
window.alert("window object");
var n=window.prompt("enter number ");
window.document.write("hello");
var w;

function openwin()
{
w=window.open("prog 30.html",height=100,width=200);
}

function closewin()
{
w.window.close();
}
function focuswin()
{
w.window.focus();
}
function blurwin()
{
w.window.blur();
}
</script>
<p>hello my name is sahil pathak</p>
<button id="open" onclick=openwin()>open window</button>
<button id="close" onclick=closewin()>close window</button>
<button id="focus" onclick=focuswin()>focus window</button>
<button id="blur" onclick=blurwin()>blur window</button>
</body>
</html>
68
OUTPUT
When open window button is pressed
When close window button is pressed
69
when blur window button is pressed
When focus window button is pressed
PROGRAM-35
WAP to demonstrate various Events in JavaScript.

CODE
<!DOCTYPE html>
<html lang="en">
<head>
<title>event handling</title>
<style>
#div1 {
background-color: whitesmoke;
border: 1 solid black;
height: 500;
width: 500;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<table>

<tr>
<td><input type="button" value="HoverEvent" onmouseover="overBut
ton(this)" onmouseout="outButton(this)"></td>
</tr>
<label for="bg_color">Select backgroundColor : </label>
<select name="" id="bg_color" onchange="changeBackground(this)">
<option selected>--background--</option>
<option value="red">red</option>
<option value="blue">blue</option>
<option value="brown">brown</option>
</select>
70
</table>
<div id="div1" onmouseover="changeText(this)" onmouseout="revertText(thi
s)">
- Mouse Hover Effect -
</div>
<script>
function changeText(obj) {
obj.innerHTML = "HELLO!";
}
function revertText(obj) {
obj.innerHTML = "- Mouse Hover Effect -";
}
function changeBackground(obj) {
window.document.body.style.backgroundColor = obj.value;
}
function overButton(b) {
b.value = "Hovering";
}
function outButton(b) {
b.value = "Hover Event";
}
</script>
</body>
</html>
OUTPUT
71
PROGRAM-36
WAP to demonstrate various methods of document object in DOM HTML to find HTML
elements.
CODE
<html>
<head>
<title> changing content of p</title>
</head>
<body>
<p><b>changing element by id</b></p>
<p id="p1">hello world</p>
<p><b>changing element by class name</b></p>
<p class="c1">sahil pathak </p>

<p id="class"></p>
<p><b>changing element by Query selector</b></p>
<p id="query"></p>
<script>
document.getElementById("p1").innerHTML="Sahil Pathak by id";
var x=document.getElementsByClassName("c1");
document.getElementById("class").innerHTML="selected by class: "+x[0]
.innerHTML;
var y=document.querySelectorAll("p.c1");
document.getElementById("query").innerHTML="query slector all: "+y[0]
.innerHTML;

</script>

</body>
</html>
72
OUTPUT
73
PROGRAM-37
WAP using DHTML to change the attribute of an image.

CODE
<html>
<head>
<title>attribute of image DHTML</title>
</head>
<body>
<img src="html.jpg" alt="html image" id="img1" onclick=changeimage()>
</body>
<script>
function changeimage()
{
document.getElementById("img1").src="css.png";
}
</script>
</html>
OUTPUT
ON IMAGE CLICK
74
PROGRAM-38
WAP using DHTML to implement Events.

CODE
<html>
<head>
<title>events dhtml</title>
</head>
<body onload=bload() >
<div ondblclick="mclick(this)" onmousedown="mdown(this)" onmouseup="mup(
this)" onmouseover="mover(this)" onmouseout="mout(this)"
style="background-color:#D94A38;width:90px;height:20px;padding:40px;">
Click Me</div>
<p id="p2">date:</p>
<p id="p1"></p>
enter your name: <input type="text" id="inp1" onchange="change()" onfocu
s="focus1(this)">
<script>
function mclick(obj)
{
obj.style.backgroundColor = "green";
obj.innerHTML = "clicked";
}
function mover(obj)
{
obj.style.backgroundColor = "pink";
obj.innerHTML = "over Me";
}

function mout(obj)
{
obj.style.backgroundColor="yellow";
obj.innerHTML="mouse out";
}
function mdown(obj)
{
obj.style.backgroundColor="gray";
obj.innerHTML="mouse down";
}
function mup(obj)
{
75
obj.style.backgroundColor="brown";
obj.innerHTML="mouse up";
}
function change()
{
var x=document.getElementById("inp1");
x.value=x.value.toUpperCase();
}
function focus1(x)
{
x.style.background = "yellow";
}
function bload(x)
{
alert("events using dhtml");
}
document.getElementById("p2").addEventListener("click",displaydate);
function displaydate()
{
document.getElementById("p1").innerHTML=Date();
}
</script>

</body>
</html>
76
OUTPUT
77
PROGRAM-39
WAP using DHTML Events using bubbling and capturing.

CODE
<html>
<head>
<title>bubbling and capturing</title>
<style>
#myDiv1, #myDiv2 {
background-color: green;
padding: 50px;
}

#myP1, #myP2 {
background-color: white;
font-size: 20px;
border: 1px solid;
padding: 20px;
}
</style>
</head>
<body>
<div id="myDiv1">
<h2>Bubbling:</h2>
<p id="myP1">Click </p>
</div><br>

<div id="myDiv2">
<h2>Capturing:</h2>
<p id="myP2">Click </p>
</div>

<script>
document.getElementById("myP1").addEventListener("click", function()
{
alert("You clicked the child element!");
}, false);

document.getElementById("myDiv1").addEventListener("click", function()
{
alert("You clicked the parent element!");
}, false);

document.getElementById("myP2").addEventListener("click", function()
78
{
alert("You clicked the child element!");
}, true);

document.getElementById("myDiv2").addEventListener("click", function()
{
alert("You clicked the parent element!");
}, true);
</script>
</body>
</html>
OUTPUT
BUBBLING OUTPUT
CAPTURING OUTPUT
79
PROGRAM-40
Wap to show
1. Transition effects
CODE
<html>
<head>
<style>
div{
width: 100px;
height: 100px;
background:greenyellow;
transition: width 5s;
}
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
div:hover {
width: 400px;
}
</style>
</head>
<body>
<div id="divl">linear</div><br>
<div id="div2">ease</div><br>
<div id="div3">ease-in</div><br>
<div id="div4">ease-out</div><br>
<div id="div5">ease-in-out</div><br>
<p>Hover over the div elements above, to see the different speed curves.</p>
</body>
</html>
80
OUTPUT
81
2. Filtering effects on an image of your choice.
(show: blur filters etc…)

CODE
<html>
<head>
<style>
img
{
float:left;
}
.blur
{
filter:blur(4px);
}
.brightness
{
filter:brightness(0,30);
}
.contrast
{
filter:contrast(0);
}
.grayscale
{
filter:grayscale(100%);
}
.huerotate
{
filter:hue-rotate(90deg);
}
.invert
{
filter:invert(100%);
}
.opacity
{
filter:opacity(50%);
}
.saturate
{
filter:saturate(7);
82
}
.sepia
{
filter:sepia(100%);
}
.shadow
{
filter:drop-shadow(8px 8px 10px green);
}
</style>
</head>
<body>
<p>original</p>
<img src="flower1.jfif" alt="flower" width="100" height="100">
<p>blur</p>
<img class="blur" src="flower1.jfif" alt="flower" width="100" height="100">
<p>brightness</p>
<img class="brightness" src="flower1.jfif" alt="flower" width="100" height="100">
<p>contrast</p>
<img class="contrast" src="flower1.jfif" alt="flower" width="100" height="100">
<p>grayscale</p>
<img class="grayscale" src="flower1.jfif" alt="flower" width="100" height="100">
<p>huerotate</p>
<img class="huerotate" src="flower1.jfif" alt="flower" width="100" height="100">
<p>invert</p>
<img class="invert" src="flower1.jfif" alt="flower" width="100" height="100">
<p>opacity</p>
<img class="opacity" src="flower1.jfif" alt="flower" width="100" height="100">
<p>saturate</p>
<img class="saturate" src="flower1.jfif" alt="flower" width="100" height="100">
<p>sepia</p>
<img class="sepia" src="flower1.jfif" alt="flower" width="100" height="100">
<p>shadow</p>
<img class="shadow" src="flower1.jfif" alt="flower" width="100" height="100">
</body>
</html>
83
OUTPUT
84
PROGRAM-41
Explain following JavaScript methods with the help of an example.

Eval , parseint , parsefloat , unescaped , isNaN, escape, parse.
CODE
<!DOCTYPE html>
<html>
<body>
<p><b>eval function: </b></p>
<p id="eval"></p>
<p><b>escape:</b> </p>
<p id="escape"></p>
<p><b>isNaN:</b></p>
<p id="isnan"></p>
<p><b>parseint:</b> </p>
<p id="parseint"></p>
<p><b>parsefloat:</b> </p>
<p id="parsefloat"></p>
<p><b>unescaped:</b> </p>
<p id ="escaped"></p>
<p id="unescaped"></p>
<script>
var x = 10;
var y = 20;
var a = eval("x * y") + "<br>";
var c = eval("x + 17") + "<br>";
var res = a + c;
document.getElementById("eval").innerHTML = res;

var x=escape("hello! my name is sahil");
document.getElementById("escape").innerHTML = x;
var a=isNaN("hello")+" :hello <br>" ;
var b=isNaN(123)+" :123 <br>";
document.getElementById("isnan").innerHTML=a+b;
var a = parseFloat("10.00")+": 10.00";
var b = parseFloat("10.33")+": 10.33";
var c = parseFloat("34 45 66")+": 34 45 66";
var d = parseFloat("40 years")+": 40 years";
var e = parseFloat("He was 40")+": He was 40";
85
document.getElementById("parsefloat").innerHTML =
a + "<br>" +
b + "<br>" +
c + "<br>" +
d + "<br>" +
e;
var a = parseInt("10.00")+": 10.00";
var b = parseInt("10.33")+": 10.33";
var c = parseInt("34 45 66")+": 34 45 66";
var d = parseInt("40 years")+": 40 years";
var e = parseInt("He was 40")+": He was 40";
document.getElementById("parseint").innerHTML =
a + "<br>" +
b + "<br>" +
c + "<br>" +
d + "<br>" +
e;
var y=unescape(x);
document.getElementById("escaped").innerHTML = x;
document.getElementById("unescaped").innerHTML = y;
</script>
</body>
</html>
86
OUTPUT
Program 42
<html>
<head>
<title>Boolean Objects</title>
</head>
<body>
<h3><u>Boolean objects property</u></h3>
<p><b>constructor</b></p>
<p id="const"></p>
<p><b>prototype</b></p>
<p id="proto"></p>

<h3><u>Boolean objects Methods</u></h3>
<p><b>toString()</b></p>
<p id="tos"></p>
<p><b>valueOf()</b></p>
<p id="valof"></p>

<script>
var bool = false;
document.getElementById("const").innerHTML = bool.constructor;
Boolean.prototype.myColor = function()
{
if (this.valueOf() == true)
{
return "green";
}
else
{
return "red";
}
}
var a = true;
document.getElementById("proto").innerHTML = a.myColor();
87
var bool = true;
var x = bool.toString()
document.getElementById("tos").innerHTML = typeof x;
var bool = false;
var x = bool.valueOf();
document.getElementById("valof").innerHTML = x;

</script>
</body>
</html>
88
PROGRAM 43
<html>
<head>
<title>Number Objects</title>
</head>
<body>
<h3><u>Number objects property</u></h3>
<p><b>constructor</b></p>
<p id="const"></p>
<p><b>max value</b></p>
<p id="mv"></p>
<p><b>min value</b></p>
<p id="mnv"></p>
<p id="proto"></p>
<p id="proto"></p>
<h3><u>Number objects Methods</u></h3>
<p><b>isFinite()</b></p>
<p id="isf"></p>
<p><b>isSafeInteger()</b></p>
<p id="issi"></p>
<p><b>toExponential()</b></p>
<p id="toe"></p>
<p><b>toFixed()</b></p>
<p id="tof"></p>
<p><b>toPrecision()</b></p>
<p id="top"></p>
<p><b>toString()</b></p>
<p id="tos"></p>
<script>
var num = 134.5;
document.getElementById("const").innerHTML = num.constructor;

89
document.getElementById("mv").innerHTML = Number.MAX_VALUE;

document.getElementById("mnv").innerHTML = Number.MIN_VALUE;
Number.prototype.myMethod = function()
{
return this.valueOf() / 2;
}
var n = 55;
document.getElementById("proto").innerHTML = n.myMethod();

var res = "";
res = res + Number.isFinite(123) + ": 123<br>";
res = res + Number.isFinite(-1.23) + ": -1.23<br>";
res = res + Number.isFinite(5-2) + ": 5-2<br>";
res = res + Number.isFinite(0) + ": 0<br>";
res = res + Number.isFinite('123') + ": '123'<br>";
res = res + Number.isFinite('Hello') + ": 'Hello'<br>";
res = res + Number.isFinite(Infinity) + ": Infinity<br>";
document.getElementById("isf").innerHTML = res;
var res1 = "";
res1 = res1 + Number.isSafeInteger(123) + ": 123<br>";
res1 = res1 + Number.isSafeInteger(-123) + ": -123<br>";
res1 = res1 + Number.isSafeInteger(Math.pow(2, 53)) + ": 2<sup>53</s
up><br>";
res1 = res1 + Number.isSafeInteger(Math.pow(2, 53) - 1) + ": 2<sup>5
3</sup> - 1<br>";
res1 = res1 + Number.isSafeInteger(Infinity) + ": Infinity<br>";
res1 = res1 + Number.isSafeInteger(-Infinity) + ": -Infinity<br>";
document.getElementById("issi").innerHTML = res1;
var num = 5.56789;
var n = num.toExponential();
document.getElementById("toe").innerHTML = n+" :5.56789";
var num = 5.56789;
var n = num.toFixed(2);
document.getElementById("tof").innerHTML = n+" :5.56789";
document.write("<b>toLocaleString()</b><br>");
var num = new Number(1000000).toLocaleString("fi-FI");
document.write(num+" :1000000");
var num = 13.3714;
90
document.getElementById("top").innerHTML = num.toPrecision(2)+ " : "
+num;
var num = 15;
var n = num.toString()+" : "+ num;
document.getElementById("tos").innerHTML = n;
</script>
</body>
</html>
91
PROGRAM-44
WAP in JavaScript to demonstrate various methods and properties of Regular

expressions.
CODE
<html>
<head>
<title>Regular Expression</title>
</head>
<body>
<p id="p1">
</p>
<script>
var x = document.getElementById("p1");
var str = "hello lorenzo loves\n 99986 lotte choco pie &*%!!";
x.innerHTML += "<br/><b>String: </b>" + str + "<br/><br>";
x.innerHTML += "<b>Result: </b><br>";
var pat1 = /lo*/g;
x.innerHTML += "<b>" +pat1+" : </b>"+ str.match(pat1) + "<br/>";
var pat2 = /[l-p]/g;
x.innerHTML += "<b>" +pat2+" : </b>"+str.match(pat2) + "<br/>";
var pat3 = /otte/g;
x.innerHTML +="<b>" +pat3+" search : </b>"+ str.search(pat3) + "<br/>";
var pat4 = /(l|i)/;
var pat5 = /e+/g;
x.innerHTML += "<b>" +pat5+" search : </b>"+str.search(pat5) + "<br/>";
var pat6 = /c/g;
var pat7 = /\d/g;
var pat8 = /\w/g;
var pat9 = /\W/g;
var pat10 = /\D/g;
var pat11 = /e{9}/g;
pat12 = /l{2}/g;
92
</script>
</body>
</html>
93
PROGRAM 45
<?xml version="1.0"?>
<!DOCTYPE STUDENT
[
<!ELEMENT STUDENT (NAME,ROLLNO,DOB,ADDRESS)>
<!ELEMENT NAME (#PCDATA)>
<!ELEMENT ROLLNO (#PCDATA)>
<!ELEMENT DOB (#PCDATA)>
<!ELEMENT ADDRESS (#PCDATA)>
]>
<STUDENT>
<NAME>Sahil Pathak</NAME>
<ROLLNO> 08829802019 </ROLLNO>
<DOB> 08-04-2001 </DOB>
<ADDRESS>Ashok Vihar,Delhi</ADDRESS>
</STUDENT>
94

Web Tech File Code Only

Uploaded by

Copyright:

Available Formats

Web Tech File Code Only

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Tech File Code Only

Uploaded by

Copyright:

Available Formats

PROGRAM-1

Program to display some basic tags.(Example:-Body,html,heading

<h2 align="right">this is heading tag h2</h1>this is comment

<h3 align="left">this is heading tag h3</h1>

<h4 align="center">this is heading tag h4</h1>

<h5 align="right">this is heading tag h5</h1>

<h6 align="left">this is heading tag h6</h1>

<p>hello my name is sahil pathak</p>

<p>hello my name is sahil pathak</p>

<p align="center"><b><u><i>Three Men In A Boat</i></u></b><br></p>

<p align="center"><b><i><u>by Jerome K.Jerome</i></u></b><br></p>

<p align="justify"><big><quote>Three Men in a Boat</quote></big> (To Say Nothing of the Dog),

<mark>published in <del>1990</del><ins><big>1889</big></ins></mark>, is a humorous

account by English writer <i><b><tt>Jerome K. Jerome</tt></b></i> of

a two-week boating holiday on the Thames from Kingston

intended to be a serious travel guide</strike>The book was initially

– the jokes have been praised as fresh and witty. </p>

<address align="center"><pre>vips college

<table border="1" cellpadding="10">

<tr bgcolor="red" align="center">

<th rowspan="2" >Name of Train</th>

<tr bgcolor="red" align="center">

<tr bgcolor="yellow" align="center">

<tr bgcolor="yellow" align="center">

<tr bgcolor="yellow" align="center">

<td >Madras Mail</td>

<caption style="caption-side:bottom">Time Tabe and Fare list</caption>

Write a program to create Nested Tables in HTML.

<table border="5" cellpadding="10"bordercolor="grey">

<th colspan="2">HTML Table</th>

<td rowspan="2">cell 1</td>

<table border="5" bordercolor="grey" >

<th colspan="2">Nested HTML Table</th>

<td align="center">cell 2.1</td>

<td align="center">cell 2.2</td>

<td align="center">cell 2.3</td>

<td align="center">cell 2.4</td>

<h3 align="center">Website outline</h3>

<dd>It should be done fror HTML</dd>

<dd>These are created for data sharing</dd>

and email address:

My email address is:

<h3 align="center">Here are my favourite Internet Search Engine<br>

and email address:</h3>

<p align="center"><b>My email address is:</b><br><a

Write HTML code to design the form below:-

Name:<input type="text" size="45px"name="name">

Password:<input type="password"size="45px"name="password" >

Email id:<input type="email"size="45px" name="email">

Gender:<input type="hidden" name="gender">

<input type="radio" name="gender">Male

<input type="radio" name="gender">Female

Contacts:<input type="text"size="45px" name="contact">

<h3 align="center" style="color:red" >Educational Qualification</h3>

Degree:<input type="hidden"size="45px" name="degree">

<select name="degree" >

<option selected>--Select Group--

Engineering:<input type="hidden"size="45px" name="Engineering">