You are on page 1of 8

HTML Tags

HTML markup tags are usually called HTML tags HTML tags are keywords (tag names) surrounded by angle brackets like <html> HTML tags normally come in pairs like <b> and </b> The first tag in a pair is the start tag, the second tag is the end tag The end tag is written like the start tag with a forward slash before the tag name !tart and end tags are also called opening tags and closing tags

A very simple HTML document <!DOCTYPE html> <html> <body> <h1>My First Heading</h1> < >My !irst aragra h"</ > </body> </html> How to mark deleted and inserted text <!DOCTYPE html> <html> <body> < >My !a#orite $olor is <del>bl%e</del> <ins>red</ins>!</ > < >&oti$e that bro'sers 'ill stri(ethro%gh deleted te)t and %nderline inserted te)t"</ > </body> </html> Set the font, font si e, and font color of text <!DOCTYPE html> <html> <body> < style*+!ont,!amily-#erdana.!ont,si/e-1101.$olor-green+> This is a aragra h 'ith some te)t in it" This is a aragra h 'ith some te)t in it" This is a aragra h 'ith some te)t in it" This is a aragra h 'ith some te)t in it" </ > </body>

</html> !pen link in a new browser window <!DOCTYPE html> <html> <body> <a hre!*+htt -//'''"google"$om+ target*+2blan(+>3isit google"$om!</a> < >4! yo% set the target attrib%te to +2blan(+5 the lin( 'ill o en in a ne' bro'ser 'indo'/tab"</ > </body> </html> Table cells that span more than one row"column <!DOCTYPE html> <html> <body> <h6>Cell that s ans t'o $ol%mns-</h6> <table border*+1+> <tr> <th>&ame</th> <th $ols an*+7+>Tele hone</th> </tr> <tr> <td>8ill 9ates</td> <td>::: ;; <:6</td> <td>::: ;; <::</td> </tr> </table> <h6>Cell that s ans t'o ro's-</h6> <table border*+1+> <tr> <th>First &ame-</th> <td>8ill 9ates</td> </tr> <tr> <th ro's an*+7+>Tele hone-</th> <td>::: ;; <:6</td> </tr> <tr> <td>::: ;; <::</td> </tr> </table>

</body> </html> #ifferent types of ordered lists <!DOCTYPE html> <html> <body> <h6>&%mbered list-</h6> <ol> <li>= les</li> <li>8ananas</li> <li>>emons</li> <li>Oranges</li> </ol> <h6>>etters list-</h6> <ol ty e*+=+> <li>= les</li> <li>8ananas</li> <li>>emons</li> <li>Oranges</li> </ol> <h6>>o'er$ase letters list-</h6> <ol ty e*+a+> <li>= les</li> <li>8ananas</li> <li>>emons</li> <li>Oranges</li> </ol> <h6>?oman n%mbers list-</h6> <ol ty e*+4+> <li>= les</li> <li>8ananas</li> <li>>emons</li> <li>Oranges</li> </ol> <h6>>o'er$ase ?oman n%mbers list-</h6> <ol ty e*+i+> <li>= les</li> <li>8ananas</li> <li>>emons</li> <li>Oranges</li> </ol>

</body> </html> #ifferent types of unordered Lists <!DOCTYPE html> <html> <body> < ><b>&ote-</b> The ty e attrib%te o! the %l tag is de re$ated in HTM> 65 and is not s% orted in HTM>:" There!ore 'e ha#e %sed the style attrib%te and the C@@ list,style,ty e ro erty5 to de!ine di!!erent ty es o! %nordered lists belo'-</ > <h6>Dis$ b%llets list-</h6> <%l style*+list,style,ty e-dis$+> <li>= les</li> <li>8ananas</li> <li>>emons</li> <li>Oranges</li> </%l> <h6>Cir$le b%llets list-</h6> <%l style*+list,style,ty e-$ir$le+> <li>= les</li> <li>8ananas</li> <li>>emons</li> <li>Oranges</li> </%l> <h6>@A%are b%llets list-</h6> <%l style*+list,style,ty e-sA%are+> <li>= les</li> <li>8ananas</li> <li>>emons</li> <li>Oranges</li> </%l> </body> </html> #efinition list <!DOCTYPE html> <html> <body> <h6>= De!inition >ist-</h6> <dl>

