CLICK HERE

Earning More

Clickz

Sunday, December 26, 2010

Thursday, December 16, 2010

Insert a Script coding

<html>
<head>
<title>Kuldeep Ji</title>
<script type="text/javascript">
var timeout  = 500;
var closetimer  = 0;
var ddmenuitem  = 0;

// open hidden layer
function mopen(id)
{
  // cancel close timer
  mcancelclosetime();

  // close old layer
  if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

  // get new layer and show it
  ddmenuitem = document.getElementById(id);
  ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose()
{
  if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
  closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
  if(closetimer)
  {
    window.clearTimeout(closetimer);
    closetimer = null;
  }
}

// close layer when click-out
document.onclick = mclose;



</script>
<style>
#sddm
{  margin: 0;
  padding: 0;
  z-index: 30}

#sddm li
{  margin: 0;
  padding: 0;
  list-style: none;
  float: left;
  font: bold 11px arial}

#sddm li a
display: block;
  margin: 0 1px 0 0;
  padding: 4px 10px;
  width: 60px;
  background: #5970B2;
  color: #FFF;
  text-align: center;
  text-decoration: none}

#sddm li a:hover
background: #49A3FF}

#sddm div
position: absolute;
  visibility: hidden;
  margin: 0;
  padding: 0;
  background: #EAEBD8;
  border: 1px solid #5970B2}

  #sddm div a
  position: relative;
    display: block;
    margin: 0;
    padding: 5px 10px;
    width: auto;
    white-space: nowrap;
    text-align: left;
    text-decoration: none;
    background: #EAEBD8;
    color: #2875DE;
    font: 11px arial}

  #sddm div a:hover
  background: #49A3FF;
    color: #FFF}
</style>
<body>
<ul id="sddm">
    <li><a href="#"
        onmouseover="mopen('m1')"
        onmouseout="mclosetime()">Home</a>
        <div id="m1"
            onmouseover="mcancelclosetime()"
            onmouseout="mclosetime()">
        <a href="#">HTML Drop Down</a>
        <a href="#">DHTML Menu</a>
        <a href="#">JavaScript DropDown</a>
        <a href="#">Cascading Menu</a>
        <a href="#">CSS Horizontal Menu</a>
        </div>
    </li>
    <li><a href="#"
        onmouseover="mopen('m2')"
        onmouseout="mclosetime()">Download</a>
        <div id="m2"
            onmouseover="mcancelclosetime()"
            onmouseout="mclosetime()">
        <a href="#">ASP Dropdown</a>
        <a href="#">Pulldown menu</a>
        <a href="#">AJAX Drop Submenu</a>
        <a href="#">DIV Cascading Menu</a>
        </div>
    </li>
    <li><a href="#">Order</a></li>
    <li><a href="#">Help</a></li>
    <li><a href="#">Contact</a></li>
</ul>
<div style="clear:both"></div>
</body>
</html>

Redirect a user coding

<html>
<head>
<title>Kuldeep Ji</title>
<meta http-equiv="Refresh" content="5;url=http://www.getybacchas.blogspot.com">
</head>

<body>
<h1>Sorry! We have moved!</h1>
<h2>The new URL is: <a href="http://www.richajain378.blogspot.com">http://richajain378.blogspot.com</a></h2>
<p>You will be redirected to the new address in five seconds.</p>
<p>If you see this message for more than 5 seconds, please click on the link above!</p>
<img src="http://img.wallpaperstock.net:81/heart-with-wings-wallpapers_12281_1600x1200.jpg">
</body>
</html>

Document keywords coding

<html>
<head>
<title>Kuldeep Ji</title>

<meta name="description" content="Free Web tutorials on HTML, CSS, XML">
<meta name="keywords" content="HTML, CSS, XML">
</head>

<body>
<p>The meta elements on this page defines a description of the page, and its keywords.</p>
<img src="http://superlative1.files.wordpress.com/2007/12/broken_heart.jpg">
</body>
</html>

Tuesday, December 14, 2010

Document description coding

<html>
<head>
<title>Kuldeep Ji</title>

<meta name="author" content="Hege Refsnes">
<meta name="revised" content="2010/06/20">
</head>

<body>

