Gadgets

Friday, 23 November 2012

Web Search Engine Box

Web Search Engine Box using html and css styles :
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
            body{
                margin-top: 180px;
               text-align: center;
            }
            #tf{
             border: solid 2px darkcyan;
            }
            h1{
                color:  cornflowerblue;
                font-family: cursive;
                                                             }
            #button{
                color: white;
                background-color:blue;
                border: sloid 1px #aaaaaa;
                cursor: pointer;
                width: 60px;
                height: 25px;       
            }                       
            </style>
    </head>
    <body>
        <h1>Web Search</h1>
       <form name="cse"action="http://www.google.com/cse">
  <input name="q" type="text" size="45" id="tf" />
  <input type="submit" name="sa" value="Search" id="button" />
</form>
    </body>

</html>
output :

Thursday, 22 November 2012

Create Table list using html and css styles

Create Table list using html and css styles
 
This table created by using HTML with CSS styles. This table contain students list. This table rows separated with two color(blue and white). Here one row has white color and one has blue color to avoid the confusion between rows. If we put the cursor on table row, that row color automatically changes to “yellow “. Here we have 7 rows in this table. I kept the cursor on 3rd row, that 3rd row changed to “yellow” color. This table is easy to understand and with simple code.
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
            /*this is for when you click on that row that will be changes*/
           tbody tr:hover{
                color:  dodgerblue;
                background-color: yellow;
            }
            h2{
                color:darkcyan;
                font-family: cursive;
            }
            thead{
                color:white;
                background-color: orchid;
            }
           
           
            
        </style>
    </head>
    <body>
    <center>
        <h2>Students List</h2>
        <table border="1">
            <thead>
            
                <tr>
                    <th>S.No</th>
                    <th>Student Name</th>
                    <th>Roll Number</th>
                    <th>Branch</th>
                    <th>Gender</th>
                    <th>Phone Number</th>
                    <th>Tuition Fee</th>
                   
                </tr>
            </thead>
            <tbody>
                <tr bgcolor="lightblue">
                    <td>1</td>
                    <td>Narendar</td>
                    <td>08UR1A1214</td>
                    <td>IT</td>
                    <td>Male</td>
                    <td>8008569767</td>
                    <td>30,000</td>
                   
                </tr>
                <tr>
                    <td>2</td>
                    <td>Pradeep</td>
                    <td>08UR1A1242</td>
                    <td>IT</td>
                    <td>Male</td>
                    <td>8008569767</td>
                    <td>30,000</td>
                 </tr>
                 <tr bgcolor="lightblue">
                    <td>3</td>
                    <td>Harideep</td>
                    <td>08UR1A1235</td>
                    <td>CSE</td>
                    <td>Male</td>
                    <td>8008569767</td>
                    <td>35,000</td>
                 </tr>
                 <tr>
                    <td>4</td>
                    <td>Rosy</td>
                    <td>08UR1A1235</td>
                    <td>IT</td>
                    <td>Female</td>
                    <td>8008569767</td>
                    <td>30,000</td>
                 </tr>
                 <tr bgcolor="lightblue">
                    <td>5</td>
                    <td>Ran</td>
                    <td>08UR1A1235</td>
                    <td>CSE</td>
                    <td>Female</td>
                    <td>8008569767</td>
                    <td>35,000</td>
                 </tr>
                  <tr>
                    <td>6</td>
                    <td>Upendar</td>
                    <td>08UR1A1201</td>
                    <td>EEE</td>
                    <td>Male</td>
                    <td>8008569767</td>
                    <td>40,000</td>
                 </tr>
                  <tr bgcolor="lightblue">
                    <td>7</td>
                    <td>Jessi</td>
                    <td>08UR1A1235</td>
                    <td>ECE</td>
                    <td>Female</td>
                    <td>8008569767</td>
                    <td>35,000</td>
                 </tr>              
            </tbody>
        </table>        
           </center>
    </body>
</html>  
output :