Divide a web page vertically and horizontally and display logo of your college in left pane and logo of university in right pane

July 24, 2021 by Academy

Aim: Divide a web page vertically and horizontally and display logo of your college in left pane and logo of university in right pane

Using tags:-

```
Frameset 
```
```
 Frame 
```
```
 Image 
```
```
 Paragraph 
```
```
   iframe tag
```

Code of Horizontally divide:-

1.mainframe.html:-

<html>

    <head><title>Daviet and Ptu</title>

    <style></style>

 </head>

        <frameset rows="50%,50%">

            <frame name="daviet" src="daviet.html">

            <frame name="ptu" src="ptu.html" >

        </frameset>

</html>

2. College.html:-

<html>

    <head>

         <style>

         body{

                background-color:#f2eed0;

            }

            #img_d{

                float:left;

                width:190px;

                height:190px;

                margin-bottom:90px;

            }

            .d_txt{

                font-size:90px;

                 margin-bottom:-20px;

            }

            #d_txt{    

            }

            #yt_d{

            margin-right:150px;

                float:right;

            }

         </style>

    </head>

<body>

    <img  id="img_d" src="https://www.davietjal.org/wp-content/uploads/2016/03/final_colored_logo-1.png" />

    <p class="d_txt" >DAVIET  </p><p id="d_txt"> Dayanand Anglo Vedic Institute of Engg. and Technology </p>

     <iframe id="yt_d" width="450" height="200" src="https://www.youtube.com/embed/OoWiWC6-Y3c" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</body>

</html>

3. University.html

<html>

    <head>

         <style>

             body{

                background-color:#cb5e5e;

            }

            #img_d{

                 float:left;

            }

            .d_txt{

                font-size:25px;

                margin-top:20px;

                margin-bottom:-20px;

            }

            #d_txt{

                font-size:30px;    

            }

         </style>

    </head>

<body>

    <img  id="img_d" src="https://media.9curry.com/uploads/organization/image/1035/ptu-logo.png"/>

     <p class="d_txt" style="text-color:"#7065d1" ><br><br>ਆਈ.ਕੇ. ਗੁਜਰਾਲ ਪੰਜਾਬ ਟੈਕਨੀਕਲ ਯੂਨੀਵਰਸਿਟੀ  </p><p id="d_txt" style="color:"#7065d1"> I.K. Gujral Punjab Technical University </p>

     <audio id="audio1" controls style="float:right;width:600px; height=5px; margin-left:55px;">

        <source src="C:\Users\sumit\Music\hindi song mp3\Gabbar is Back\04 Warna Gabbar Aa Jayega (Gabbar Is Back) Raftaar - 320Kbps.mp3" type="audio/mpeg">

    </audio>

</body>

</html>

Output: –

Embed Audio and Video into your web page.

1 thought on “Divide a web page vertically and horizontally and display logo of your college in left pane and logo of university in right pane”

Pingback: Create a student Bio-Data for HTML Khan Sir Academy

Leave a Comment Cancel reply

Chinese (Simplified)