Tuesday, August 2, 2011

HTML TAGS for website designing


Welcome to my Homepage - With regards, Lion KS.Rajmohan.

Table of TAGS FOR HTML

Rating for lion-ks-rajmohan.blogspot.com


Tag


Name


Code Example


Browser View

<!-- comment <!--This can be viewed in the HTML part of a
document-->
Nothing will show
(Tip)
<a - anchor <a href="http://www.domain.com/">


Visit Our Site</a>
Visit Our Site
(Tip)
<b> bold <b>Example</b> Example
<big> big (text) <big>Example</big> Example
(Tip)
<body> body of HTML document <body>The content of your HTML
page</body>
Contents of your web page
(Tip)
<br> line break The contents of your page<br>The contents of your page The contents of your web page

The contents of your web page
<center> center <center>This will center your
contents</center>



This will center your contents

<dd> definition description <dl>

<dt>Definition Term</dt>


<dd>Definition of the term</dd>

<dt>Definition Term</dt>

<dd>Definition of the term</dd>

</dl>


Definition Term

Definition of the term

Definition Term

Definition of the term


<dl> definition list <dl>


<dt>Definition Term</dt>

<dd>Definition of the term</dd>

<dt>Definition Term</dt>

<dd>Definition of the term</dd>


</dl>


Definition Term

Definition of the term

Definition Term

Definition of the term


<dt> definition term <dl>

<dt>Definition Term</dt>


<dd>Definition of the term</dd>

<dt>Definition Term</dt>

<dd>Definition of the term</dd>

</dl>


Definition Term

Definition of the term

Definition Term


Definition of the term

<em> emphasis This is an <em>Example</em> of using
the emphasis tag
This is an Example of using the emphasis tag
<embed>

embed object <embed src="yourfile.mid" width="100%" height="60"
align="center">


(Tip)
<embed> embed object <embed src="yourfile.mid" autostart="true" hidden="false"
loop="false">

<noembed><bgsound src="yourfile.mid"
loop="1"></noembed>




&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;bgsound src="wonderfu.mid" autostart="false" loop="1" /&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;


Music will begin playing when your page is loaded and will only play one
time. A control panel will be displayed to enable your visitors to stop the
music.
<font> font <font face="Times New
Roman">Example</font>
Example
(Tip)
<font> font <font face="Times New Roman"
size="4">Example</font>
Example
(Tip)
<font> font <font face="Times New Roman" size="+3"
color="#ff0000">Example</font>
Example

(Tip)
<form> form <form action="mailto:you@yourdomain.com">


Name: <input name="Name" value="" size="10"><br>

Email: <input name="Email" value="" size="10"><br>

<center><input type="submit"></center>

</form>

Name:

(Tip)

Email:




<h1>

<h2>

<h3>

<h4>

<h5>


<h6>
heading 1

heading 2

heading 3

heading 4

heading 5


heading 6
<h1>Heading 1 Example</h1>

<h2>Heading 2 Example</h2>

<h3>Heading 3 Example</h3>


<h4>Heading 4 Example</h4>

<h5>Heading 5 Example</h5>

<h6>Heading 6 Example</h6>





<head> heading of HTML document <head>Contains elements describing the
document</head>
Nothing will show
<hr> horizontal rule <hr />


Contents of your web page
(Tip)



Contents of your web page
<hr> horizontal rule <hr width="50%" size="3" /> Contents of your web page



Contents of your web page
<hr> horizontal rule <hr width="50%" size="3" noshade /> Contents of your web page



Contents of your web page
<hr>

(Internet

Explorer)
horizontal rule <hr width="75%"
color="#ff0000"
size="4" />
Contents of your web page



Contents of your web page
<hr>

(Internet


Explorer)
horizontal rule <hr width="25%"
color="#6699ff" size="6"
/>
Contents of your web page




Contents of your web page
<html> hypertext markup language <html>

<head>


<meta>

<title>Title of your web page</title>

</head>

<body>HTML web page contents

</body>


</html>
Contents of your web page
<i> italic <i>Example</i> Example
<img> image <img src="Earth.gif" width="41" height="41" border="0" alt="text
describing the image" />
a sentence about your site
(Tip)
<input> input field Example 1:




<form method=post action="/cgi-bin/example.cgi">

<input type="text" size="10" maxlength="30">

<input type="Submit" value="Submit">

</form>


Example 1:
(Tip)






<input>

(Internet Explorer)
input field Example 2:



<form method=post action="/cgi-bin/example.cgi">


<input type="text" style="color: #ffffff; font-family: Verdana;
font-weight: bold; font-size: 12px; background-color: #72a4d2;" size="10"
maxlength="30">

<input type="Submit" value="Submit">

</form>

Example 2:
(Tip)







<input> input field Example 3:



<form method=post action="/cgi-bin/example.cgi">

