HTML
Q1. Demonstrate the text formatting tags in a single HTML page.
SOURCECODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>Divyanshi Sa j w a nG2 28 </title>
</head>
<body>
<h1>Text Formatting in HTML</h1>
<table border=2>
<tr>
<th>Tag</th>
<th>Example</th>
<th>Description</th>
</tr>
<tr>
<td><b><b></b></td>
<td><b>Bold Text</b></td>
<td>Makes text bold</td>
</tr>
<tr>
<td><strong><strong></strong></td>
<td><strong>Strong Text</strong></td>
<td>Emphasizes text strongly (bold)</td>
</tr>
<tr>
<td><i><i></i></td>
<td><i>Italic Text</i></td>
<td>Makes text italic</td>
</tr>
<tr>
<td><u><u></u></td>
<td><u>Underlined Text</u></td>
<td>Underlines text</td>
</tr>
<tr>
<td><del><del></del></td>
<td><del>Deleted Text</del></td>
<td>Shows text as deleted/strikethrough</td>
</tr>
<tr>
<td><mark><mark></mark></td>
<td><mark>Highlighted Text</mark></td>
27 Divyanshi Badoni G2
<td>Highlights text</td> </tr>
<tr>
<td><sub><sub></sub></td>
<td>H<sub>2</sub>O</td>
<td>Subscript text (e.g., chemical formulas)</td>
</tr>
<tr>
<td><sup><sup></sup></td>
<td>x<sup>2</sup></td>
<td>Superscript text (e.g., exponents)</td>
</tr>
<tr>
<td>
<pre><pre></pre>
</td>
<td>
<pre>
Pre-formatted
text with spaces.
</pre>
</td>
<td>Preserves spaces and line breaks</td>
</tr>
</table>
</body>
</html>
27 Divyanshi Badoni G2
OUTPUT
27 Divyanshi Badoni G2
Q2. write an HTML code to draw the following figure:
*
* *
* **
* ***
* * * * * SOURCE
CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Divyanshi Sajwan G2 28</title>
</head>
<body>
<pre>
</pre>
<footer style="position: fixed; bottom: 0; font-size: 2rem; width: 100%; background-
color:aliceblue; text-align: center; padding: 0.2rem;">
</footer>
</body>
</html>
27 Divyanshi Badoni G2
OUTPUT
27 Divyanshi Badoni G2
Q3. Create an HTML program to create the following table:
SOURCE CODE
<!DOCTYPE html>
<html>
<head>
<title>Divyanshi Sajwan G2 28 </title>
</head>
<body>
<table border=1>
<tr>
<th>Sr. No.</th>
<th>Course</th>
<th>Subject</th>
<thcolspan="2">Marks</th>
<thcolspan="2">Category</th>
<th rowspan="2">Practical/Theory</th>
</tr>
<tr>
<thcolspan="3"></th>
<th>Internal</th>
<th>External</th>
<th>Internal</th>
<th>External</th>
<th></th>
</tr>
<tr>
<td rowspan="4">1</td>
<td rowspan="4">MBA</td>
<td>Managment Accounting</td>
<td>30</td>
<td>70</td>
<td>-</td>
<td>& 10004;</td>
27 Divyanshi Badoni G2
<td>Theory</td>
</tr>
<tr>
<td>Information Technology</td>
<td>30</td>
<td>70</td>
<td>-</td>
<td>& 10004;</td>
<td>T and P</td>
</tr>
<tr>
<td>Basics of Marketing</td>
<td>30</td>
<td>70</td>
<td>-</td>
<td>& 10004;</td>
<td>Theory</td>
</tr>
<tr>
<td>E-Commerce</td>
<td>50</td>
<td>-</td>
<td>& 10004;</td>
<td>-</td>
<td>Theory</td>
</tr>
<tr>
<td rowspan="6">2</td>
<td rowspan="6">MCM</td>
<td>Visual Basic</td>
<td>30</td>
<td>70</td>
<td>-</td>
<td>& 10004;</td>
<td>T and P</td>
</tr>
<tr>
<td>Internet Technology</td>
<td>30</td>
<td>70</td>
<td>-</td>
<td>& 10004;</td>
<td>T and P</td>
</tr>
<tr>
<td>Network Technology</td>
<td>30</td>
<td>70</td>
27 Divyanshi Badoni G2
<td>-</td>
<td>& 10004;</td> <td>Theory</td>
</tr>
<tr>
<td>VB.Net</td>
<td>30</td>
<td>70</td>
<td>-</td>
<td>& 10004;</td>
<td>T and P</td>
</tr>
<tr>
<td>Linux</td>
<td>30</td>
<td>70</td>
<td>-</td>
<td>& 10004;</td>
<td>T and P</td>
</tr>
<tr>
<td>ISA</td>
<td>50</td>
<td>-</td>
<td>& 10004;</td>
<td>-</td>
<td>Theory</td>
</tr>
</table>
</body>
</html>
27 Divyanshi Badoni G2
OUTPUT
27 Divyanshi Badoni G2
Q4. Write an HTML program to create table related tags with hyperlinks.
SOURCE CODE
<!DOCTYPE html>
<html>
<head><title>Divyanshi Sajwan G2 28</title> </head>
<body>
<h2>table with mobile connections</h2>
<table border="1">
<tr>
<td><img src="https://th.bing.com/th/id/OIP.aBEE7urLoM4-Hj1oGrT5hQHaE8?rs=1&pid
=ImgDetMain"alt="vodafone" width="70" height="70"></td>
<td><img src =https://th.bing.com/th/id/OIP.tE5rdmNKz_ COsdfuM7lCpwHaIF?rs=1&
pid=ImgDetMain alt="airtel" width="70" height="70"></td>
<td><img src="https://th.bing.com/th/id/OIP.i6fpg5XVlIyULfdFeBO69gHaFs?
rs=1&pid=ImgDetMain" alt="tata indicom" width="70" height="70"></td>
<td><img src="https://th.bing.com/th/id/OIP.56knE4xh1J3_V2Si9UKUTAHaEf?rs=1
&pid=ImgDetMain"
alt="idea" width="70" height="70"></td>
</tr>
<tr>
<td><img src="https://th.bing.com/th/id/OIP.lVKRyTlNfB0yPPN4-aWH4wHaEK?rs =
1&pid=ImgDetMain" alt="docomo"
width="70" height="70"></td>
<td colspan="2">Table with images</td>
<td><img src="https://th.bing.com/th/id/OIP.56knE4xh1J3_V2Si9UKUTAHaEf?
rs=1&pid=ImgDetMain "
alt="hello" height="70" width="70"></td>
</tr>
<tr>
<td><img src=https://logos-world.net/wp-content/uploads/2020/11/Jio-Logo.png
alt="jio" height="70" width="70"></td>
<td><img src=https://logos-world.net/wp-content/uploads/2020/11/Jio-Logo-2014-2016.png
alt="jio"
height="70" width="70"></td>
<td><img src="https://ceohangout.com/wp-content/uploads/2016/03/tata-docomo-logo-HD.jpg
" alt="do"
height="70" width="70"></td>
<td><img src="https://logos-world.net/wp-content/uploads/2023/03/Hutch-Logo-2010.png"
alt="hutch"
height="70" width="70"></td>
</tr>
</table>
</body></html>
27 Divyanshi Badoni G2
OUTPUT
27 Divyanshi Badoni G2
Q5. Create a webpagewiththefollowingusingHTML:
I.Toembed animage mapina webpage
II.Tofixthehot spots
III. Showall therelatedinformation whenthehotspotsareclicked
Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initialscale=1.0">
<title>Image Map Example</title>
</head>
<body>
<img src="FullMoon2010.jpg"
alt="Clickable Image" usemap="#map1">
<map name="map1">
<area shape="circle"
coords="109,109,95"
href="https://en.wikipedia.org/wiki/Moon
" target="f1"> </map>
<iframe src=""
frameborder="1"
height="400px" width="400px"
name="f1"></iframe>
</body>
</html>
27 Divyanshi Badoni G2
OUTPUT
27 Divyanshi Badoni G2
Q6. Create a web page having frames as follows:
The frame which includes Objective, Personal Information etc. are the
hyperlinks. Display the relevant information in the next frame on selecting
the link. The information should be well formatted.
SOURCE CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Divyanshi Sajwan G2 28</title>
<style>
td{
border: 1px solid black;
padding: 10px;
vertical-align: top;
} a{ color: green; text-
decoration: none;
}
a:active{ color:
red; } a:visited{
color: blue;
}
</style>
</head>
<body>
<table style="width: 800px;">
<tr>
<td colspan="3" style="text-align: center;">
<h1>Graphic Era Hill University</h1>
<p>Turning Dreams into reality</p>
27 Divyanshi Badoni G2
</td>
</tr>
<tr>
<td style="width: 20%;">
<ul style="list-style-type:none; padding: 0%;">
<li><a href="#objective" onclick="showcontent('Provide high quality education and to
develop
students into socially responsible professionals')">objective</a></li>
<li><a href="#personal" onclick="showcontent('It has a private policy that outlines how the
university uses and protects personal information')">personal information</a></li>
<li><a href="#Fees structure" onclick="showcontent('fees ')">fees structure</a></li>
<li><a href="#education" onclick="showcontent('education')">education</a></li>
<li><a href="#experience" onclick="showcontent('experience')">experience</a></li>
<li><a href="#achievements" onclick="showcontent('achievements')">achievements</a></li>
<li><a href="#other" onclick="showcontent('other')">other</a></li>
</ul>
</td>
<td style="width: 60%;" id="content">
<p>Display information here of selected link</p>
</td>
<td style="width: 20%;">
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgH==”>
</td>
</tr>
<tr>
<td colspan="3" style="text-align:center;">
<p>Your contact details</p>
</td>
</tr>
</table>
</body>
</html>
27 Divyanshi Badoni G2
OUTPUT
27 Divyanshi Badoni G2
Q7.Write a HTMLcode for the following snapshot.
SOURCE CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>Divyanshi Sajwan G2 28</title>
</head>
<body>
<h3>Form</h3>
<form action="">
<fieldset>
<legend>
Basic Information
</legend>
<label for="1">Full Name:</label>
<input type="text" id="1">
<br>
<br>
<label for="2">Birth Date:</label>
<input type="text" id="2">
<br>
<br>
<label for="">Gender:</label>
<input type="radio" id="3" name="Gender">
<label for="3">Male</label>
<input type="radio" id="4" name="Gender">
<label for="4">Female</label>
<br>
<br>
<label for="5">Address:</label>
27 Divyanshi Badoni G2
<input type="text" id="5">
<br>
<br>
<label for="6">Phone Number:</label>
<input type="text" id="6">
</fieldset>
<br>
<fieldset>
<legend>
Extra Information
</legend>
<label for="7">Interests:</label>
<input type="checkbox" name="" id="8">
<label for="8">Books</label>
<input type="checkbox" name="" id="9">
<label for="9">Movies</label>
<input type="checkbox" name="" id="10">
<label for="10">Video Games
</label>
<br>
<br>
<label for="11">Favourite Color : </label>
<input type="color" id="11">
</fieldset>
<br>
<buttontype="submit">SendData</button>
<button type="reset">Reset Data</button>
</form>
</body>
</html>
OUTPUT
27 Divyanshi Badoni G2
Q8. Create a web page of customer profile for data entry of customers in a
Hotel, The profile should include Name, Address, Age, gender, Room
Type (A/C, Non-A/C or Deluxe), Type of payment (Cash, Credit/Debit
Card or Coupons).
SOURCE CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>Divyanshi Sajwan G2 28</title>
</head>
<body>
<h2><center>Hotel Customer Profile</center></h2>
<form action="">
<fieldset>
<legend>Customer Information</legend>
<label for="1">Name:</label>
<input type="text" name="" id="1">
<br>
<br>
<label for="2">Address:</label>
<input type="text" name="" id="2">
<br>
<br>
<label for="5">Age: </label>
<input type="number" id="5">
<br>
<br>
<label for="">Gender:</label>
<input type="radio" id="3" name="Gender">
<label for="3">Male</label>
<input type="radio" id="4" name="Gender">
<label for="4">Female</label>
<br>
</fieldset>
<br>
<fieldset>
<legend>Room Details</legend>
<select id="room" name="room">
<option value="">Select Room Type</option>
<option value="1">A/C</option>
<option value="2">Non-A/C</option>
<option value="3">Deluxe</option>
</select>
</fieldset>
27 Divyanshi Badoni G2
<br>
<fieldset>
<legend>Payment Options</legend>
<label for="10">Payment Type:</label>
<br>
<br>
<input type="radio" id="11" name="payment" value="Cash">
<label for="11">Cash</label>
<input type="radio" id="12" name="payment" value="Credit/Debit Card">
<labelfor="12">Credit/Debit Card</label>
<input type="radio" id="13" name="payment" value="Coupons">
<label for="13">Coupons</label>
</fieldset>
<br>
<button type="submit">Send Data</button>
<button type="reset">Reset Data</button>
</form>
</body>
</html>
OUTPUT
27 Divyanshi Badoni G2
Q9. Demonstrate the use of following HTML5 Tags:
SOURCE CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>Divyanshi Sajwan G2 28</title>
</head>
<body>
<!-- Header Tag -->
<h3>Header Tag</h3>
<header>
<center><h3>All Types of Tag</h3></center>
</header>
<!-- Video Tag -->
<h3>Video tag</h3>
<video width="320" height="240" controls>
<source src="sample.mp4"
type="video/mp4"> Your browser does not
support the video tag.
</video>
<br>
<br>
<!-- Audio Tag -->
<h3>Audio Tag</h3>
<audio controls>
<source src="Milne Hai Mujhse Aayi.mp3">
</audio>
<br>
<br>
<!-- Nav Tag -->
<h3>Nav Tag</h3>
<nav>
<a href="image.png">image</a>
<br>
<a href="tablewithhyperlink.html">Table</a>
<br>
27 Divyanshi Badoni G2
<a href="2.html">Page</a>
</nav>
<br>
<h3>Embed Tag</h3>
<embed type="" src="image.png" width="300" height="200">
<br>
<h3>Datalist Tag</h3>
<label for="browser">Choose your browser from the list:</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<br>
<h3>bdi Tag</h3> User<bdi>
<المستخدم اسم/bdi>has10points
<br>
<h3>Article tag</h3>
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008.
Chrome is the world's most popular web browser today!</p>
</article>
<br>
<h3>Output Tag</h3>
<formoninput="result.value=parseInt(num1.value) +parseInt(num2.value)">
<label for="num1">Number 1:</label>
<input type="number" id="num1" name="num1" value="0">
<label for="num2">Number 2:</label>
<input type="number" id="num2" name="num2" value="0">
<p>Result: <output name="result" for="num1 num2"></output></p>
</form>
<h3>Footer Tag</h3>
</body>
</html>
27 Divyanshi Badoni G2
OUTPUT
27 Divyanshi Badoni G2
Q10. Design an HTML page to create the following list.
SOURCE CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Divyanshi Sajwan G2 28</title>
</head>
<body>
<h2>Programming Topics</h2>
<ol>
<li><strong>Programming Languages</strong>
<ul>
<li><strong>Python</strong>
<ul>
<li>Frameworks
<ol>
<li>Django</li>
<li>Flask</li>
</ol>
</li>
<li>Libraries
<ul>
27 Divyanshi Badoni G2
<li>NumPy</li>
<li>Pandas</li>
<li>Matplotlib</li>
</ul>
</li>
</ul>
</li>
<li><strong>Java</strong>
<ul>
<li>Core Concepts
<ul>
<li>OOP</li>
<li>Multithreading</li>
<li>Exception Handling</li>
</ul>
</li>
<li>Frameworks
<ol>
<li>Spring</li>
<li>Hibernate</li>
</ol>
</li>
</ul>
</li>
</ul>
</li>
<li><strong>Web Development</strong>
<ol>
<li><strong>Frontend</strong>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript
<ul>
<li>React</li>
<li>Vue.js</li>
<li>Angular</li>
</ul>
</li>
</ul>
</li>
<li><strong>Backend</strong>
<ul>
<li>Node.js</li>
<li>PHP</li>
<li>Ruby on Rails</li> </ul> </li> </ol> </li> </ol> </body> </html>
27 Divyanshi Badoni G2
OUTPUT
27 Divyanshi Badoni G2
CSS
Q11. Create a web page to show all hyperlinks with following specification:
• default color is pink
• activecolor is blue
• visitedcolor is green
• hyperlink should be without underline
SOURCE CODE
<!DOCTYPE html>
<html>
<head>
<title>Divyanshi Sajwan G2 28</title>
<style>
a{
text-decoration:
none; color: pink; }
a:visited {
color: green;
}
a:active
{
color: blue;
}
</style>
</head>
<body>
<h2>Styled Hyperlinks</h2>
<p><a href="https://www.example.com">Example Website</a></p>
<p><a href="https://www.wikipedia.org">Wikipedia</a></p>
<p><a href="https://www.google.com">Google</a></p>
</body>
</html>
27 Divyanshi Badoni G2
27 Divyanshi Badoni G2
Q12.Create boxshadow and text shadow using CSS3.
SOURCE CODE
<!DOCTYPE html>
<html>
<head>
<title>Divyanshi Sajwan G2 28</title>
<style> .box { width: 300px; padding: 20px; margin: 50px auto;
background-color: #fce4ec; box-shadow: 10px 10px 20px rgba(0,
0, 0, 0.3); /* Box Shadow */ text-align: center;
}
.box h2 { color: #c2185b; text-shadow: 2px 2px 4px rgba(0, 0,
0, 0.4); /* Text Shadow */ }
</style>
</head>
<body>
<div class="box">
<h2>Beautiful Shadows</h2>
<p>This box has a nice shadow effect!</p>
</div>
</body>
</html>
OUTPUT
27 Divyanshi Badoni G2
Q13. Create rounded corners using CSS3.
SOURCE CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Divyanshi Sajwan G2 28</title>
<style>
.rounded-box { width: 200px;
height: 100px; background-
color: #4CAF50; color:
white; text-align: center;
line-height: 100px;
border-radius: 15px; /* Rounded corners */
}
</style>
</head>
<body>
<div class="rounded-box">
Rounded Corners
</div>
</body>
</html>
OUTPUT
27 Divyanshi Badoni G2
Q14. Create a web page to show newspaper layout effects on contents given
in web page (i.e. in multiple columns).
SOURCE CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Divyanshi Sajwan G2 28</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 40px;
background: #fff;
color: #333;
}
.container { max-
width: 800px;
margin: auto;
}
.headline { font-size:
24px; font-weight:
bold; text-align:
center; margin-
bottom: 20px;
}
.newspaper { column-
count: 3; column-gap:
30px;
column-rule: 1px solid #ccc; text-
align: justify;
}
</style>
</head>
<body>
<div class="container">
<div class="headline">Simple Newspaper Layout</div>
<div class="newspaper">
27 Divyanshi Badoni G2
<p>
This is an example of a newspaper-style layout using multiple columns.
It helps present text in a more readable and visually appealing way.
Columns are useful for articles, newsletters, or any content-heavy page.
</p>
</div>
</div>
</body>
</html>
OUTPUT
27 Divyanshi Badoni G2
Q15. Create a web page to show transition effect in such a way so that
elements gradually change from one style to another style.
SOURCE CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Divyanshi Sajwan G2 28</title>
<style>
body {
height: 100%; margin: 0;
padding: 0; border: 5px solid
rgb(13, 13, 14); box-sizing:
border-box;
}
body {
display: flex; flex-direction:
column; justify-content:
space-between;
font-family: Arial, sans-serif;
}
.box { width: 200px;
height: 200px;
background-color:
#3498db; margin: 0 auto;
transition: all 1.5s ease;
border-radius: 0;
}
.box:hover { background-color:
#e74c3c; transform:
rotate(360deg) scale(1.2); border-
radius: 50%;
}
h1 {
text-align: center; margin-
bottom: 20px;
}
footer{ font-size:
1.5rem; text-
align: center;
}
27 Divyanshi Badoni G2
</style>
</head>
<body>
<h1>Transition Effect Example</h1>
<div class="box"></div>
</body>
</html>
OUTPUT
27 Divyanshi Badoni G2
Q16. Create a web page to show fixed background image (this image will not
scroll with the rest of the page).SOURCE CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Divyanshi Sajwan G2 28</title>
<style>
body {
margin: 0; font-
family: sans-serif;
background-image: url('https://images.unsplash.com/photo-1506744038136- 46273834b3fb?
auto=format&fit=crop&w=1920&q=80')
; background-attachment: fixed; background-size:
cover; background-position: center; color: white;
padding: 20px;
}
.content { max-
width: 600px;
margin: auto;
}
p{
margin-bottom: 40px;
line-height: 1.6;
}
</style>
</head>
<body>
<div class="content">
<h1>Fixed Background Image</h1>
<p>This is a simple example showing how a background image can stay fixed while you scroll the
content.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae eros non ipsum porttitor
sagittis.</p>
<p>Scroll down to see the effect continue...</p>
<p>More content here... just to make scrolling happen.</p>
<p>And a little more... now you're at the end!</p>
</div>
</body>
</html>
27 Divyanshi Badoni G2
OUTPUT
27 Divyanshi Badoni G2
Q17. Create a web page to position a background image and repeat the image
horizontally or vertically.
SOURCE CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Divyanshi Sajwan G2 28</title>
<style>
body {
margin:
0; padding: 20px; font-
family: sans-serif;
background-color:
#f5f5f5;
}
h2 {
text-align: center;
}
.box { height: 250px;
width: 90%; max-
width: 900px; margin:
30px auto; border: 2px
solid #333; color:
white; display: flex;
align-items: center;
justify-content: center;
font-size: 16px; text-
align: center;
}
.x { background-image: url("https://www.transparenttextures.com/patterns/brick-
wall.png"); background-repeat: repeat-x; background-color: #007BFF;
}
.y { background-image: url("https://www.transparenttextures.com/patterns/brick-
wall.png"); background-repeat: repeat-y; background-color: #28a745;}
</style>
</head>
<body>
<div class="box x"> background
image horizontally .
</div>
27 Divyanshi Badoni G2
<div class="box y">
background image vertically .
</div>
</body>
</html>
OUTPUT
27 Divyanshi Badoni G2
Q18. Create an HTML page to demonstrate all types of CSS position
properties (static, relative, absolute, fixed, and sticky).
SOURCE CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Divyanshi Sajwan G2 28</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0 20px;
}
.box { padding: 10px;
color: white; margin-
bottom: 30px;
}
.static-box { background-
color: steelblue;
position: static;
}
.relative-box {
background-color:
green; position: relative;
top: 20px; left: 20px;
}
.absolute-container
{ position: relative; height:
200px; background-color:
#f0f0f0; margin-bottom:
30px;
}
.absolute-box { background-
color: darkred; position:
absolute; top: 10px; left:
10px; width: 150px;
}
27 Divyanshi Badoni G2
.fixed-box { background-
color: purple;
position: fixed;
bottom: 10px;
right: 10px;
padding: 15px; z-
index: 1000;
}
.sticky-container {
height: 300px;
background: linear-gradient(#ddd, #aaa); padding-
top: 50px;
}
.sticky-box { background-
color: orange; position:
sticky; top: 0; padding:
10px;
}
.spacer { height:
1000px;
}
</style>
</head>
<body>
<h1>CSS Position Properties Demo</h1>
<div class="box static-box">Static Position (default)</div>
<div class="box relative-box">Relative Position (moves 20px from top and left)</div>
<div class="absolute-container">
<div class="box absolute-box">Absolute Position (inside a relative container)</div>
</div>
<div class="box fixed-box">Fixed Position (always in bottom-right corner)</div>
<div class="sticky-container">
<div class="box sticky-box">Sticky Position (sticks to top on scroll)</div>
<div class="spacer"></div>
</div>
</body>
</html>
27 Divyanshi Badoni G2
OUTPUT
27 Divyanshi Badoni G2
Q19. Design a web page using CSS which includes the following
i. Use different font styles ii. Set background image for both the page
and single elements on page. iii. Control the repetition of image with
background-repeat property iv. Define style for links as a:link,
a:active, a:hover, a:visited v. Add customized cursors for links. vi.
Work with layers.
SOURCE CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Divyanshi Sajwan G2 28</title>
<style>
/* Page background */
body {
background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e'); /* beach
image */ background-repeat: no-
repeat; background-size:
cover; font-family: Arial,
sans-serif;
margin: 0;
padding: 20px;
}
/* Font styles */
h1 {
font-family: 'Georgia', serif;
color: white;
}
p{
font-family: 'Courier New', monospace;
font-size: 16px;
color: white;
}
/* Element background image */
.highlight { background-image: url('https://images.unsplash.com/photo-1593642634367-
d91a135587b5'); /* laptop
image */ background-repeat: no-
repeat; background-position: right
center; background-size: 100px;
padding: 20px; padding-right:
130px; margin-top: 20px;
27 Divyanshi Badoni G2
background-color: rgba(255, 255, 255, 0.8);
color: #333; border-radius: 10px;
}
/* Link styles */
a:link {
color: #00f; text-decoration: none; cursor: url('https://cur.cursors-
4u.net/cursors/cur-2/cur119.cur'), auto;
}
a:visited {
color: #551A8B;
}
a:hover {
color: red; text-decoration: underline; cursor: url('https://cur.cursors-
4u.net/cursors/cur-2/cur121.cur'), pointer;
}
a:active
{ color:
green;
}
/* Working with layers using z-index */
.layer1, .layer2 {
position:
absolute; top:
300px; left: 50px;
width: 300px;
height: 150px;
padding: 20px;
color: white;
}
.layer1 { background-color: rgba(0, 0,
255, 0.6); z-index: 1;
}
.layer2 { background-color: rgba(255,
0, 0, 0.6); z-index: 2; top: 350px; left:
100px;
}
</style>
</head>
<body>
<h1>Welcome to the Stylish Web Page</h1>
<p>This page demonstrates various CSS features.</p>
27 Divyanshi Badoni G2
<div class="highlight">
27 Divyanshi Badoni G2
This div uses a background image positioned to the right.
</div>
<p>
Visit <a href="https://www.example.com" target="_blank">Example</a> for more!
</p>
<div class="layer1">Layer 1 (blue, behind)</div>
<div class="layer2">Layer 2 (red, on top)</div>
</body>
</html>
27 Divyanshi Badoni G2
OUTPUT
27 Divyanshi Badoni G2
