Scribd
Upload
40 views62 pages

Web Technologies Record (1-50)

Important

Uploaded by

shaikfaisal.11.2002
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
40 views62 pages

Web Technologies Record (1-50)

Important

Uploaded by

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

Web Technologies Record

1.Write a HTML program to implement Formatting tags.

Program:

<!--FORMATTING TAGS-->

<html>

<head>

<title>Implementing formatting tags</title>

</head>

<body>Formatting Tags<br>

<br>

<b>It sets the text style to bold</b><br>

<i>It displays text to italic</i><br>

<u>It underlines text</u><br>

<s>It displays text in strike through style</s><br>

<big>It renders text in a bigger font than current default</big><br>

<small>It renders text in a smaller font than current default</small><br>

<sub>It styles text as a subscript</sub><br>

<sup>It styles text as a superscript</sup><br>

<em>It emphasizes text usually rendered as italics</em><br>

<q>It displays short inline quotations</q><br>

<blink>blink tag displays the hashing text</blink><br>

<center>It displays text in center of web page</center><br>

<tt>It displays the text to monospace teletype font</tt><br>

<address>It displays text styled as an address</address><br>

</body>

</html>

Output:
2.Write a HTML program to demonstrate all logical tags.

Program:

<!--Logical tags-->

<html>

<head>

<title>Implementing logical tags</title>

</head>

<body>Logical tags<br>

<br>

<strong>It emphasizes text strongly usually rendered in bold</strong><br>

<em>It emphasizes text usually rendered as italics</em><br>

<abbr>It styles text as an abbreviation</abbr><br>

<cite>It styles text as a citation</cite><br>

<code>code</code><br>

<dfn>definition</dfn><br>

2
<kbd>keyboard</kbd><br>

<samp>sample</samp><br>

<br>

<var>Programming variable</var>

</body>

</html>

Output:

3.write a HTML program to implement all header tags.

Program:
<!--Header tag-->
<html>
<head>
<title>Implement header tags</title>
</head>
<body>Header tags<br><br>
<h1>web technology</h1>
<h2>web technology</h2>
<h3>web technology</h3>
<h4>web technology</h4>
<h5>web technology</h5>
<h6>web technology</h6>
</body>
</html>
3
Output:

4.write a HTML program to illustrate anchor tag along with all its attributes.

Program:
<!--Anchor tag-->
<html>
<head>
<meta charset="UTF-8">
<title>anchor tag with its attributes </title>
</head>
<body>
<h1>super machines</h1>
<a href="https://mywebsite.com" target="_blank">
super machines-Open in new tab!</a>
<hr>
<a href="https://www.clickme.com" target="_parent">
super machines-Open in similar tab!</a>
<hr>
<a href="www.jobs.com">super machines-click me to download</a>
<p>
An image as a link:<a href="https://www.donboscomotinagar.com">
<img border="0"alt="college" SRC="C:\Users\Public\Pictures\Sample
Pictures\SAVE_20181025_105922.jpeg" width="100" height="100">
</body>
</html>

Output:
4
5.Write a HTML program to insert image tag with all its attributes.

Program:

<!--Image tag-->
<html>
<head>
<title>Image tag with all its attributes</title>
</head>
<body>
<center><h3>Image tag with all its attributes</h3></center>
<img src = "C:\Users\aak46\Pictures\rose.jpg" width="300" height="400" hspace="500"
vspace="100" alt="An image of a rose">
</body></html>

Output:

5
6.Create a web page to display the text “ALL THE BEST “aligned with images.
Program:

<!--ALL THE BEST-->

<html>

<head><title> All The Best</title></head>

<body>

<center><img src="C:\Users\aak46\Pictures\daliya.jpg" align=top></center><br><br><br>

<img src="C:\Users\aak46\Pictures\daliya.jpg" align=left>

<img src="C:\Users\aak46\Pictures\daliya.jpg" align=right>

<center><h1>ALL <U><B>THE BEST</B></U></h1></center><br><br><br><br><br><br>

<center><img src="C:\Users\aak46\Pictures\daliya.jpg" align=bottom></center>

</body>

</html>

6
Output

7.write a HTML program to implement font tags along with its attributes.
Program:
<!--Font tags-->
<html>
<head>
<title>Font tags</title>
</head>
<body>
<font size="4" color="#ooooff" face="Arial">
WEB TECHNOLOGY
</font><br>
<font size="6" color="#ffd700" face="Times New Roman">
WEB TECHNOLOGY
</font><br>
<font point-size="50">WEB TECHNOLOGY</font>
</body></html>
Output:

7
8. Write a HTML program to illustrate List formatting tags for the streams available in College :

a. Ordered list b. Unordered list c. Menu List. d. Definition List .

Program:

<html>

<head>

<title>types of lists</title>

</head>

<body>

<h2>Streams available in college</h2><br><br>

<u>Ordered list</u><br>

<ol>

<li>B.Com(General)</li>

<li>B.Com(Computers)</li>

<li>B.Sc(MSCS)</li>

<li>B.Sc(MECS)</li>

</ol>

<br><br>

