In: Computer Science
construct an HTML page that contains a three levels nesting list. 2 items are required on each level (could be random texts of your choice). The first level is to be an ordered list, the second level should be unordered list and the third level should be Description List.
Hi, here we have a web page which shows a list of some countries by continents along with the capital and population of each country.
<html>
<head>
<title></title>
<style>
<!--Styling
the lists by applying different font size-->
ol {font-size :
26}
ul {font-size :
18}
dl {font-size :
10}
</style>
</head>
<body>
<!--Heading-->
<h1>List of Countries by
Continents</h1>
<h3>
<!--Ordered
List Start-->
<ol>
<!--List Item-->
<li>Asia</li>
<!--Unordered List Start-->
<ul>
<li>India</li>
<!--Descriptive List
Start-->
<dl>
<dt>Capital</dt>
<dd>New Delhi</dd>
<dt>Population</dt>
<dd>1.3 Billion</dd>
</dl>
<!--Descriptive List
End-->
<li>Japan</li>
<dl>
<dt>Capital</dt>
<dd>Tokyo</dd>
<dt>Population</dt>
<dd>126 Million</dd>
</dl>
</ul>
<!--Unordered List End-->
<li>Africa</li>
<ul>
<li>Egypt</li>
<dl>
<dt>Capital</dt>
<dd>Cairo</dd>
<dt>Population</dt>
<dd>90 Million</dd>
</dl>
<li>Senegal</li>
<dl>
<dt>Capital</dt>
<dd>Dakar</dd>
<dt>Population</dt>
<dd>14 Million</dd>
</dl>
</ul>
<li>North America</li>
<ul>
<li>USA</li>
<dl>
<dt>Capital</dt>
<dd>Washington, District of Columbia</dd>
<dt>Population</dt>
<dd>330 Million</dd>
</dl>
<li>Canada</li>
<dl>
<dt>Capital</dt>
<dd>Ottawa</dd>
<dt>Population</dt>
<dd>37 Million</dd>
</dl>
</ul>
</ol>
<!--Ordered
List End-->
</h3>
</body>
</html>
Sample Output: