Scribd
Upload
1K views

Web Lab Manual

The document describes developing an XHTML document with the following features: 1. Use of an external CSS stylesheet to style text elements. 2. Inclusion of ordered lists, tables with borders and cell padding, and use of the <span> tag. 3. Creation of an XHTML file with embedded JavaScript to: a) Prompt for a number and output the first n Fibonacci numbers. b) Prompt for a number and output a table of numbers from 1 to n and their squares.

Uploaded by

dollsicecream
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
1K views

Web Lab Manual

The document describes developing an XHTML document with the following features: 1. Use of an external CSS stylesheet to style text elements. 2. Inclusion of ordered lists, tables with borders and cell padding, and use of the <span> tag. 3. Creation of an XHTML file with embedded JavaScript to: a) Prompt for a number and output the first n Fibonacci numbers. b) Prompt for a number and output a table of numbers from 1 to n and their squares.

Uploaded by

dollsicecream
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 6

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

You might also like