Web Technology : April 2014

Friday, 18 April 2014

CREATION OF COLOR PALETTE AND IMAGE LOADING

AIM:

To write a Applet program to create a color palette and create radio button for selecting the foreground and background colors.

ALGORITHM:

Step 1: Create a color palette with a matrix of Buttons.

Step 2: Create a TextArea control.

Step 3: Create two Radiobutton for selecting the foreground and background colors.

Step 4: Set the foreground of the TextArea with color specified by the Button which is clicked only if the

radiobutton selected is foreground

Step 5: Otherwise set the background color of the TexeArea with color clicked.

PROGRAM:

import java.net.*;

import java.awt.*;

import java.awt.event.*;

import java.applet.*;

public class MyApplet extends Applet implements ActionListener

{

Panel p1,p2;

Checkbox c1,c2;

CheckboxGroup cbg;

TextArea ta;

Button b1,b2,b3;

public void init()

{

setLayout(new BorderLayout());

p1=new Panel(new FlowLayout());

p2=new Panel(new GridLayout(2,2));

cbg=new CheckboxGroup();

c1=new Checkbox("FOREGROUND",cbg,true);

c2=new Checkbox("BACKGROUND",cbg,false);

p1.add(c1);

p1.add(c2);

add(p1,BorderLayout.NORTH);

b1=new Button("RED");

b2=new Button("BLUE");

b3=new Button("GREEN");

p2.add(b1);

p2.add(b2);

p2.add(b3);

add(p2,BorderLayout.CENTER);

ta=new TextArea("DEMO FOR COLOR PALETTE",15,20);

p2.add(ta);

b1.addActionListener(this);

b2.addActionListener(this);

b3.addActionListener(this);

}

public void actionPerformed(ActionEvent ae)

{

String str=ae.getActionCommand();

String str1=cbg.getSelectedCheckbox().getLabel();

if(str1.equals("FOREGROUND"))

{

if(str=="RED")

ta.setForeground(Color.red);

if(str=="BLUE")

ta.setForeground(Color.blue);

if(str=="GREEN")

ta.setForeground(Color.green);

}

else

{

if(str=="RED")

ta.setBackground(Color.red);

if(str=="BLUE")

ta.setBackground(Color.blue);

if(str=="GREEN")

ta.setBackground(Color.green);

}

Comment your feedback :)

Thursday, 17 April 2014

VALIDATING WEB FORM USING DHTML

AIM:

To write the HTML codes using JAVA Script and CSS to create Client Side Scripts for Validating Web Form Controls.

ALGORITHM:

Step 1 : Open the notepad.

Step 2 : Create the HTML header and give the title as “WebForm”.

Step 3 : Specify the style type as “text/css”.

Step 4 : Define the properties for the Layout and Layer.

Step 5 : Specify the script type as “text/javascript”.

Step 6 : Create a function as “validate()”.

Step 7 : Specify the conditions for the form to be created using javascript.

Step 8 : Open the body of the HTML.

Step 9 : Create the division as “Layer”.

Step 10: Create a form and name it. Create a table for better alignment of the contents of the form.

Step11: Specify the requirements of the form like Name, Qualification, Date Of Birth, etc.

Step 12: Define the input type, name and id of all the required parameters.

Step 13: Create a “Submit” button and make a link to the function using onclick=“validate()”.

Step 14: Save and run the HTML file to get the output.

PROGRAM:

<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
#Layer1 {
position:absolute;
width:1047px;
height:792px;
z-index:1;
left: 103px;
top: 80px;
}
.style1 {
color: #000099;
font-weight: bold;
background-color:#00CCFF;
}
.style2 {
color: #000099;
font-weight: bold;
background-color:#00CCFF;
}
#Layer2 {
position:absolute;
width:1040px;
height:49px;
z-index:2;
left: 59px;
top: 9px;
}
.style3 {
color: #006666;
font-weight: bold;
background-color:#E0D2F0;
}

