Scribd
Upload
65 views49 pages

WT Record Programs

The document contains code for a registration form with various input fields like name, password, email, phone number, gender, and date of birth. It uses JavaScript functions to validate the inputs on blur events, checking the name for a valid format, password for a valid format, and phone number to start with 9 and have correct number of digits. A submit and reset button allows submitting or resetting the form.

Uploaded by

Ma Nohar Reddy
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
65 views49 pages

WT Record Programs

The document contains code for a registration form with various input fields like name, password, email, phone number, gender, and date of birth. It uses JavaScript functions to validate the inputs on blur events, checking the name for a valid format, password for a valid format, and phone number to start with 9 and have correct number of digits. A submit and reset button allows submitting or resetting the form.

Uploaded by

Ma Nohar Reddy
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 49

<!-- ORDERED LIST DEMO ..

> <html> <head> <title>"ORDER LIST DEMO "></title> </head> <body> <h1> <u>Department of computer science</u> </h1> <ol type="1"> <li>B.sc computer science</li> <li>M.sc computer science</li> <li>PGDCA</li> </ol> <h1> <u>Department of Mathematics</u> </h1> <ol type="4"> ` <li>B.sc Mathematics</li> <li>M.sc Mathematics</li> <li>M.phil Mathematics</li> </ol> <h1> <u>Department of Zoology</u> </h1> <ol type="7"> ` <li>B.sc Zoology</li> <li>M.sc Zoology</li> <li>M.phil Zoology</li> <li>Phd Zoology</li> </ol> </body> </html>

OUTPUT

<!--UNORDERED LIST DEMO ..> <html> <head> <title>unorder list demo</title> </head> <body> <h3><u>The best feature of the Internet</u></h3> <ul type="disc"> <li>You can meet new people from countries around the World.>/li> <li>you have access to new media as it become public.</li> <ul type="circle"> <li>New games</li> <li>New applications</li> <ul type="square"> <li>For Business</li> <li>For Pleasure</li> </ul> <li>Around the clock news</li> <li>search engines</li> <li>shopping</li> <li>programming</li> <ul type="square"> <li>HTML</li> <li>Java</li> <li>Dynamic HTML</li> <li>Scripts</li> <li>New Languages</li> </ul> </ul> <li>Links</li> <li>Keeping in touch with old friends</li> <li>It is the technology and the feature.</li> </ul> </body> </html>

OUTPUT

<!TABLE TAG DEMO ..> <html> <head> <title>table demo</title> </head> <body> <table border=4 width="40%"> <tr> <thcolspan=4>Maruthi</th> </tr> <tr> <td>omnivan</td> <td>200000</td> </tr> <tr> <td>maruthi 800</td> <td>242000</td> </tr> <tr> <td>maruthi 1000</td> <td>310000</td> </tr> <tr> <td>maruthizen</td> <td>390000</td> </tr> <tr> <thcolspan=2>Tata</th> </tr> <tr> <td>Sumo</td> <td>475000</td> </tr> <tr> <td>sierra</td> <td>447000</td> <tr> <td>Estate</td> <td>462000</td> </tr> <tr> <thcolspan=2>Ambassador</th> </tr> <tr> <td>petrol</td> <td>324000</td> </tr> <tr> <td>diesel</td> <td>387000</td> </tr> </table> </body> </html>

OUTPUT

<!TABLE TAG DEMO ..>

<html> <head> <title>table demo</title> </head> <body> <table border=4 align="center" width="60%"> <trcolspan=2> <thcolspan=2>car</th> <th>price</th> </tr> <tr> <td rowspan=4>Maruthi</td> <td>omnivan</td> <td>200000</td> </tr> <tr> <td>Maruthi 800</td> <td>242000</td> </tr> <tr> <td>Maruthi 1000</td> <td>310000</td> </tr> <tr> <td>maruthizen</td> <td>390000</td> </tr> <tr> <td rowspan=2>Tata</td> <td>Sumo</td> <td>475000</td> </tr> <tr> <td>Estate</td> <td>462000</td> </tr> <tr> <td rowspan=2>Ambassador</td> <td>petrol</td> <td>324000</td> </tr> <tr> <td>diesel</td> <td>387000</td> </tr> </table> </body> </html>