<u>Unordered List</u><br>

<ul>

<li>B.Com(General)</li>
8
<li>B.Com(Computers)</li>

<li>B.Sc(MSCS)</li>

<li>B.Sc(MECS)</li>

</ul>

<br>

<U>Menu list</u><br>

<menu>

<li>B.Com(General)</li>

<li>B.Com(Computers)</li>

<li>B.Sc(MSCS)</li>

<li>B.Sc(MECS)</li>

</menu>

<br><u>Definition list</u>

<dl>

<dt><B>B.com</B></dt>

<dd>General</dd>

<dd>Computers</dd>

<dt><B>B.Sc</B></dt>

<dd>MSCS</dd>

<dd>MECS</dd>

</dl>

</body></html>

9
9.Create a web page to display ordered list, unordered list on the subjects available in fifth
semester.
Program:
<!--Ordered and unordered List-->

<html>

<head>

<title>Ordered and unordered list</title>

</head>

<body>

<h1>Subjects available in fifth semester</h1>

<h2><u>Ordered list</u>

<ol>

<li>Cost accounting</li>

<li>Web tecnology</li>

<li>Businesslaw</li>

<li>Banking theory and practice</li>

<li>Computerised accounting</li>
10
<li>Excel foundation</li>

<li>General insurance</li>

<li>Indian economy</li>

</ol>

<u>Unordered list</u>

<ul>

<li>Cost accounting</li>

<li>Web tecnology</li>

<li>Business law</li>

<li>Banking theory and practice</li>

<li>Computerised accounting</li>

<li>Excel foundation</li>

<li>General insurance</li>

<li>Indian economy</li>

</ul></h2>

</body>

</html>

Output:

11
10.Create a table with Four rows and Four columns in HTML.
Program:
<!--Table-->
<head>
<title>HTML tables</title>
</head>
<body>
<table border="1" cellpadding="5" cellspacing="0.5">
<tr>
<td>Student ID</td>
<td>Student names</td>
<td>Student marks</td>
<td>Student rank</td>
</tr>
<tr>
<td>001</td>
<td>Sana</td>
<td>456</td>
<td>3</td>
</tr>
<tr>
<td>002</td>
<td>Sashi kala</td>
<td>494</td>
<td>1</td>
</tr>
<tr>
12
<td>003</td>
<td>Natasha/jessica</td>
<td>478</td>
<td>2</td>
</tr>
</table>
</body>
</html>
Output:

11. Write a HTML program to create a Time-table of your College using necessary options such as Cellpadding,
Cellspacing , colspan , rowspan .

Program:

<!--Create a Table-->

<html>

<head><title> Time Table</title>

<table border="2" bgcolor="pink" cellpadding="2" cellspacing="0.5" height=400 width=800>

<caption><h2>Time table</h2></caption>

<tr>

<th colspan="12">DONBOSCO DEGREE COLLEGE</th>

</tr>

<tr>

<th colspan="12"><u>B.com IV SEMESTER</u></th>

</tr>

<tr>
13
<th>Days/Timings</th>

<th>9:00-9:50</th>

<th>9:50-10:40</th>

<th>10:40-11:00</th>

<th>11:00-11:50</th>

<th>11:50-12:40</th>

<th>12:40-1:20</th>

<th>1:20-2:10</th>

<th>2:10-3:00</th>

</tr>

<tr>

<td>Monday</td>

<td>Business Statestics</td>

<td>Web technology</td>

<td rowspan=6>Short <br><br> Break</td>

<td>Income Tax</td>

<td>PGI</td>

<td rowspan=6>Lunch<br><br> Break</td>

<td>SL</td>

<td>English</td>

</tr>

<tr>

<td>Tuesday</td>

<td>Business Statestics</td>

<td>Web technology</td>

<td>Income Tax</td>

<td>PGI</td>

<td>SL</td>
14
<td>English</td>

</tr>

<tr>

<td>Wednesday</td>

<td>Business Statestics</td>

<td>Web technology</td>

<td>Income Tax</td>

<td>PGI</td>

<td>SL</td>

<td>English</td>

</tr>

<tr>

<td>Thursday</td>

<td>Business Statestics</td>

<td>Web technology</td>

<td>Income Tax</td>

<td>LMS</td>

<td>English</td>

<td>Library</td>

</tr>

<tr>

<td>Friday</td>

<td>Business Statestics</td>

<td>Web technology</td>

<td>Income Tax</td>

<td>LMS</td>

<td>-----</td>

<td>-----</td>

</tr>
15
<tr>

<td>Saturday</td>

<td>Business Statestics</td>

<td>Web technology</td>

<td>Income Tax</td>

<td>LMS</td>

<td>Seminor</td>

<td>-----</td>

</tr>

</table>

</body>

</html>

12. Write a HTML program to marquee the image and text.

Program:

16
<!--Marquee the image and text-->
<html>
<head><title>Marquee</title></head>
<body><b><center> Marquee the image and text </center></b>
<marquee behavior="scroll" direction="left">
<img src="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg" width="145" height="145" alt="an
image">
<p>The image is scrolling </p>
</marquee>
</body>
</html>
Output:

