Practical Viewer

Aim (Write on the ruler page)

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 the header. The section on the left has a list of cities. The right-hand side displays tourist places in any one of the cities. Use the Inline style sheet in the top section to display the background color for the text ‘Tourist places’. Use an internal stylesheet for the left and right sections with background color and font styles.

Program (Start from new page after AIM)

<html>

<head>

<title> Tourist Place </title>

<style>

section{background-color:yellow;width:50%;height:50%; float:left;color:black;font-size:30px;outline-style:solid;} aside{background-color:pink;width:50%;height:50%; float:right;color:black;font-size:30px;outline-style:solid;}

</style>

</head>

<body>

<header style="background-color:lightblue;color:deeppink;text-align:center; height:30%;width:100%;font-size:50px;outline-style:solid">Tourist places

</header>

<header>

<section>

<b> City </b>

<ol>

<li> Pune </li>

<li> Delhi </li>

<li> Banglore </li>

<li> Hyderabad </li>

</ol>

</section>

<aside>

<p> Tourist places in Pune </p>

<ul>

<li> Shaniwarwada </li>

<li> Sinhgad </li>

<li> Kelkar Museum </li>

</ul>

</aside>

</header>

</body>

</html>

Output (Stick on blank page opposite to code)

Download Output