OUTPUT

<!FRAMES DEMO ..>

Fruits.html <html> <head> <title>Fruits</title> </head> <body> <pre> <center> <h1><u>Fruits</u></h1> <ol type="1"> <li align=center><b>Apple</b></li> <li><b>Orange</b></li> <li><b>Mango</b></li> </ol> </center> </pre> </body> </html>

Animals.html <html> <head> <title>Animals</title> </head> <body> <pre> <center> <h1><u>Animals</u></h1> <ol type="a"> <li><b>Elephant</b></li> <li><b>Lion</b></li> <li><b>Bear</b></li> </ol> </center> </pre> </body> </html>

Birds.html <html> <head> <title>Birds</title> </head> <body> <center> <pre> <h1><u>Birds</u></h1> <ol type="Square"> <li align=center><b>Crows</b></li> <li><b>Pigeon</b></li> <li><b>Sparrow</b></li> </ol> </pre> </center> </body> </html>

Frames.html <html> <head> <title>Frames</title> </head> <frameset cols="30%,40%,30%"> <frame src="Contents.html" name="Top"> <frameset rows="50%,50%"> <frame src="First.html" name="Second Top"> <frame src="First.html" name="Second Bottom"> </frameset> <frame src="First.html" name="Third Frame"> </frameset> </html>

OUTPUT

<!BIODATA USING FORMS ..>

<html> <head> <title>Biodata</title> </head> <body> <form name="Biodata" Action:\cgi-bin\mycgi.pl" method="post"> <h2 align=center>Biodata</h2> <table align=center width="30%"> <tr> <th>Name</th> <td colspan="5"><input type="text" name="textname" size=70>&nbsp; </tr> <tr> <th>D.O.B</th> <td colspan="5"><input type="text" name="textname" size=70>&nbsp; </tr> <tr> <th>Religion</th> <td colspan="5"><input type="text" name="textname" size=70>&nbsp; </tr> <tr> <throwspan="5">Address</th> </tr> <tr> <td>Street</td> <td colspan="4"><input type="text" name="textname" size=50>&nbsp; </tr> <tr> <td>Town</td> <td colspan="4><input type="text" name="textname" size=50>&nbsp; </tr> <tr> <td>Dist</td> <td colspan="4"><input type="text" name="textname" size=50>&nbsp; </tr> <tr> <td>State</td> <td colspan="4"><input type="text" name="textname" size=50>&nbsp; </tr> <tr> <throwspan="2">Phone</th> <td>Office</td> <td colspan="4"><input type="text" name="textname" \ size=50>&nbsp; </tr> <tr> <td>Residance</td> <td colspan="4"><input type="text" name="textname"

size=50>&nbsp; </tr> <tr> <thcolspan="6">Educational Qualification&nbsp; </tr> <tr> <th>Degree</th> <th>University</th> <th>Month&Year</th> <th>Grade/Marks</th> </tr> <tr> <th>1</th> <td colspan="4"><input type="text" name="textname" size=70>&nbsp; </tr> <tr> <th>2</th> <td colspan="4"><input type="text" name="textname" size=70>&nbsp; </tr> <tr> <th>3</th> <td colspan="4"><input type="text" name="textname" size=70>&nbsp; </tr> <tr> <th>4</th> <td colspan="4"><input type="text" name="textname" size=70>&nbsp; </tr> <tr> <th>5</th> <td colspan="4"><input type="text" name="textname" size=70>&nbsp; </tr> </table> </form> </body> </html>

OUTPUT

<!LOGIN FORM AND REGISTRATION FORM (with validation)

..>

Frames.html
<html> <head> <title>Page Frame</title> </head> <frameset rows="20%,80%"> <frame src="Table.html" name="Top"> <frameset cols="20%,80%"> <frame src="Courses.html" name="Bottom Left"> <frame src="Description.html" name="Bottom Right"> </frameset> </frameset> </html>