13.Create a web page in which the text “WEB TECHNOLOGY” should scroll in different
directions for four times.
Program:
<!--Marquee-->
<html>
<head>
<title>WEB TECHNOLOGY</title>
</head>
<body bgcolor="cyan">
<marquee align="top" direction="right" bgcolor="#ooffoo" scrollamount="8">WEB
TECHNOLOGY</marquee>
<marquee align="top" direction="up" bgcolor="#add8e6" scrollamount="2" height="50">WEB
TECHNOLOGY</marquee>
<marquee align="bottom" direction="left" bgcolor="#oo8ooo" scrollamount="6">WEB
TECHNOLOGY</marquee>
<marquee align="bottom" direction="down" bgcolor="#ffoooo" scrollamount="1" width="140"
height="100">WEB TECHNOLOGY</marquee>
</body>
</html>
17
Output:

14.Create a table using all its attributes and sub tags to execute the following information.
Program:
<!--Table-->
<html>
<head>
<title>Create a table with the given data</title>
</head>
<table border="2"cellpadding="2" cellspacing="0.5">
<caption>DATA</caption>
<tr>
<th>S.NO</th>
<th>Name</th>
<th>Specialization</th>
</tr>
<tr>
<td>1.</td>
<td>Ada Lovelace</td>
<td>She is World's first computer Programmer.</td>
</tr>
<tr>
<td>2.</td>
<td>Adam Osborne</td>
<td>Creator of the first commercially available Portable Computer.</td>
</tr>
<tr>
<td>3.</td>
<td>Abhay Bhushan</td>
<td>Author of the File Transfer Protocol.</td>
</tr>

18
<tr>
<td>4.</td>
<td>Alan Cooper</td>
<td>Father of Visual Basic.</td>
</tr>
<tr>
<td>5.</td>
<td>Alan Emtage</td>
<td>Developer of "Archie" which is considered to be the first search engine.</td>
</tr>
<tr>
<td>6.</td>
<td>Alan Schaaf</td>
<td>Founder of "Imgur" which is the world's largest image hosting site.</td>
</tr>
<tr>
<td>7.</td>
<td>Alexander Douglas</td>
<td>Created the first graphical Computer game,OXO.</td>
</tr>
<tr>
<td>8.</td>
<td>Andreas Bechtolsheim</td>
<td>Co-founder of Sun Microsystems.</td>
</tr>
</table>
</html>
Output:

15.Create a Program on the concept of form containing Textboxes,Radio Buttons and Check
boxes.
Program:
19
<!---forms containing Textboxes,Radio Buttons and Checkboxes--->
<html>
<head>
<title>Multiple-Line Input Control,Checkbox Control,Radio Box Control</title>
</head>
<body><b>Textboxes:</b>
<form>
Description : <br />
<textarea rows = "5" cols = "50" name = "description">
Enter description here...
</textarea>
<br>
<br>
<strong>Radio buttons:</strong>
<br>
<input type = "radio" name = "subject" value = "B.com(Computers)"> B.com(Computers)
<input type = "radio" name = "subject" value = "B.com(General)">B.com(General)
<input type = "submit" value = "submit">
<br>
<br>
<u>Check boxes:</u>
<br>
<input type = "checkbox" name = "Excel foundation" value = "on">Excel foundation
<input type = "checkbox" name = "Auditing" value = "on">Auditing
</form>
</body>
</html>
Output:

20
16.Create a Program on employee information form.
Program:
<!---Emplpoyee Information Form--->
<html>
<head>
<title>Form</title>
</head>
<body><center><Strong>Employee Information form</strong></center>
<form>
First name*: <input type = "text" name = "first_name*" size="20"/>
Last name*: <input type = "text" name = "last_name*" size="20"/>
<br>
<br>
Qualification:
<select name = "dropdown">
<option value = "MBA" selected >MBA</option>
<option value = "M.com">M.COM</option>
<option value = "MCA">MCA</option>
<option value = "M.Tech">M.Tech</option>
</select>
<input type="submit">
<br>
<br>
Email: <input type = "text" name = "Email*" size="40"/>
<br>
Address :
<br>
<textarea rows = "5" cols = "50" name = "Address">
Enter your address here...
</textarea>
<br>
State: <input type = "text" name = "State"/>
Zip code: <input type = "text" name = "Zip code"/>
<br>
Home phone: <input type = "text" name = "Home phone:"/>
Alternative phone: <input type = "text" name = "Alternative Phone:"/>
<br>
<br>
Date of birth: <input type = "text" name = "Date of birth" size="20"/>
Marital status: <input type = "text" name = "marital status" size="20"/>
<br>
<br>
Gender:<input type = "checkbox" name = "male" value = "on"> male
<input type = "checkbox" name = "female" value = "on"> female
<br>
<br>
Work Experience:
<input type = "radio" name = "subject" value = "Fresher"> Fresher
<input type = "radio" name = "subject" value = "More than one year"> More than one year
<br>
21
<br>
Enter Requirements:
<br>
<textarea rows = "5" cols = "50" name = "Comments">
Enter your comments here...
</textarea>
<br>
<br>
Resume/Cv:
<input type = "file" name = "fileupload" accept = "pdf/*" />
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
<input type = "button" name = "ok" value = "OK" />
<br>
<br>
Upload your photo:
<input type = "file" name = "fileupload" accept = "pdf/*" />
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
<input type = "button" name = "ok" value = "OK" />
<br>
<p>Employee details:</p>
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
</form>
</body>
</html>
Output:

