Sunday, 27 December 2015

how to creat form in html



<html>
<head>
<style>
.wrap
{width:65px;
height:295px;
border:1px solid #000;
margin:left;
padding:10px;}
</style>
</head>
<body>
<div class="wrap">
<lable>size:</lable></br>
<select name="size" id="size">
<optgroup label="juniors">
<option value="605">605</option>
<option value="550">550</option>
<option value="501">501</option>
<option value="110">110</option>
<option value="600">600</option>
<option value="764">764</option>
<option value="300">300</option>
<option value="1000">1000</option>
</optgroup>
<optgroup label="misses">
<option value="300">300</option>
<option value="400">400</option>
<option value="500">500</option>
<option value="600">600</option>
<option value="700">700</option>
</optgroup>
</select>
</div>
</body>
</html>



Result:

how to open link style in html

<!DOCTYPE html>
<html>
<head><title>css-example</title>
<style>
a:hover{color:red;}
p{text-transform:capitalized;}
h2{line-height:0.1cm;}
</style>
</head>
<body>
<p>Admission for CCC Course for more information <a href="www.technode.in">Click Here</a></p>
<h1>Who was Narendra Modi? <a href="www.technode.in">Click Here</a><h1>

</body>
</html>

//Output result//

How to Creat Menu in html

<html>
<head>
<link href="day5.1.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<nav id="nav_bar">
    <ul>
        <li><a href="html.in">Home</a></li>
        <li><a href="google.com">Get Tickets</a></li>
        <li><a href="technode.in" class="current">become a member</a></li>
        <li><a href="ask.com">About Us</a></li>
        <li><a href="html.in">Phone</a></li>
        <li><a href="html.in">Contact</a></li>
        <li><a href="html.in">Service</a></li>
        <li><a href="html.in">Above</a></li>
        <li><a href="html.in">Placement</a></li>
        <li><a href="html.in">PHP</a></li>

</body>
</html>




/* for css use */



#nav_bar ul{list-style:none;
padding:1em 0;
background-color:blue;}
#nav_bar li {display:inline;}
#nav_bar a{padding:1em 2em;
text-decoration:none;
color:white;
font-weight:bold;
border-right:2px solid white;}
#nav_bar a.current{color:yellow;}

How to Creat Menu style in html

<html>
<head>
<link href="day5.css" rel="stylesheet" type="text/css" />
</head>
<body>
<nav id="nav_bar">
<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="google.com">Get Tickets</a></li>
    <li><a href="technode.in" class="current">Become a Member</a></li>
    <li><a href="html.in">About Us</a></li>
</ul>
<nav/>   
</body>
</html>




/* For Css*/

#nav_bar ul
    {list-style:none;
    padding:1em 0;
    border-top:2px solid black;
    border-bottom:2px solid black;
    }
#nav_bar li
    {display:inline;
    padding:0 2.5em;
    border-right:2px solid black;
    }
#nav_bar a
    {font-weight:bold;
    color:blue;   
    }
#nav_bar a.current{color: text-decoration:none;}   



Result:

शुभ विचार

मेहनत इतनी ख़ामोशी से करो की सफलता शोर मचा दे |

Friday, 25 December 2015