Table.html
<html> <head><title>Login</title> <basefont color=Black size="8"> </head> <body bgcolor="#abdd0d"> <table border="2" width="100%"> <tr> <td rowspan="2"><img src="3.jpg" width=90 height=50></td> <th colspan="5">Website Name</th> </tr> <tr> <td>Home</td> <td><a href="Login.html" target="Bottom Right">Login</a></td> <td><a href="Registration.html" target="Bottom Right">Registration</a></td> <td><a href="Catalogue.html" target="Bottom Right">Catalogue</a></td> <td>Cart</td> </tr> </table> </body> </html>

Courses.html
<html> <head> <title>Home Details</title> </head> <body bgcolor="#fedcba"> <center> <a href="Cse.html" target="Bottom Right">CSE</a> <br> <a href="Ece.html" target="Bottom Right">ECE</a> <br> <a href="Eee.html" target="Bottom Right">EEE</a> <br> <a href="Civil.html" target="Bottom Right">CIVIL</a> </center> </body> </html>

LOGIN.HTML
<html> <head> <title>Login</title> </head> <body bgcolor="#089459"> <form name="login" Action:\cgi-bin\mycgi-pl" method="post"> <table align=center> <tr> <td>Name</td> <td><input type="text" name="tname"></td> </tr> <td>Password</td> <td><input type="Password" name="pass"></td> </tr> <tr> <td colspan="2" align=center><input type="Submit" name="Submit" <input type="Reset" name="Reset" value="Reset"> </tr> </table> </form> </body> </html>

<html> <head> <title>RegistrationEight</title> <script> function nameValidate() { var name1=document.forms[0].elements[0].value; var n_match=/^[A-Za-z0-9]\w{6,}[A-Zaz]*$/; if(!name1.match(n_match)) alert("Please enter a valid name."); } function passwordValidate() { var passwd=document.forms[0].elements[1].value; var p_match=/^[A-Za-z]\w{6,}[A-Za-z]*$/; if(!passwd.match(p_match)) alert("Please enter a valid pass word."); } function phnumValidate() { var phnumber=document.forms[0].elements[3].value; var ph_match=/^[9]\d{9,}[0-9]*$/; if(!phnumber.match(ph_match)) alert("Please enter a valid phone number and first digit start with 9"); } </script> </head> <body text="blue"> <h2 align="center"><u>Registration Form</u></h3> <table align="center" border="0" width="60%" > <form name="Regform" action="\cgi_bin\mycgi.pl" method="post"> <tr> <th align = "left">Name</th> <td><input type="text" name="txtname" maxlength="15" onBlur="nameValidate()"></td> </tr> <tr> <th align ="left" >Password</th> <td><input type="password" name="passwd" maxlength="15" onBlur="passwordValidate()"></td> </tr> <tr> <th align = "left">Email</th> <td><input type="text" name="txtname" maxlength="30"></td> </tr> <tr>

<th align = "left">Ph.number</th> <td><input type="text" name="txtname" maxlength="13" onBlur="phnumValidate()" ></td> </tr> <tr> <th align = "left">Gender</th> <th align = "left"><input type="radio" name="gender">Male</th> <th align = "left"><input type="radio" name="gender">Female</th> </tr> <tr> <th align = "left">DOB</th> <th align = left>Date <Select name="DOB" size="1" multiple="single"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> <option>11</option> <option>12</option> <option>13</option> <option>14</option> <option>15</option> <option>16</option> <option>17</option> <option>18</option> <option>19</option> <option>20</option> <option>21</option> <option>22</option> <option>23</option> <option>24</option> <option>25</option> <option>26</option> <option>27</option> <option>28/</option> <option>29</option> <option>30</option> <option>31</option> </select> <th align = left> Mon<Select name="DOB" size="1" multiple="multiple"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option>