22
17.Write a program to create Pull down menu on the universities available in Telangana
University.
Program:
<!---Pull down menu--->
<html>
<head>
<title>pull down menu</title>
</head>
<body>
<form>
<h2>Universities available in Telangana State:<h2>
<select name = "Universities in telangana">
<option value = "Osmania University" selected>Osmania university</option>
23
<option value = "Mahatma Gandhi University">Mahatma Gandhi University</option>
<option value = "Nizam's Institute of Medical Science">Nizam's Institute of Medical Science</option>
<option value = "Potti Sreeramulu Telugu University">Potti Sreeramulu Telugu University</option>
<option value = "Palamuru University">Palamuru university</option>
<option value = "Kakatiya University">Kakatiya university</option>
<option value = "Satavahana University">Satavahana university</option>
<option value = "Telangana University">Telangana university</option>
</select>
</form>
<br>
<br>
<input type="Submit">
</body>
</html>
Output:

18.Write a program to create pull down menu on various Web designing Softwares.
Programs:
<!---Pull down menu--->
<html>
<head>
<title>pull down menu</title>
</head>
<body>
<form>
<h2>Web designing softwares:<h2>
<select name = "Web designing softwares">
<option value = "Google Web Designer" selected>Google Web Designer</option>
<option value = "Bluefish">Bluefish</option>
<option value = "Adobe Dreamweaver CC">Adobe Dreamweaver CC</option>
<option value = "Atom Text Editor">Atom Text Editor</option>
<option value = "Webflow">Webflow</option>
</select>
</form>
<br>
<br>
<input type="Submit">
</body>
</html>
Output:
24
19.Create a Web Page of student information form,when the information is submitted
message should be displayed.
Program:
<!---Student information form--->
<html>
<head lang="en">
<meta charset="UTF-8">
<script language="JavaScript">
function showInput()
{
document.getElementById('display').innerHTML =
document.getElementById("user_input").value;
}
</script>
</head>
<body>
<form>
<label><b>Student Information Form</b></label>
<input type="text" name="message" id="user_input"><br>
</form>
<input type="submit" onclick="showInput();"><br/>
<label>Your input: </label>
<p><span id='display'></span></p>
</body>
</html>
Output:

20.Write a HTML program to create Four Vertical Frames.

25
Program:
<!---Vertical Frames--->
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset cols = "2%,3%,2%,3%">
<frame name = "left" src = "Menu.html" />
<frame name = "center" src = "Details.html" />
<frame name = "right" src = "Menu.html" />
<frame name = "left" src = "Details.html"
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>

“Menu.html”→<!---Menu list--->
<html>
<head>
<title>Menu</title>
</head>
<body>
<u>fruit names</u>
<ol>
<li>mango</li>
<li>orange</li>
</ol>
</body>
</html>

“Details.html”→ <!---Details list--->


<html>
<head>
<title>Details</title>
</head>
<body>
Mangoes are available in summer season
</body>
</html>

Output:

26
21.Write a HTML program to create Four Horizontal Frames.
Program:
<!---Horizontal frames--->
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows = "2%,2%,4%,4%">
<frame name = "top" src = "Menu.html" />
<frame name = "main" src = "Details.html" />
<frame name = "bottom" src = "Menu.html" />
<frame name = "top" src = "Details.html" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>

“Menu.html”→<!---Menu list--->
<html>
<head>
<title>Menu</title>
</head>
<body>
<u>fruit names</u>
<ol>
<li>mango</li>
<li>orange</li>
</ol>
</body>
</html>

“Details.html”→ <!---Details list--->


<html>
<head>
<title>Details</title>
</head>
<body>
Mangoes are available in summer season
</body>
</html>
Output:

27
22.Write a DHTML program for Cascading style sheets.
Program:
<!---Cascading Style sheet--->
<html>
<head>
<title> Using CSS tags</title>
</head>
<body>DONBOSCO DEGREE COLLEGE</body>
<h1 style="color:red;font-size:24px;font-style:normal">DONBOSCO DEGREE COLLEGE</h1>
</body>
</html>
Output:

23.write a DHTML program to demonstrate Inline Style Sheets.


Program:
28
<!---Inline Style sheet--->
<html>
<head>
<title>Inline style sheet</title>
</head>
<body>
<h1 style="background-color:pink;font-size:200%;">Sameera Fathima</h1>
<h2 style="background-color:purple;font-size:400%;">B.com Final year</h2>
</body>
</html>
Output:

24.write a DHTML program to demonstrate External Style Sheets.


