Scribd
Upload
46 views24 pages

BSC Vi WT

1. The document discusses developing HTML documents to format text using various tags like headings, alignments, bold, italic etc. It provides code examples to demonstrate these tags. 2. The document discusses developing an HTML document to create hyperlinks between web pages using the <A HREF> tag. It provides sample code to demonstrate this. 3. The document discusses developing HTML documents to create tables with and without borders using the TABLE tag and its attributes. It provides code examples demonstrating two tables, one with borders and one without.

Uploaded by

victor raj
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
46 views24 pages

BSC Vi WT

1. The document discusses developing HTML documents to format text using various tags like headings, alignments, bold, italic etc. It provides code examples to demonstrate these tags. 2. The document discusses developing an HTML document to create hyperlinks between web pages using the <A HREF> tag. It provides sample code to demonstrate this. 3. The document discusses developing HTML documents to create tables with and without borders using the TABLE tag and its attributes. It provides code examples demonstrating two tables, one with borders and one without.

Uploaded by

victor raj
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/ 24

1

HTML, CSS, JavaScript Programs

1.Develop a HTML document to format a text or paragraph of text with


possible text formatting, namely, Heading Tags, Alignment Tags,
Formatting Tags (Bold, Italic, etc.,).
<html>
<h1>Develop a HTML document to format a text or paragraph
of text with possible text formatting, namely, Heading Tags,
Alignment Tags, Formatting Tags (Bold, Italic, etc.,).<h1>
<h1 align="center"><u><b> Different Formated, heading and different
alignments Tags</b></u></h1>
<br>
<h2 align="left"><font face=arial color=green>This is heading 2 tag
with align left and color green</font><br></h2>
<h3 align="center"><font face=verdan color=red>This is heading 3 tag
with align center and color red</font><br></h3>
<b><i><font size=10 face=arial color=blue>This is Italic and bold tag
with align left and color blue</font></b></br></i>
</br>
</html>

Output:
2

2.Develop a HTML document to establish a link from one web page to


another web page by using <A HREF> tag.

<html>
<h1>Develop a HTML document to establish a
link from one web page to another web page by using <A HREF>
tag.</h1>
<h1>Hyperlink </h1>
<a href ="list.html">Click here</a>
</a>
</html>
3

3. Develop a HTML document to create two different tables by using


TABLE tag with its all attributes, where one table contains border and
another without border.

<html>
<h1>Develop a HTML document to create two different tables by using
TABLE tag with its all attributes, with border
here one table contains border and another without border<h1>

<table border=5 cellspacing=2 cellpadding=5 height=50 width=150


bordercolor=Red>
<tr>
<th colspan=3>Tic Tac Game</th>
</tr>
<tr>
<td>X</td>
<td bordercolor=blue bgcolor=green>0</td>
<td>X</td>
</tr>
<tr>
<td bordercolor=blue bgcolor=gree>0</td>
<td>X</td>
<td bordercolor=maroon bgcolor=orange>0</td>
</tr>
<tr>
<td>X</td>
<td bordercolor=cyan bgcolor=pink>0</td>
<td>X</td>
</tr>
</table>
<br><br>
<table cellspacing=2 cellpadding=5 height=50 width=150 >
<tr>
<th colspan=3>Tic Tac Game</th>
<tr>
<tr>
<td>X</td>
<td>0</td>
<td>X</td>

</tr>
<tr>
<td >0</td>
<td>X</td>
<td e>0</td>
4

</tr>
<tr>
<td>X</td>
<td >0</td>
<td>X</td>

</tr>
</table>
</html>
5

4. Develop a HTML document to create an ordered lists by using


different types of ordering, namely, Numbered list, Letters list,
Lowercase letters list, Roman numbers list, and Lowercase roman
numbers list.

<html>
<h1>Develop a HTML document to create un-ordered lists by using
different types of ordering, namely, Disc bullets list,
Circle bullets list, and Square bullets list.</h1>
<ol type="a">
<li > Windows 98
<li > Windows 2000
<li > Windows XP
<li >Window 7
</ol>
<br>
<ol type="A">
<li > Windows 98
<li > Windows 2000
<li > Windows XP
<li >Window 7
</ol>
<br>
<ol type="I">
<li > Windows 98
<li > Windows 2000
<li > Windows XP
<li >Window 7
</ol><br>
<ol >
<li > Windows 98
<li > Windows 2000
<li > Windows XP
<li >Window 7
</ol><br>
<ol type ="i" >
<li > Windows 98
<li > Windows 2000
<li > Windows XP
<li >Window 7
</ol>
6