<option>7</option> <option>8</option> <option>9</option> <option>10</option> <option>11</option> <option>12</option> </select></th> <th align = left>Year <Select name="DOB" size="1" multiple="multiple"> <option>1989</option> <option>1990</option> <option>1991</option> <option>1992</option> <option>1993</option> <option>1994</option> <option>1995</option> <option>1996</option> <option>1997</option> <option>1998</option> <option>1999</option> <option>2000</option> <option>2001</option> <option>2002</option> <option>2003</option> <option>2004</option> <option>2005</option> <option>2006</option> <option>2007</option> <option>2008</option> <option>2009</option> <option>2010</option> <option>2011</option> <option>2012</option> </select></th> </tr> <tr> <th align = "left">Language Knowns</th> <th align = left>Eng<input type="checkbox" name="Langcheck"></th> <th align =left>Hindi<input type="checkbox" name="Langcheck"></th> <th align = left>Tel<input type="checkbox" name="Langcheck"></th> </tr> <tr> <th align = left>Address</th> <td><textarea name="taadd" cols="15" rows="3"></textarea></td> </tr> <tr> <th align = center><input type="Submit" name="Butsubmit" value="Submit"></th> <th align = center> <input type="Reset" name="Butreset" value="Reset"></th>

</tr> </form> </table> </body> </html>

String Manipulation

<!JAVASCRIPT MATHEMATICAL FUNCTIONS ..> <html> <body> <center> <h2><u>Mathematical Functions</u></h2> <pre> <script> document.writeln("<b>"+"Floor:"+Math.floor(3422.74)); document.writeln("<b>"+"Ceil:"+Math.ceil(344.45)); document.writeln("<b>"+"Round:"+Math.round(7364.87)); document.writeln("<b>"+"Absolute:"+Math.abs(-8346)); document.writeln("<b>"+"Power:"+Math.pow(3,6)); document.writeln("<b>"+"Square root:"+Math.sqrt(246)); document.writeln("<b>"+"Maximum:"+Math.max(74,87)); document.writeln("<b>"+"Minimum:"+Math.min(345,958)); document.writeln("<b>"+"Log:"+Math.log(7)); var res=parseInt(1010,2); document.writeln("<b>"+"String to Integer:"+res); var res1=isNaN() document.writeln(res1); </script> </pre> </center> </body> </html>

OUTPUT

<!JAVASCRIPT ARRAY FUNCTIONS ..> <html> <head> <title>Array functions demo</title> </head> <body> <h3 align = "center" > Illustration of Array Functions </h3> <pre> <script> //concat function: combines array elements var first=[1,2,3]; var second=[4,5,6]; var third=[7,8]; var res=first.concat(second,third); document.writeln("<br/>"+"First Array Elements are : " +first.join(",")); document.writeln("Second Array Elements are : " +second.join(",")); document.writeln("Third Array Elements are : " +third.join(",")); document.writeln("After concatenating the array elements are:"); for(var i = 0;i < res.length;i++) document.write(res[i]); //Join function: combines array elements as string var a=[1,2,3,4,5,6,7,8,9]; var str=a.join(":"); document.writeln("<br/>"+"Array elements as a string:"+str);//1:2:3:4:5:6:7:8:9 //pop function:Delete elements at the end of array a.pop(); var str1=a.join(":"); document.writeln("The Array Elements after poping an Element:" + str1);//1:2:3:4:5:6:7:8 //push functon: Inserts an element at the end of array a.push(-1,0); var str2=a.join(":"); document.writeln("The Array Elements after pushing elements:" +str2);//-1:0:1:2:3:4:5:6:7:8 //reverse function: reverse the array a.reverse(); var str3=a.join(":"); document.writeln("The Array Elements in Reverse Order is:"+str3);//8:7:6:5:4:3:2:1:0:-1 //shift function: Remove an element at the front of array a.shift(); var str4=a.join(":"); document.writeln("The array after shift function is:"+str4);//7:6:5:4:3:2:0:-1 //unshift function: Insert an element at the front of array a.unshift(9);

