PROGRAMES
HTML Elements
PROGRAM OUTPUT
HTML Headings This is heading 1
<html>
<body> This is heading 2
<h1>This is heading1</h1>
<h2>This is heading2</h2> This is heading 3
<h3>This is heading3</h3>
<h4>This is heading4</h4> This is heading 4
<h5>This is heading5</h5>
<h6>This is heading6</h6> This is heading 5
</body> This is heading 6
</html>
HTML Paragraphs
<html>
<body> This is aparagraph.
<p>This is aparagraph.</p>
<p>This is aparagraph.</p> This is a paragraph.
<p>This is aparagraph.</p>
</body>
</html>
This is aparagraph.
HTML Links
<html>
<body> This is a link
<a href="http://www.saif4u.webs.com">
This is a link</a>
</body>
</html>
31
HTML Text Formatting
<html> This text is bold This
<body>
<p><b>This text is bold</b></p> text isstrong
<p><strong>This text is strong</strong></p>
<p><big>This text is big</big></p>
<p><i>This text is italic</i></p> This text isbig
<p><small>This text is small</small></p>
<p><tt>This text is teletype</tt></p> This text is italic
<p><em>This text is emphasized</em></p>
<p><code>Thisiscomputer output</code></p> This text is small
<p>This is<sub> subscript</sub> and
<sup>superscript</sup></p> This text is teletype
</body>
</html> This text is emphasized
This is computeroutput
This is subscript andsuperscript
Text in a pre element
is displayed in a fixed-width
HTML <pre>Tag font, and it preserves
<html> both spaces and
<body> linebreaks
<pre>
Text in a preelement The pre element is often used to display
is displayed in a fixed-width computer code:
font, and itpreserves
both spaces and for i = 1 to 10
linebreaks print i
</pre> next i
<p>The pre element is often used to display
computer code:</p>
<pre>for i = 1 to 10
print i
next i
</pre>
</body>
</html>
32
5
HTML Frames:
Program Output
HTML <Horizontal frameset>Tag
<html>
<frameset rows="25%,50%,25%">
<frame src="frame_a.htm"/>
<frame src="frame_b.htm"/>
<frame src="frame_c.htm"/>
</frameset>
</html>
HTML <Vertical frameset>Tag
<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm"/>
<frame src="frame_b.htm"/>
<frame src="frame_c.htm"/>
</frameset>
</html>
HTML <frameset in rows &colums>Tag
<html>
<frameset rows="50%,50%">
<frame src="frame_a.htm"/>
<framesetcols="25%,75%">
<frame src="frame_b.htm"/>
<frame src="frame_c.htm"/>
</frameset>
</frameset>
</html>
41
HTML <noframes>Tag
<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm"/>
<frame src="frame_b.htm"/>
<frame src="frame_c.htm"/>
<noframes>
Sorry, your browser does not handle
frames!
</noframes>
</frameset>
</html>
HTML <navigation frameset>Tag
<html>
<frameset cols="120,*">
<frame src="tryhtml_contents.htm" />
<frame src="frame_a.htm"
name="showframe" />
</frameset>
</html>
42
HTML Forms:
Program Output
TEXT FIELD First name:
<html>
<body> Last name:
<form action="">
First name: <input type="text" Note: The form itself is not visible. Also
name="firstname" /><br /> note that the default width of a text field is
Last name: <input type="text" 20 characters.
name="lastname" />
</form>
<p><b>Note:</b> The form itself is not
visible. Also note that the default width of a
text field is 20 characters.</p>
</body>
</html>
PASSWORD FIELD
<html>
Username:
<body>
<form action=""> Password:
Username: <input type="text" name="user"
/><br /> Note: The characters in a password field are
Password: <input type="password" masked (shown as asterisks or circles).
name="password" />
</form>
<p><b>Note:</b> The characters in a
password field are masked (shown as
asterisks or circles).</p>
</body>
</html>
CHECKBOXES
<html>
I have a bike
<body>
<form action=""> I have a car
<input type="checkbox" name="vehicle"
value="Bike" /> I have a bike<br />
<input type="checkbox" name="vehicle"
value="Car" /> I have a car
</form>
</body>
</html>
RADIO BUTTONS
<html>
Male
<body>
<form action=""> Female
43
<input type="radio" name="sex"
value="male" /> Male<br /> Note: When a user clicks on a radio-button,
<input type="radio" name="sex" it becomes checked, and all other radio-
value="female" /> Female buttons with equal name become unchecked.
</form>
<p><b>Note:</b> When a user clicks on a
radio-button, it becomes checked, and all
other radio-buttons with equal name
become unchecked.</p>
</body>
</html>
SIMPLE DROP-DOWN LIST
<html> Fiat
<body>
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
Drop-down list with a pre-selected value
<html> Fiat
<body>
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat"
selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
Textarea (a multi-line text input field)
<html>
<body>
<p>
This example cannot be edited
because our editor uses a textarea
for input,
and your browser does not allow
44
a textarea inside a textarea.
</p>
<textarea rows="10" cols="30">
The cat was playing in the garden.
</textarea>
</body>
</html>
Create a Button
<html>
<body>
<form action="">
<input type="button" value="Hello
world!">
</form>
</body>
</html>
Draw a border around form-data
<html>
<body>
<form action="">
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30" /><br
/>
E-mail: <input type="text" size="30" /><br
/>
Date of birth: <input type="text" size="10"
/>
</fieldset>
</form>
</body>
</html>
45
Send e-mail from a form
<html>
<body>
<h3>Send e-mail to
someone@example.com:</h3>
<form
action="MAILTO:someone@example.com
" method="post" enctype="text/plain">
Name:<br />
<input type="text" name="name"
value="your name" /><br />
E-mail:<br />
<input type="text" name="mail"
value="your email" /><br />
Comment:<br />
<input type="text" name="comment"
value="your comment" size="50" />
<br /><br />
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
</body>
</html>
Dynamic Changes Style
PROGRAM OUTPUT
Change Style of the Current DHTML Element
<html>
<body> Click Me!
<h1 onclick="this.style.color='red'">Click Me!</h1>
</body>
</html> Click Me!
(Click on text to change color)
Change Style of a Specific CSS Element
<html> Click Me!
<body>
<h1 id="h1"
onclick="document.getElementById('h1').style.color=' Click Me!
red'">Click Me!</h1> (Click on text to change color)
</body>
</html>
Changing text:
PROGRAM OUTPUT
<html>
<body>
<h1 id="header">Old Header</h1> NewHeader
<script
type="text/javascript">document.getElementById("he "Old Header" was changed to
ader").innerHTML="N ew Header"; "NewHeader"
</script>
<p>"Old Header" was changed to "New Header"</p>
</body>
</html>
<html> Mouse over this text!
<head>
<script type="text/javascript">
function nameon() How are you today?
{
document.getElementById('h2text').innerHTML="WE
LCOME!";
WELCOME!
}
function nameout() (Click on text to change text)
{
12
document.getElementById('h2text').innerHTML="Ho
w are you today?";
}
</script>
</head>
<body>
<h2 id="h2text" onmouseout="nameout()"
onmouseover="nameon()">
Mouse over this text!</h2>
</body>
</html>
<html>
<head>
<script type="text/javascript"> Blinking header
function blinking_header()
{
if (!document.getElementById('blink').style.color) Blinking header
{
document.getElementById('blink').style.color= (Click on text to blink text in
"red"; red color)
}
if
(document.getElementById('blink').style.color=="red"
)
{
document.getElementById('blink').style.color=
"black";
}
else
{
document.getElementById('blink').style.color=
"red";
}
timer=setTimeout("blinking_header()",100);
}
function stoptimer()
{
clearTimeout(timer);
}
</script>
</head>
<body onload="blinking_header()"
onunload="stoptimer()">
<h1 id="blink">Blinking header</h1>
</body>
</html>
13
Creating Graphics and Multimedia Effects:
PROGRAM OUTPUT
<html> When you mouse over the
<head> image, a new image will
<script type="text/javascript"> appear.
img2=new Image();
img2.src="landscape3.gif";
function changeImage()
{
document.getElementById('myImage').src=img2.src;
}
</script>
</head>
<body> The new image appears
<p>When you mouse over the image, a new image instantly, because your browser
will appear.</p> has already loaded the image
<img id="myImage" onmouseover="changeImage()"
border="0" width="160" height="120"
src="landscape2.jpg">
<p>The new image appears instantly, because your
browser has already loaded the image.</p>
</body>
</html>
<html>
<head>
<script type="text/javascript"> Move the cursor over this
function cursor(event) page
{
document.getElementById('trail').style.visibility="visible" (Move your cursor on output
; window to show cursor text)
document.getElementById('trail').style.position="absolute
";
document.getElementById('trail').style.left=event.clientX
+10;
document.getElementById('trail').style.top=event.clientY;
}
</script>
</head>
<body onmousemove="cursor(event)">
<h1>Move the cursor over this page</h1>
<span id="trail" style="visibility:hidden">Cursor
Text</span>
</body>
</html>
14
<html> Shake the window
<head>
<script>
function startEQ()
{
richter=5;
parent.moveBy(0,richter);
parent.moveBy(0,-richter);
parent.moveBy(richter,0);
parent.moveBy(-richter,0);
timer=setTimeout("startEQ()",10);
}
function stopEQ()
{
clearTimeout(timer);
}
</script>
</head>
<body>
<form>
<input type="button" onclick="startEQ()" value="Start
an earthquake">
<br />
<br />
<input type="button" onclick="stopEQ()" value="Stop
the earthquake">
</form>
</body>
</html>
1) Hello world program
<!doctype html>
<html>
<head>
<script>
function hello()
{
alert("Hello World!");
}
</script>
</head>
<body>
<button onclick="hello()">Click Me</button></br></br>
</body>
</html>
Result
Click Me
2) Display even or odd
<!doctype html>
<html>
<head>
<script>
function odd_even(){
var no;
no=Number(document.getElementById("no_input").value);
if(no%2==0)
{
alert("Even Number");
}
else
{
alert("Odd Number");
}
}
</script>
</head>
<body>
Enter Any Number:<input id="no_input"><br />
<button onclick="odd_even()">Click me</button>
</body>
</html>
Result
Enter Any Number:
Click Me
3) Factorial prgram
<!doctype html>
<html>
<head>
<script>
function show(){
var i, no, fact;
fact=1;
no=Number(document.getElementById("num").value);
for(i=1; i<=no; i++)
{
fact= fact*i;
}
document.getElementById("answer").value= fact;
}
</script>
</head>
<body>
Enter Num: <input id="num">
<button onclick="show()">Factorial</button>
<input id="answer">
</body>
</html>
Result
Enter Num: Factorial
Addition program
<html>
<head>
<script>
function add(){
var a,b,c;
a=Number(document.getElementById("first").value);
b=Number(document.getElementById("second").value);
c= a + b;
document.getElementById("answer").value= c;
}
</script>
</head>
<body>
<input id="first">
<input id="second">
<button onclick="add()">Add</button>
<input id="answer">
</body>
</html>
Result
Enter First Number:
Enter Second Number:
Add
Print number pattern program
<html>
<head>
<script type="text/javascript">
var a;
var n=prompt("Enter a number for the no. of rows in a pattern");
for(var i=1;i<=n;i++)
{
for(var j=1;j<=i;j++)
{
document.write("0"+j+" ");
}
document.write("<br />");
}
</script>
</head>
<body>
</body>
</html>
Output
01
01 02
01 02 03
01 02 03 04
01 02 03 04 05
Reverse of the given number
<!doctype html>
<html>
<head>
<script>
function palin()
{
var a,no,b,temp=0;
no=Number(document.getElementById("no_input").value);
b=no;
while(no>0)
{
a=no%10;
no=parseInt(no/10);
temp=temp*10+a;
}
alert(temp);
}
</script>
</head>
<body>
Enter any Number: <input id="no_input">
<button onclick="palin()">Check</button></br></br>
</body>
</html>
Result
Enter any Number: Check
Print Triangle of Stars in JavaScript
<html>
<head>
<script type="text/javascript">
var i, j;
//outer loop
for(i=1; i <= 5; i++)
{
//inner loop
for(j=1; j<=i; j++)
{
document.write('*');
}
document.write('<br/>');
}
</script>
</head>
<body>
</body>
</html>
Output
*
**
***
****
*****
Print Triangle of Stars in JavaScript
<html>
<head>
<script type="text/javascript">
var i, j;
//outer loop
for(i=5;i>=1;i--)
{
//inner loop
for(j=1;j<=i;j++)
{
document.write('*');
}
document.write('<br/>');
}
</script>
</head>
<body>
</body>
</html>
Output
*****
****
***
**
*