<p>The meta elements on this page identifies the author and the revise date.</p>
<img src="e:(Image Path)\HTML\i53855315_83351.gif">
</body>
</html>

One terget for all links on a page coding

<html>
<head>
<title>Kuldeep Ji</title>

<base href="www.google.com">
<base target="_blank">
</head>

<body>
<img src="143.gif" width="50" height="50"> - Notice that we have only specified a relative address for the image. Since we have specified a base URL in the head section, the browser will look for the image at "http://www.google.com/images/stickman.gif"
<br><br>
<a href="http://www.google.com">google</a> - Notice that the link opens in a new window, even if it has no target="_blank" attribute. This is because the target attribute of the base element is set to "_blank".
<br><img src="
http://www.google.com/images/google-logo_9_253.jpg" width="650" height="250">

</body>
</html>

Specify a title for a document coding

<html>
<head>
<title>My first HTML page</title>
</head>

<body>
<p>The content of the body element is displayed in the browser.</p>
<p>The content of the title element is displayed in the browser's title.</p>
<img src="e:(Image Path)\HTML\ac.gif">
</body>

</html>

Sunday, December 12, 2010

Link to an external style sheet coding

<html>
<head>
<title>Kuldeep Ji</title>

<link rel="stylesheet" type="text/css" href="www.orkut.com">
</head>

<body>
<h1>I am formatted with an external style sheet</h1>
<p>Me too!</p>
<img src="e:<Image Path>\HTML\ab.gif">
</body>

</html>

Link that is not underline coding

<html>
<body>
<title>Kuldeep Ji</title>

<a href="http://www.gmail.com" style="text-decoration:none">
Visit orkut.com!</a>
<br><br>
<img src="e:(Image Path)\HTML\st_patricks_day_animated_gif_2.gif">

</body>
</html>

Using Style In A HTML coding

<html>
<head>
<title>Kuldeep Ji</title>