body{
background-color:#DADADA;
}
</style>
<script type="text/javascript">
function validation()
{
if(document.validate.name.value=="")
{
alert("enter the full name")
document.validate.name.focus();
return false
}
if(!isNaN(document.validate.name.value))
{
alert("enter the valid name");
document.validate.name.focus();
document.validate.name.value="";
return false
}
if(document.validate.day.value=="0")
{
alert("enter the day")
document.validate.day.focus();
return false
}
if(document.validate.month.value=="0")
{
alert("enter the month")
document.validate.month.focus();
return false
}
if(document.validate.year.value=="0")
{
alert("enter the year")
document.validate.year.focus();
return false
}
if(document.validate.gender.value=="0")
{
alert("enter the gender")
document.validate.gender.focus();
return false
}
if(document.validate.address.value=="")
{
alert("enter the address")
document.validate.address.focus();
return false
}
if(document.validate.city.value=="")
{
alert("enter the city")
document.validate.city.focus();
return false
}
if(!isNaN(document.validate.city.value))
{
alert("enter the valid City")
document.validate.city.focus();
document.validate.city.value="";
return false
}
if(document.validate.state.value=="")
{
alert("enter the state")
document.validate.state.focus();
return false
}
if(!isNaN(document.validate.state.value))
{
alert("enter the valid state")
document.validate.state.focus();
document.validate.state.value="";
return false
}
if(document.validate.pincode.value=="")
{
alert("enter the pincode ")
document.validate.pincode.focus();
return false
}
if( isNaN(document.validate.pincode.value))
{
alert("enter a valid pincode")
document.validate.pincode.focus();
return false
}
if(document.validate.pincode.value.length!=6)
{
alert("please enter the valid pincode")
document.validate.pincode.focus();
return false
}
if(document.validate.address.value=="")
{
alert("enter the address")
document.validate.address.focus();
return false
}
if(document.validate.email.value=="")
{
alert("enter the email id")
document.validate.email.focus();
return false
}
if(!(document.validate.email.value==""))
{
var x=document.validate.email.value
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("Not a valid e-mail address");
document.validate.email.focus();
return false;
}
}
if(document.validate.mobile.value=="")
{
alert("enter the mobile no")
document.validate.mobile.focus();
return false
}
if( isNaN(document.validate.mobile.value))
{
alert("enter a valid mobile no")
document.validate.mobile.focus();
document.validate.mobile.value="";
return false
}
if(document.validate.mobile.value.length !=10)
{
alert("enter the valid mobile no")
document.validate.mobile.focus();
document.validate.mobile.select();
return false
}
if(document.validate.qualification.value=="0")
{
alert("enter the qualification")
document.validate.qualification.focus();
return false
}
if(document.validate.experience.value=="0")
{
alert("enter the experience")
document.validate.experience.focus();
return false
}
if(document.validate.project.value=="")
{
alert("enter the project description")
document.validate.project.focus();
return false
}
if(document.validate.salary.value=="")
{
alert("enter the salary ")
document.validate.salary.focus();
return false
}
if( isNaN(document.validate.salary.value))
{
alert("enter a valid salary")
document.validate.salary.focus();
document.validate.salary.value="";
return false
}
}

</script>
</head>

