Write HTML and CSS code to design a web page displaying list of hyperlinks. Divide the browser screen into two frames. The first frame will display the heading. Divide the second frame into two columns. The frame on the left will be a menu consisting of hyperlinks. Clicking on any one of these hyperlinks will display related information as a new page which must be open in frame on the right hand side. Use Inline style sheet with appropriate attributes to display information of each frame.

 Preview-    Click on image


Code-

Note - Save This File as index.html 

<html>
 <frameset rows="20%,*">
 <frame src="heading.html">
 <frameset cols="30%,*">
 <frame src="link.html">
 <frame name="f3">
</frameset>
</frameset>
</html>

Note - Save This File as link.html 

<html>
 <body style="background:darkblue; color:white;">
   <h1>City</h1>
   <font size=5>
   <ol>
     <li><a href="Pune.html" target="f3" style="color:white;">Pune</li>
     <li><a href="Banglore.html" target="f3" style="color:white;">Banglore</li>
     <li><a href="Hydrabad.html" target="f3" style="color:white;">Hydrabad</li>
     <li><a href="Delhi.html" target="f3" style="color:white;">Delhi</li>
   </ol>
   </font>
 </body>
</html>

Note - Save This File as Pune.html

<html>
 <body style="background-image: url(https://images.adsttc.com/media/images/51d4/84a8/b3fc/4bea/e100/01d6/large_jpg/Portada.jpg?1372882078); background-position:center center;">
  <h1 style="color:DarkBlue";>Pune</h1>
   <font size=5>
    <ul>
       <li style="color:DarkBlue";>Infosys</li>
       <li style="color:DarkBlue";>TCS</li>
       <li style="color:DarkBlue";>Tech-Mahindra</li>
       <li style="color:DarkBlue";>Persistent</li>
    </ul>
   </font>
 </body>
</html>

Note - Save This File as Banglore.html

<html>
 <body style="background-image:url(https://i.pinimg.com/originals/5f/a4/d7/5fa4d783842f380b19d15489f0c31cbe.jpg); background-size:500px 500px;">
  <h1 style="color:Pink;">Banglore</h1>
   <font size=5>
    <ul>
       <li style="color:Pink;">Cognizant</li>
       <li style="color:Pink;">Google</li>
       <li style="color:Pink;">Microsoft</li>
       <li style="color:Pink;">Infosys</li>
    </ul>
   </font>
 </body>
</html>

Note - Save This File as Hydrabad.html

<html>
 <body style="Background-image:url(http://sf.co.ua/14/05/wallpaper-928219.jpg); background-position:center center;">
  <h1 style="color:white;">Hydrabad</h1>
   <font size=5>
    <ul>
       <li style="color:white;">Capgemini</li>
       <li style="color:white;">Cybage</li>
       <li style="color:white;">Topper</li>
       <li style="color:white;">Cognizant</li>
    </ul>
   </font>
 </body>
</html>

Note - Save This File as Delhi.html

<html>
 <body style="Background-image:url(https://www.sustainableplaces.eu/wp-content/uploads/2017/02/SmartBuilding.jpg); background-size:1000px 500px;">
  <h1 style="color:Yellow;">Delhi</h1>
   <font size=5>
    <ul>
       <li style="color:Yellow;">CHERRY INFOTECH</li>
       <li style="color:Yellow;">Sui-Generis Technologies</li>
       <li style="color:Yellow;">GITS India Solutions</li>
       <li style="color:Yellow;">Infonoble Solutions Pvt Ltd</li>
    </ul>
   </font>
 </body>
</html>

0 Comments