Html & Css :Tags Example 1
centers content between the margins of a page, table, or other object
<html>
<head>
<title>center element example</title>
</head>
<body>
<center>
<table width="400" border="8" cellspacing="5" cellpadding="5" align="center">
<caption valign="bottom" style="color:blue">
This table is centered within the margins of the page.
</caption>
<tr>
<td>not centered</td>
<td><center>centered</center></td>
</tr>
<tr>
<td><center>centered</center></td>
<td>not centered</td>
</tr>
</table>
</center>
<center>Centered</center>
<br>
not centered
</body>
</html>'legend' Example
<html> <head> <title>legend element example</title> </head> <body> <form name="form1" method="post" action=""> <p> <fieldset align="center"> <legend>Credit Card Information:</legend> <input type="text" name="textfield" value="Name" size="60"> <br> <input type="text" name="textfield2" value="Exp. date" size="50"> <br> <input type="text" name="textfield3" value="Type" size="65"> <br> <input type="text" name="textfield4" value="Number" size="45"> </fieldset> </p> </form> </body> </html>
li.last:after
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> ul,li { display: inline; margin: 0; padding: 0; font-weight: bold; font-style: italic; } li:after { content: ", "; } li.last:after { content: "."; } p { display: inline; } </style> </head> <body> <h3>Heading 3</h3> <p>Text</p> <ul> <li>ONE</li> <li>TWO</li> <li>THREE</li> <li>FOUR</li> <li>FIVE</li> </ul> <p>Text</p> </body> </html>
'listing' displays text in a fixed-width font
<html> <head> <title>listing element example</title> </head> <body> <font size="4"> <listing style="font-weight:normal"> first line <br> second line <br> third line <br> fourth line <br> </listing> </font> </body> </html>
'media' sets the media type
<HTML> <BODY> <link rel="stylesheet" href="yourfile.css" type="text/css" media="screen">This is alink with media on screen.</link> </BODY> </HTML>
'noframes' delivers HTML content to those browsers that do not support frame
<HTML>
<frameset rows="33%, 33%, *" cols="33%, 33%, *">
<frame name="frame_1" src="http://www.java2s.com">
<frame name="frame_2" src="http://www.java2s.com">
<frame name="frame_3" src="http://www.java2s.com">
<frame name="frame_4" src="http://www.java2s.com">
<frame name="frame_5" src="http://www.java2s.com">
<frame name="frame_6" src="http://www.java2s.com">
<frame name="frame_7" src="http://www.java2s.com">
<frame name="frame_8" src="http://www.java2s.com">
<frame name="frame_9" src="http://www.java2s.com">
</frameset>
<noframes>Your system doesn't support frames.</noframes>
</html>'plaintext' Example
<html>
<head>
<title>plaintext element example</title>
</head>
<body>
<p>
<plaintext>
This <b>text</b> will not appear in bold.
</plaintext>
</p>
</body>
</html>ruby' Example
<html>
<head>
<title>ruby element example</title>
</head>
<body>
<ruby>
<span style="font-family:Verdana; font-size:14pt">This is the base text.</span>
<rt>
<span style="font-family:Times New Roman; font-size: 8pt; color:red">
This is the ruby text
</span>
</ruby>
</body>
</html>wbr' Example
<html>
<head>
<title>wbr element example</title>
</head>
<body>
<nobr>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </nobr>
<br>
<br>
<nobr>Text Text Text Text Text Text Text Text Text
<wbr> break break break break break break break break break break break break
</nobr>
</body>
</html>'xmp' Example
<html> <head> <title>xmp element example</title> </head> <body> <xmp>This text is rendered in a monospaced font.</xmp> </body> </html>
var' Example
<html> <head> <title>var element example</title> </head> <body> <var>variable</var> </body> </html>
text' sets the text color in the 'body' section
<HTML>
<BODY>
<body text="#bbbbbb">
www.java2s.com is in blue.
</BODY>
</HTML> strike' Example
<html>
<head>
<title>strike element example</title>
</head>
<body>
<p>
<strike>This is the text that has been crossed out</strike>
</p>
</body>
</html>small' Example
<html> <head> <title>small element example</title> </head> <body> <p align="center"> <small><small>smaller</small><br> small</small> </body> </html>
's' Example
<html> <head> <title>s element example</title> </head> <body> <p> <s>crossed out.</s> </p> </body> </html>
rt' Example
<html>
<head>
<title>ruby element example</title>
</head>
<body>
<ruby>
<span style="font-family:Verdana; font-size:14pt">
This is the base text.
</span>
<rt>
<span style="font-family:Times New Roman; font-size: 8pt; color:red">
This is the ruby text
</span>
</ruby>
</body>
</html>nobr' Example
<html>
<head>
<title>nobr element example</title>
</head>
<body>
<nobr>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
</nobr>
</body>
</html>menu' creates a list of items
<html>
<head>
<title>menu element example</title>
</head>
<body>
<menu type="square">
<li>first item</li>
<li>second item</li>
<li>third item</li>
<li>fourth item</li>
<li>fifth item</li>
</menu>
</body>
</html>
lang' sets the document language
<HTML> <BODY> <p lang="es">Este es un nmero escrito en espaol: 12,38 </p> <p lang="fr">Celui-ci est un nombre ecrit en francais : 0,52</p> </BODY> </HTML>
'i' displays enclosed text in an italic font
<html>
<head>
<title>i element example</title>
</head>
<body>
<p align="center">
<font size="4">text <i>text</i> text <i>text</i>.</font>
</p>
</body>
</html>height' sets the height of an element in pixels
<HTML> <BODY> <table width="450" height="200"> <tr> <th colspan="3" height="80">Header</th> </tr> <tr> <td height="100">Cell 1</td> </tr> </table> </BODY> </HTML>
dir' Example
<html> <head> <title>dir element example</title> </head> <body> <dir> <li>A</li> <li>B</li> <li>C</li> <li>D</li> <li>E</li> <li>F</li> <li>G</li> <li>H</li> </dir> </body> </html>
big' Example
<html>
<head>
<title>big element example</title>
</head>
<body>
<p align="center">
<big><big>bigger</big> big</big>
</p>
</body>
</html>