How to Creat a Bussiness Templet in html

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TechNode Business</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
    <div id="topbar">
        <div id="languagebox">
            <a href="#"><img src="images/engflag.gif" alt="English" /></a>
            <a href="#"><img src="images/frenchflag.gif" alt="French" /></a>
            <a href="#"><img src="images/germanyflag.gif" alt="Germany" /></a>
            <a href="#"><img src="images/japanflag.gif" alt="Japan" /></a>
        </div> <!-- end languagebox -->
    </div><!-- end top baar -->
    <div id="header">
        <div id="logo">
            <img src="images/logo.gif" alt="Logo" />
            <div id="sitetitle">Business</div>
      </div> <!-- End Logo -->
       
        <div id="login">
            <form method="post" action="#">
                <label>Email:</label><input class="inputfield" name="email_address" type="text" id="email_address"/>
                <label>Password:</label><input class="inputfield" name="password" type="password" id="password"/>
                <input class="button" type="submit" name="Submit" value="Login" />
            </form>
        </div> <!-- End Login -->
    </div> <!-- End header -->
    <div id="menu">
         <ul>
            <li><a href="index.html"  class="current">Home</a></li>
            <li><a href="subpage.html">Services</a></li>
            <li><a href="subpage.html">Solutions</a></li>
            <li><a href="subpage.html">Partners</a></li> 
            <li><a href="subpage.html">News</a></li>                     
            <li><a href="subpage.html" class="lastmenu">Contact Us</a></li>           
        </ul> 
    </div> <!-- End Menu -->
     <div id="banner">
        <h1> Your Future Business</h1>
      <p>This is a free CSS website template provided by <a href="http://www.technode.in" target="_parent">TechNode Inc</a>. Icons are provided by <a href="http://www.99designer.org/" target="_blank"><strong>99Designer Inc</strong></a>. Feel free to modify and use this layout for your websites. Donec mollis aliquet ligula. Maecenas adipiscing elementum ipsum. Pellentesque vitae magna. Sed nec est. Suspendisse a nibh tristique justo rhoncus volutpat.        </p>
      <div class="more_button"><a href="#">Read more</a></div>
    </div> <!-- End banners -->
    <div id="services">
        <div class="service_box">
        <center><img src="images/world128.png" alt="Strategic Planing Icon" />
        <h2>Strategic Planing</h2>
        <p> Maecenas aliquam, ligula id egestas suscipit, nisi sapien dignissim nibh, ac vestibulum lorem urna in neque.        </p>
        <div class="more_button"><a href="#">Read more</a></div></center>
        </div>
       
        <div class="service_box">
        <center><img src="images/people.png" alt="Strategic Planing Icon" />
        <h2>Marketing</h2>
        <p>Aenean eget tortor eget ipsum aliquet porta. Vestibulum quis pede non urna venenatis vehicula. </p>
        <div class="more_button"><a href="#">Read more</a></div></center>
        </div>
       
        <div class="service_box">
        <center><img src="images/vault128.png" alt="Strategic Planing Icon" />
        <h2>Banking</h2>
        <p>Praesent vel diam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc quis sem nec...</p>
        <div class="more_button"><a href="#">Read more</a></div></center>
        </div>
    </div> <!-- End Service -->
   
    <div id="newssection">
      <h1>Latest News</h1>
    <div class="newsbox">
    <h4>Aliquam tristique lacus in sapien</h4>
    <p>Praesent vel diam. Cras sed leo tempor neque placerat pretium. Donec mollis aliquet ligula. Pellentesque vitae magna. <a href="#">more...</a> </p>
    </div>
   
    <div class="newsbox">
    <h4>Donec mollis aliquet ligula</h4>
    <p>Vivamus a massa. Aliquam tristique lacus in sapien. Suspendisse potenti. Ut sed pede. Nullam vitae tellus. <a href="#">more...</a></p>
    </div>
   
    <div class="newsbox">
    <h4>Lorem ipsum dolor sit amet</h4>
    <p>
    Donec mollis aliquet ligula. Curabitur nec odio. Maecenas adipiscing elementum ipsum. Pellentesque vitae magna. <a href="#">more...</a></p>
    </div>
   
    <div class="more_button"><a href="#">Read All News</a></div>
  </div> <!-- End newssection -->
 
  <div id="light_blue_row">
        <div class="gallery">
          <h1>Featured Projects</h1>
              <div class="gp_row">
                <img src="images/building_150x70_03.gif" alt="image" />
                <p>In hac habitasse platea dictumst. Aenean cursus. Maecenas aliquam, ligula id egestas suscipit, nisi sapien dignissim nibh. <a href="#">more...</a>                </p>
          </div>
            <div class="gp_row">
              <img src="images/building_150x70_02.gif" alt="image" />
                <p>Praesent varius egestas velit. Donec a massa ut pede pulvinar vulputate.  Aenean eget tortor eget ipsum aliquet porta. V  <a href="#">more...</a>                </p>
          </div>
            <div class="gp_row">
                <img src="images/building_150x70_01.gif" alt="image" />
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc quis sem nec tellus blandit tincidunt. Duis vitae velit sed dui malesuada dignissim. <a href="#">more...</a>
                </p>
            </div>
            <div class="more_button"><a href="#">View All</a></div>
        </div>
        <div class="partners">
          <h1>New Partners</h1>
              <div class="gp_row">
                <img src="images/templatemo.gif" alt="image" />
                <p>Mauris blandit vehicula neque. Proin consectetuer. Donec venenatis. Cras urna metus, feugiat non, consectetuer quis, pretium quis, nunc. <a href="templatemo.com" target="_parent">more...</a>
                </p>
            </div>
            <div class="gp_row">
                <img src="images/flashmo.gif" alt="image" />
                <p>Nullam pede purus, tempor a, imperdiet in, porttitor at, nulla. Aliquam elit risus, volutpat quis, mattis ac, elementum eget, mauris. <a href="flashmo.com" target="_parent">more...</a>
                </p>
            </div>
            <div class="gp_row">
                <img src="images/webdesignmo.gif" alt="image" />
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc quis sem nec tellus blandit tincidunt. Duis vitae velit sed dui malesuada dignissim. <a href="webdesignmo.net" target="_parent"> more...</a>
                </p>
            </div>
            <div class="more_button"><a href="#">View All</a></div>
        </div>
    </div> <!-- End blue row -->
   
    <div id="footer">
        <a href="#">Home</a> | <a href="#">Services</a> | <a href="#">Solutions</a> | <a href="#">Partners</a> | <a href="#">News</a> | <a href="#">Contact Us</a><br />
        Copyright © 2015 <a href="#"><strong>TechNode It solutions</strong></a> | Designed by <a href="http://www.technode.in" target="_blank" title="Free Website Templates">99designer.org</a>
    </div>
   