var str5=a.join(":"); document.writeln("The Array Elements after unshift is:"+str5);//9:7:6:5:4:3:2:1:0:-1 //slice function: Extract elements var b=a.slice(2,4); var str6=b.join(";"); document.writeln("The Array Elements after slice function is:"+str6);//9:7:4:3:2:1:0:-1 //sort function:sort elements in dictionary order a.sort(); var str7=a.join(":"); document.writeln("The Array Elements after sorting:"+str7);//-1:0:1:2:3:4:7:9 //splice function:insert elements into at specified position a.splice(5,10); var str8=a.join(":"); document.writeln("The Array elements after splice function is:"+str8); </script> </pre> </body> </html> OUTPUT:

<!ILLUSTRATION OF FUNCTIONS IN JAVASCRIPT ..> <html> <head> <title>demo on objects</title> <script> functionCircleArea(r) { this.radius=r; this.area=computeArea; } functioncomputeArea() { varcarea=this.radius*this.radius*3.14; returncarea; } </script> </head> <body> <center> <h2><u>Customized Object in Javascript</u></h2> <script> var r = prompt("Enter the Radius of Circle"); var circle=new CircleArea(r); document.writeln("<b>"+"Area of circle of radius is:"+circle.area()); </script> </center> </body> </html>

OUTPUT:

<!ILLUSTRATION OF RECURSIVE FUNCTION IN JAVASCRIPT ..> <html> <head> <title>Ncr</title> <script> function fact(k) { f=1; for(var i=1;i<=k;i++) f=f*i; return f; } </script> </head> <basefont color=green size="10"> <body> <pre> <center> <h1><u>NCR Computation</u></h2> <script> var n=prompt("enter n value"); var r=prompt("enter r value"); varfact_n=fact(n); varfact_r=fact(r); varfact_nr=fact(n-r); var res=fact_n/(fact_r*fact_nr); document.writeln(n+"c"+r+" value is:"+res); </script> </body> </html>

OUTPUT

<!ILLUSTRATION OF REGULAR EXPRESSIONS ..>

Task 1:
<! Pattern matching Demo ..> <html> <head> <title>Regular Expression demo</title> </head> <body> <h3 align = "center"> Pattern Matching using Regular Expression <h3> <script> varstr=prompt("Enter the string"); var pattern=prompt("Enter pattern"); var res=str.match(pattern); if(res) document.writeln("<b>Pattern matched:</b>"+res[0]); else document.writeln("<b>Pattern not matching</b>"); </script> </body> </html>

OUTPUT

Task 2
<! Splitting a String Demo ..> <html> <head> <title>Splitting</title> </head> <body> <center> <h3 align = "center">Splitting a String using Regular Expression <h3> <pre> <script> Var msg=prompt("Enter the message:"); var res=msg.split(" "); for(var i=0;i<res.length;i++) document.writeln(res[i]); </script> </pre> </center> </body> </html>

OUTPUT

Task 3
<! Replacing a String with Another String Demo ..> <html> <head> <title>replacing string</title> </head> <body> <h3 align = center> Replacing a String using Replace Method </h3> <script> var str=prompt("Enter the string"); var ptrn1=prompt("Enter first pattern"); var ptrn2=prompt("Enter second pattern"); document.writeln("The Given String is :" +"<b>"+str+"</b><br/>"); document.writeln("The String to be Replaced :" +"<b>"+ptrn1+"</b><br/>"); document.writeln("Replace String with :"+"<b>"+ptrn2+"</b><br/>"); var res=str.replace(ptrn1,ptrn2); document.writeln("String After Replacing is : "+"<b>"+res+"</b>"); </script> </body> </html> OUTPUT

<!JAVASCRIPT VALIDATION DEMO ..> <html> <head> <title>employee details</title> <h3 align = "center"><u> EMPLOYEE SALARY DETAILS USING JAVASCRIPT</u></h3> <script> function hra() { var bs=document.forms[0].elements[2].value; var bs1=parseInt(bs); var hra1=0.15*bs1; document.forms[0].elements[3].value=hra1; } function da() { var bs=document.forms[0].elements[2].value; var bs1=parseInt(bs); var da1=0.1*bs1; document.forms[0].elements[4].value=da1; } function pf() { var bs=document.forms[0].elements[2].value; var bs1=parseInt(bs); var pf1=0.05*bs1; document.forms[0].elements[5].value=pf1; } function gs() { var gs1=parseInt(document.forms[0].elements[2]. value)+parseInt(document.forms[0].elements[ 3].value)+parseInt(document.forms[0].elemen ts[4].value); document.forms[0].elements[6].value=gs1; } function ns() { var ns1=parseInt(document.forms[0].elements[6]. value)parseInt(document.forms[0].elements[5].valu e); document.forms[0].elements[7].value=ns1; } </script> </head>

<body> <form action=" " method="post"> <table border=0 align = center> <tr> <th align = left>Emp Name <td><input type="text" value="john"> </tr> <tr> <th align = left>Emp No <th><input type="text" value="001"> </tr> <tr> <th align = left>Bsalary <td><input type="text" value="10000"> </tr> <tr> <th align = left>hra <td><input type="text" onBlur="hra()"> </tr> <tr> <th align = left>da <td><input type="text" onBlur="da()"> </tr> <tr> <th align = left>pf <td><input type="text" onBlur="pf()"> </tr> <tr> <th align = left>Gross Salary <td><input type="text" onBlur="gs()"> </tr> <tr> <th align = left>Net Salary <td><input type="text" onBlur="ns()"> </tr> </table> </form> </body> </html>

OUTPUT

CASCADING STYLE SHEET ILLUSTRATIONS Task 1


<!USE OF DIFFERENT FONT,STYLES AND COLORS <html> <head> <link rel="stylesheet" type="text/css" href="test1.css"/> </head> <body> <h1>This header is red</h1> <h2>This header is blue</h2> <p>This text is normal</p> </body> </html>

Test.css h1{color:red;font-size:22px;font-family:arial;text-decoration:underline} h2{color:blue;font-size:16px} p{font-family:arial;font-size:30px} OUTPUT

Task 2
<!SETTING BACKGROUND IMAGE ..> <html> <head> <style type="text/css"> body { background-image:url("winter.jpg"); background-repeat:no-repeat } h1 { color:white; font-size:35px; } </style> </head> <body> <center><h1>Life is beautiful!!!</h1></center> </body> </html> OUTPUT

Task 3
<!DEFINING STYLES FOR LINKS..>

<html> <head> <link rel="stylesheet" type="text/css" href="test4.css"/> </head> <body> <h1>This is style sheet is for links</h1> <h2>you can experiment with following link</p> <p><a href="http://www.google.co.in">this is a link</a></p> </body> </html> OUTPUT

Task 4
<! WORKING WITH LAYERS ..> <html> <head> <title>Layers Demo</title> </head> <body> <div style="position:relative; font-size:50px; left:50; top:10; Background-color:red; z-index:1;">Layer1</div> <div style="position:relative; font-size:50px; left:150; top:3; Background-color:green; z-index:2;">Layer2</div> <div style="position:relative; font-size:50px; left:200; top:-5; Background-color:blue; z-index:3;">Layer2</div> </body> </html>

OUTPUT

Task 5
<! CUSTOMIZED CURSOR ..> <html> <head> <title>Cursor demo</title> <style type="text/css"> .link1{cursor:default} .link2{cursor:crosshair} .link3{cursor:hand} .link4{cursor:move} .link5{cursor:text} .link6{cursor:wait} .link7{cursor:help} .link8{cursor:n-resize} .link9{cursor:s-resize} .link10{cursor:e-resize} .link11{cursor:w-resize} .link12{cursor:progress} .link13{cursor:not-allowed} .link14{cursor:no-drop} .link15{cursor:all-scroll} </style> </head> <body> <b> <a href="test.html" class="link1">default cursor</a> <br/> <b> <a href="test.html" class="link2">crosshair cursor</a> <br/> <b> <a href="test.html" class="link3">hand cursor</a> <br/> <b> <a href="test.html" class="link4">move cursor</a> <br/> <b> <a href="test.html" class="link5">text cursor</a> <br/> <b> <a href="test.html" class="link6">wait cursor</a> <br/> <b> <a href="test.html" class="link7">help cursor</a> <br/> <b> <a href="test.html" class="link8">n-resize cursor</a> <br/> <b> <a href="test.html" class="link9">s-resize cursor</a> <br/> <b>