<body>
<div id="Layer1">
<form id="validate" name="validate" method="post" action="">
    <p> </p>
    <table width="886" border="0" cellspacing="2" cellpadding="2">

      <tr>
        <td colspan="2"><div align="center" class="style1">Personal Details </div></td>
        <td width="30" rowspan="10"> </td>
        <td colspan="2"> <div align="center" class="style2">Education and Experience </div></td>
      </tr>
      <tr>
        <td width="111">Full Name</td>
        <td width="255"><label>
          <input name="name" type="text" id="name" />
        </label></td>
        <td width="152">Qualification</td>
        <td width="217"><select name="qualification">
    <option value="0">Select</option>
    <option value="1">UG</option>
            <option value="2">PG</option>

            <option value="3">PHD</option>

        </select></td>
      </tr>
      <tr>
        <td>Date of Birth </td>
        <td><select name="day">
    <option value="0">Day</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>

        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16</option>

        <option value="17">17</option>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20</option>
        <option value="21">21</option>
        <option value="22">22</option>

        <option value="23">23</option>
        <option value="24">24</option>
        <option value="25">25</option>
        <option value="26">26</option>
        <option value="27">27</option>
        <option value="28">28</option>

        <option value="29">29</option>
        <option value="30">30</option>
        <option value="31">31</option>
       </select>

      <select name="month">
      <option value="0">Month</option>
        <option value="1">Janauray</option>

            <option value="2">Feburary</option>
            <option value="3">March</option>
            <option value="4">April</option>
            <option value="5">May</option>
            <option value="6">June</option>
            <option value="7">July</option>

            <option value="8">August</option>
            <option value="9">Sepetember</option>
            <option value="10">October</option>
            <option value="11">November</option>
            <option value="12">December</option>
       </select>


       <select name="year">
       <option value="0">Year</option>
        <option value="1">2009</option>
            <option value="2">2008</option>
            <option value="3">2007</option>
            <option value="4">2006</option>

            <option value="5">2005</option>
            <option value="6">2004</option>
            <option value="7">2003</option>
            <option value="8">2002</option>
            <option value="9">2001</option>
            <option value="10">2000</option>

            <option value="11">1999</option>
            <option value="12">1998</option>
            <option value="13">1997</option>
            <option value="14">1996</option>
            <option value="15">1997</option>
            <option value="16">1996</option>

            <option value="17">1995</option>
            <option value="18">1994</option>
            <option value="19">1993</option>
            <option value="20">1992</option>
            <option value="21">1991</option>
            <option value="22">1990</option>

            <option value="23">1989</option>
            <option value="24">1988</option>
            <option value="25">1987</option>
            <option value="26">1986</option>
            <option value="27">1985</option>
            <option value="28">1984</option>

            <option value="29">1983</option>
            <option value="30">1982</option>
            <option value="31">1981</option>
            <option value="32">1980</option>
       </select></td>
        <td>Work Experience </td>
        <td><select name="experience">
        <option value="0">Select</option>
                <option value="1">Fresher</option>
                <option value="2">1 yr</option>
                <option value="3">2 yrs</option>
                <option value="4">3 yrs</option>
<option value="5">4 yrs</option>
<option value="6">5 yrs</option>
<option value="7">>5 yrs</option>

            </select></td>
      </tr>
      <tr>
        <td height="70">Sex</td>
        <td><select name="gender" id="gender" >
          <option value="0">Select Gender</option>
          <option value="1">Male</option>

          <option value="2">Female</option>
        </select></td>
        <td>Project Description </td>
        <td><label>
          <textarea name="project" id="project"></textarea>
        </label></td>
      </tr>
      <tr>
        <td>Address</td>
        <td><label>
          <textarea name="address" id="address"></textarea>
        </label></td>
        <td>Expected Salary P.A </td>
        <td><label>
          <input name="salary" type="text" id="salary" />
        </label></td>
      </tr>
      <tr>
        <td>City</td>
        <td><label>
          <input name="city" type="text" id="city" />
        </label></td>
        <td colspan="2" rowspan="5"> </td>
      </tr>
      <tr>
        <td>State</td>
        <td><label>
          <input name="state" type="text" id="state" />
        </label></td>
      </tr>
      <tr>
        <td>PinCode</td>
        <td><label>
          <input name="pincode" type="text" id="pincode" />
        </label></td>
      </tr>
      <tr>
        <td>Email ID</td>
        <td><label>
          <input name="email" type="text" id="email" />
        </label></td>
      </tr>
      <tr>
        <td>Mobile Number</td>
        <td><label>
          <input name="mobile" type="text" id="mobile" />
        </label></td>
      </tr>
      <tr>
        <td colspan="5"><label>
          <div align="center">
            <input type="submit" name="Submit" value="Submit" onclick="return validation()" />
            <label>
            <input type="reset" name="Submit2" value="Reset" />
            </label>
          </div>
        </label></td>
      </tr>
    </table>

</form>
</div>
<div id="Layer2">
<div align="center">
    <h1 class="style3">Job Registration Form </h1>
</div>
</div>
</body>
</html>

Run this get your output as feedback thank you :)

Sunday, 13 April 2014

Web Technology

CASCADING STYLE SHEETS

AIM:

To write the required CSS codes and to embed them in HTML codes to display the webpage.

ALGORITHM:

Step 1 : Open the notepad.

Step 2 : Create the HTML header and give the title as “My CSS Webpage”.

Step 3 : Create a link in the header to the CSS file that is stored externally.

Step 4 : Specify the style type as “text/css”.

Step 5 : Create the divisions in body of HTML as header, middle, left, right and footer using “div”.

Step 6 : Save the HTML file.

