Scribd
Upload
10 views8 pages

WT practical file

The document is a practical file for a Web Technologies Lab course, detailing experiments conducted by a student named Vaishali Mehta. It includes two HTML coding exercises: one for creating a webpage with two frames of different background colors and another for designing a webpage about the student's hometown using internal CSS. Each experiment provides the aim, solution, and HTML code for implementation.

Uploaded by

Bhumika Piplani
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
10 views8 pages

WT practical file

The document is a practical file for a Web Technologies Lab course, detailing experiments conducted by a student named Vaishali Mehta. It includes two HTML coding exercises: one for creating a webpage with two frames of different background colors and another for designing a webpage about the student's hometown using internal CSS. Each experiment provides the aim, solution, and HTML code for implementation.

Uploaded by

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

PRACTICAL FILE

SESSION: 2023-24

WEB TECHNOLOGIES LAB


(CIE-356P)

III Year, VI Sem

Submitted to: Submitted by:


Name: Ms. Anupam singh Name:Vaishali Mehta
Designation: Assistant Professor Enrollment No:36418002721

Department of Computer Science and Engineering


Delhi Technical Campus, Greater Noida
INDEX

S.N PROGRAM NAME DATE OF DATE OF SIGN.


O. EXPERIMENT SUBMISSIO
N
1
Write html code 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.

2
Design a web page of your home town
with an attractive background color, text
color, an Image, font etc.(use internal
CSS).

4
5

7
8
9
10
EXPERIMENT 1
Aim: Write html code 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.

Solution:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Two Frames Webpage</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.row {
display: flex;
height: 50%;
}
.column {
flex: 1;
}
#frame1 {
background-color: lightblue;
}
#frame2 {
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="row">
<div id="frame1" class="column">
<!-- Content for frame 1 goes here -->
<h1>Frame 1</h1>
<p>This is frame 1.</p>
</div>
<div id="frame2" class="column">
<!-- Content for frame 2 goes here -->
<h1>Frame 2</h1>
<p>This is frame 2.</p>
</div>
</div>
</body>
</html>

OUTPUT:
EXPERIMENT 2
Aim: Design a web page of your home town with an attractive background color, text
color, an Image, font etc.(use internal CSS).
Solution:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Hometown Almora</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 18;
padding: 18;
background-image: url('https://www.euttaranchal.com/tourism/photos/almora-
3391124.jpg');
background-size: cover;
background-position: center;
color: #008080; /* Teal green text color */
}
#header {
background-color: rgba(0, 128, 128, 0.7); /* Teal green with some transparency */
padding: 20px;
text-align: center;
}
#header h1 {
font-size: 36px;
margin: 0;
padding: 10px;
color: white;
}
#content {
padding: 20px;
text-align: justify;
background-color: rgba(241, 237, 237, 0.925); /* White with some transparency */
border-radius: 10px;
margin: 20px;
}
p{
font-size: 18px;
line-height: 1.6;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="header">
<h1>My Hometown
Almora</h1>
</div>
<div id="content">
<p>Almora is a charming town situated in the Kumaon region of Uttarakhand, India.
Nestled amidst the breathtaking Himalayan peaks, this picturesque town is known for its
rich cultural heritage, scenic beauty, and spiritual significance.</p>
<p>With a history dating back to ancient times, Almora is adorned with intricately
carved temples, historic buildings, and narrow cobbled streets that reflect the influence of
the Katyuri and Chand dynasties. The town's architecture and layout provide a glimpse
into its cultural past.</p>
<p>The natural beauty surrounding Almora is truly mesmerizing. Surrounded by
dense forests and panoramic views of the snow-capped Himalayas, Almora offers a
tranquil escape for nature lovers. The vibrant flora and fauna, coupled with the crisp
mountain air, create an enchanting atmosphere.</p>
<p>Almora is not just a feast for the eyes but also a spiritual haven. The town is
home to several ancient temples, including the Nanda Devi and Kasar Devi temples, which
draw pilgrims and spiritual seekers alike. The serene ambiance and the spiritual energy of
the region make it a perfect destination for meditation and self-discovery.</p>
<p>Explore the local markets of Almora, where you can find traditional handicrafts,
woollen garments, and delicious local cuisine. The warmth and hospitality of the locals
add to the charm of this hill town.</p>
<p>Come and immerse yourself in the beauty and serenity of Almora – a place where
history, nature, and spirituality harmoniously coexist.</p>
</div>
</body>
</html>

You might also like