<table border="0" cellspacing="0"
cellpadding="2"><tr><td bgcolor="#8463ff"><input type="text"
size="10" maxlength="30"></td><td bgcolor="#8463ff"
valign="Middle"> <input type="image" name="submit"
src="yourimage.gif"></td></tr> </table>


</form>

Example 3:
(Tip)













<input> input field Example 4:



<form method=post action="/cgi-bin/example.cgi">

Enter Your Comments:<br>


<textarea wrap="virtual" name="Comments" rows=3 cols=20
maxlength=100></textarea><br>

<input type="Submit" value="Submit">

<input type="Reset" value="Clear">

</form>


Example 4:
(Tip)








<input> input field Example 5:



<form method=post action="/cgi-bin/example.cgi">

<center>


Select an option:

<select>

<option >option 1</option>

<option selected>option 2</option>

<option>option 3</option>


<option>option 4</option>

<option>option 5</option>

<option>option 6</option>

</select><br>


<input type="Submit" value="Submit"></center>

</form>



Example 5:
Tip)




Select an option:






<input> input field Example 6:




<form method=post action="/cgi-bin/example.cgi">

Select an option:<br>

<input type="radio" name="option"> Option 1

<input type="radio" name="option" checked> Option 2


<input type="radio" name="option"> Option 3

<br>

<br>

Select an option:<br>

<input type="checkbox" name="selection"> Selection 1


<input type="checkbox" name="selection" checked> Selection
2

<input type="checkbox" name="selection"> Selection 3

<input type="Submit" value="Submit">

</form>

Example 6:
(Tip)



Select an option:

Option 1

Option 2


Option 3



Select an option:

Selection 1

Selection 2


Selection 3



<li> list item Example 1:



<menu>

<li type="disc">List item 1</li>


<li type="circle">List item 2</li>

<li type="square">List item 3</li>

</MENU>




Example 2:



<ol type="i">

<li>List item 1</li>

<li>List item 2</li>


<li>List item 3</li>

<li>List item 4</li>

</ol>
Example 1:
(Tip)




  • List item 1

  • List item 2

  • List item 3





Example 2:



  1. List item 1


  2. List item 2

  3. List item 3

  4. List item 4

<link> link <head>

<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<marquee>

(Internet

Explorer)
scrolling text <marquee
bgcolor="#cccccc" loop="-1" scrollamount="2"
width="100%">Example Marquee</marquee>
Example
Marquee

(Tip)
<menu> menu <menu>

<li type="disc">List item 1</li>

<li type="circle">List item 2</li>


<li type="square">List item 3</li>

</menu>


  • List item 1

  • List item 2


  • List item 3

<meta> meta <meta name="Description" content="Description of your
site">


<meta name="keywords" content="keywords describing your site">
Nothing will show
(Tip)
<meta> meta <meta HTTP-EQUIV="Refresh"
CONTENT="4;URL=http://www.yourdomain.com/">
Nothing will show
(Tip)
<meta> meta <meta http-equiv="Pragma" content="no-cache"> Nothing will show
(Tip)
<meta> meta <meta name="rating" content="General"> Nothing will show
(Tip)
<meta> meta <meta name="robots" content="all"> Nothing will show
(Tip)
<meta> meta <meta name="robots" content="noindex,follow"> Nothing will show
(Tip)
<ol> ordered list Numbered



<ol>

<li>List item 1</li>

<li>List item 2</li>


<li>List item 3</li>

<li>List item 4</li>

</ol>



Numbered Special Start




<ol start="5">

<li>List item 1</li>

<li>List item 2</li>

<li>List item 3</li>


<li>List item 4</li>

</ol>



Lowercase Letters


<ol type="a">


<li>List item 1</li>

<li>List item 2</li>

<li>List item 3</li>

<li>List item 4</li>


</ol>



Capital Letters


<ol type="A">

<li>List item 1</li>


<li>List item 2</li>

<li>List item 3</li>

<li>List item 4</li>

</ol>




Capital Letters Special Start


<ol type="A" start="3">

<li>List item 1</li>

<li>List item 2</li>


<li>List item 3</li>

<li>List item 4</li>

</ol>



Lowercase Roman Numerals



<ol type="i">

<li>List item 1</li>

<li>List item 2</li>

<li>List item 3</li>


<li>List item 4</li>

</ol>



Capital Roman Numerals


<ol type="I">


<li>List item 1</li>

<li>List item 2</li>

<li>List item 3</li>

<li>List item 4</li>


</ol>



Capital Roman Numerals Special Start


<ol type="I" start="7">

<li>List item 1</li>


<li>List item 2</li>

<li>List item 3</li>

<li>List item 4</li>

</ol>

Numbered



  1. List item 1

  2. List item 2

  3. List item 3

  4. List item 4



Numbered Special Start



  1. List item 1

  2. List item 2

  3. List item 3


  4. List item 4


