Scribd
Upload
12 views19 pages

Web Tech

The document describes various HTML elements and programs that demonstrate their usage and output. It covers HTML headings, paragraphs, links, text formatting tags, frames, forms, and dynamic changes to style and text using JavaScript. Examples are provided for each concept to show how they can be implemented and what they output.

Uploaded by

Swapna poreddy
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
12 views19 pages

Web Tech

The document describes various HTML elements and programs that demonstrate their usage and output. It covers HTML headings, paragraphs, links, text formatting tags, frames, forms, and dynamic changes to style and text using JavaScript. Examples are provided for each concept to show how they can be implemented and what they output.

Uploaded by

Swapna poreddy
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 19

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
[email protected]:</h3>
<form
action="MAILTO:[email protected]
" 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
*****
****
***
**
*

You might also like