Web Lab Manual

1.
Develop and demonstrate a XHTML document that illustrates the use external style
sheet, ordered list, table, borders, padding, color, and the <span> tag.
/* styles.css is an external style sheet in this program. External style sheet defines some
pre-defined font size, style and family. When we refer this in html, the text corresponds to
will have properties referring to external style sheet.
Ordered lists are those in which the order of items is important. The default sequential
values are Arabic numerals beginning with 1.
A table is a matrix of row and columns, in which each intersection of row and a column is
termed a cell. The cells in the top row often contain column labels; those in the left most
columns often contain row labels and rest contains data of the table.
border-width specifies the thickness of the border. Border color is controlled by color
property. These are the properties of CSS.
Padding is the space between the content of an element and its border. It is applied to 4
sides.
Color property is used to specify the foreground color of XHTML elements.
For a particular word to appear in different way in line or paragraph we use span tag.*/
styles.css
p.major {font-size: 14pt;

font-style: italic;
font-family: 'Times New Roman';
}
p.minor {font: 10pt bold 'Courier New';}
h2 {font-familY: 'Times New Roman';
font-size: 24pt; font-weight: bold}
h3 {font-family: 'Courier New';
font-size: 18pt}
basicxhtmltags.html
<?xml version = "1.0" encoding = "utf-8"?>

<html xmlns = "http://www.w3.org/1999/xhtml">
<head><title>basic html tags</title>
<link rel = "stylesheet" type = "text/css" href="styles.css" />
<style type = "text/css">

table {border-top-width: medium;
border-bottom-width: thick;
border-top-color: red;
border-bottom-color: blue;
border-top-style: dotted;
border-bottom-style: dashed;
}
p {border-style: dashed; border-width: thin; border-color: green
}
p.one {padding: 0.2in;

background-color: #C0C0C0;
border-style: solid;
}
th.red {color: red}

th.orange {color: orange}
th.blue {color: blue}
.spanred {font-size: 24pt; font-family: Ariel; color: red; }

</style>
</head>
<body>
<p class = "major">
if a job is worth doing, it's worth doing right.
</p>
<p class = "minor">
Two wrongs don't make a right, but they certainly can get you in a lot of trouble.
</p>
<h2> Chapter 1 Introduction </h2>
<h3> 1.1 The Basics of Computer Networks </h3>
<ol>
<li> Set mixture to rich </li>
<li> Set propeller to high RPM </li>
<li> Set ignition switch to "BOTH" </li>
<li> Set auxiliary fuel pump switch to "LOW PRIME" </li>
<li> When fuel pressure reaches 2 to 2.5 PSI, push starter button </li>
</ol>
<table border = "5px">

<caption> Lab days </caption>
<tr>
<th></th>
<th class = "red"> Java </th>
<th class = "orange"> Ada </th>
<th class = "blue"> Web </th>
</tr>
<tr>
<th> </th>
<th> Java </th>
<th> Ada </th>
<th> Web </th>
</tr>
<tr>
<th> Java </th>
<td> Mon </td>
<td> Thu </td>
<td> Fri </td>
</tr>
<tr>
<th> Ada </th>
<td> Tue </td>
<td> Wed </td>
<td> Thu </td>
</tr>
<tr>
<th> Web </th>
<td> Mon </td>
<td> Thu </td>
<td> Fri </td>
</tr>
</table>
<p>
Now it is the time for all good Web programmers to learn to use style sheets.
</p>
<p class ="one">

Now is the time for all good web programmers to learn to use style sheets. <br
/>[padding: 0.2in]
</p>
<p>
it sure is fun to be in
<span class = "spanred"> total </span>
control of text
</p>
</body>
</html>
Output
if a job is worth doing, it's worth doing right.
Two wrongs don't make a right, but they certainly can get you in a lot of trouble.
Chapter 1 Introduction
1.1 The Basics of Computer Networks
1. Set mixture to rich
2. Set propeller to high RPM
3. Set ignition switch to "BOTH"
4. Set auxiliary fuel pump switch to "LOW PRIME"
5. When fuel pressure reaches 2 to 2.5 PSI, push starter button
Lab days
Java Ada Web
Java Ada Web
Java Mon Thu Fri
Ada Tue Wed Thu
Web Mon Thu Fri
Now it is the time for all good Web programmers to learn to use style sheets.
Now is the time for all good web programmers to learn to use style sheets.
[padding: 0.2in]
it sure is fun to be in total control of text

2) Develop and demonstrate a XHTML file that includes Javascript script for the
fallowing problems
a) Input: A number n obtained using prompt.
Output: The first n Fibonacci numbers.
b) Input : A number n obtained using prompt.
Output: A table of numbers from 1 to n and their squares using alert
a) fib.html
<?xml version = “1.0”?>

<html xmlns = “http://www.w3.org/1999/xhtml”>
<head>
<title>Fibonacci</title>
</head>
<body>
<script type = “text/javascript” src=”fib.js”>
</script>
</body>
</html>
fib.js
var n = prompt(“what is the value of ‘n’?\n”, “”);
var n1=0;
var n2=1;
alert(“first number is:” + n1 + “\n”);

alert(“Second number is:” + n2 + “\n”);
for(i=3;i<=n;i++)
{
var m1=n1+n2;
alert(“ ” + m1 + “\n”);
n1 = n2;
n2 = m1;
}
Output
b) sq.html
<?xml version = “1.0”?>

<html xmlns = “http://www.w3.org/1999/xhtml”>
<head>
<title>Fibonacci</title>
</head>
<body>
<script type = “text/javascript” src=”sq.js”>
</script>
</body>
</html>
sq.js
var n = prompt(“what is the value of ‘n’?”, “”);

var square;
document.writeln('<pre>');
for (var i=1; i<n; i++) { // multiple instruction must be between
document.write(i); // `{ .... }'
square = i*i;
document.writeln (' squared is ', square);
}
Output

Web Lab Manual

Uploaded by

Document Information

Original Description:

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 Lab Manual

Uploaded by

Copyright:

Available Formats

1.

p.major {font-size: 14pt;

<?xml version = "1.0" encoding = "utf-8"?>

<style type = "text/css">

p.one {padding: 0.2in;

th.red {color: red}

.spanred {font-size: 24pt; font-family: Ariel; color: red; }

<table border = "5px">

<p class ="one">

if a job is worth doing, it's worth doing right.

it sure is fun to be in total control of text

<?xml version = “1.0”?>

var n = prompt(“what is the value of ‘n’?\n”, “”);

alert(“first number is:” + n1 + “\n”);

<?xml version = “1.0”?>

var n = prompt(“what is the value of ‘n’?”, “”);

You might also like