Scribd Logo
Upload

Welcome to Scribd!

  • 119 views

    Ip Lab 1,2,3 Expri

    Uploaded by

    Sunitha
    The document describes creating a web form with validation using JavaScript. It includes: 1) A form with one text field for a name and a submit button. 2) A JavaScript function that validates the form, ensuring the name field is filled out before submitting. 3) Sample code for the validation function and basic form markup to demonstrate validation on submit.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd

    Ip Lab 1,2,3 Expri

    Uploaded by

    Sunitha
    119 views12 pages
    The document describes creating a web form with validation using JavaScript. It includes: 1) A form with one text field for a name and a submit button. 2) A JavaScript function that validates the form, ensuring the name field is filled out before submitting. 3) Sample code for the validation function and basic form markup to demonstrate validation on submit.

    Original Description:

    First 3 lab program for ip

    Original Title

    ip lab 1,2,3 expri

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document describes creating a web form with validation using JavaScript. It includes: 1) A form with one text field for a name and a submit button. 2) A JavaScript function that validates the form, ensuring the name field is filled out before submitting. 3) Sample code for the validation function and basic form markup to demonstrate validation on submit.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    119 views12 pages

    Ip Lab 1,2,3 Expri

    Uploaded by

    Sunitha
    The document describes creating a web form with validation using JavaScript. It includes: 1) A form with one text field for a name and a submit button. 2) A JavaScript function that validates the form, ensuring the name field is filled out before submitting. 3) Sample code for the validation function and basic form markup to demonstrate validation on submit.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    of 12

    Ex.

    No: 1

    IMAGE MAPPING
    AIM:
    To write a map and fix the hotspots to show the information of
    it in a web page.

    ALGORITHM:
    1. Start the program.
    2. Get the india map image and link it to the package.
    <img src="flag.jpg">
    <img align="right" src = "India Map.gif" usemap="#india">
    3. Fix the hotspots in that image.
    4. Map the reference of the hotspots in the image.
    <area shape="circle" coords="274,745,20" href="tn.html">
    5. Mention the derived link.
    6. Click the link to get the desired image.
    7. Stop the program.
    SOURCE CODE:

    Main.html
    <html>
    <head>
    <BODY bgcolor="#gop6876cgdt5564ss">
    <img src ="indiamap.jpeg" usemap="indiamap" />
    <map name=indiamap>
    <AREA SHAPE="rect" COORDS="190,477,251,562" HREF="tamilnadu.html"
    target="tamilnadu.html" >
    <AREA SHAPE="rect" COORDS="158,477,195,564" HREF="kerala.html"
    target="kerala.html" >
    <AREA SHAPE="rect" COORDS="217,378,238,472,350,361" HREF="andhra.html"
    target="andhra.html" >
    <AREA SHAPE="rect" COORDS="160,474,212,401,189,436" HREF="karnataka.html"
    target="karnataka.html" >
    <AREA SHAPE="rect" COORDS="137,382,219,311,129,331" HREF="maharashtra.html"
    target="maharashtra.html" >
    <AREA SHAPE="rect" COORDS="392,319,334,304,309,362," HREF="orissa.html"
    target="orissa.html" >
    <AREA SHAPE="rect" COORDS="232,244,238,306,168,283" HREF="madhayapradesh.html"
    target="madhayapradesh.html" >
    </map>
    </head>
    </html>
    Tamiladu.html
    <html>
    <head>
    <body bgcolor="#fggbhjgdhg"/>
    <center><h2>it is a tamilnadu,here maximum tamilan living and capital of tamilnadu is
    </h2><h1>chennai<h1></center>
    </head>
    </html>
    Kerala.html
    <html>
    <head>
    <body bgcolor="#7674dshddf"/>
    <center>it is a kerala,here maximum malaiyalees living and capital of kerala is
    <h1>Thiruvananthapuram</h1></center>
    </head>
    </html>
    Karataka.html
    <html>
    <head>
    <body bgcolor="#7674dshddf"/>
    <center>it is a karnataka,here maximum kannadam living and capital of karnataka is
    <h1>Bangalore</h1></center>
    </head>
    </html>
    Madhyapradesh.html
    <html>
    <head>
    <body bgcolor="blue"/>
    <center>it is a madhyapradesh,here maximum maratiyam living and capital of madhyapradesh
    is <h1>BHOPAL</h1></center>
    </head>
    </html>
    Maharastra.html
    <html>
    <head>
    <body bgcolor="blue"/>
    <center>it is a maharashtra,here maximum maratiyam living and capital of maharashtra is
    <h1>Mumbai</h1></center>
    </head>
    </html>
    Orissa.html
    <html>
    <head>
    <body bgcolor="blue"/>
    <center><h2>it is a orissa,here maximum oreya living and capital of orissa is</h2>
    <h1>Bhubaneswar</h1></center></head></html>

    Output:
    RESULT:
    Thus the web page is created and the image is embedded with hot spot and the linking
    ages successfully, and the output is verified.
    Ex. No: 2 DATE:
    STYLE SHEET
    AIM:
    To write a webpage that displays college information using various style sheet.

    ALGORITHM:
    1. Start the program.
    2. Create a web page with framesets consisting two frames.
    3. In the first frame include the links.
    4. In the second frameset display the webpage of the link.
    5. Create a external style sheets.
    6. Create a inline and internal style and make a link to the external style sheet.
    7. Stop the program.

    SOURCE CODE:
    <html>
    <head>
    <title>Cascading Style Sheets</title>
    </head>
    <body alink="blue" vlink="brown">
    <h1><u><b><font face="Monotype corsiva" color="red">
    Different types of Cascading Style Sheets</font> </b></u></h1>
    <br />
    <font face="Arial"size="6">
    <a href ="inline.html" style="text-decoration :none;"> 1. Inline Style Sheet</a><br />
    <a href ="embedded.html" style="text-decoration :none;"> 2. Embeded Style
    Sheet</a><br />
    <a href ="external.html" style="text-decoration :none;"> 3. External Style
    Sheet</a><br />
    <a href ="import.html" style="text-decoration :none;"> 4. Imported Style
    Sheet</a><br /></font>
    </body>
    </html>

    Inline.html
    <html>
    <head>
    <title>Inline Style Sheet</title>
    </head>
    <body>
    <ol class="decimal">
    <h1 style="font-family :Monotype Corsiva ;background-color:antiquewhite ;"><li>
    Inline Style Sheet</li></h1>
    <h3>
    <p style="text-indent :30pt;color:blue;font-family :arial;">
    Inine Style is the style attached to one specific element.
    The style is specified directly in the start tag as a value of the style attribute well apply
    exclusively to this specific element occurrence.
    </p></h3>
    </ol>
    </body>
    </html>
    Embedded.html
    <html>
    <head>
    <title>Embeded Style Sheet</title>
    <style type="text/css">
    ol{list-style-type:decimal}
    h1{text-align: left; background:antiquewhite;font-family:monotype corsiva;color:red}
    h3{text-align: right; font-family:arial;color:blue}
    </style>
    </head>
    <body>
    <ol class="lroman"><h1>
    <li>Embedded style sheet</li></h1>
    <br />
    Embedded style is the style attached to one specific document.
    The information is specified as a content of the style element
    inside the head element and wil apply to the entire documents.
    </h3></ol>
    </body>
    </html>
    External.html
    <html>
    <head>
    <title>External Style Sheet</title>
    <link rel=Stylesheet href="style1.css" type="text/css" />
    </head>
    <body>
    <h1>1. External Style Sheet</h1><br />
    <h3>
    An external style sheet is a template documents/files
    containing style info which can be linked with any number
    of the documents. This is a very convenient way of formating
    the entire site as well as restyling it by editing just one file</h3>
    </body>
    </html>
    Import.html
    <html>
    <head><title>Imported Style Sheet</title>
    <link rel= stylesheet href="style2.css" type="text/css">
    </head>
    <body>
    <h1>1. Imported Style Sheet</h1>
    <h3> Imported style sheet is a shet that can be imported to another sheet.
    This alignes exacting one main sheet containing declarations that apply to
    the whle site and partial sheets containing declarations that apply to specific
    elements.</h3>
    </body>
    </html>

    Output:
    www.studentsfocus.com
    RESULT:
    Thus the web page is created using all tyes of cascading style sheets successfully and the
    output is also verified.

    www.studentsfocus.com
    EX. No: 3 DATE:
    WEB FORM VALIDATION
    AIM:
    To write a DHTML code for creating the web page for validating the web form.

    ALGORITHM:
    1.The form will include one text field called "Your Name", and a submit button.
    2.Validation script will ensure that the user enters their name before the form is sent to the
    server.
    3.Open this page to see it in action.
    4.Try pressing the Send Details button without filling anything in the "Your Name" field.
    5.You might like to open the source code for this form in a separate window
    6.The page consists of a JavaScript function called validate_form() that performs the form
    validation, followed by the form itself.

    SOURCE CODE:
    <html>
    <head>
    <title>A Simple Form with JavaScript Validation</title>
    <script type="text/javascript">
    <!--
    function validate_form ( )
    {
    valid = true;
    if ( document.contact_form.contact_name.value == "" )
    {
    alert ( "Please fill in the 'Your Name' box." );
    valid = false;
    }
    if(document.contact_form.contact_name.value)
    {
    alert("Your details had sended");
    valid=true;
    }
    return valid;
    }
    //-->
    </script>
    </head>
    <body bgcolor=”#FFFFFF”>
    <form name="contact_form" method="post"
    action="css.html"
    onSubmit="return validate_form();">
    <h1>Please Enter Your Name</h1>
    <p>Your Name: <input type="text" name="contact_name"></p>
    <p><input type="submit" name="send" value="Send Details"></p>

    www.studentsfocus.com
    </form>
    </body>
    </html>

    OUTPUT:

    www.studentsfocus.com
    www.studentsfocus.com

    You might also like