Program:
1.Save file as “sample.css”
body{background-color:yellow;}
h1{color:blue;}
2.Save as “Externalss.html”
<!---External style sheet--->
<html>
<head>
<title>External style sheet</title>
<link rel="style sheet"href="sample.css">
</head>
<body>
<h1>welcome to external style sheet</h1>
</body>
</html>
Output:

29
25.Write a DHTML program to demonstrate Embedded Style Sheets.
Program:
<!---Embedded Style Sheet--->
<html>
<head>
<title>Embedded Style Sheet</title>
<style type="text/css">
H1{font family:sans-serif;color:green;Text-align:Center;font-size:30pt;}
p{font-family:Arial;text-align:left;text-indent:0.5;font-size:30pt;}
body{background:yellow;margin-left:1.5In;margin-right:1.5 In;}
</style>
</head>
<body>
<p>
Iam using embedded style sheets.These sheets are used when the styling should be done on a particular
website.
</p>
<H1>These rules are applied only on the selected elements</H1>
Welcome to CSS
<p>
<center><b>Thank you
</b></center>
</p>
</body>
</html>
Output:

30
26.Write a DHTML program to illustrate Id and Class Selectors using CSS.
Program:
<!---Id and Class Selectors using CSS--->
<html>
<head>
<style type="text/css">
#headingcolor {color: #FF0066;}
h1.textcolor {color: #FF0066;}
.textcolor1 {color: #00FF00;}
.textcolor2 {color: #0000FF;}
</style>
</head>
<body>
<h1 id="headingcolor">ID Selector</h1>
<h1>Without ID Selector</h1>
<h1 class="textcolor">Heading </h1>
<h2 class="textcolor">Wrong implementation !! </h2>
<p class="textcolor1">Paragraph in class textcolor1</p>
<p class="textcolor2">Paragraph in class textcolor2</p>
<h1 class="textcolor2">Heading </h1>
</body>
</html>
Output:

31
27.write a DHTML program to demonstrate Filters.
Filter effects FlipH&FlipV:
Program:
<!---FlipH and FlipV--->
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "C:\Users\Public\Pictures\Sample Pictures\html\download.png"
alt = "CSS Logo"
style = "filter: FlipH">
<br>
<br>
<img src = "C:\Users\Public\Pictures\Sample Pictures\html\download.png" alt = "CSS Logo" style = "filter:
FlipV">
<p>Text Example:</p>
<div style = "width: 300;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: FlipV">CSS Tutorials</div>
</body>
</html>
Output:

32
Filter effect chroma:
Program:
<!---Chroma--->
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "C:\Users\Public\Pictures\Sample Pictures\html\download.png"
alt = "CSS Logo" style = "Filter: Chroma(Color = #FFFFFF)">
<p>Text Example:</p>
<div style = "width: 580;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: #3300FF;
Filter: Chroma(Color = #3300FF)">CSS Tutorials</div>
</body>
</html>
Output:

33
28.Write a DHTML program to demonstrate Transitions.
Program:
<!---Demonstrate Transitions--->
<html>
<head>
<style>
#myDIV
{
border:1px solid black;
background-color:blue;
width:100px;
height:100px;
overflow:auto;
}
#myDIV:hover
{
background-color:cyan;
width:270px;
height:270px;
padding:10px;
border-radius:50px;
}
</style>
</head>
<body>
<h1>Change transition with JavaScript</h1>

<p>Mouseover the DIV element and it will change,both in color and size!</p>

<p>Click the "Tryit" button and mouseover the DIV element again.The change will
now happen gradually,like an animation:</p>
34
<button on click="myFunction()">Tryit</button>
<div id="myDIV">
<h1>myDIV</h1>
</div>
<script>
functionmyFunction(){
document.getElementById("myDIV").style.WebkitTransition = "all2s";
document.getElementById("myDIV").style.transition = "all2s";
}
</script>
</body>
</html>
Output:
1.

2.

35
29.Write a DHTML program to demonstrate changing text and attribute using CSS.
Program:
<!---Using CSS--->
<html>
<head>
<style>
div
{
border:1px solid gray;
padding:3px;
}
h1
{
text-align:center;
text-transform:uppercase;
color:#4CAF50;
word-spacing:15px;
text-shadow:3px 2px #D3D3D3;
}
p
{
text-indent:20px;
text-align:justify;
letter-spacing:3px;
line-height:1.8;
}

36
a
{
text-decoration:underline;
color:#008CBA;
}
</style>
</head>
<body>
<div>
<h1>text formatting</h1>
<p>This text is styled with some of the text formatting properties.The heading uses
the text-align,text-transform,and color properties.
The paragraph is indented,aligned,and the space between characters is specified.
The under line is removed from this colored
<a target = "_blank"href="#">"Try it Yourself"</a>link.</p>
</div>
</body>
</html>
Output:

30.Write a Javascript program to calculate Area and circumference of a circle.


Program:
<!---Area and Circumference of a circle--->
<html>
<head>
<title> Area and Circumference of a circle</title>
</head>
<body>
<script>
function circle(radius)
{
this.radius = radius;

37
// area method
this.area = function ()
{
return Math.PI * this.radius * this.radius;
};
// perimeter method
this.perimeter = function ()
{
return 2*Math.PI*this.radius;
};
}
var c = new circle(3);
document.write("Area =",c.area().toFixed(2));
document.write("<br><br>");
document.write("Circumference =",c.perimeter().toFixed(2));
</script>
</body>
</html>
Output:

31.Write a Javascript program to display Greatest Number among Three Numbers.


Program:
<!---Greatest Number among Three Numbers--->
<html>
<head>
<script>
function largest()
{
var num1, num2, num3;
num1 = Number(document.getElementById("N").value);
num2 = Number(document.getElementById("M").value);
num3 = Number(document.getElementById("O").value);
if(num1>num2 && num1>num3)
{
window.alert(num1+" is greatest");
}
else if(num2>num1 && num2>num3)
{
window.alert(num2+" is greatest");

38
}
else if(num3>num1 && num3>num1)
{
window.alert(num3+" is greatest");
}
}
</script>
</head>
<body>
<h1>Calculate largest among three numbers</h1>
<hr color="cyan">
<br>
Enter number 1: <input type="text" id="N"></input>
<br>
Enter number 2: <input type="text" id="M"></input>
<br>
Enter number 3: <input type="text" id="O"></input>
<br>
<hr color="cyan">
<center><button onClick="largest()">OK</button>
</body>
</html>

Output:

32.Write a Javascript program to demonstrate Arithmetic Operations using Switch case.


39
Program:
<!---Switch case--->
<html>
<head>
<title> Java Script Switch Case </title>
</head>
<h1> Java Script Switch Case </h1>
<body>
<script>
var number1 = parseInt(prompt("Enter number1","0"));
number2 = parseInt(prompt("Enter number2","0"));
var opertor = prompt("Enteroperator","");

switch (opertor)
{
case'+':
document.write("Addition of two numbers is: "+ (number1 + number2));
break;
case'-':
document.write("Subtraction of two numbers is: "+ (number1 - number2));
break;
case'*':
document.write("Multiplication of two numbers is: "+ (number1 * number2));
break;
case'/':
document.write("Division of two numbers is: "+ (number1 / number2));
break;
case'%':
document.write("Module of two numbers is: "+ (number1 % number2));
break;
default:
document.write("<b> You have entered Wrong operator </b>");
document.write("<br \>Please enter Correct operator such as +,-,*,/,%");
}
</script>
</body>
</html>
Output:
1.

2.

40
3.

4.

33.Write a Javascript program to print Odd numbers using while loop.


Program:
<!---Using while loop--->
<html>
<head>
<title>While Loop</title>
</head>
<body>
<script>
var i = 1;
while (i <= 20)
{
document.write (i + "<br>");
i += 2;
41
}
</script>
</body>
</html>
Output:

34.Write a Javascript program to demonstrate multiplication table.


Program:
<!---Demonstrate multiplication table--->
<html>
<head>
<body>
<b>Multiplication Table</b>
<script type="text/javascript">
var num = prompt("Enter Number", "0") //prompt user to enter the number

var num = parseInt(num); //parse the num to number


var i = 0;

document.write('<table border="1" cellspacing="0">');


for(i=1;i<11;i++) {
document.write("<tr><td>" + num + " x " + i + " = " + num*i + "</td></tr>");
}

document.write("</table>");
</script>
<head>
</body>
</html>
Output:
1.

42
2.

35.Write a Javascript program using any five events.


Program:
<!---Using any five events--->
<html>
<head>
<script>
function myFunction()
{
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
function myFunction1()
{
document.getElementById("demo1").innerHTML = "HelloWorld";
}
function myFunction2(){
document.getElementById("demo2").innerHTML = "HelloWorld";
}
function myFunction3()
{
alert("Page is loaded");

43
}
</script>
</head>
<body onload="myFunction3()">
Enter your name:<input type="text" id="fname"onblur="myFunction()">

<p>When you leave the inputfield,a function is triggered which transforms the input
text to upper case.</p>

<p>Click the button to trigger a function.</p>


<button onclick="myFunction1()">Click me</button>
<p id="demo1"></p>
<p ondblclick="myFunction2()">Doubleclick this paragraph to trigger a function.</p>
<p id="demo2"></p>
<h1 onmouseover="style.color='red'"onmouseout="style.color='black'">Mouse over
this text</h1>

</body>
</html>
Output:
1.

2.

44
36. Write a Java Script program to print N-natural numbers using For loop.
<!--java script program to print N natural numbers-->
<html>
<head><title>Natural numbers</title>
<script type="text/javascript">
var i;
var n=10;
document.write("Natural numbers" + "<br>");
for(i=1;i<=n;i++)
{
document.write(i+ "<br>");
}
</script></head>
<body>
</body></html>

Output:

45
37.Write a Javascript program to print Factorial of a given number.
Program:
<!---Print factorial of a given number--->
<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>
Output:

38.Write a Javascript program to demonstrate Arrays.


46
Program:
<!---Demonstrate Array--->
<html>
<head>
<script type= "text/javascript">
var myArray2= new Array();
myArray2[0] = "Football";
myArray2[1] = "Baseball";
myArray2[2] = "Cricket";
myArray2.sort();
document.write(myArray2[0] + myArray2[1] + myArray2[2]);
</script>
</head>
<body>
</body>
</html>
Output:

39.Write a Javascript program to demonstrate string manipulating functions.


Program:
<!---Demonstrate string manipulating functions--->
<html>
<head>
<script type = "text/javascript">
//charAt(x)
var myString = 'jQuery FTW!!!';
document.write(myString.charAt(7));
document.write("<br>");

//charAt(position)
var message = "jquery4u";
//alerts "q"
document.write(message.charAt(1));
document.write("<br>");

var message = "ram"


var final=message.concat("is a","hopeless worker.")

document.write(final);
document.write("<br>");

47
//indexOf(char/substring)
var sentence="Hi,my name is ram!";
if (sentence.indexOf("ram")!=-1)
document.write("ram is in there!");
document.write("<br>");

//lastIndexOf(substr,[start])
var myString = 'javascriptrox';
document.write(myString.lastIndexOf('r'));
document.write("<br>");

//slice(start, end)
var text="excellent";
document.write(text.slice(0,4));//returns"exce"
document.write(text.slice(2,4));//returns"ce"
document.write("<br>");

</script>
</head>
</html>

Output:

40.write a Javascript program to demonstrate Math objects.


Program:
<!---Demonstrate Math objects--->
<html>
<body>
<h2>JavaScript Math Constants</h2>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"<p><b>Math.E:</b> "+Math.E+"</p>" +
"<p><b>Math.PI:</b> "+Math.PI+"</p>" +
"<p><b>Math.SQRT2:</b> "+Math.SQRT2 + "</p>" +
"<p><b>Math.SQRT1_2:</b> "+Math.SQRT1_2 + "</p>" +
"<p><b>Math.LN2:</b> " + Math.LN2+ "</p>" +
48
"<p><b>Math.LN10:</b> " + Math.LN10 + "</p>" +
"<p><b>Math.LOG2E:</b> " + Math.LOG2E + "</p>" +
"<p><b>Math.Log10E:</b> " + Math.LOG10E + "</p>";
</script>
</body>
</html>
Output:

49
41. Create a Web page with an image, when the mouse is doubled clicked new image should replace the
existing.
<!--DOCTYPE html-->
<html>
<body>
<h2>On double click Event</h2>
<p id="demo">Double-click on the Image to replace with another image</p>
<img src="C:\Users\aak46\Pictures\lotus.jpg" id="image1" ondblclick="myFunction()">
<script>
function myFunction() {
document.getElementById("image1").src = "C:/Users/aak46/Pictures/rose.jpg"
}
</script>
</body>
</html>

Output:

After double click the above image you will get the following image

50
42.Create aWeb page and apply mouse effects to change text color,size,family etc on the
text.
Program:
<!---Apply mouse effects--->
<html>
<body>

<h1 onmouseover="style.color='red'" onmouseout="style.color='black'">Mouse over


this text</h1>

</body>
</html>
Output:
1.

2.

43.Create a Webpage which displays a line of text,a new line of text should overwrite the
existing text.
Program:
<!---Displays a line of text--->
<html>
<body>
<h1>The onclick Event</h1>

<p>The onclick event is used to trigger a function when an element is clicked


on.</p>

<p>Click the button to trigger a function that will output "Hello World" in a p element
51
with id="demo".</p>

<button onclick="myFunction()">Click me</button>

<p id="demo">This will be overwritten by other text</p>


<script>
function myFunction()
{
document.getElementById("demo").innerHTML = "This is new Text";
}
</script>

</body>
</html>
Output:
1.

2.

52
44.Create a program on the event onkeypress.
Program:
<!---Event onkeypress--->
<html>
<body>
<p>This example demonstrates how to assign an "onkeypress" event to an input
element.</p>
<p>Press a key inside the text field to set a red background color.</p>
<input type="text"id="demo" onkeypress="myFunction()">
<script>
function myFunction()
{
document.getElementById("demo").style.backgroundColor = "red";
}
</script>
</body>
</html>
Output:
1.

2.

53
45.Create a program on the event onreset.
Program:
<!---Event onreset--->
<html>
<body>
<p>When you reset the form, a function is triggered which alerts some text.</p>

<form onreset="myFunction()">
Enter name:<input type="text">
<input type="reset">
</form>

<script>
function myFunction()
{
alert("The form was reset");
}
</script>
</body>
</html>

54
Output:

46 . Create a XML document for employee database with 10 records and 5 columns in each record.

<?xml version="1.0" encoding="ISO-8859-1"?>


<employees>
<employee category="ENG">
<name>Upendra Roul</name>
<position>Software Developer</position>
<joinyear>2010</joinyear>
<salary>20000</salary>
</employee>
<employee category="ENG">
<name>Jay Prakash</name>
<position>Testers</position>
<joinyear>2010</joinyear>
<salary>15000</salary>
</employee>
<employee category="HR">
<name>Rekha Sharma</name>
<position>HR Manager</position>
<joinyear>2005</joinyear>
55
<salary>8000</salary>
</employee>
<employee category="HK">
<name>Rohit S</name>
<position>House Keeping</position>
<joinyear>2000</joinyear>
<salary>3000</salary>
</employee>
<employee department="ENG">
<name>Kranthi</name>
<position>Software Developer</position>
<joinyear>2017</joinyear>
<salary>40000</salary>
</employee>
<employee category="ENG">
<name>Naseem</name>
<position>Software Developer</position>
<joinyear>2018</joinyear>
<salary>50000</salary>
</employee>
<employee category="ENG">
<name>Vijay Kumar</name>
<position>System Admin</position>
<joinyear>2015</joinyear>
<salary>60000</salary>
</employee>
<employee category="HK">
<name>Josphin</name>
<position>House Keeping</position>
<joinyear>2010</joinyear>
<salary>5000</salary>
</employee>
<employee category="ENG">
<name>Prasanth</name>
<position>Tester</position>
<joinyear>2017</joinyear>
<salary>20000</salary>
</employee>
<employee category="HK">
<name>kamala</name>
<position>House Keeping</position>
<joinyear>2018</joinyear>
<salary>6000</salary>
</employee>
</employees>
56
47.Create a XML document for student database and apply the style sheet effects.
Program:
common.css
/* common.css */
INSTRUMENT { display: inline }

57
ARTICLE, HEADLINE, AUTHOR,
PARA { display: block }
modern.css
ARTICLE { font-family: sans-serif;
background: white; color: black }
AUTHOR { margin: 1em; color: red }
HEADLINE { text-align: right;
margin-bottom: 2em }
PARA { line-height: 1.5;
margin-left: 15% }
INSTRUMENT { color: blue }
classic.css
ARTICLE { font-family: serif;
background: white; color: #003 }
AUTHOR { font-size: large;
margin: 1em 0 }
HEADLINE { font-size: x-large;
margin-bottom: 1em }
PARA { text-indent: 1em;
text-align: justify }
INSTRUMENT { font-style: italic }

Main Program:
<?xml-stylesheet href="common.css"?>
<?xml-stylesheet href="modern.css"
title="Modern" media="screen"
type="text/css"?>
<?xml-stylesheet href="classic.css"
alternate="yes" title="Classic"
media="screen, print" type="text/css"?>
<ARTICLE>
<HEADLINE>Fredrick the Great meets
Bach</HEADLINE>
<AUTHOR>Johann Nikolaus Forkel</AUTHOR>
<PARA>
One evening, just as he was
getting his
<INSTRUMENT>flute</INSTRUMENT>
ready and his musicians were
assembled, an officer brought him a
list of the strangers who had arrived.
</PARA>
</ARTICLE>

Output:

58
48.Create a XML document with simple links.
Program:
<?xml version="1.0"?>
<document xmlns="http://example.org/xmlns/2002/document"
xmlns:xlink="http://www.w3.org/1999/xlink">
<heading id="someHeading">Some Document</heading>
<para>Here is <anchor xlink:type="simple" xlink:href="#someHeading">a link</anchor> to the
header.</para>
<para>It is an anchor that points to the element with the id "someHeading" on the current page.</para>
</document>
Output:

49.Create a XML document for marketing department of an organization and apply style
effects.
Program:
Marketing.xml
<?xml version="1.0"?>
<?xml-stylesheet type = "text/css" href= "cd_catalog.css"?>
<CATALOG>
<CD>
<NAME>AMBANI</NAME>
<DOB>1/1/1970</DOB>
<ADDRESS>MUMBAI</ADDRESS>

59
<POSITION>CEO</POSITION>
<SALARY>150000000</SALARY>
</CD>
<CD>
<NAME>TATA</NAME>
<DOB>2/2/1973</DOB>
<ADDRESS>MUMBAI</ADDRESS>
<POSITION>DIRECTOR</POSITION>
<SALARY>80000000</SALARY>
</CD>
<CD>
<NAME>BIRLA</NAME>
<DOB>3/3/1975</DOB>
<ADDRESS>MUMBAI</ADDRESS>
<POSITION>PRESIDENT</POSITION>
<SALARY>60000000</SALARY>
</CD>
</CATALOG>

cd_catalog.css
CATALOG
{
background-color:#ffffff;
width:100%
}
CD
{
display:block;
margin-bottom:30pt;
margin-left:0;
}
NAME
{
display:block;
color:#ff0000;
font-size:20pt;
}
DOB
{
display:block;
color:#0000ff;
font-size:20pt;
}
ADDRESS,POSITION,SALARY
{
display:block;
color:#000000;
margin-left:20pt;
}
</CATALOG>
Output:

60
50.Create a program on XML Document Object Model.
Program:
<?xml version = "1.0"?>
<bookstore>
<book category="cooking">
<title lang="english">Harry potter</title>
<author>J.K rowling</author>
<year>2005</year>
<price>30.00</price>
</book>

<book category="entertainment">
<title lang="en">Half girl friend</title>
<author>Chetan Bhagat</author>
<year>2015</year>
<price>29.99</price>
</book>
</bookstore>
Output:

61
62

You might also like