<dt>Co!!ee</dt> <dd>, bla$( hot drin(</dd> <dt>Mil(</dt> <dd>, 'hite $old drin(</dd> </dl> </body> </html> $reate text fields <!DOCTYPE html> <html> <body> <!orm a$tion*++> First name- <in %t ty e*+te)t+ name*+!irstname+><br> >ast name- <in %t ty e*+te)t+ name*+lastname+> </!orm> < ><b>&ote-</b> The !orm itsel! is not #isible" =lso note that the de!a%lt 'idth o! a te)t !ield is 70 $hara$ters"</ > </body> </html> $reate password field <!DOCTYPE html> <html> <body> <!orm a$tion*++> Bsername- <in %t ty e*+te)t+ name*+%ser+><br> Pass'ord- <in %t ty e*+ ass'ord+ name*+ ass'ord+> </!orm> < ><b>&ote-</b> The $hara$ters in a ass'ord !ield are mas(ed Csho'n as asteris(s or $ir$lesD"</ > </body> </html> $heckboxes <!DOCTYPE html> <html> <body> <!orm a$tion*++> <in %t ty e*+$he$(bo)+ name*+#ehi$le+ #al%e*+8i(e+>4 ha#e a bi(e<br> <in %t ty e*+$he$(bo)+ name*+#ehi$le+ #al%e*+Car+>4 ha#e a $ar

</!orm> </body> </html> %adio buttons <!DOCTYPE html> <html> <body> <!orm a$tion*++> <in %t ty e*+radio+ name*+se)+ #al%e*+male+>Male<br> <in %t ty e*+radio+ name*+se)+ #al%e*+!emale+>Female </!orm> < ><b>&ote-</b> Ehen a %ser $li$(s on a radio,b%tton5 it be$omes $he$(ed5 and all other radio,b%ttons 'ith eA%al name be$ome %n$he$(ed"</ > </body> </html> Simple drop&down list <!DOCTYPE html> <html> <body> <!orm a$tion*++> <sele$t name*+$ars+> <o tion #al%e*+#ol#o+>3ol#o</o tion> <o tion #al%e*+saab+>@aab</o tion> <o tion #al%e*+!iat+>Fiat</o tion> <o tion #al%e*+a%di+>=%di</o tion> </sele$t> </!orm> </body> </html> $reate a button <!DOCTYPE html> <html> <body> <!orm a$tion*++> <in %t ty e*+b%tton+ #al%e*+Hello 'orld!+> </!orm> </body> </html>

#raw a border around form&data <!DOCTYPE html> <html> <body> <!orm a$tion*++> <!ieldset> <legend>Personal in!ormation-</legend> &ame- <in %t ty e*+te)t+ si/e*+F0+><br> E,mail- <in %t ty e*+te)t+ si/e*+F0+><br> Date o! birth- <in %t ty e*+te)t+ si/e*+10+> </!ieldset> </!orm> </body> </html> 'orm with text fields and a submit button <!DOCTYPE html> <html> <body> <!orm name*+in %t+ a$tion*+html2!orm2a$tion"as + method*+get+> First name- <in %t ty e*+te)t+ name*+First&ame+ #al%e*+Mi$(ey+><br> >ast name- <in %t ty e*+te)t+ name*+>ast&ame+ #al%e*+Mo%se+><br> <in %t ty e*+s%bmit+ #al%e*+@%bmit+> </!orm> < >4! yo% $li$( the +@%bmit+ b%tton5 the !orm,data 'ill be sent to a age $alled +html2!orm2a$tion"as +"</ > </body> </html> 'orm with checkboxes and a submit button <!DOCTYPE html> <html> <body> <!orm name*+in %t+ a$tion*+html2!orm2a$tion"as + method*+get+> <in %t ty e*+$he$(bo)+ name*+#ehi$le+ #al%e*+8i(e+>4 ha#e a bi(e<br> <in %t ty e*+$he$(bo)+ name*+#ehi$le+ #al%e*+Car+>4 ha#e a $ar <br><br> <in %t ty e*+s%bmit+ #al%e*+@%bmit+> </!orm> < >4! yo% $li$( the +@%bmit+ b%tton5 the !orm,data 'ill be sent to a age $alled +html2!orm2a$tion"as +"</ >

</body> </html> 'orm with radiobuttons and a submit button <!DOCTYPE html> <html> <body> <!orm name*+in %t+ a$tion*+html2!orm2a$tion"as + method*+get+> <in %t ty e*+radio+ name*+se)+ #al%e*+male+>Male<br> <in %t ty e*+radio+ name*+se)+ #al%e*+!emale+>Female<br> <in %t ty e*+s%bmit+ #al%e*+@%bmit+> </!orm> < >4! yo% $li$( the +@%bmit+ b%tton5 the !orm,data 'ill be sent to a age $alled +html2!orm2a$tion"as +"</ > </body> </html> Send e&mail from a form <!DOCTYPE html> <html> <body> <hF>@end e,mail to someoneGe)am le"$om-</hF> <!orm a$tion*+M=4>TO-someoneGe)am le"$om+ method*+ ost+ en$ty e*+te)t/ lain+> &ame-<br> <in %t ty e*+te)t+ name*+name+ #al%e*+yo%r name+><br> E,mail-<br> <in %t ty e*+te)t+ name*+mail+ #al%e*+yo%r email+><br> Comment-<br> <in %t ty e*+te)t+ name*+$omment+ #al%e*+yo%r $omment+ si/e*+:0+><br><br> <in %t ty e*+s%bmit+ #al%e*+@end+> <in %t ty e*+reset+ #al%e*+?eset+> </!orm> </body> </html>