Scribd
Upload
11 views

HTML Exercises

Uploaded by

shubhj509
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
11 views

HTML Exercises

Uploaded by

shubhj509
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

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>

You might also like