You are on page 1of 32

OUTPUT

INPUT <html> <head> <title>My Details</title> </head> <body bgcolor="#FF807A" topmargin="76"> <table bgcolor="#FAEBD7" border="4" bordercolor="#8B0000" cellpadding="" width="70%" align="center" border rules="rows"> <tr> <th> <font size="2"><br><font size="5">MY DETAILS</font><br><br></font> </th> <tr> <td> <form method="post" bgcolor="#000000"> <br> <label>&nbsp; &nbsp;&nbsp;&nbsp;<b>NAME</b> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>:</b>&nb sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label> <input type="text" value="Enter your name here" S size="70"><br><br> <label>&nbsp; &nbsp;&nbsp;&nbsp;<b>GENDER</b> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbsp;&nbsp;<b>:</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb sp;&nbsp;</label>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="radio" name="name" value="MALE">&nbsp;&nbsp;&nbsp;MALE &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb sp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb sp;&nbsp;&nbsp; <input type="radio" name="name" value="FEMALE">&nbsp;&nbsp;&nbsp;FEMALE<br><br> <label>&nbsp; &nbsp;&nbsp;&nbsp;<b><b>DOB</b></b> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp ;&nbsp;<b>:</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp ;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;DD&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;MM&nbsp;&nbsp;& nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp ;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;YYYY</label><br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp ;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <select <b>NAME</b>="date"> <option>Select the Date</option>

<option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> <option>11</option> <option>12</option> <option>13</option> <option>14</option> <option>15</option> <option>16</option> <option>17</option> <option>18</option> <option>19</option> <option>20</option> <option>21</option> <option>22</option> <option>23</option> <option>24</option> <option>25</option> <option>26</option> <option>27</option> <option>28</option> <option>29</option> <option>30</option> <option>31</option>

</select><select> <option>Select the Month</option> <option>January</option> <option>Feburary</option> <option>March</option> <option>April</option> <option>May</option> <option>June</option> <option>July</option> <option>August</option> <option>September</option> <option>October</option> <option>November</option> <option>December</option> </Select> <select <b>NAME</b>="date"> <option>Select the Year</option> <option>1980</option> <option>1981</option> <option>1982</option> <option>1983</option> <option>1984</option> <option>1985</option> <option>1986</option> <option>1987</option> <option>1988</option> <option>1989</option> <option>1990</option> <option>1991</option> <option>1992</option> <option>1993</option>

<option>1994</option> <option>1995</option> <option>1996</option> <option>1997</option> <option>1998</option> <option>1999</option> <option>2000</option> <option>2001</option> <option>2002</option> <option>2003</option> <option>2004</option> <option>2005</option> <option>2006</option> <option>2007</option> <option>2008</option> <option>2009</option> <option>2010</option> </select><br><br> <label for="address">&nbsp; &nbsp;&nbsp;&nbsp;<b>ADDRESS</b>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>:</b>&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <textarea name="address" id="address" rows="3" cols="40"></textarea></label><br><br> <label>&nbsp; &nbsp;&nbsp;&nbsp;<b>QUALIFICATION</b>&nbsp;&nbsp ;&nbsp;&nbsp;&nbsp;<b>:</b>&nbsp;&nbsp;&nbsp;&nbsp;</ label> &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input

type="checkbox">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1 0<sup>th</sup> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1 2<sup>th</sup> <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb sp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb sp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb sp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb sp;&nbsp;&nbsp;&nbsp;<input type="checkbox">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; B.Sc. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; M.Sc.<br><br> <label>&nbsp; &nbsp;&nbsp;&nbsp;<b>SCHOOL</b>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<

b>:</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb sp;</label> <input type="text" value="Enter your school name here" size="70"><br><br> <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>UNIVERSITY< /b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;<b>:</b>&nbsp;&nbsp;&nbsp;&n bsp;&nbsp;&nbsp;&nbsp;&nbsp;</label> <input type="text" value="Enter your university name here; if any" size="70"> <br><br><br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp ;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <button name="Submit Button" type="Submit">SUBMIT</button> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp ;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <button name="Reset Button" type="Reset">RESET</button> </form> </td> </tr> </table> </body> </html>

OUTPUT

INPUT <html> <head> <title> my details </title> </head> <body bgcolor="pink"> <form method="post" name="form1" id="form1" action="mailto=jitender28466@gmail.com"> Please Enter Your Name:-<input type="text" name="text" id="text" ><br><br> Password:-<input type="password" name="password" id="password"> <br><br>Gender:-<input type="radio" name="male" id="male">Male <input type="radio" name="male" id="male">Female<br><br> <input type="reset" VALUE="reset"> <input type="submit" VALUE="ENTER" href="C:\Documents and Settings\ADMIN\Desktop\J.html"> </body> </html>

OUTPUT

