Tag Archives: HTML element

Ludo Board using HTML

Hi Friends

Check out this Ludo Board made in HTML. 

First I am posting the Snapshot.

Ludo Using HTML

Thats Pretty isn’t it. And shows the power of HTML.

Source Code is here now.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>
<title>Ludo Board using HTML</title>
<style type="text/css">
	/*Style for Table*/

	table,th,td
	{
	border: 1px solid black;
	border-collapse:collapse;
	}
</style>
</head>

<body bgcolor = "white">
<h1 align = "center"><font color = "gray"><b><u>LUDO GAME</u></b></font></h1>
<table border="1" bordercolor="black" bgcolor="white" cellpadding="4" cellspacing="0" width="550" height="550" align = "center">

<!--Outer 3 Sides are created using this Row-->
        <tr>
            <td bgcolor="red"rowspan="17">&nbsp;</td>
            <td bgcolor="blue"colspan="15">&nbsp;</td>
            <td bgcolor="yellow"rowspan="17">&nbsp;</td>
        </tr>

<!--First Row of Ludo Table starts from here-->
        <tr>

            <td bgcolor="blue" colspan="2" rowspan="2">&nbsp;</td>
            <td  bgcolor="white"colspan="2" rowspan="2">&nbsp;</td>
            <td bgcolor="blue" colspan="2" rowspan="2">&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td bgcolor="red"colspan="2"rowspan="2">&nbsp;</td>
            <td bgcolor="white"colspan="2"rowspan="2">&nbsp;</td>
            <td bgcolor="red" colspan="2"rowspan="2">&nbsp;</td>
       </tr>

       <tr>
           <td>&nbsp;</td>
           <td bgcolor="red">&nbsp;</td>
           <td bgcolor="red">&nbsp;</td>
       </tr>

<!--1st Row Completes here-->

<!--2nd Row starts here-->
       <tr>
           <td bgcolor="white"colspan="2"rowspan="2">&nbsp;</td>
           <td bgcolor="blue" colspan="2"rowspan="2">&nbsp;</td>
           <td bgcolor="white"colspan="2"rowspan="2">&nbsp;</td>
           <td>&nbsp;</td>
           <td bgcolor="red">&nbsp;</td>
           <td>&nbsp;</td>
           <td bgcolor="white"colspan="2"rowspan="2">&nbsp;</td>
           <td bgcolor="red"colspan="2"rowspan="2">&nbsp;</td>
           <td bgcolor="white"colspan="2"rowspan="2">&nbsp;</td>
      </tr>

       <tr>
           <td>&nbsp;</td>
		   <td bgcolor="red">&nbsp;</td>
		   <td>&nbsp;</td>
       </tr>

<!--2nd Row ends here-->

<!--3rd row starts here-->
       <tr>
           <td bgcolor="blue"colspan="2"rowspan="2">&nbsp;</td>
           <td bgcolor="white"colspan="2"rowspan="2">&nbsp;</td>
           <td bgcolor="blue"colspan="2"rowspan="2">&nbsp;</td>
           <td>&nbsp;</td>
           <td bgcolor="red">&nbsp;</td>
           <td>&nbsp;</td>
           <td bgcolor="red"colspan="2"rowspan="2">&nbsp;</td>
           <td bgcolor="white"colspan="2"rowspan="2">&nbsp;</td>
           <td bgcolor="red"colspan="2"rowspan="2">&nbsp;</td>
       </tr>

       <tr>
           <td>&nbsp;</td>
           <td bgcolor="red">&nbsp;</td>
           <td >&nbsp;</td>
       </tr>

<!--3rd Row ends here-->

<!--4th row starts here-->
       <tr>
           <td>&nbsp;</td>
           <td bgcolor="blue">&nbsp;</td>
           <td>&nbsp;</td>
           <td>&nbsp;</td>
           <td>&nbsp;</td>
           <td>&nbsp;</td>
           <td align="center" bgcolor="white" rowspan="3" colspan="3"><b>HOME</b></td>
           <td>&nbsp;</td>
           <td>&nbsp;</td>
           <td>&nbsp;</td>
           <td>&nbsp;</td>
           <td>&nbsp;</td>
           <td>&nbsp;</td>
     </tr>
<!--4th row ends here-->

<!--5th row starts here-->
     <tr>
          <td>&nbsp;</td>
          <td bgcolor="blue">&nbsp;</td>
          <td bgcolor="blue">&nbsp;</td>
          <td bgcolor="blue">&nbsp;</td>
          <td bgcolor="blue">&nbsp;</td>
          <td bgcolor="blue">&nbsp;</td>
          <td bgcolor="green">&nbsp;</td>
          <td bgcolor="green">&nbsp;</td>
          <td bgcolor="green">&nbsp;</td>
          <td bgcolor="green">&nbsp;</td>
          <td bgcolor="green">&nbsp;</td>
          <td>&nbsp;</td>
     </tr>

<!--5th row ends here-->

<!--6th row starts here-->
     <tr>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
         <td bgcolor="green">&nbsp;</td>
         <td>&nbsp;</td>
     </tr>
<!--6th row ends here-->

<!--7th row-->
     <tr>
        <td bgcolor="yellow"colspan="2" rowspan="2">&nbsp;</td>
        <td bgcolor="white"colspan="2" rowspan="2">&nbsp;</td>
        <td bgcolor="yellow"colspan="2" rowspan="2">&nbsp;</td>
        <td>&nbsp;</td>
        <td bgcolor="yellow">&nbsp;</td>
        <td>&nbsp;</td>
        <td  bgcolor="green"colspan="2"rowspan="2">&nbsp;</td>
        <td bgcolor="white"colspan="2"rowspan="2">&nbsp;</td>
        <td bgcolor="green"colspan="2"rowspan="2">&nbsp;</td>
    </tr>

     <tr>
         <td>&nbsp;</td>
		 <td bgcolor="yellow">&nbsp;</td>
		 <td>&nbsp;</td>
     </tr>

<!--7th row ends-->

<!--8th row-->
     <tr>
         <td bgcolor="white"colspan="2"rowspan="2">&nbsp;</td>
         <td bgcolor="yellow"colspan="2"rowspan="2">&nbsp;</td>
         <td bgcolor="white"colspan="2"rowspan="2">&nbsp;</td>
         <td>&nbsp;</td>
         <td bgcolor="yellow">&nbsp;</td>
         <td>&nbsp;</td>
         <td bgcolor="white"colspan="2"rowspan="2">&nbsp;</td>
         <td bgcolor="green"colspan="2"rowspan="2">&nbsp;</td>
         <td bgcolor="white"colspan="2"rowspan="2">&nbsp;</td>
     </tr>

	 <tr>
         <td>&nbsp;</td>
		 <td bgcolor="yellow">&nbsp;</td>
		 <td>&nbsp;</td>
     </tr>

<!--8th row ends-->

<!--9th row-->
     <tr>
         <td bgcolor="yellow"colspan="2"rowspan="2">&nbsp;</td>
         <td bgcolor="white"colspan="2"rowspan="2">&nbsp;</td>
         <td bgcolor="yellow"colspan="2"rowspan="2">&nbsp;</td>
         <td bgcolor="yellow">&nbsp;</td>
         <td bgcolor="yellow">&nbsp;</td>
         <td>&nbsp;</td>
         <td bgcolor="green"colspan="2"rowspan="2">&nbsp;</td>
         <td bgcolor="white"colspan="2"rowspan="2">&nbsp;</td>
         <td bgcolor="green"colspan="2"rowspan="2">&nbsp;</td>
     </tr>

      <tr>
          <td>&nbsp;</td>
		  <td>&nbsp;</td>
		  <td>&nbsp;</td>
      </tr>
<!--9th row ends-->

<!--Row for the Fourth side at the bottom-->
       <tr>
           <td bgcolor="green"colspan="15">&nbsp;</td>
       </tr>
</table>

<br><br><br>

</body>
</html>

Number Tables Using PHP

Hello

Just wrote a few Random PHP Programs creating Numbers Table 1 to 100. Remember in Nursery our Teachers made us write these numbers so many times in our Maths Notebook.

So Here comes a quick way to print the Numbers in Nice Colorful Tables.

Table_1.php

<html>

<head>
	<title>Number Table using PHP</title>

	<style type="text/css">
	td
	{
	height:50px; width:50px;
	}

	table,th,td
	{
	font-family:Arial; font-size:17px;
	color:navy; font-weight: normal;
	border: 2px solid red;
	text-align: center;
	border-collapse:collapse;
	}

	th
	{
	font-family:Arial; font-size:25px;
	color:white; font-weight: bold; font-style:italic;
	text-align: center;
	}

</style>
</head>

<body>
<?php
echo "<table border=\"1\" align=\"center\" bgcolor=\"red\">";
echo "<tr> <th colspan=\"10\"> Number Table </th> </tr>";

//For loop will iterate for 10 times to create 10 rows.
for($i=1;$i<=10;$i++)
{
	echo "<tr align=\"center\">";

	for($j=9;$j>=0;$j--)
	{
			echo "<td   bgcolor=\"white\">";
			$t=10*($i);
			$t1=$t-$j;
			echo $t1;
			echo "</td>";

	}//for loop ends
	echo "</tr>";

	}//outer for end.
echo "</table>";

?>

</body>
</html>

Snapshot of the o/p

Number Table 1 to 100

Table_2.php


<html>

<head>
	<title>Number Table using PHP</title>

	<style type="text/css">

	td
	{
	height:50px; width:50px;
	}

	table,th,td
	{
	font-family:Arial; font-size:17px;
	color:navy; font-weight: normal;
	border: 2px solid red;
	text-align: center;
	border-collapse:collapse;
	}

	th
	{
	font-family:Arial; font-size:25px;
	color:WHITE; font-weight: bold; font-style:italic;
	text-align: center;
	}

</style>
</head>

<body>
<?php
echo "<table border=\"1\" align=\"center\" bgcolor=\"red\">";
echo "<tr> <th colspan=\"10\"> Number Table </th> </tr>";

//For loop will iterate for 5 times to create 10 rows.
for($i=1;$i<=10;$i=$i+2)
{
	echo "<tr align=\"center\">";

	for($j=9;$j>=0;$j--)
	{
			echo "<td   bgcolor=\"white\">";
			$t=10*($i);
			$t1=$t-$j;
			echo $t1;
			echo "</td>";

	}//for loop ends
	echo "</tr>";

	echo "<tr align=\"center\">";

	for($j=1;$j<=10;$j++)
	{
			echo "<td   bgcolor=\"pink\">";
			$t=10*($i);
			$t1=$t+$j;
			echo $t1;
			echo "</td>";

	}//for loop ends
	echo "</tr>";
}//outer for end.
echo "</table>";

?>

</body>
</html>

Snapshot of the o/p

Number Table 1 to 100 with Different colored rows

Table_3.php

<html>

<head>
	<title>Number Table using PHP</title>

	<style type="text/css">

	td
	{
	height:50px; width:50px;
	}

	table,th,td
	{
	font-family:Arial; font-size:17px;
	color:navy; font-weight: normal;
	border: 2px solid red;
	text-align: center;
	border-collapse:collapse;
	}

	th
	{
	font-family:Arial; font-size:25px;
	color:WHITE; font-weight: bold; font-style:italic;
	text-align: center;
	}

</style>
</head>

<body>
<?php
echo "<table border=\"1\" align=\"center\" bgcolor=\"red\">";
echo "<tr> <th colspan=\"10\"> Number Table </th> </tr>";

//For loop will iterate for 5 times to create 10 rows.
for($i=1;$i<=10;$i=$i+2)
{
	echo "<tr align=\"center\">";

	for($j=9;$j>=0;$j--)
	{
		if(($j%2)==0)
			{
			echo "<td   bgcolor=\"white\">";
			}
		else
			{
			echo "<td bgcolor=\"pink\">";
			}
			$t=10*($i);
			$t1=$t-$j;
			echo $t1;
			echo "</td>";

	}//for loop ends
	echo "</tr>";

	echo "<tr align=\"center\">";

	for($j=1;$j<=10;$j++)
	{
		if(($j%2)==0)
			{
			echo "<td   bgcolor=\"pink\">";
			}
		else
			{
			echo "<td bgcolor=\"white\">";
			}
			$t=10*($i);
			$t1=$t+$j;
			echo $t1;
			echo "</td>";

	}//for loop ends
	echo "</tr>";
}//outer for end.
echo "</table>";

?>

</body>
</html>

Snapshot of the o/p

Number Table 1 to 100 with different cell colors

Table_4.php

<html>

<head>
	<title>Number Table using PHP</title>

	<style type="text/css">

	td
	{
	height:50px; width:50px;
	}

	table,th,td
	{
	font-family:Arial; font-size:17px;
	color:navy; font-weight: normal;
	border: 2px solid red;
	text-align: center;
	border-collapse:collapse;
	}

	th
	{
	font-family:Arial; font-size:25px;
	color:WHITE; font-weight: bold; font-style:italic;
	text-align: center;
	}

</style>
</head>

<body>
<?php
echo "<table border=\"1\" align=\"center\" bgcolor=\"red\">";
echo "<tr> <th colspan=\"10\"> Number Table </th> </tr>";

for($i=10;$i>=1;$i--)
	{
	echo "<tr align=\"center\">";
	//For loop creates rows of numbers in Descending order..100,99,98,...,91
	for($j=0;$j<10;$j++)
	{
		//For different color cells we have used if condition
		if(($j%2)==0)
			{
			echo "<td   bgcolor=\"white\">";
			}
		else
			{
			echo "<td bgcolor=\"pink\">";
			}
			$t=10*($i);
			$t1=$t-$j;
			echo $t1;
			echo "</td>";
	}
	//for loop ends
	echo "</tr>";

	}//outer for end.
echo "</table>";

?>

</body>
</html>

Snapshot of the o/p

Number Table 1 to 100 in Descending Order

Different Nation Flags Marquee in HTML

Different Nation Flags Marquee in HTML

This HTML program creates a marquee of flags of different nations. The flags are stored in a directory called “flags” and a image spacer is stored in the directory “images”. A Table of single row is created containing the flags and added as the content inside the HTML <marquee> element.

Flags.html


<html>
<head>
<title>Flags using Marquee</title>
</head>

<body>

<h1>Different Nation Flags Marquee</h1>
<br/>