<style type="text/css">
h1 {color:#FF0000;}
h2 {color:blue;}
p {color:green;}
</style>
</head>

<body>

<h1>All header 1 elements will be red</h1>
<h2>All header 2 elements will be blue</h2>
<p>All text in paragraphs will be green.</p>
<img src="e:(Image Path)\HTML\i_love_u_3.gif">

</body>
</html>

Jump to a Specified Section with Frame coding

<html>
<title>Kuldeep Ji</title>

<frameset cols="20%,80%">

 <frame src="www.google.com">
 <frame src="www.gmail.com">

</frameset>

</html>

Inline Frame (A Frame Inside An HTML Page) coding

<html>
<title>Kuldeep Ji</title>
<body>

<iframe src="Link Path\" width="450" height="250"></iframe>

<p>Some older browsers don't support iframes.</p>
<p>If they don't, the iframe will not be visible.</p>


</body>
</html>

Create A Navigation Frame coding

<html>
<title>Kuldeep Ji</title>

<frameset cols="120,*">

  <frame src="www.songs.pk">
  <frame src="www.emp3.com" name="showframe">

</frameset>

</html>

Frameset with noresize="noresize" coding

<html>
<title>Kuldeep Ji</title>

<frameset rows="50%,50%">

  <frame noresize="noresize" src="http://ibibo.com">
  <frame noresize="noresize" src="http://answer.com">

</frameset>

</html>

Thursday, December 9, 2010

Tuesday, December 7, 2010

Use Of (noframes) Tag coding

<html>
<title>Kuldeep Ji</title>

<frameset cols="25%,50%,25%">
  <frame src="http://google.com">
  <frame src="http://gmail.com">
  <frame src="http://orkut.com">

<noframes>
<body>Your browser does not handle frames!</body>
</noframes>

</frameset>

</html>

A Horizontal Frameset coding

<html>
<title>Kuldeep Ji</title>

<frameset rows="25%,50%,25%">

  <frame src="http://www.paypal.com">
  <frame src="http://www.richajain378.blogspot.com">
  <frame src="http://www.getybacchas.blogspot.com">

</frameset>

</html>

A Vertical Frameset coding

<html>
<title>Kuldeep Ji</title>

<frameset cols="25%,50%,25%
">

  <frame src="">
  <frame src="http://www.facebook.com">
  <frame src="">

</frameset>

</html>

Send Email From A From coding

<html>
<body>
<title>Kuldeep Ji</title>

<h3>Send e-mail to kuldeepbachchas@gmail.com:</h3>

<form action="MAILTO:kuldeepbachchas@gmail.com" method="post" enctype="text/plain">
Name:<br>
<input type="text" name="name" value="your name"><br>
E-mail:<br>
<input type="text" name="mail" value="your email"><br>
Comment:<br>
<input type="text" name="comment" value="your comment" size="50">
<br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">

</form>
</body>
</html>

Colored Text field coding

<html>
<body>
<title>Kuldeep Ji</title>

<form name="input" action="html_form_action.asp" method="get">
First name: <input type="text" name="FirstName" style="background-color:#72a4d2"><br>
Last name: <input type="text" name="LastName" style="background-color:FF0080"><br>
<input type="submit" value="Submit">
</form>

<p>If you click the "Submit" button, the form-data will be sent to a page called "html_form_action.asp".</p>

</body>
</html>

Radio with a submit button coding

<html>
<body>
<title>Kuldeep Ji</title>

<form name="input" action="html_form_action.asp" method="get">
<input type="radio" name="sex" value="male"> Male<br />
<input type="radio" name="sex" value="female" /> Female<br />
<input type="submit" value="Submit" />
</form>

<p>If you click the "Submit" button, the form-data will be sent to a page called "html_form_action.asp".</p>

</body>
</html>

Monday, December 6, 2010

Checkbox With A Submit Button coding

<html>
<body>
<title>Kuldeep Ji</title>

<form name="input" action="html_form_action.asp" method="get">
<input type="checkbox" name="vehicle" value="Bike"> I have a bike.<br>
<input type="checkbox" name="vehicle" value="Car"> I have a car.<br><br>
<input type="submit" value="Submit">
</form>

<p>If you click the "Submit" button, the form-data will be sent to a page called "html_form_action.asp".</p>

</body>
</html>

Sunday, December 5, 2010

Text Field (with a Submit Button) coding

<html>
<body>
<title>Kuldeep Ji</title>

<form name="input" action="html_form_action.asp" method="get">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="Submit">
</form>

<p>If you click the "Submit" button, the form-data will be sent to a page called "html_form_action.asp".</p>

</body>
</html>

Draw A Border Around Form-Data coding

<html>
<body>
<title>Kuldeep Ji</title>

<form action="">
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30"><br>
E-mail: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
</form>

</body>
</html>

Create A Button coding

<html>
<body>
<title>Kuldeep Ji</title>

<form action="">
<input type="button" value="Hello world!">
</form>

</body>
</html>

Textarea (A Multi-line Text Input Field) coding

<html>
<body>
<title>Kuldeep Ji</title>

<p>
This example cannot be edited because our editor uses a textarea for input,
and your browser does not allow a textarea inside a textarea.
</p>
<form action="http://blogger.com/submit data.asp">
<textarea row="10" cols="20"></textarea><br>
<input type="Submit" value="Submit">
<input type="Reset" value="Clear">
</form>
</body>
</html>

Drop-Down List With A Pre-Selected Value coding

<html>
<body>
<title>Kuldeep Ji</title>

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

</body>
</html>

Simple Drop-down List coding

<html>
<body>
<title>Kuldeep Ji</title>

<form action="">
<select name="Cricketers">
<option value="Sachin">Sachin</option>
<option value="Gautam">Gautam</option>
<option value="Sehwag">Sehwag</option>
<option value="Zaheer Khan">Zaheer Khan</option>
<option value="Nehra">Nehra</option>
<option value="M.S. Dhoni">M.S. Dhoni</option>
</select>
</form>

</body>
</html>

Radio Buttons coding

<html>
<body>
<title>Kuldeep Ji</title>

<form action="">
<input type="radio" name="sex" value="male"> Male<br>
<input type="radio" name="sex" value="female"> Female
</form>

<p><b>Note:</b> When a user clicks on a radio-button, it becomes checked,
and all other radio-buttons with equal name become unchecked.</p>

</body>
</html>

Checkboxes coding

<html>
<body>
<title>Kuldeep Ji</title>

<form action="">
<input type="checkbox" name="vehicle" value="Bike"> I have a bike.<br>
<input type="checkbox" name="vehicle" value="Car"> I have a car.
</form>

</body>
</html>

Create Password Field coding

<html>
<body>
<title>Kuldeep Ji</title>

<form action="">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="password">
</form>

<p><b>Note:</b> The characters in a password field are masked
(shown as asterisks or circles).</p>

</body>
</html>

Create Text Field coding

<html>
<body>
<title>Kuldeep Ji</title>

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

<p><b>Note:</b> The form itself is not visible.
Also note that the default width of a text field is 20 characters.</p>

</body>
</html>

Saturday, December 4, 2010

Definition List coding

<html>
<body>
<title>Kuldeep Ji</title>

<h4>A Definition List:</h4>
<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

<img src="e:\HTML\Tegi.jpg" width="320" height="300">
</body>
</html>

Nested List 2 coding

<html>
<body>
<title>Kuldeep Ji</title>

<h4>A nested List:</h4>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
    <li>Black tea</li>
    <li>Green tea
      <ul>
      <li>China</li>
      <li>Africa</li>
      </ul>
    </li>
    </ul>
  </li>
  <li>Milk</li>
</ul>
<img src="e:\HTML\kuldeep.png" width="520" height="400">
</body>
</html>

Nested List coding

<html>
<body>
<title>Kuldeep Ji</title>

<h4>A nested List:</h4>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
    <li>Black tea</li>
    <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>
<img src="e:\HTML\I-love-you-card-2.jpg" width="220" height="200" alt="Kuldeep Ji">
</body>
</html>

Diffrenet Type Of Unrdered List coding

<html>
<body>
<title>Kuldeep Ji</title>

<h4>Disc bullets list:</h4>
<ul type="disc">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>

<h4>Circle bullets list:</h4>
<ul type="circle">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>

<h4>Square bullets list:</h4>
<ul type="square">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>
<img src="e:\HTML\F02.gif" width="220" height="200">
</body>
</html>

Diffrenet Type Of Ordered List coding

<html>
<body>
<title>Kuldeep Ji</title>

<h4>Numbered list:</h4>
<ol>
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>

<h4>Letters list:</h4>
<ol type="A">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>

<h4>Lowercase letters list:</h4>
<ol type="a">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>

<h4>Roman numbers list:</h4>
<ol type="I">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>

<h4>Lowercase Roman numbers list:</h4>
<ol type="i">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>

</body>
</html>

An Ordered List coding

<html>
<body>
<title>Kuldeep Ji</title>

<h4>An Ordered List:</h4>
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
<img src="e:\HTML\26420034.jpg" width="220" height="220">
</body>
</html>

An Unordered List coding

<html>
<body>
<title>Kuldeep Ji</title>

<h4>An Unordered List:</h4>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
<img src="e:\HTML\aa.jpg" width="220" height="220">
</body>
</html>

The Frame Attributes coding

<html>
<body>
<title>Kuldeep Ji</title>

<p>
<b>Note:</b>
If you see no frames/borders around the tables below,
your browser does not support the "frame" attribute.
</p>

<h4>With frame="border":</h4>
<table frame="border">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>With frame="box":</h4>
<table frame="box">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>With frame="void":</h4>
<table frame="void">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>With frame="above":</h4>
<table frame="above">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>With frame="below":</h4>
<table frame="below">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>With frame="hsides":</h4>
<table frame="hsides">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>With frame="vsides":</h4>
<table frame="vsides">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>With frame="lhs":</h4>
<table frame="lhs">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>With frame="rhs":</h4>
<table frame="rhs">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

</body>
</html>

Cell Spacing coding

<html>
<body>
<title>Kuldeep Ji</title>

<h4>Without cellspacing:</h4>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>With cellspacing:</h4>
<table border="1" cellspacing="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

</body>
</html>

Cell Padding coding

<html>
<body>
<title>Kuldeep Ji</title>

<h4>Without cellpadding:</h4>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>With cellpadding:</h4>
<table border="1" cellpadding="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

</body>
</html>

Tags Inside A Table coding

<html>
<body>
<title>Kuldeep Ji</title>

<table border="1">
<tr>
  <td>
   <p>This is a paragraph</p>
   <p>This is another paragraph</p>
  </td>
  <td>This cell contains a table:
   <table border="1">
   <tr>
     <td>A</td>
     <td>B</td>
   </tr>
   <tr>
     <td>C</td>
     <td>D</td>
   </tr>
   </table>
  </td>
</tr>
<tr>
  <td>This cell contains a list
   <ul>
    <li>apples</li>
    <li>bananas</li>
    <li>pineapples</li>
   </ul>
  </td>
  <td>HELLO</td>
</tr>
</table>

</body>
</html>

Use Of Colspan & Rowspan Coding

<html>
<body>
<title>Kuldeep Ji</title>

<h4>Cell that spans two columns:</h4>
<table border="1">
<tr>
  <th>Name</th>
  <th colspan="2">Telephone</th>
</tr>
<tr>
  <td>Kuldeep Ji</td>
  <td>9250 xxxx xx</td>
  <td>8010 xxxx xx</td>
</tr>
</table>

<h4>Cell that spans two rows:</h4>
<table border="1">
<tr>
  <th>First Name:</th>
  <td>Kuldeep</td>
</tr>
<tr>
  <th rowspan="2">Telephone:</th>
  <td>9250 xxxx xx</td>
</tr>
<tr>
  <td>8010 xxxx xx</td>
</tr>
</table>

</body>
</html>

Table With A Caption Coding

<html>
<body>
<title>Kuldeep Ji</title>

<table border="1">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

</body>
</html>

Table Headers coding

<html>
<body>
<title>Kuldeep Ji</title>

<h4>Table headers:</h4>
<table border="1">
<tr>
  <th>Name</th>
  <th>Telephone</th>
  <th>Telephone</th>
</tr>
<tr>
  <td>Kuldeep Ji</td>
  <td>9958 xxxx xx</td>
  <td>8802 xxxx xx</td>
</tr>
</table>

<h4>Vertical headers:</h4>
<table border="1">
<tr>
  <th>First Name:</th>
  <td>Kuldeep Ji</td>
</tr>
<tr>
  <th>Telephone:</th>
  <td>0120 xxxx xx</td>
</tr>
<tr>
  <th>Telephone:</th>
  <td>0120 xxxx xx</td>
</tr>
</table>

</body>
</html>

Table Without Border coding

<html>
<body>
<title>Kuldeep Ji</title>

<h4>This table has no borders:</h4>
<table>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

<h4>And this table has no borders:</h4>
<table border="0">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

</body>
</html>

Different Table Border Coding

<html>
<body>
<title>Kuldeep Ji</title>

<h4>With a normal border:</h4>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>With a thick border:</h4>
<table border="8">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>With a very thick border:</h4>
<table border="15">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

</body>
</html>

Simple Table coding

<html>
<body>
<title>Kuldeep Ji</title>
<p>
Each table starts with a table tag.<br>
Each table row starts with a tr tag.<br>
Each table data starts with a td tag.
</p>

<h4>One column:</h4>
<table border="1">
<tr>
  <td>100</td>
</tr>
</table>

<h4>One row and three columns:</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
</table>

<h4>Two rows and three columns:</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

</body>
</html>

Friday, December 3, 2010

Image-map with Clickable regions coding

<html>
<body>
<title>Kuldeep Ji</title>

<p>Click on the sun or on one of the planets to watch it closer:</p>

<img src="0016791.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" />
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm" />
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" />
</map>

</body>
</html>

Make A Hyperlink Of An Image coding

<html>
<body>
<title>Kuldeep Ji</title>

<p>Create a link of an image:
<a href="http://www.gmail.com">
<img src="bloomingrose.gif" alt="HTML tutorial" width="32" height="32" />
</a></p>

<p>No border around the image, but still a link:
<a href="http://www.google.com">
<img border="0" src="bloomingrose.gif" alt="HTML tutorial" width="32" height="32" />
</a></p>

</body>
</html>

Let The Image Float To The Left/Right Of a Paragraph coding

<html>
<body>
<title>
Kuldeep Ji</title>

<p>
<img src="e:\HTML\060832.gif" alt="I
ove You" align="left" width="132" height="132">
A paragraph with an image. The align attribute of the image is set to "left". The image will float to the left of this text.
</p>

<p>
<img src="e:\HTML\080907_001936.gif" alt="Kuldeep Ji" align="right" width="132" height="132">
A paragraph with an image. The align attribute of the image is set to "right". The image will float to the right of this text.
</p>

</body>
</html>

Aligning Images codes

<html>
<body>
<title>Kuldeep Ji</title>

<p>An image
<img src="e:\HTML\143.gif" alt="Kuldeep Ji" align="bottom" width="32" height="32">
with align="bottom".</p>

<p>An image
<img src="e:\HTML\143.gif" alt="Kuldeep Ji" align="middle" width="32" height="32">
with align="middle".</p>

<p>An image
<img src="e:\HTML\143.gif" alt="Kuldeep Ji" align="top" width="32" height="32">
with align="top".</p>

<p><b>Tip:</b> align="bottom" is default!</p>

<p><img src="e:\HTML\143.gif" alt="Kuldeep Ji" width="32" height="32">
An image before the text.</p>

<p>An image after the text.
<img src="e:\HTML\143.gif" alt="Kuldeep Ji" width="42" height="42"></p>

</body>
</html>

Insert Images From Folder

<html>
<body>
<title>Kuldeep Ji</title>

<p>An image from another folder:</p>
<img src="e:\HTML\bloomingrose.gif" alt="kuldeep's Rose" width="100" height="200">

<p>An image from W3Schools:</p>
<img src="http://www.google.com/images/kuldeep bacchas.jpg"
alt="gety bacchas" width="104" height="142">

</body>
</html>

Insert Images codes

<html>
<body>
<title>Kuldeep Ji</title>

<p>
An image:
<img src="e:\HTML\butterfly-8205.jpg" alt="Smiley face" width="50" height="50" />
</p>

<p>
A moving image:
<img src="e:\HTML\ilu.gif" alt="I love you Kuldeep Ji" width="88" height="88" />
</p>

<p>
Note that the syntax of inserting a moving image is no different from a non-moving image.
</p>

</body>
</html>

Another Mailto Link codes

<html>
<body>
<title>Kuldeep Ji</title>

<p>
This is another mailto link:
<a href="mailto:kuldeepbacchas@gmail.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You are%20invited%20to%20a%20big%20summer%20party!">Send mail!</a>
</p>

<p>
<b>Note:</b> Spaces between words should be replaced by %20 to ensure that the browser will display the text properly.
</p>

</body>
</html>

Send Email codes

<html>
<body>
<title>Kuldeep ji</title>

<p>
This is an email link:
<a href="mailto:kuldeepbachchas@gmail.com?Subject=Hello%20again">Send Mail</a>
</p>

<p>
<b>Note:</b> Spaces between words should be replaced by %20 to ensure that the browser will display the text properly.
</p>

</body>
</html>

Thursday, December 2, 2010

Break Out Of a Frame coding

<html>
<body>
<title>Kuldeep Ji</title>

<p>Locked in a frame?</p>
<a href="http://www.google.com/" target="_top">Click here!</a>

</body>
</html>

Jump To Another Part (On Same Page) html codes

<html>
<body>
<title>Kuldeep Ji</title>

<p>
<a href="#C10">See also Chapter 10.</a>
</p>

<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>

<h2><a name="C10">Chapter 10</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>

</body>
</html>

New Browser Window html codes

<html>
<body>
<title>Kuldeep Ji</title>

<a href="http://www.translategoogle.com" target="_blank">Visit
http://www.translate.google.com!</a>

<p>If you set the target attribute to "_blank",
the link will open in a new browser window.</p>

</body>
</html>

Use an Image as a Link codes

Use an image as a link
<html>
<body>

<p>Create a link of an image:
<a href="d:\CWG 2010 DELHI.jpg">
<img src="d:\Nature_Mountains.jpg" alt="Kuldeep Ji" width="32" height="32" />
</a></p>

<p>No border around the image, but still a link:
<a href="d:\CWG 2010 DELHI.jpg">
<img border="0" src="d:\CWG 2010 DELHI.jpg" alt="Kuldeep Ji" width="32" height="32" />
</a></p>

</body>
</html>

Create Hyperlink codes

<html>
<body>
<title>Kuldeep Ji</title>
How to create hyperlinks

<p>
<a href="http://www.songs.pk">SONGS</a>
This is a link to a page on this website.
</p>

<p>
<a href="http://www.google.com/">Google</a>
This is a link to a website on the World Wide Web.
</p>

</body>
</html>

Alignment Of Text codes

<html>
<body>
<title>Kuldeep Ji</title>
Style alignment of text

<h1 style="text-align:center">This is a heading</h1>
<p>The heading above is aligned to the center of this page.</p>

</body>
</html>

Font Color & Size codes

<html>
<body>
<title>Kuldeep Ji</title>
Style font color and size

<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>

</body>
</html>

Background Color codes

<html>
<body style="background-color:pink">
<title>Kuldeep ji</title>

Style background color:

<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>
</html>

HTML Elements

<html>
<body style="background-color:PowderBlue;">
<title>Kuldeep ji</title>
Style HTML elements

<h1>Look! Styles and colors</h1>

<p style="font-family:verdana;color:red">
This text is in Verdana and red</p>

<p style="font-family:times;color:green">
This text is in Times and green
background-color:PowderBlue;Ankur jiStyle HTML elements
Look! Styles and colorsfont-family:verdana;color:redThis text is in Verdana and redfont-family:times;color:greenThis text is in Times and gree</p>

<p style="font-size:50px">This text is 50 pixels high</p>

</body>
</html>

How To Mark Deleted & Inserted Text

<html>
<body>
<title>Kuldeep ji</title>
How to mark deleted and inserted text:

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

<p>Notice that browsers will strike-through deleted text and
underline inserted text.</p>

</body>
</html>

Long & Short Quotation html codes

<html>
<body>
<title>Kuldeep ji</title>

A long quotation:
<blockquote>
This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.
</blockquote>

<p><b>Note:</b> The browser inserts white space before and after a block-quote element. It also insert margins.</p>

A short quotation:
<q>This is a short quotation</q>

<p><b>Notice that the browser inserts quotation marks around the short quotation (Does not work in IE).</b></p>

</body>
</html>

Text Direction HTML codes

<html>
<body>
<title>Kuldeep ji</title>

<p>
If your browser supports bi-directional override (bdo),
the next line will be written from the right to the left (rtl):
</p>

<bdo dir="rtl">
Here is some Hebrew text.....Kuldeep Ji.
</bdo>

</body>
</html>

Abbreviations & Acronyms codes

<html>
<body>
<title>Kuldeep ji</title>

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

<p>Can I get this <acronym title="as soon as possible">ASAP</acronym>?</p>

<p>The title attribute is used to show the spelled-out version
when holding the mouse pointer over the acronym or abbreviation.</p>

</body>
</html>

Contect Information

<html>
<body>
<title>Kuldeep ji</title>

<address>
Written by Kuldeep Bacchas
<br>
<a href="mailto:kuldeepbachchas@gmail.com">Email us</a>
<br>
Address: Shahpur Goverdhanpur, Sec-130<br>
Noida, G.B.Nagar (U.P.)<br>
Phone: 099xxxxxxxx
</address>

</body>
</html>

Different Output Tags

<html>
<body>
<title>Kuldeep ji</title>

<code>Computer code</code>
<br>
<kbd>Keyboard input</kbd>
<br>
<tt>Teletype text</tt>
<br>
<samp>Sample text</samp>
<br>
<var>Computer variable</var>
<br>

<p><b>Note:</b> These tags are often used to display computer/programming code.</p>

</body>
</html>

Preformatted Text (Line Breaks & Spaces)

<html>
<body>
<title>Kuldcep ji</title>

<pre>
This is
preformatted text.
It preserves      both    spaces
and line breaks.
</pre>

<p>The pre tag is good for displaying computer code:</p>

<pre>
for i = 1 to 10
     print i
next i
</pre>

</body>
</html>

Text Formatting coding

<html>
<body>
<title>Kuldeep ji</title>

<p><b>This text is bold</b></p>
<p><strong>This text is strong</strong></p>
<p><big>This text is big</big></p>
<p><em>This text is emphasized</em></p>
<p><i>This text is italic</i></p>
<p><small>This text is small</small></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

</body>
</html>

Use Of Line Break

<html>
<body>
<title>Kuldeep ji</title>

<p>This is<br>a para<br>graph with line breaks</p>

</body>
</html>