</div> <!-- Container  end-->
</body>
</html>

How to Creat a Radio Button & Checkbox

<html>
<head>
</head>
<body>
<h1>select your gender:</h1>
<input type="radio" name="gender" value="M">Male
<input type="radio" name="gender" value="F">Female
<br>
<h1>What is your name?</h1>
<input type="checkbox" name="subject" value="krishna">krishna
<input type="checkbox" name="subject" value="Ganesh">Ganesh
<input type="checkbox" name="subject" value="Raju">Raju
<input type="checkbox" name="subject" value="Ashok">Ashok
</body>
</html>

Monday, 21 December 2015

How to Creat list style in html

<html>
<head><title>Google.com</title>
<style>
ul.star{list-style-type:circle;}
ul.upper-roman{list-style-type:upper-roman;}
</style>
</head>
<body>
<ul class="star">
    <li>Krishna</li>
    <li>Ajay</li>
    <li>Ramesh</li>
    <li>Rajesh</li>
</ul>
<hr>
<ul class="upper-roman">
    <li>abcdef</li>
    <li>xyz</li>
    <li>zzzzz</li>
</ul>   
       
</body>
</html>

Sunday, 20 December 2015

How to Creat Form in html

<!DOCTYPE html
<html>
<head>
<title>krishna kumar gupta</title>
</head>

<body><h1>A SimpleForm Application</h1>
<h2>Please Enter Your Full Name</h2>
<form action="methor">
<table border="0" cellspacing="5">
<tr>
      <td>First Name:</td>
      <td><input type="text" size="20" name="Frist Name"></td>
</tr>
<tr>
      <td>Last Name:</td>
      <td><input type="text" size="20" name="Last Name"></td>
</tr>
</table>
<input type="Submit"> <input type="Reset">
</form>
      </body>
</html>

How to Creat form style in html

