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. 2. 3. 4. 5. Set mixture to rich Set propeller to high RPM Set ignition switch to "BOTH" Set auxiliary fuel pump switch to "LOW PRIME" When fuel pressure reaches 2 to 2.5 PSI, push starter button

Lab days Java Ada Java Ada Java Mon Thu Ada Tue Wed Web Mon Thu

Web Web Fri 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