Scribd
Upload
3 views

Web Lab Programs 6-8

The document contains three HTML code examples demonstrating different web design techniques. The first example creates a webpage with two frames, each divided into two equal columns with distinct background colors. The second example formats a student ID card using inline CSS, and the third example overlays the text 'Hello India!' on an image of the India map.

Uploaded by

pubgupdate711
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

Web Lab Programs 6-8

The document contains three HTML code examples demonstrating different web design techniques. The first example creates a webpage with two frames, each divided into two equal columns with distinct background colors. The second example formats a student ID card using inline CSS, and the third example overlays the text 'Hello India!' on an image of the India map.

Uploaded by

pubgupdate711
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

PART -A

6. Write code in HTML to develop a webpage having two frames that divide the webpage
into two equal rows and then divide the row into equal columns fill each frame with a
different background color.
<!DOCTYPE html>
<html>
<head>
<title>Two Frames with Equal Columns</title>
<style>
/* Container for the entire webpage */
.container
{
display: flex;
flex-direction: column; /* Stack the frames vertically */
height: 100vh; /* Full height of the viewport */
}

/* Each row (frame) inside the container */


.frame
{
display: flex;
flex: 1; /* Equal height for each frame */
}

/* Columns inside each frame */


.column
{
flex: 1; /* Equal width for each column */
padding: 20px;
box-sizing: border-box;
text-align: center;
font-size: 20px;
font-weight: bold;
}

/* Background colors for each frame */


.frame1
{
background-color: lightblue;
}

.frame2
{
background-color: lightgreen;
}

/* Border styling for better visibility */


.column
{
border: 2px solid white;
}
</style>
</head>
<body>

<!-- Container to hold the two frames -->


<div class="container">

<!-- First frame (row 1) with two columns -->


<div class="frame frame1">
<div class="column">Column 1 (Frame 1)</div>
<div class="column">Column 2 (Frame 1)</div>
</div>

<!-- Second frame (row 2) with two columns -->


<div class="frame frame2">
<div class="column">Column 1 (Frame 2)</div>
<div class="column">Column 2 (Frame 2)</div>
</div>

</div>

</body>
</html>

7.Write CSS code to Use Inline CSS to format your ID Card.


<!DOCTYPE html>
<html>
<head>
<title>Student ID Card</title>
<style>
*{
padding: 0;
margin: 0;
}

.card
{
width: 300px;
background-color: lightyellow;
margin: 20px auto;
padding: 50px;
border-radius: 10px;
box-shadow: 10px 10px 10px rgba(177, 12, 12, 0.1);
text-align: center; /* Center content instead of using <center> */
}

.passs
{
border: solid black;
border-radius: 15px;
}
</style>
</head>
<body>
<div class="card">
<img class="pass" style="height: 90px; width: 90px;"
src="C:\Users\vijay\OneDrive\Desktop\kle-logo.gif" alt="logo">
<h2 style="color: red;">K.L.E. SOCIETY'S</h2>
<h3 style="color: darkblue;">Shri Kadasiddeshwar Arts College & H.S. Kotambari
Science Institute</h3>
<img class="passs" style="height: 140px; width: 100px;"
src="C:\Users\Admin\Desktop\andrew.jpg" alt="passport">
<h1 style="color: blue;">Tarunkumar</h1>
<p style="color: red;">Course: B.Sc | I / II / III Year</p>
<h3 style="color: blue;">Validity: November 2022 to 2025</h3>
</div>
</body>
</html>
8.Using HTML, CSS create display a text called—Hello India! On top of an image of
India map using overlay.

<html>
<head>
<title>overlap</title>
<style>
*{
margin:0; padding:0;
}

.overlap{
text-align:center;
margin-top:50px;
}

.overlap h1{
position:absolute;
font-size:120px;

color:blue;
top:20%;
left:22%;
}

</style>
<body>
<div class="overlap">
<img src="C:\Users\vijay\OneDrive\Desktop\indiamap.jpg" alt="map">
<h1>
Hello India!
</h1>
</div>
</body>
</html>

You might also like