INPUT <html> <head> <style type="text/css"> body { background-color:pink; } h1 {background-color:#6495ed;} p {background-color:#e0ffff; font-size:+30; color:red;} div {background-color:#b0c4de; font-size:+30; color:green;}

</style> </head> <body>

<h1>CSS example!</h1> <p>This is a paragraph.</p> <p> this will make you clear about css </p> <div align="center">This Is How CSS Work</div> <h1> india will win WORLD CUP</h1> <h2> no style</h2> </body> </html>

OUTPUT

INPUT <html> <head> <style type="text/css"> h1 {text-align:center;} p.date {text-align:right;} p.main {text-align:justify;} </style> </head> <body> <h1>CSS text-align Example</h1> <p class="date">May, 2009</p> <p class="main">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'</p> <p><b>Note:</b> Resize the browser window to see how the value "justify" works.</p> </body> </html>

OUTPUT

INPUT <html> <head> <style type="text/css"> .uppercase {text-transform:uppercase; color:red;} .lowercase {text-transform:lowercase;} .capitalize {text-transform:capitalize;} .fontred {font-color:red; font-size:30px; font-style:"arial";} </style> </head> <body> <p class="uppercase">This is some text.</p> <p class="lowercase">This is some text.</p> <p class="capitalize">This is some text.</p> <h1 class="uppercase">html is intresting subject</h1> <h1 class="lowercase">html is intresting subject</h1> <p class="fontred">abc</p> </body> </html>

OUTPUT

INPUT <html> <head> <style type="text/css"> a:link {color:#FF0000;} /* unvisited link */ a:visited {color:#00FF00;} /* visited link */ a:hover {color:#FF00FF;} /* mouse over link */ a:active {color:#0000FF;} /* selected link */ </style> </head> <body> <p><b><a href="list.html" target="_blank">This is a link</a></b></p> <p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p> <p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p> </body> </html>

OUTPUT

INPUT <html> <head> <style type="text/css"> body {background-color:RED;} h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;} h4 {text-decoration:blink;} .uppercase {text-transform:uppercase;} .lowercase {text-transform:lowercase;} .capitalize {text-transform:capitalize;} </style> </head> <body> <h1>CSS example!</h1> <h2>CSS example!</h2> <h3>CSS example!</h3> <h4>CSS example!</h4> <p class="uppercase"> it is css program</p> </body> </html>

OUTPUT

INPUT <HTML> <HEAD> <TITLE>MY FIRST PROGRAM</TITLE> <link rel="stylesheet" type="text/css" name="apply_style" href="apply_style.css"> </HEAD> <BODY> <h1>style sheet application in order list program</h1> <font size=+3 color=darkgreen face="arial"> <P ALIGN="CENTER">Types of lists</P> <ul> <li> Monday</li> <li>Tuesday</li> <li>Wednesday</li> <li>Thursday</li> <li>friday</li> <li>Saturday</li> <li> Sunday</li> </ul> </font> <font size=+2 color=blue face="arial"> <ul type=circle> <li> Monday</li> <li>Tuesday</li>

<li>Wednesday</li> <li>Thursday</li> <li>friday</li> <li>Saturday</li> <li> Sunday</li> </ul> </font>

OUTPUT

INPUT <html> <head> <style type="text/css"> table, td, th { border:10px solid BLUE; } td { height:50px; vertical-align:bottom; BORDER: 10PX SOLID RED } </style> </head> <body> <table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Savings</th> </tr> <tr> <td>Peter</td> <td>Griffin</td> <td>$100</td> </tr> <tr> <td>Lois</td> <td>Griffin</td>

<td>$150</td> </tr> <tr> <td>Joe</td> <td>Swanson</td> <td>$300</td> </tr> <tr> <td>Cleveland</td> <td>Brown</td> <td>$250</td> </tr> </table> </body> </html>

OUTPUT

INPUT <html> <head> <style type="text/css"> body { background-image:url('blue hills.jpg'); background-repeat:no-repeat; background-position:right top; margin-right:200px; } </style> </head> <body> <h1>Hello World!</h1> <p>W3Schools background no-repeat, set postion example.</p> <p>Now the background image is only show once, and positioned away from the text.</p> <p>In this example we have also added a margin on the right side, so the background image will never disturb the text.</p> </body>

OUTPUT

INPUT <html> <head> <style type="text/css"> ul.a {list-style-type:circle;} ul.b {list-style-type:square;} ol.c {list-style-type:upper-roman;} ol.d {list-style-type:lower-alpha;} </style> </head> <body> <p>Example of unordered lists:</p> <ul class="a"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="b"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> <p>Example of ordered lists:</p> <ol class="c"> <li>Coffee</li> <li>Tea</li>

<li>Coca Cola</li> </ol> <ol class="d"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol> </body>

You might also like