HTML EXERCISES
Exercise 1 : Basic HTML tags
<HTML>
<HTML>
<HEAD>
<TITLE> First Web page </TITLE>
</HEAD>
<BODY>
This is my first web page
</BODY>
</HTML>
Exercise 2 : Attributes of BODY Tag
<HTML>
<HTML>
<HEAD>
<TITLE> Background colour</TITLE>
</HEAD>
<BODY bgcolor="pink" text="blue">
ROSARY HIGHER SECONDARY SCHOOL NAVELIM
<BODY>
</HTML>
Exercise 3 : Background Image
<HTML>
<HTML>
<HEAD>
<TITLE> Background image </TITLE>
</HEAD>
<BODY BACKGROUND=“Angel.jpeg” text="red">
ROSARY HIGHER SECONDARY SCHOOL NAVELIM
<BODY>
</HTML>
Note : The image file “Angel.jpeg” should be present in your folder
Exercise 4 :Headings Tag
<HTML>
<HEAD>
<TITLE> HEADINGS</TITLE>
</HEAD>
<BODY bgcolor="yellow" text="red ">
<H1 align=“center” > FLOWERS</H1>
<H2> Lily</H2>
<H3 > Hibiscus</H3>
<H4> Rose</H4>
<H5> Orchid</H5>
<H6> Sunflower</H6>
</BODY>
</HTML>
Exercise 5 : Paragraph & Line break tags
<HTML>
<HEAD>
<TITLE> Paragraph and Line Break tags </TITLE>
</HEAD>
<BODY bgcolor="yellow" text="red">
<H1 align=“center”> HTML</H1>
<P align=“center”>
HTML (HyperText Markup Language) is a Markup language devised for
website creation. <BR>These websites can be viewed by anyone else
connected to the Internet.
</P>
</BODY>
</HTML>
Exercise 6 : Physical Tags.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> Physical Tags </TITLE>
</HEAD>
<BODY bgcolor=“blue” text=“pink” topmargin=”20” leftmargin=”15”>
<B>BIRTHSTONES </B><BR>
<I> Moonstone </I><BR>
<U> Diamond </U><BR>
<S> Sapphire </S><br>
<SUB> Ruby </SUB><br>
<SUP> Ruby </SUP><br>
<TT> Coral </TT><br>
<BIG> Pearl </BIG>
<SMALL> Sandstone</SMALL>
</BODY>
</HTML>
Exercise 7 : Horizontal Ruled Lines
<HTML>
<HEAD>
<TITLE> Horizontal Ruled Lines </TITLE>
</HEAD>
<BODY>
<HR width="50" color=“GREEN” size=“10” align=”center”>
<HR width="75%" color=“PINK” size=“15”>
<HR noshade size=“20”>
</BODY>
</HTML>
Exercise 8 : Font Tag
<HTML>
<HEAD>
<TITLE>ATTRIBUTES OF FONT TAG </TITLE>
</HEAD>
<BODY>
<FONT face=”Verdana” size="5" color=“red”> Sunflower <BR> /FONT>
<FONT size="2" color=“green”>Tulips<BR></FONT>
<FONT face=”Monotype Corsiva” size="3"color=“blue”> Rose <BR>
/FONT>
<FONT size="4" color=“pink”> Daisy <BR></FONT>
<FONT size="5" color=“green”>Lily <BR></FONT>
</BODY>
</HTML>
Exercise 9 : <center> and<div> Tags
<HTML>
<HEAD>
<TITLE> CENTER AND DIV TAGS </TITLE>
</HEAD>
<BODY bgcolor=“yellow” text=“pink”>
<H2> Using CENTER Tag & DIV Tag to align to the center </H2>
<CENTER> FRUITS </CENTER>
<DIV ALIGN="center">APPLE </DIV>
<H2>Using DIV Tag to align to the left and right </H2>
<DIV ALIGN="left"> MANGO </DIV>
<DIV ALIGN="right"> PEAR</DIV>
</BODY>
</HTML>
Exercise 10 : Marquee Tag
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> MARQUEE TAG </TITLE>
</HEAD>
<BODY>
<MARQUEE BEHAVIOUR=“slide” DIRECTION=”up” WIDTH=“250”
BGCOLOR=“red” LOOP=“3” >
<H1>ROSARY HIGHER SEC. SCHOOL NAVELIM</H1>
</MARQUEE>
</BODY>
</HTML>
Exercise 11 : Image Tag
<HTML>
<HEAD>
<TITLE>IMAGES </TITLE>
</HEAD>
<BODY>
<IMG SRC="TAJ.JPG" HEIGHT="50%" WIDTH="50%" ALT="THE TAJ
MAHAL">
</BODY>
</HTML>
Note : The image file “TAJ.JPG” should be present in your folder
Exercise 12 : Image as a link
<!DOCTYPE.HTML>
<HTML>
<HEAD>
<TITLE>IMAGE USED AS A LINK </TITLE>
</HEAD>
<BODY>
<A HREF="EX14.HTML">
<IMG SRC="ANGEL.JPG" HEIGHT="75%" WIDTH="75%"
ALIGN="RIGHT" BORDER="10">
</A>
</BODY>
</HTML>
Note : The image file “ANGEL.JPG” should be present in your folder
Exercise 13 : Hyperlink and Anchor Tag
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> USINH TEXT AS A HYPERLINK </TITLE>
</HEAD>
<BODY>
<P><A HREF="Tutorial.html "> HTML Tutorial </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 GOOGLE WEBSITE. </P>
</BODY>
</HTML>
Exercise 14 : Unordered List
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>HTML UNORDERED LIST</TITLE>
</HEAD>
<BODY bgcolor="green" text="red">
<UL TYPE="SQUARE">
<LI>BEETROOT</LI>
<LI>GINGER</LI></UL>
<UL TYPE="CIRCLE" >
<LI>POTATO</LI>
<LI>RADISH</LI></UL>
<UL TYPE="DISK" >
<LI>CARROT </LI>
<LI>TURNIPS <LI></UL>
</BODY>
</HTML>
Exercise 15 : Ordered List
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>HTML ORDERED LIST</TITLE>
</HEAD>
<BODY>
<OL TYPE="A">
<LI> Pencil </LI>
<LI> Pen </LI></OL>
<OL TYPE="a">
<LI> Erasers </LI>
<LI> Paper Clips </LI></OL>
<OL TYPE="i">
<LI> GLUE
<LI> SHARPENER </OL>
<OL TYPE="I">
<LI> BOOK
<LI> CRAYONS </OL>
</BODY>
</HTML>
Exercise 16 : Definition Lists :
<!DOCTYPE HTML>
<HTML>
<HEAD><TITLE> Definition Lists </TITLE>
</HEAD>
<BODY bgcolor=“pink” text=“green”>
<DL>
<DT> Hardware
<DD> is defined as physical or tangible equipments associated with
computer systems.
<DT> Software
<DD> is a set of instructions that carries out predefined tasks to complete a
given job.
<DT> Peripherals
<DD> Equipments connected around the CPU
</BODY>
</HTML>
Ex 17 : Exercise on Nesting List
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> Nesting List </TITLE>
<BODY>
<H2> An Unordered List : </H4>
<UL>
<LI> COFFEE </LI>
<LI> TEA </LI> </UL>
<H3> Numbered List : </H3>
<OL>
<LI> APPLES </LI>
<LI> ORANGES </LI> </OL>
<H4> Letters List : </H4>
<OL TYPE="A">
<LI> LILY </LI>
<LI> ROSE</LI>
<LI>JASMINE</LI> </OL>
<H3> Lowercase Letters List : </H3>
<OL TYPE="a">
<LI> PENS </LI>
<LI> PENCILS </LI> </OL>
<H4>Roman Numbers List : </H4>
<OL TYPE="I">
<LI> GUAVAS </LI>
<LI> PEARS </LI> </OL>
<H4> Lowercase Roman Numbers List : </H4>
<OL TYPE="i">
<LI> JUPITER </LI>
<LI> SATURN </LI>
<LI> EARTH </LI> </OL>
</BODY>
</HTML>
Exercise 18 : Tables using attributes border, bordercolor, cellspacing,
cellpadding, width, height, row headings & caption tag
<!DOCTYPE HTML>
<HTML>
<BODY>
<TABLE border="2" bordercolor =“red” cellspacing ="6" cellpadding="6"
width="80%" height=“50%” >
<CAPTION> I. Table of Students </CAPTION>
<TR><TH> Rows</TH>
<TH> Roll No </TH>
<TH> First Name </TH>
<TH> Last Name </TH>
<TH> Address </TH></TR>
<TR><TH> Row 1 :</TH>
<TD> 1 </TD>
<TD>Asha </TD>
<TD>Raikar</TD>
<TD>Margao</TD></TR>
<TR><TH> Row 2 :</TH>
<TD> 2 </TD>
<TD> Shaina </TD>
<TD> Fernandes </TD>
<TD>Cuncolim</TD></TR>
</TABLE>
</BODY>
</HTML>
Exercise 19 :Table using attributes align, column width, center tag
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> Creating A Table </TITLE>
</HEAD>
<BODY>
<CENTER>
<TABLE border= "2" bordercolor = "blue" CELLSPACING="6"
CELLPADDING="6" WIDTH="80%" HEIGHT=25%>
<CAPTION>Student Details </CAPTION>
<TR><TH>Stream</TH>
<TH WIDTH="20%"> Roll No</TH>
<TH WIDTH="20%"> First Name </TH>
<TH WIDTH="20%"> Last Name</TH>
<TH WIDTH="20%"> Address</TH></TR>
<TR><TH ALIGN="CENTER">Arts </TH>
<TD ALIGN="CENTER">1</TD>
<TD ALIGN="CENTER">Pranavi</TD>
<TD ALIGN="CENTER">Dessai</TD>
<TD ALIGN="CENTER">Margao</TD></TR>
<TR><TH ALIGN ="CENTER"> Commerce </TH>
<TD ALIGN="CENTER">2</TD>
<TD ALIGN="CENTER"> Manisha </TD>
<TD ALIGN="CENTER"> Fernandes</TD>
<TD ALIGN="CENTER">Chinchinim</TD></TR>
</TABLE>
<CENTER>
</BODY>
</HTML>
