Web Tech Practicals

Practical 1 :<html> <head> <title>Practical 1 </title> </head> <body> <br /> <center> <h1 style="text-decoration: underline; width: 42%;">
Block Level And Text Level Tags</h1> </center> <table width="60%" align="center" cellpadding="2" cellspacing="2" style="font-family: Arial; font-size: medium"> <tr> <td> <h1> Heading 1</h1> <h2> Heading 2</h2> <h3> Heading 3</h3> <h4> Heading 4</h4> <h5> Heading 5</h5> <h6> Heading 6</h6> </td> <td valign="top"> <p> This is a Sample PARAGRAPH </p> This is a <sub>SUBSCRIPT</sub> <br /> <br /> This is <sup>SUPERSCRIPT</sup> <br> <br /> <a href="pracs_question6.html">This is anchor tag.</a> <blockquote> "This is a Blockquote"</blockquote> </td>
<td valign="top"> <font><b>Font Bold</b></font> <font><em>Font Italics</em></font> <font><u>Font Underline</u></font> <br /> <strong> <br /> This is a strong tag which is same as bold </strong> <br /> <strike> <br /> This is a strike through tag</strike> <br /> <br /> Sample Address Tag : <address> </address> <address> B-302, Kohinoor Park,<br /> Manvelpada Road<br /> Virar (E)</address> </td> </tr> </table> </body> </html>
Output :-
Practical 2 :<html> <head> <title>BG color,Text color , Horizantal Rules and Special Character</title> </head> <body bgcolor="#fffde" text="#000000"> <center> <h1> Background color,Text color , Horizantal Rules and Special Character</h1> <hr /> <h2> Special Characters </h2> </center> <table align="center" border="1" style="font-family: Verdana; font-size: medium;"> <tr> <td> CopyRight </td> <td> © </td> </tr> <tr> <td> TradeMark </td> <td> ™ </td> </tr> <tr> <td> Register </td> <td> ® </td> </tr> </table> </body> </html>
Output :-
Practical 3 :<html> <head> <title>Practical 3</title> </head> <body> <br /> <h1 align="center" style="text-decoration: underline;"> Ordered List, UnOrdered List, Definite List and Nested List</h1> <table width="70%" align="center" cellpadding="2" cellspacing="2" style="font-family: Arial; font-size: medium"> <tr> <td> <h3> Ordered List</h3> <ol type="1"> <lh>Programming Languages</lh> <li>C</li> <li>C++</li> <li>Java</li> <li>.Net</li> </ol> </td> <td valign="top"> <h3> UnOrdered List</h3> <ul type="circle"> <lh>Programming Languages</lh> <li>C</li> <li>C++</li> <li>Java</li> <li>.Net</li> </ul> </td> <td valign="top"> <h3> Definite List</h3> <dl> <dt>IE </dt> <dd> developed by Microsoft </dd> <dt>Mozila </dt> <dd> developed by Mozila </dd> </dl> </td>
<td> <h3> Nested List</h3> <ol type="1"> <li>List Item 1 <ol type="a"> <li>nested List Item 1</dt> <li> nested List Item 2</dt> </ol> <li>List Item 2 <ul> <li>nested List Item 1</dt> <li> nested List Item 2</dt> </ol> </td> </tr> </table> </body> </html>
Output :-
Practical 4 :<html> <head> <title>Web Page</title> </head> <body style="font-family: Verdana; font-size: medium;"> <a id="top" href="C:\Documents and Settings\Kaustubh\Desktop\WebtechPracticles\practical1.html"> a. Local Page In Same Folder</a><br /> <br /> <a href="C:\Documents and Settings\Kaustubh\Desktop\WebtechPracticles\Kaustubh\pracs_Question1. html"> b. Page In Different Folder</a><br /> <br /> <a href="http:\\www.google.co.in">c. Page On Web</a> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <a href="#top">d. Specific Location Within Document</a> </body> </html>
Output :-
Practical 5 :<html> <head> <title></title> </head> <body> <h1 align="center" style="text-decoration: underline"> Images With Different Alignment And Wrapped Text :-</h1> <table style="width: 60%;" align="center"> <tr> <td valign="top" width="10%"> <img alt="Image with size 200px X 200px" style="border: solid 2px black; height: 200px; width: 200px;" src="images/AJAX.gif" /><br /> <b>Image width = 200 X 200 px</b> </td> <td colspan="2" valign="top" style="font-family: verdana; font-size: small;"> <br /> <h3> ASP.NET AJAX</h3> ASP.NET AJAX is a free framework for building a new generation of richer, more interactive, highly personalized cross-browser web applications. This new web development technology from Microsoft integrates cross-browser client script libraries with the ASP.NET 2.0 server-based development framework. In addition, ASP.NET AJAX offers you the same type of development platform for client-based web pages that ASP.NET offers for server-based pages. And because ASP.NET AJAX is an extension of ASP.NET, it is fully integrated with server-based services. ASP.NET AJAX makes it possible to easily take advantage of AJAX techniques on the web and enables you to create ASP.NET pages with a rich, responsive UI and server communication. However, AJAX isn't just for ASP.NET. You can take advantage of the rich client framework to easily build client-centric web applications that integrate with any backend data provider and run on most modern browsers. </td> </tr> <tr> <td colspan="3" valign="top" width="10%">  </td> </tr> <tr> <td colspan="2" valign="top" width="80%" style="fontfamily: verdana; font-size: small;"> <h3> Common Language Infrastructure (CLI)</h3> <p> The purpose of the Common Language Infrastructure (CLI) is to provide a language-neutral
platform for application development and execution, including functions for Exception handling, Garbage Collection, security, and interoperability. By implementing the core aspects of the .NET Framework within the scope of the CL, this functionality will not be tied to a single language but will be available across the many languages supported by the framework. Microsoft's implementation of the CLI is called the Common Language Runtime, or CLR. The CIL code is housed in CLI assemblies. As mandated by the specification, assemblies are stored in the Portable Executable (PE) format, common on the Windows platform for all DLL and EXE files. The assembly consists of one or more files, one of which must contain the manifest, which has the metadata for the assembly. The complete name of an assembly (not to be confused with the filename on disk) contains its simple text name, version number, culture, and public key token. Assemblies are considered equivalent if they share the same complete name, excluding the revision of the version number. </p> </td> <td colspan="1" valign="top" width="20%"> <img alt="" src="images/Overview_of_the_Common_Language_Infrastructure.svg.png" style="border: solid 2px crimson; height: 300px; width: 300px;" /><br /> <b>Image width = 300 X 300 px</b> </td> </tr> </table> </body> </html>
Output :-
Practical 6 :<html> <head> <title>Practical 6</title> </head> <body> <br /> <br /> <h1 style="text-decoration: underline" align="center"> Table Formating Using Basic Table Tags <br />& Different Attributes</h1> <table align="center" width="50%" cellpadding="2" cellspacing="1" frame="box" style="border: solid 1px navy; background-color: ButtonFace; font-family: Verdana; font-size: small" rules="all"> <tr style="background-color: Olive; color:White;"> <td> Cricketer </td> <td> Rankings </td> <td> Team </td> <td> Strike Rate </td> </tr> <tr> <td> Sachin Tendulkar </td> <td> 1 </td> <td> MI </td> <td> 120 </td> </tr> <tr> <td> Chris Gayle </td> <td> 2 </td> <td> RC </td> <td> 180 </td> </tr> <tr> <td> Shane Watson
</td> <td> 3 </td> <td> RR </td> <td> 150 </td> </tr> <tr> <td> MS Dhoni </td> <td> 11 </td> <td> CSK </td> <td> 140 </td> </tr> <tr> <td> Branden McCullum </td> <td> 15 </td> <td> KKR </td> <td> 135 </td> </tr> </table> </body> </html>
Output :-
Practical 7 :<html> <head> <title>Framesets</title> </head> <frameset rows="50%,*"> <frameset cols="50%,*"> <frame name="first" src="images/905321723.jpg"> <frame name="second" src="images/galloping-white-horses1.jpg"> </frameset> <frameset cols="50%,*"> <frame name="first" src="images/Giraffe.jpg" img height="50", width="50"> <frame name="second" src="images/AnimalCat268188x6.jpg" height="50" width="50"> </frameset> </frameset> </html>
Output :-
Practical 8 :<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Example1.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Example of Styles and Selectors(internal)</title> <style type="text/css"> h3 { font-family: Matura MT Script Capitals; font-size: 20px; font-style: italic; font-weight: bold; text-align: right; color: Aqua; } h4, h5 { font-family: Matura MT Script Capitals; font-size: 20px; font-style: italic; font-weight: bold; text-align: left; color: red; } .abc { font-family: Matura MT Script Capitals; font-size: 20px; font-style: normal; font-weight: bold; text-align: right; color: Black; } #xyz { font-family: Matura MT Script Capitals; font-size: 20px; font-style: italic; font-weight: bold; text-align: left; text-decoration: underline; color: Blue; } * { font-family: Arial Black; font-size: 30px; color: White; } </style> </head>
<body bgcolor="#336699"> <form id="form1" runat="server"> <div> <h1> This is an example of styles and selectors(Internal)</h1> <hr /> <hr /> <hr /> <h1 align="center"> Example on style sheets</h1> <hr /> <h3 align="center"> Example on embedded styles</h3> <hr /> <h4> Example on grouping styles</h4> <hr /> <h1 align="center"> Example on Selectors!!!</h1> <p class="abc"> this is an example of a class selector</p> <p id="xyz"> This is an example of Id selector</p> <h2> This is an example of universal selector</h2> </div> </form> </body> </html>
Output :-
Practical 9 :<html> <head> <title>Practical 9 </title> </head> <script type="text/javascript" language="javascript"> function validate() { var username = document.getElementById("username").value; var password = document.getElementById("password").value; var confirmPassword = document.getElementById("ConfirmPassword").value; var email = document.getElementById("Email").value; if (username == "") { alert('Username Required !'); document.getElementById("username").focus(); return false; } for (i = 0; i < username.length; i++) { if (username.charCodeAt(i) > 64 && username.charCodeAt(i) < 91 || username.charCodeAt(i) > 96 && username.charCodeAt(i) < 123 || username.charCodeAt(i) == 32) { } else { alert("Please Enter Valid Username !"); document.getElementById("username").value = ""; document.getElementById("username").value.focus(); return false; } } if (password == "") { alert('Password Required !'); document.getElementById("password").focus(); return false; } if (confirmPassword == "") { alert('Confirm Password Required !'); document.getElementById("ConfirmPassword").focus(); return false; } if (password != confirmPassword) { alert('Password & Confirm Password Mismatch !'); document.getElementById("password").value = ""; document.getElementById("ConfirmPassword").value = ""; document.getElementById("password").focus(); return false; } if (email == "") {
alert('Email ID Required !'); document.getElementById("Email").focus(); return false; } } </script> <body> <center><h1> Webpage Including Control Structures<br /> Using Javascript</h1></center> <table align="center" style="border: 1px solid #000099; borderbottom-style: none; background-color: #FFCC00; width: 40%; font-family: arial, Helvetica, sans-serif; font-size: small;" cellpadding="0" cellspacing="1" title="Registration Details"> <tr> <td valign="middle"> <h2 align="center"> Registration Details</h2> </td> </tr> </table> <table align="center" style="border: 1px solid #000099; background-color: #FFCC00; width: 40%; font-family: arial, Helvetica, sans-serif; fontsize: small;" cellpadding="4" cellspacing="1" title="Registration Details"> <tr> <td align="right" style="padding-right: 1em" width="40%"> Username </td> <td style="font-weight: bold" width="5px"> : </td> <td style="padding-left: 1em"> <input type="text" id="username" name="username" /> </td> </tr> <tr> <td align="right" style="padding-right: 1em" width="30%"> Password </td> <td style="font-weight: bold" width="5px"> : </td> <td style="padding-left: 1em"> <input type="password" id="password" /> </td> </tr> <tr> <td align="right" style="padding-right: 1em" width="30%"> Confirm Password </td> <td style="font-weight: bold" width="5px"> : </td> <td style="padding-left: 1em"> <input type="password" id="ConfirmPassword" /> </td> </tr>
<tr> <td align="right" style="padding-right: 1em" width="30%"> Email Id </td> <td style="font-weight: bold" width="5px"> : </td> <td style="padding-left: 1em"> <input type="text" id="Email" /> </td> </tr> <tr> <td align="right" style="padding-right: 1em" width="30%"> Gender </td> <td style="font-weight: bold" width="5px"> : </td> <td style="padding-left: 1em"> <input id="Radio1" checked="checked" name="Gender" type="radio" value="Male">Male</input> <input id="Radio2" name="Gender" type="radio" value="V1">Female</input> </td> </tr> <tr> <td align="right" style="padding-right: 1em" width="30%"> Hobbies </td> <td style="font-weight: bold" width="5px"> : </td> <td style="padding-left: 1em"> <input type="checkbox">cricket</input> <input type="checkbox">footbal</input> <input type="checkbox">other</input> </td> </tr> <tr> <td align="center" style="padding-right: 0em" width="30%" colspan="3"> <hr size="3" style="background-color: #000099" /> <input type="button" value="Submit" onclick="validate()"></input> <input id="Reset1" type="reset" value="Reset" /> </td> </tr> </table> </body> </html>
Output :-
Practical 10 :<html> <head> <title>Practical 10</title> </head> <script type="text/javascript" language="javascript"> function validate() { var productId = document.getElementById("productId").value; var productName = document.getElementById("productName").value; var productQty = document.getElementById("productQty").value; var billingAddress = document.getElementById("txtBillingAdd").value; if (productId == "") { alert('Product Id Required !'); document.getElementById("productId").focus(); return false; } if (productName == "--(Select)--") { alert('Product Name Required !'); document.getElementById("productName").focus(); return false; } if (productQty == "--(Select)--") { alert('Quantity Required'); document.getElementById("productQty").focus(); return false; } if (billingAddress == "") { alert('Billing Address Required !'); document.getElementById("txtBillingAdd").focus(); return false; } } function calculatePrice() { var productQty = document.getElementById("productQty").value; var cost = document.getElementById("productName").value; if (productQty == "--(Select)--") { alert('Quantity Required!'); document.getElementById("productPrice").value = ""; document.getElementById("productQty").focus(); return false; } else if (isNaN(productQty)) {
alert('Invalid Quantity!'); document.getElementById("productQty").value = ""; document.getElementById("productQty").focus(); return false; } else { var qty = parseInt(productQty); var price = qty * cost; document.getElementById("productPrice").value = price; } } function ResetQuantity() { document.getElementById("productQty").value = "--(Select)--"; document.getElementById("productPrice").value = ""; } function CopyAddress() { document.getElementById("txtShippingAdd").value = document.getElementById("txtBillingAdd").value; } </script> <body> <center> <h1> Event Handling<br /> </h1> </center> <table align="center" style="border: 1px solid #000099; borderbottom-style: none; background-color: #CC99FF; width: 50%; font-family: arial, Helvetica, sans-serif; font-size: small;" cellpadding="0" cellspacing="1" title="Product Details"> <tr> <td valign="middle"> <h2 align="center"> Product Details</h2> </td> </tr> </table> <table align="center" style="border: 1px solid #000099; background-color: #FFFFCC; width: 50%; font-family: arial, Helvetica, sans-serif; fontsize: small;" cellpadding="4" cellspacing="1"> <tr> <td align="right" style="padding-right: 1em" width="30%"> <b style="color:Red;">*</b>Product Id </td> <td style="font-weight: bold" width="5px"> : </td> <td style="padding-left: 1em" colspan="2"> <input type="text" id="productId" /> </td>
</tr> <tr> <td align="right" style="padding-right: 1em"> <b style="color:Red;">*</b>Product Name </td> <td style="font-weight: bold"> : </td> <td style="padding-left: 1em" colspan="2"> <select id="productName" onchange="ResetQuantity()"> <option>--(Select)--</option> <option value="500">T-Shirt</option> <option value="200">Mufler</option> <option value="1000">JEANS</option> <option value="2000">Saree</option> <option value="700">Tops</option> </select> </td> </tr> <tr> <td align="right" style="padding-right: 1em"> <b style="color:Red;">*</b>Quantity </td> <td style="font-weight: bold"> : </td> <td style="padding-left: 1em" colspan="2"> <select id="productQty" onchange="calculatePrice()"> <option>--(Select)--</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> </td> </tr> <tr> <td align="right" style="padding-right: 1em"> Price </td> <td style="font-weight: bold"> : </td> <td style="padding-left: 1em" colspan="2"> <input type="text" id="productPrice" readonly="readonly" /><br /> <sup><b style="color:Red;">*</b>Note: Price will be automatically calculated</sup> </td> </tr> <tr> <td align="right" style="padding-right: 1em"> <b style="color:Red;">*</b>Billing Address </td> <td style="font-weight: bold">
: </td> <td style="padding-left: 1em" valign="middle"> <textarea cols="20" id="txtBillingAdd" name="S3" rows="2"></textarea> </td> <td align="left"> <input id="btnCopyToShipping" type="button" value="Copy To Shipping Address" onclick="CopyAddress()" /> </td> </tr> <tr> <td align="right" style="padding-right: 1em"> Shipping Address </td> <td style="font-weight: bold"> : </td> <td style="padding-left: 1em" colspan="2"> <textarea id="txtShippingAdd" cols="20" name="S2" rows="2"></textarea> </td> </tr> <tr> <td align="right" style="padding-right: 1em"> Pay Type </td> <td style="font-weight: bold"> : </td> <td style="padding-left: 1em" colspan="2"> <input id="Radio1" checked="checked" name="Paytype" type="radio">Credit Card</input> <input id="Radio2" name="Paytype" type="radio" value="V1">Cheque</input> <input id="Radio3" name="Paytype" type="radio" value="V1">Cash</input> </td> </tr> <tr> <td align="center" style="padding-right: 0em" colspan="4"> <hr size="3" style="background-color: #000099" /> <input type="button" value="Proceed To Payment" onclick="validate()" /> <input id="Reset1" type="reset" value="Reset" /> </td> </tr> </table> </body> </html>
Output :-

Web Tech Practicals

Uploaded by

Document Information

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 Tech Practicals

Uploaded by

Copyright:

Available Formats

Practical 1 :<html> <head> <title>Practical 1 </title> </head> <body> <br /> <center> <h1 style="text-decoration: underline; width: 42%;">

You might also like