Lowercase Letters



  1. List item 1

  2. List item 2


  3. List item 3

  4. List item 4


Capital Letters



  1. List item 1


  2. List item 2

  3. List item 3

  4. List item 4


Capital Letters Special Start




  1. List item 1

  2. List item 2

  3. List item 3

  4. List item 4


Lowercase Roman Numerals




  1. List item 1

  2. List item 2

  3. List item 3

  4. List item 4



Capital Roman Numerals



  1. List item 1

  2. List item 2

  3. List item 3

  4. List item 4



Capital Roman Numerals Special Start



  1. List item 1

  2. List item 2

  3. List item 3


  4. List item 4

<option> listbox option <form method=post action="/cgi-bin/example.cgi">


<center>

Select an option:

<select>

<option>option 1</option>

<option selected>option 2</option>


<option>option 3</option>

<option>option 4</option>

<option>option 5</option>

<option>option 6</option>


</select><br>

</center>

</form>


Select an option:
(Tip)






<p> paragraph This is an example displaying the use of the paragraph tag. <p>
This will create a line break and a space between lines.




Attributes:



Example 1:<br>

<br>

<p align="left">

This is an example<br>


displaying the use<br>

of the paragraph tag.<br>

<br>

Example 2:<br>

<br>


<p align="right">

This is an example<br>

displaying the use<br>

of the paragraph tag.<br>

<br>


Example 3:<br>

<br>

<p align="center">

This is an example<br>

displaying the use<br>


of the paragraph tag.


This is an example displaying the use of the paragraph tag.


This will create a line break and a space between lines.



Attributes:




Example 1:



This is an example

displaying the use

of the paragraph tag.


Example 2:




This is an example

displaying the use

of the paragraph tag.


Example 3:




This is an example

displaying the use

of the paragraph tag.

<small> small (text) <small>Example</small> Example
(Tip)
<strike> deleted text <strike>Example</strike> Example
<strong> strong emphasis <strong>Example</strong> Example
<table> table Example 1:



<table border="4" cellpadding="2" cellspacing="2"
width="100%">

<tr>

<td>Column 1</td>


<td>Column 2</td>

</tr>

</table>



Example 2: (Internet Explorer)




<table border="2"
bordercolor="#336699" cellpadding="2" cellspacing="2"
width="100%">

<tr>

<td>Column 1</td>

<td>Column 2</td>


</tr>

</table>



Example 3:



<table cellpadding="2" cellspacing="2" width="100%">


<tr>

<td
bgcolor="#cccccc">Column 1</td>

<td
bgcolor="#cccccc">Column 2</td>


</tr>

<tr>

<td>Row 2</td>

<td>Row 2</td>

</tr>


</table>

Example 1:
(Tip)







Column 1 Column 2




Example 2:
(Tip)







Column 1 Column 2




Example 3:
(Tip)












Column 1 Column 2
Row 2 Row 2

<td> table data <table border="2" cellpadding="2" cellspacing="2"
width="100%">


<tr>

<td>Column 1</td>

<td>Column 2</td>


</tr>

</table>







Column 1 Column 2



<th> table header <div align="center">

<table>


<tr>

<th>Column 1</th>

<th>Column 2</th>

<th>Column 3</th>



</tr>

<tr>

<td>Row 2</td>

<td>Row 2</td>

<td>Row 2</td>


</tr>

<tr>

<td>Row 3</td>

<td>Row 3</td>

<td>Row 3</td>


</tr>

<tr>

<td>Row 4</td>

<td>Row 4</td>

<td>Row 4</td>


</tr>

</table>

</div>

























Column 1 Column 2 Column 3
Row 2 Row 2 Row 2
Row 3 Row 3 Row 3
Row 4 Row 4 Row 4


<title> document title <title>Title of your HTML page</title> Title of your web page will be viewable in the title bar.
(Tip)
<tr> table row <table border="2" cellpadding="2" cellspacing="2"
width="100%">

<tr>

<td>Column 1</td>


<td>Column 2</td>

</tr>

</table>








Column 1 Column 2


<tt> teletype <tt>Example</tt> Example
<u> underline <u>Example</u> Example
<ul> unordered list Example 1:<br>

<br>

<ul>

<li>List item 1</li>


<li>List item 2</li>

</ul>

<br>

Example 2:<br>

<ul type="disc">


<li>List item 1</li>

<li>List item 2</li>

<ul type="circle">

<li>List item 3</li>


<li>List item 4</li>

</ul>

</ul>
Example 1:






  • List item 1

  • List item 2




Example 2:




  • List item 1

  • List item 2


    • List item 3

    • List item 4








"Under construction "







Your Name:


Password:




Please Place me on your mailing list:




What's Your Gender?




How Old Are You?
0-25
26-50
51 and Over




Comments:











onClick="window.location = document.Menu1.Link.options[document.Menu1.Link.options.selectedIndex].value;">


No comments:

Post a Comment