01 Creation of HTML Pages with Frames, Links, Tables and Other Tags Date

www.vidyarthiplus.com Ex. No. : 01 Creation of HTML pages with frames, links, tables and other tags Date : AIM: To create a simple webpage using HTML that includes all tags. ALGORITHM: 1. Write a HTML program in the notepad with the tags such as A. FRAMES With frames, you can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each frame is independent of the others. The Frameset Tag The <frameset> tag defines how to divide the window into frames. The Frame Tag The <frame> tag defines what HTML document to put into each frame. Example: <frameset cols="25%, 75 %"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> </frameset> Tags and their Description: <frameset> Defines a set of frames <frame> Defines a sub window (a frame) www.vidyarthiplus.com www.vidyarthiplus.com B. LINKS A hyperlink is a reference (an address) to a resource on the web. Example: <a href="http://www.w3schools.com/">Visit W3Schools!</a> The href Attribute The href attribute defines the link "address". The target Attribute The target attribute defines where the linked document will be opened. Tag and its Description: <a> Defines an anchor C. TABLES Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell. Example: <table border="1"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table> Tags and their Description: <Table> Defines a table <th> Defines a table header <tr> Defines a table row <td> Defines a table cell 2. Use appropriate tags to apply the background colors and desired styles as Required and save the file with .html extension. www.vidyarthiplus.com www.vidyarthiplus.com 3. Run the program in the Web Browser. PROGRAM: Home.html <html> <head> <title>Home</title> </head> <frameset rows="25%,*"> <frame src="frame1.html"> <frameset cols="25%,*"> <frame src="frame2.html" name="f2"> <frame src="frame3.html" name="f3"> </frameset> </html> Frame1.html <html> <head><title>frame1</title> </head> <body bgcolor="blue"> <h1 style="color.green;font-size:15pt"> <marquee bgcolor="#cccccc" loop="-1" scrollamount="6" width="100%"> THIRUVALLUVAR COLLEGE OF ENGINEERING AND TECHNOLOGY </marquee> </h1> </body> </html> Frame2.html <html> <head><title>frame2</title> <style type="text/css"> h1 { font-size:25pt;color:pink; www.vidyarthiplus.com www.vidyarthiplus.com } </style> </head> <body bgcolor="red"> <h1>click the link</h1> <a href="intro.html" target=f3>Introduction</a><br> <a href="dept.html" target=f3>Departments</a><br> <a href="ad.html" target=f3>ADDRESS</a><br> <a href="feed.html" target=f3>Feedback</a><br> <a href="gall.html" target=f3>Gallery</a><br> </body> </html Frame3.html <html> <head><title>1st page</title> <link rel="stylesheet" type="text/css" href="C:\Documents and Settings\Administrator\Desktop\ab\css1.css"/> </head> <body bgcolor="tan"> <h2> <center>YOU ARE IN HOME PAGE</center></h2> </body> </html> Intro.html <html> <head><title>intro</title> </head> <body bgcolor="black"> <font color=red> <p> Welcome to Thiruvalluvar College of Engineering and Technology - Affiliated to Anna University<br> <br> www.vidyarthiplus.com www.vidyarthiplus.com “Thiruvalluvar College of Engineering and Technology resolves to mould a human task force useful to the society through transparent methods that lead to continuous improvement of the resources and state-of-the-art methodologies conforming to recognized standards.” </p> </font> </body> </html> Ad.html <html> <head><title>ADDRESS</title> </head> <body bgcolor="black"> <p> <font color=red> Name:Thiruvalluvar College of Engineering and Technology<br> Location:Vandavasi<br> Contact No:04183-221444<br> Website: www.google.co.in<br> </font> </p> </body> </html> Dept.html <html> <head><title>Departments</title> </head> <body> <div align="center"> <table border=2> <tr> <th>Dept code</th> <th>Dept name</th> </tr> www.vidyarthiplus.com www.vidyarthiplus.com <tr> <td>01</td> <td>CSE</td> </tr> <tr> <td>02</td> <td>ECE</td> </tr> <tr> <td>03</td> <td>EEE</td> </tr> <tr> <td>04</td> <td>IT</td> </tr> <tr> <td>05</td> <td>MECH</td> </tr> <tr> <td>06</td> <td>AERO</td> </tr> </table> </div> </body> </html> Feed.html <html> <head><title>feed</title> </head> <body bgcolor="black"> <p> <font color=green> www.vidyarthiplus.com www.vidyarthiplus.com To give your feedback mail to [email protected] </font> </p> </body> </html> Gall.html <html> <head><title>gall</title> </head> <body bgcolor="pink"> <p> <font color=blue> College Front View</font> </p> <img src="file:///d:/google.JPG" height="300" width="400"/> </body> </html> www.vidyarthiplus.com www.vidyarthiplus.com OUTPUT: www.vidyarthiplus.com www.vidyarthiplus.com www.vidyarthiplus.com www.vidyarthiplus.com RESULT: Thus the HTML pages are created using frames, links, tables and other tags and have been successfully executed. www.vidyarthiplus.com www.vidyarthiplus.com Ex. No. : 2 APPLYING STYLE TO AN HTML PAGE USING CSS Date: Aim: To create an html page, and to apply style formatting using external Cascading Style Sheet. Algorithm: Step 1: Start the program. Step 2: Create an html page. Step 3: Create an external CSS (Cascading Style Sheet). Step 4: Link the external style sheet page with the main html page. Step 5: Load the main page. Step 6: The style formatting will be applied to the main html page. Step 7: Stop the program. www.vidyarthiplus.com www.vidyarthiplus.com PROGRAM: Style.html <html> <head> <style type="text/css"> .class1 A:link {text-decoration: none} .class1 A:visited {text-decoration: none} .class1 A:active {text-decoration: none} .class1 A:hover {text-decoration: underline; color: red;} .class2 A:link {text-decoration: underline overline} .class2 A:visited {text-decoration: underline overline} .class2 A:active {text-decoration: underline overline} .class2 A:hover {text-decoration: underline; color: green;} </style> <title>My first styled page</title> <link rel="stylesheet"href="mystyle.css"> <style type="text/css">  </style> </head> <body>  <span class="class2"> <ul class="navbar"> <li><a href="home.html">HOME</a> <li><a href="home.html">Department</a> <li><a href="home.html">Contact us</a> </ul> </span>  <h1>My first Internal styled page</h1> <p> Thiruvalluvar College of Engineering and Technology resolves to mould a human task force useful to the society through transparent methods www.vidyarthiplus.com www.vidyarthiplus.com that lead to continuous improvement of the resources and state-of-the-art methodologies conforming to recognized standards.  <p><address class="style2" >M.E(CSE) <br> 31-06-2011</address></p> </body> </html> Mystyle.html: <html> <head> <title>My first styled page</title> <link rel="stylesheet"href="mystyle.css"> </head> <body>  <ul class="navbar"> <li><a href="About.html">About us</a> <li><a href="home.html">Department</a> <li><a href="home.html">Contact us</a> </ul>  <h1>My first External styled page</h1> <p> THIRUVALLUVAR COLLEGE OF ENGINEERING AND TECHNOLOGY <BR> ARUNACHAL CITY<br> VANDAVASI<br> <p> An ISO 9001:2008 institution<br> NBA Accredited<br>  <p><address>December 28th <br> Dept. of I.T.</address> </body> </html> www.vidyarthiplus.com www.vidyarthiplus.com /* CSS Document */ BODY { PADDING-LEFT: 11em; COLOR: purple; FONT-FAMILY: Georgia, "Times New Roman", Times, serif; BACKGROUND-COLOR: #d8da3d } UL.navbar { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; LEFT: 1em; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 9em; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; POSITION: absolute; TOP: 2em } H1 { FONT-FAMILY: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif } UL.navbar LI { BORDER-RIGHT: 1em solid; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: white; PADDING-BOTTOM: 0.3em; MARGIN: 0.5em 0px; PADDING-TOP: 0.3em } www.vidyarthiplus.com www.vidyarthiplus.com OUTPUT: RESULT: Thus an html page is created and style formatting is applied using external Cascading Style Sheet. www.vidyarthiplus.com www.vidyarthiplus.com Ex. No. : 3(A) Client Side Programming Date : Java script for Displaying and Comparing Date AIM: To write a Java script program for displaying and comparing two dates. ALGORITHM: Java script program for displaying date 1. Create a variable for DATE object as shown below, var currentTime = new Date() 2. Obtain the current date from it using getDate() as shown below, Var d=currentTime.getDate() 3 Display the value of d. Java script program for comparing two dates 1. Get two dates to be compared from the user in string format. 2. Convert the obtained string into DATE objects as shown below, var todate = new Date(todatestring); var fromdate = new Date(fromdatestring); 3. Compare these two dates using ‘<’ operator. www.vidyarthiplus.com www.vidyarthiplus.com PROGRAM: <html> <script> function Compare() { if (document.frmTest.startDate.value > document.frmTest.endDate.value){ alert ("Start Date is greater"); } if (document.frmTest.startDate.value < document.frmTest.endDate.value){ alert ("End Date is greater"); } if (document.frmTest.startDate.value == document.frmTest.endDate.value){ alert ("Dates are the same"); } } </script> <body> <form name="frmTest"> Start Date: <b><input type="text" name="startDate" size="14"></b> <br> <br> End Date: <b><input type="text" name="endDate" size="14"></b> <a href="javascript:Compare();">Compare</a> </form> </body> </html> www.vidyarthiplus.com www.vidyarthiplus.com OUTPUT: RESULT: Thus the program for displaying and comparing two dates has been completed successfully and output is verified. www.vidyarthiplus.com www.vidyarthiplus.com Ex. No. : 3.b Client Side Programming Date : Form Validation AIM: To write a Java script program for Form Validation including text field, radio buttons, check boxes, list box and other controls.

01 Creation of HTML Pages with Frames, Links, Tables and Other Tags Date

Details

Download

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

Support