SOP 2 :

Create a webpage using HTML and CSS code to design a web page as the layout displayed below.

The top section will display the heading , ‘Tourist places’ in header. The section on the left has list of cities. The right hand side displays tourist places of any one of the city .
Use Inline style sheet in the top section to display background color for the text ‘Tourist places’. Use internal stylesheet for the left and right section with background color and font styles.

Output : pagr112

Code :


<!Doctype HTML>
<HTML>
<head>
<title>SOP2</title> 
<Style>
header{ color: #ff2249 ; width: 100% ; height: 40% ;}
section{ background-color: yellow ; width: 50% ; height: 20% ; float: left ;}
aside{ background-color: pink ; width: 50% ; height: 20% ; float: right ;}
</Style>
</Head>
<Body>
<Header>
<H1 style=" background-color: skyblue " align="center">Tourist Places</H1>
</Header>
<Section>
<B>City</B>
<br>
<ol>
<li> Banglore
<li> Hyderabad
<li> Delhi
<li> Pune
</ol>
</Section>
<Aside>
<B>Tourist places in pune</B>
<br>
<ul>
<li> Shaniwarwada
<li> Kelkar Museum
<li> Sinhgad Fort
<li> Pune
</ul>
</Aside>
</Body>
</html>