</html>
7

5. To create an ADMISSION FORM of a college, which contains


Students all information with predefined course list. Use Drop-down
list with a pre-selected value for COURSE selection like, BA, B.Sc.,
B.C.A., B.Com.

<html>
<h1> To create an ADMISSION FORM of a college, which contains
Students
all information with predefined course list. Use Drop-down list with
a pre-selected value for COURSE selection like, BA, B.Sc., B.C.A.,
B.Com.
</h1>
<form name="msc" >
<table border=0 cellspacing=50>
<tr>
<td>Name</td>
<td><input type="text" name ="t1"></td></tr>
<tr>
<td> Father Name</td>
<td><input type="textarea" name ="t2"></td></tr>
<tr>
<td> Adderess </td>
<td><input type="text" name ="t3"></td></tr>
<tr>
<td> courses</td>
<td><select name="BA">
<option value=1>B.Sc
<option value=2>B.A
<option value=3>B.Com
<option value=3>B.C.A
</option>
</select></td></tr>
<tr>
<td> Gender Name</td>
<td> Male</td>
<td><input type="radio" name ="t5" ></td>
<td> Female</td>
<td><input type="radio" name ="t5" ></td></tr>
<tr>
<td><input type="Submit" name ="t5" ></td>
<td><input type="reset" name ="t5" ></td></tr>
</table>
</form>
</html>
8
9

CSS
1. Develop a CSS based HTML document to perform or set the background
color of a webpage.

<html>
<h1>change background color of web page</h1>
<p style=
"
height:100%;
width:100%;
background-color:Blue;
">
This is paragraph1 text
</p>

</html>
10

2. Develop a CSS based HTML document to perform or set image as


background of a webpage

<html>
<h1>change image as background using css</h1>
<p style=
"
height:100%;
width:100%;
background-image:url(r.bmp);
">
M.Sc IV Students
</p>

</html>
11

3. Develop a CSS based HTML document to set different colors for


different HTML elements, namely, Heading H1, H2, H3, Paragraph and
address. Use proper color codes in CSS style sheets.
<html>
<h1>[1]. set different colors for different HTML elements, namely,
Heading H1, H2, H3,
Paragraph and address. Use proper color codes in CSS style sheets.</h1>
<h1 style= "
color:yellow;">
This is Heading 1 text
</h1>
<h2 style= "
color:red;">
This is Heading 2 text
</h2>
<h3 style= "
color:green;">
This is Heading 3 text
</h3>
<h4 style= "
color:blue;">
This is Heading 4 text
</h4>
</html>
12
13

4. Develop a CSS based HTML document to decorate the text within


webpage using the CSS attributes Overline, Line-through and
Underline.

<html>
<h1>To decorate the text within webpage
using the CSS attributes Overline, Line-through and Underline.</h1>
<p style= "
text-decoration:Overline;">
This is Heading 1 text
</p>
<p style= "
text-decoration:line-through;">
This is Heading 1 text
</p>
<p style= "
text-decoration:Underline;">
This is Heading 1 text
</p>

</html>
14

5. Develop a CSS based HTML document to create a table with specified


height and width, along with table border color.

<html>
</h1>Develop a CSS based HTML document to create a table with specified
height and width, along with table border color.</h1>
<head>
<style>
table {
border: 11px solid blue;
}
td,th {
border: 1px solid orange;
}
</style>
</head>
<body>

<h2>Add a border to a table:</h2>

<table height=20% width=30%>


<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Aarav</td>
<td>Biradar</td>
</tr>
<tr>
<td>Rohit </td>
<td>Sharma</td>
</tr>
</table>

</body>
</html>
15
16

JavaScript

1. Write a JAVA Script program to find the sum of “N” natural numbers.
(Use user defined function).

<html>
<h1><b><u>
To find the sum of “N” natural numbers. (Use user defined
function).
(Use user-defined function
</u></b></h1>
<label>Enter a number N
<input type="text" id="t" >
<br>
<label>Sum of Natural
<input type="text" id="t1" >
<input type="button" value="ok" onclick=nat()>
<script language="javascript">
function nat()
{
var a,d;
var s=0;
a=parseInt(t.value);
for(i=1;i<=a;i++)
{
s=parseInt(s+i);
}
t1.value=s;
}
</script>
</html>
17
18

2. Write a JAVA Script program to display the present DAY of the week
using “SWITCH” case.

<html>
<h1>To display the present DAY of the week using “SWITCH” case.Write a
JavaScript program to display the present DAY of the week using
"SWITCH" case</h1>
<script language="javascript">
var mydate=new Date();
var day=mydate.getDay();
switch(day)
{
case 0:
alert("TODAY IS SUNDAY");
break;
case 1:
alert("TODAY IS MONDAY");
break;
case 2:
alert("TODAY IS TUESDAY");
break;
case 3:
alert("TODAY IS WEDNESDAY");
break;
case 4:
alert("TODAY IS THURSDAY");
break;
case 5:
alert("TODAY IS FRIDAY");
break;
case 6:
alert("TODAY IS SATURDAY");
break;
}
</script>
</html>
19
20

3. Write a JAVA Script program to create a form for Student information,


which contain fields as, name, father name, different subject marks. Find
the Total Marks, Average, Result and Grade for that information

<html>
<h1> To create a form for Student information, which contain fields as,
name, father name, different subjects mark. Find the Total Marks,
Average, Result and Grade for that information.</h1><br><br>
<label>Enter Regno
<input type="text" id="t1"><br><br><br>
<label>Enter Name
<input type="text" id="t2"><br><br><br>
<label>Class
<input type="text" id="t3"><br><br><br>
<label> Sub1
<input type="text" id="t4"><br><br>
<label> Sub2
<input type="text" id="t5"><br><br>
<label> Sub3
<input type="text" id="t6"><br><br><br>
<label>Total Marks
<input type="text" id="t7"><br><br><br>
<label>Average Marks
<input type="text" id="t8"><br><br><br>
<label>Grade of Students
<input type="text" id="t9">
<input type="button" value="click" onclick="show()">
</html>
<script language="javascript">
function show()
{
var regno,n,m1,m2,m3;
regno=t1.value;
n=t2.value;
cla=t3.value
m1=parseInt(t4.value);
m2=parseInt(t5.value);
m3=parseInt(t6.value);
tot1=m1+m2+m3;
avg1=parseFloat(tot1/3);
t7.value=parseInt(tot1);
t8.value=parseFloat(avg1);
21

if((m1<35) ||(m2<35) ||(m3<35))


t9.value="fail";
else if((avg1>35) &&(avg1<=50))
t9.value="C Grade";
else if((avg1>50) && (avg1<=60))
t9.value="B Grade";
else if((avg1>60) && (avg1<=70))
t9.value="A Grade";
else if((avg1>70) && (avg1<=85))
t9.value="A+ Grade";
else if((avg1>85) && (avg1<=100))
t9.value="A++ Grade";
}
</script>
22

4. Write a JAVA Script program to find factorial of n numbers by using “for


loop”.

<html>
<title>factorial</title>
<script language="javascript">
var fact=1,num,i;
num=prompt("enter the number");
for(i=1;i<=num;i++)
{
fact=fact*i;
}
document.write("fact=" +fact);
</script>
</html>
23

5. Write a JAVA Script program to illustrate alert box, confirmalert box


and prompt box.

<html>
<h1>
To illustrate alert box, confirm alert box and prompt box.
</h1>
<input type="button" value="ALERT" onclick="a()">
<input type="button" value="CONFIRM" onclick="c()">
<input type="button" value="PROMPT" onclick="p()">
<script language="javascript">
24

function a()
{
alert ("This is a ALERT Message Box");
}
function c()
{
confirm ("This is a CONFIRM Message Box");
}
function p()
{
var a=prompt ("This is a PROMPT Message Box");
alert("U R Entered in a prompt box is="+a)
}
</script>
</html>

You might also like