<marquee scrolldelay="120" bgcolor='white'>
                      <table width="100%" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                          <td width="31" height="25"><img src="flags/india.gif" alt ='India' width="31" height="21"></td>
                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>
                          <td width="35"><img src="flags/afghanistan.gif" alt='Afghanistan' width="35" height="21"></td>

                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>
                          <td width="33"><img src="flags/armenia.gif"  alt ='Armenia' width="33" height="21"></td>
                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>
                          <td width="33"><img src="flags/australia.gif"  alt= 'Australia' width="33" height="21"></td>
                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>
                          <td width="31"><img src="flags/bahrain.gif" width="31" height="21"></td>
                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>
                          <td width="33"><img src="flags/bangaladesh.gif" width="33" height="21"></td>
                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>

                          <td width="32" height="23"><img src="flags/belgium.gif" width="32" height="21"></td>
                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>
                          <td width="34" height="23"><img src="flags/bhutan.gif" width="34" height="21"></td>
                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>
                          <td width="34"><img src="flags/brazil.gif" width="34" height="21"></td>
                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>
                          <td width="32"><img src="flags/burundi.gif" width="32" height="21"></td>
                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>
                          <td width="35" height="23"><img src="flags/canada.gif" width="35" height="21"></td>

                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>
                          <td width="35"><img src="flags/china.gif" width="35" height="21"></td>
                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>
                          <td width="32"><img src="flags/djibouti.gif" width="32" height="21"></td>
                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>
                          <td width="32"><img src="flags/eritrea.gif" width="32" height="21"></td>
                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>
                          <td width="40"><img src="flags/ethiopia.gif" width="40" height="21"></td>
                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>

                          <td width="40"><img src="flags/fiji.gif" width="40" height="21"></td>
                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>
                          <td width="36"><img src="flags/germany.gif" width="36" height="21"></td>
                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>
                          <td width="32"><img src="flags/hongkong.gif" width="32" height="21"></td>
                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>
                          <td width="31"><img src="flags/indonesia.gif" width="31" height="21"></td>
                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>
                          <td width="36"><img src="flags/iran.gif" width="36" height="21"></td>

                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>
                          <td width="35"><img src="flags/ireland.gif" width="35" height="21"></td>
                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>
                          <td width="38"><img src="flags/italy.gif" width="38" height="21"></td>
                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>
                          <td width="40"><img src="flags/jamaica.gif" width="40" height="21"></td>
                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>
                          <td width="31"><img src="flags/japan.gif" width="31" height="21"></td>
                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>

                          <td width="34"><img src="flags/jordan.gif" width="34" height="21"></td>
                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>
                          <td width="40"><img src="flags/kazakhstan.gif" width="40" height="21"></td>
                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>
                          <td width="33"><img src="flags/kenya.gif" width="33" height="21"></td>
                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>
                          <td width="36"><img src="flags/kuwait.gif" width="36" height="21"></td>
                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>
                          <td width="40"><img src="flags/liberia.gif" width="40" height="21"></td>

                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>
                          <td width="31"><img src="flags/madagascar.gif" width="31" height="21"></td>
                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>
                          <td width="40"><img src="flags/malaysia.gif" width="40" height="21"></td>
                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>
                          <td width="31"><img src="flags/maldives.gif" width="31" height="21"></td>
                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>
                          <td width="32"><img src="flags/mauritus.gif" width="32" height="21"></td>
                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>

                          <td width="40"><img src="flags/mongolia.gif" width="40" height="21"></td>
                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>
                          <td width="38"><img src="flags/myanmar.gif" width="38" height="21"></td>
                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>
                          <td width="16"><img src="flags/nepal.gif" width="16" height="21"></td>
                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>
                          <td width="40"><img src="flags/nigeria.gif" width="40" height="21"></td>
                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>
                          <td width="32"><img src="flags/oman.gif" width="32" height="21"></td>

                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>
                          <td width="40"><img src="flags/philiphinesss.gif" width="40" height="21"></td>
                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>
                          <td width="40"><img src="flags/qater.gif" width="40" height="21"></td>
                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>
                          <td width="34"><img src="flags/russia.gif" width="34" height="21"></td>
                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>
                          <td width="34"><img src="flags/s_africa.gif" width="34" height="21"></td>
                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>

                          <td width="40"><img src="flags/s_korea.gif" width="40" height="21"></td>
                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>
                          <td width="32"><img src="flags/saudi.gif" width="32" height="21"></td>
                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>
                          <td width="32"><img src="flags/seychellas.gif" width="32" height="21"></td>
                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>
                          <td width="31"><img src="flags/singapore.gif" width="31" height="21"></td>
                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>
                          <td width="37"><img src="flags/srilanka.gif" width="37" height="21"></td>

                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>
                          <td width="30"><img src="flags/sudan.gif" width="30" height="21"></td>
                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>
                          <td width="36"><img src="flags/switzerland.gif" width="36" height="21"></td>
                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>
                          <td width="35"><img src="flags/taiwan.gif" width="35" height="21"></td>
                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>
                          <td width="36"><img src="flags/tanzania.gif" width="36" height="21"></td>
                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>

                          <td width="35"><img src="flags/thailand.gif" width="35" height="21"></td>
                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>
                          <td width="31"><img src="flags/tibet.gif" width="31" height="21"></td>
                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>
                          <td width="37"><img src="flags/turkey.gif" width="37" height="21"></td>
                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>
                          <td width="36"><img src="flags/uae.gif" width="36" height="21"></td>
                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>
                          <td width="31"><img src="flags/uganda.gif" width="31" height="21"></td>

                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>
                          <td width="33"><img src="flags/uk.gif" width="33" height="21"></td>
                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>
                          <td width="38"><img src="flags/usa.gif" width="38" height="21"></td>
                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>
                          <td width="32"><img src="flags/vietnam.gif" width="32" height="21"></td>
                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>
                          <td width="32"><img src="flags/yemen.gif" width="32" height="21"></td>
                          <td width="5"><img src="images/spacer.gif" width="5" height="10"></td>

                        </tr>
                      </table>
</marquee>

<body>

</html>

Snapshot of the o/p

Images of Flags which we have used in this application