<a href="test.html" class="link10">e-resize cursor</a> <br/> <b> <a href="test.html" class="link11">w-resize cursor</a> <br/> <b> <a href="test.html" class="link12">progress cursor</a> <br/> <b> <a href="test.html" class="link13">not-allowed cursor</a> <br/> <b> <a href="test.html" class="link14">no-drop cursor</a> <br/> <b> <a href="test.html" class="link15">all-scroll cursor</a> <br/> <b> </body> </html> OUTPUT

Catalogue.dtd <!ELEMENT catalog (book*)> <!ELEMENT Book (title,author,publication,isbn,edition,price)> <!ELEMENT title (#PCDATA)> <!ELEMENT author (#PCDATA)> <!ELEMENT publication (#PCDATA)> <!ELEMENT isbn (#PCDATA)> <!ELEMENT edition (#PCDATA)> <!ELEMENT price (#PCDATA)>

Catalogue.xsd <?xml version="1.0" encoding="UTF-8"?> <xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema"> <xs:element name="catalog"> <xs:complexType> <xs:sequence> <xs:element ref="book" minOccurs="1" maxOccurs="unbounded"/> </xs:sequence> </xs:complexType> </xs:element> <xs:element name="book"> <xs:complexType> <xs:sequence> <xs:element ref="title" minOccurs="1" maxOccurs="1"/> <xs:element ref="author" minOccurs="1" maxOccurs="1"/> <xs:element ref="publication" minOccurs="1" maxOccurs="1"/> <xs:element ref="isbn" minOccurs="1" maxOccurs="1"/> <xs:element ref="edition" minOccurs="1" maxOccurs="1"/> <xs:element ref="price" minOccurs="1" maxOccurs="1"/> </xs:sequence> </xs:complexType> </xs:element> <xs:element name="title" type="xs:string"/> <xs:element name="author" type="xs:string"/> <xs:element name="publication" type="xs:string"/> <xs:element name="isbn" type="xs:string"/> <xs:element name="edition" type="xs:string"/> <xs:element name="price" type="xs:string"/> </xs:schema>

Catalogue.xml <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/css" href="library.css"?> <catalog xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noSchemaNamespaceLocation="catalog.xsd"> <book> <title>XMLBible</title> <author>Winston</author> <publication>Wiely</publication> <isbn>0-7645-4760-7</isbn> <edition>Fifth</edition> <price>$40.5</price> </book> <book> <title>Artificial Intelligence</title> <author>S.Russel</author> <publication>Princeton Hall</publication> <isbn>0-13-1038-5</isbn> <edition>Sixth</edition> <price>$63</price> </book> <book> <title>Java 2</title> <author>Watson</author> <publication>BPB Publication</publication> <isbn>0-41-1058-7</isbn> <edition>Third</edition> <price>$63</price> </book> <book> <title>HTML in 24hours</title> <author>Sam Peter</author> <publication>SAM Publication</publication> <isbn>0-672-32841-0</isbn> <edition>Third</edition> <price>$50</price> </book> </catalog>

library.css catalog { font-family:arial; font-size:16pt; color:red; } book { display:block; font-family:times new roman; font-size:14pt; color:red; table-layout:auto } Title { font-family:arial; font-size:12pt; color:green; } author { font-family:arial; color:megenta; } publication,isbn,edition,price { display:block; font-family:arial; font-size:10pt; color:black; margin-left:20ft }

You might also like