Step 7 : Create a CSS file.

Step 8 : Specify the properties like background color, top, left, height, image of header, middle, left,

right and footer of the Webpage to be created.

Step 9 : Save it as “mystyle.css”.

Step10: Run the HTML file to get the output.

PROGRAM:

Mystyle.html

<html>
<head>
<title>My CSS Web Page</title>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
<style type="text/css">
//cut and paste coding from mystyle.css to here……
</style>
</head>
<body>
<div class="header"> </div>
<div class="left">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Academics</a></li>
<li><a href="#">Facilities</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>

<div class="middle">

<p> JNN Institute of Engineering stands tall in sylvan surroundings of serene atmosphere with an ambition of providing good quality technical education coupled with discipline for the rural folk. This technical institution is housed in a sprawling campus of 45 acres on the Chennai-Periyapalayam Highway. It imparts training for students to make them competent, motivated engineers and managers. The institute encourages growth, cultivates vision, freedom of thought and further inculcates human values and concern for the environment and society. This institution has been promoted by The Alamelu Ammaal Educational Trust in 2008 to cherish the memory of the chairman's mother Smt.Alamelu Ammaal. It is located just 25 kms away from the city of Chennai and it is well connected by road and railways. It is approved by the All India Council for Technical Education, New Delhi and affiliated to Anna University of Technology, Chennai.</p>
</div>

<div class="right"><img src="Images/Add.jpg"/> </div>
<div class="footer" > <div style="text-align:left;color:white;"> ©Copyright 2014 </div> <div style="float:right;color:white;"> Powered by IT 3rd Year Students <br/>9445509911 </div> </div>
</body>
</html>

MYSTYLE.css

.header
{
position:absolute;
top:0%;
left:0%;
background-image:url(Images/Logo.jpg);
height:20%;
width:100%;
}

.footer
{
position:absolute;
top:90%;
left:0%;
background-color:green;
height:10%;
width:100%;
}

.left
{
position:absolute;
top:20%;
left:0%;
background-color:red;
height:70%;
width:20%;
}

.middle
{
position:absolute;
top:20%;
left:20%;
background-color:grey;
color:blue;
height:70%;
width:65%;
}

.right
{
position:absolute;
top:20%;
left:80%;
background-color:pink;
height:70%;
width:15%;
}

li
{
//background-color:white;
margin:40px;
padding:10px;
list-style-type:none;
//list-style-image:url(Images/tiny.jpg);

}

a:link
{

text-decoration:none;
color:blue;
padding:10px;
//background-color:white;
}

a:visited
{
text-decoration:none;
color:green;
background-color:yellow;
}

a:hover
{
text-decoration:none;
color:white;
background-color:black;
}

a:active
{
text-decoration:none;
color:black;
background-color:white;
}

RESULT:

Thus CSS codes to embed them in HTML to display the webpage has been written and output is verified successfully.

IMAGE MAPPING

AIM:

To create a web page to embed an image in the web page, to fix the hot spots and to show the related information when the hot spot is clicked.

ALGORITHM:

Step 1: Open the notepad.

Step 2: Create the HTML header and give the title as “Image map”.

Step 3: In the body of the HTML give the image source to display the required image.

Step 4: Specify the name of the image using “map name”.

Step 5: Open the source image in the paint application to mark the hot spot and use the value in

“coords” while creating the link.

Step 6: Specify the name or url of the embedded image in the link using “href”.

Step 7: Save the HTML codes and run the file to get the output.

PROGRAM:

<html>
     <head>
            <title>image map</title>
     </head>
<body>

<p>Click on the TN or on one of the states to watch it closer:</p>

<img src="images/india.jpg" alt="India" usemap="#indiamap">

<map name="indiamap">
<area shape="poly" coords="127,235,162,262,192,249,144,315,107,311" alt="AP" href="images/AP.jpg">
<area shape="poly" coords="113,327,142,320,103,388,92,342" alt="TN" href="images/TN.jpg">
<area shape="poly" coords="113,253,100,300,110,327,91,341,72,325,67,297" alt="Karnataka" href="images/Karnataka.jpg">
</map>

</body>

</html>

RESULT:

A web page to embed an image in the web page, to fix the hot spots and to show the related information when the hot spot is clicked has been created and verified successfully.