<html>
<head>
<title></title>
<style>
body{font:90% Arial, Helvetica, sans-serif;
margin:20px;}
.wrap
{
    width:550px;
    height:510px;
    border:1px solid 000;
    background:pink;
    margin:0 auto;
    border-radius:10px;
}
label
{
    color:navy;
    float:left;
    width:8em;
    font-weight:bold;
    text-align:right;
}
input
{
    width:20em;
    margin-left:1em;
    margin-bottom:.5em;
}
#Submit
{
    border:2px solid navy;
    width:8em;
    margin-left:9.8em;
}
#Reset
{
    border:2px solid navy;
    width:5em;
}

</style>
</head>
<body>
<div class="wrap">
<fieldset>
<legend><i><b>A Simple Application Form</b></i></legend>
<h1><b><i><u>TechNode Computer Training Institute<i></u></b></h1>

</fieldset>
<fieldset>
<legend><i>TechNode Inc Kubernath Kushinagar Uttar-Pradesh(274304)</i></legend>
<label>First Name:</label>
<input type="text" name="firstname" id="firstname" autofocus><br>
<label>Last Name:</label>
<input type="text"  name="lastname" id="lastname"><br>
<label>Address:</label>
<input type="text" name="address" id="address"><br>
<label>City:</label>
<input type="text" name="city" id="city "><br>
<label>State:</label>
<input type="text" name="state" id="state"><br>
<label>Zip Code:</label>
<input type="text" name="zipcode" id="zipcode"><br>
<label>Post:</label>
<input type="text" name="post" id="post"><br>
<label>Dist:</label>
<input type="text" name="dist" id="dist"><br>
<label>Contry:</label>
<input type="text" name="contry" id="contry"><br>
<label>Phone:</label>
<input type="text" name="phone" id="phone"><br>
<label>E-mail:</label>
<input type="text" name="email" id="email"><br>

<input type="submit" id="Submit"><input type="Reset" id="Reset">


</fieldset>
</div><!--end wrap-->
</body>
</html>

how to creat templet in html

<!DOCTYPE html>
<html>
<head>
<title>Krishna</title>
<style>
.wrap
    {
        width:800px;
        height:700px;
        border:1px solid #000;
        background-color:#FF0;
        margin: 0 auto;
        text-align:center;
        }
.header
    {
        height:170px;
        border-bottom:1px solid #000;
        padding:o;
       
        }

.left-side-bar
    {
        height:400px;
        width:200px;
        border-right:1px solid #000;
        float:left
       
       
        }
.mid
    {
        width:400px;
        height:400px;
        border-right:1px solid #000;
        float:left;
       
        }
    }
.right-side-bar
    {
       
        height:400px;
        width:200px;
        border-left:1px solid #000;
        float:left;
        margin-top:400px;
       
        }
.footer
    {
        height:100px;
        width:800px;
        border-top:1px solid #000;
        float:left;
        padding-top:15px;
       
       
    }
       
</style>
</head>

<body>
<div class="wrap">
<div class="header"><h1> A Simple Wrap Layout:</h1>
</div><!--end header-->
<div class="left-side-bar">
</div>
<div class="mid">
</div>
<div class="right-side-bar">
</div>
<div class="footer">krishna.gupta@99designer.org
</div>
</div><!--end wrap-->
</body>
</html>

Tuesday, 1 December 2015

How to Creat A Simple Application Form in html

<!DOCTYPE html
<html>
<head>
<title>google.com</title>
</head>

<body><h1>A Simple Form Application</h1>
<h2>Please Enter Your Full Name</h2>
<form action="method">
<table border="0" cellspacing="5">
<tr>
      <td>First Name:</td>
      <td><input type="text" size="20" name="First Name"></td>
</tr>
<tr>
      <td>Last Name:</td>
      <td><input type="text" size="20" name="Last Name"></td>
</tr>
</table>
<input type="Submit"> <input type="Reset">
</form>
      </body>
</html>