HTML Examples

1. HTML Structure
<HTML>
<HEAD>
  <TITLE>Document Title</TITLE>
  <META>
  <SCRIPT>
    Script Content
  </SCRIPT>
  <STYLE>
    Style Content
  </STYLE>
</HEAD>
<BODY>
  HTML Content
</BODY>
</HTML>
HTML Preview :
Document Title - Browser
HTML Content

2. How To Print Text to Browser
<HTML>
<HEAD>
  <TITLE>Print Text</TITLE>
</HEAD>
<BODY BGCOLOR=silver>
  <FONT FACE="ARIAL" SIZE=1 COLOR=red>Font Size 1<FONT><br>
  <FONT FACE="VERDANA" SIZE=2 COLOR=green>Font Size 2<FONT><br>
  <FONT FACE="ARIAL" SIZE=3 COLOR=blue>Font Size 3<FONT><br>
  <FONT FACE="TIMES NEW ROMAN" SIZE=4 COLOR=red>Font Size 4<FONT><br>
  <DIV ALIGN=RIGHT>
    <FONT FACE="MS SANS SERIF" SIZE=5 COLOR=green>Font Size 5<FONT><br>
  </DIV>
  <CENTER>
    <FONT FACE="ARIAL" SIZE=6 COLOR=blue>Font Size 6<FONT>
  </CENTER>
</BODY>
HTML Preview :
Print Text - Browser
Font Size 1
Font Size 2
Font Size 3
Font Size 4
Font Size 5
Font Size 6

3. How To Create List
<HTML>
<HEAD>
  <TITLE>Create List</TITLE>
</HEAD>
<BODY>
  <H3>BROWSER LIST FOR ORDER LIST</H3>
  <OL>
    <LI> Internet Explorer
    <LI> Netscape Navigator
    <LI> Opera
  </OL>
  <HR WIDTH="90%" ALIGN=LEFT>
  <H3>BROWSER LIST FOR UNORDER LIST</H3>
  <UL>
    <LI> Internet Explorer
    <LI> Netscape Navigator
    <LI> Opera
  </UL>
</BODY>
HTML Preview :
Create List - Browser

BROWSER LIST FOR ORDER LIST

  1. Internet Explorer
  2. Netscape Navigator
  3. Opera

BROWSER LIST FOR UNORDER LIST

  • Internet Explorer
  • Netscape Navigator
  • Opera

4. How To Display Images
<HTML>
<HEAD>
  <TITLE>Display Images</TITLE>
</HEAD>
<BODY>
  <H3><U>Images Display</U></H3>
  <IMG SRC="images/s1.gif" BORDER=0>
  <IMG SRC="images/s1.gif" BORDER=1>
  <IMG SRC="images/s2.gif" BORDER=2>
  <IMG SRC="images/s2.gif" WIDTH=100 HEIGHT=100 BORDER=0>
</BODY>
HTML Preview :
Display Images - Browser

Images Display


5. How To Create Table
<HTML>
<HEAD>
  <TITLE>Create Table</TITLE>
</HEAD>
<BODY>
  <H3><U>Table</U></H3>
  <TABLE WIDTH="90%" BORDER=1 BGCOLOR=silver>
	<TR BGCOLOR=red>
	  <TD ALIGN=center>Cell 1,1</TD>
	  <TD ALIGN=right>Cell 2,1</TD>
	  <TD ALIGN=center>Cell 3,1</TD>
	  <TD>Cell 4,1</TD>
	</TR>
	<TR>
	  <TD ALIGN=right COLSPAN=2>Cell 1,2</TD>
	  <TD BGCOLOR=blue>Cell 3,2</TD>
	  <TD>Cell 4,2</TD>
	</TR>
	<TR>
	  <TD ALIGN=center BGCOLOR=cyan ROWSPAN=2>Cell 1,3</TD>
	  <TD>Cell 2,3</TD>
	  <TD>Cell 3,3</TD>
	  <TD BGCOLOR=green>Cell 4,3</TD>
	</TR>
	<TR>
	  <TD>Cell 2,4</TD>
	  <TD>Cell 3,4</TD>
	  <TD>Cell 4,4</TD>
	</TR>
  </TABLE>
</BODY>
HTML Preview :
Create Table - Browser

Table

Cell 1,1 Cell 2,1 Cell 3,1 Cell 4,1
Cell 1,2 Cell 3,2 Cell 4,2
Cell 1,3 Cell 2,3 Cell 3,3 Cell 4,3
Cell 2,4 Cell 3,4 Cell 4,4

6. How To Create Link
<HTML>
<HEAD>
  <TITLE>Link Using Image & Text </TITLE>
</HEAD>
<BODY>
  <H3><U>Link Using Image to Display "Images/S1.Gif"</U></H3>
  <A HREF="images/s1.gif" ALT="Click To Go To The Link"><IMG SRC="images/s1.gif"></A>
  <H3><U>Link Using Text to Display "Images/S1.Gif"</U></H3>
  <A HREF="images/s1.gif" TARGET=NEWWINDOW>Go To Link</A>
</BODY>
HTML Preview :
Link Using Image & Text - Browser

Link Using Image to Display "Images/S1.Gif"

Click To Go To The Link

Link Using Text to Display "Images/S1.Gif"

Go To Link