1) Create links on the words e.g. “Wi-Fi” and “LAN” to link them to Wikipedia pages.
<!DOCTYPE html>
<html lang=
"en">
<head>
<meta charset=
"UTF-8">
<meta name=
"viewport" content=
"width=device-width, initial-scale=1.0">
<title>Links with CSS Styling</title>
<style>
/* CSS for link styling */
a{
color: blue; /* Link color */
text-decoration: underline; /* Underline effect */
font-weight: bold; /* Bold text */
}
a:hover {
color: red; /* Hover color */
}
</style>
</head>
<body>
<p>
Welcome to our network! Make sure to connect to <a
href=
"[Link] target=
"
plug into our <a href=
"[Link]
blank">Wi-Fi</a> for wireless access, or
_
network"
area
_
_
target=
"
blank">LAN</a> for a wired connection.
_
</p>
</body>
</html>
2) Develop a web application to control over different layouts.
<html>
<body>
<header>
<h1>AMAZON</h1>
</header>
<section>
<nav>
<ul>
<li><a href="[Link]
q=amazon&oq=amazon&gs_lcrp=EgZjaHJvbWUyBggAEE
UYOTIHCAEQABiPAjIHCAIQABiPAtIBCDQ0MzlqMGoxqAIAsAIA&sourceid=chrome&ie=UTF-8">A
mazon Great Indian Festival</a></li>
<li><a href=
"#">Shop at Amazon Now</a></li>
<li>Bazaar</li>
<li>Mobiles</li>
<li>Groceries</li>
<li>Home</li>
<li>Electronics</li>
<li>Deals</li>
<li>Beauty</li>
<li>Books,Toys</li>
<li>Appliances</li></ul>
</nav>
<article>
<h2>Everything You need , Delivered to Your Door</h2>
<img src =
"[Link]" width=
"200" height =
"100">
<p>.<a href=
"[Link]">Smart electronic Appliances ,Groceries and Fashion store
E-Commerce platform</a></p>
</article>
</section>
<footer>
<p>Visit us at [Link]</p>
</footer>
</body>
<style>
*{
box-sizing: border-box;
}
header {
background-color: rgb(9, 48, 61);
text-align: center;
padding: 2px;
font-size: 25px;
color: white;
}
nav
{ float:
left;
width: 30%;
height: 300px;background: #fff;
padding: 20px;
}
nav ul {
list-style-type: none;
padding: 0;
}
article
{ float:
left;
padding: 20px;
width: 70%;
background-color: #c5e4f3;
height: 300px;
}
footer {
background-color: rgb(2, 27, 36);
padding: 10px;
text-align: center;
color: white;
}
section::after {
content: "";
display: table;
clear: both;
}
</style>
</html>
3) Develop a web application with background banner image and navigation menus.
Html code
<!DOCTYPE html>
<html lang n=
"en ">
<head>
<meta charset=
"UTF-8">
<meta name=
"viewport" content=
"width=device-width,initial-scale=1.0">
<title>Web App With Background Banner and Navigation Menu </title>
<link rel=
"stylesheet" href=
"[Link]">
</head>
<body>
<header>
<nav>
<ul>
<li><a href=
"#">Home</a></li>
<li><a href=
"#">about</a></li>
<li><a href=
"#">Services</a></li>
<li><a href=
"#">Contact</a></li></ul>
</nav>
</header>
<section class=
"banner">
<h1>Welcome to our Website</h1>
<p>Your journey to excellence begins here!</p>
</section>
<section class=
"content">
<h2>About Us</h2>
<p>This is a simple web app to showcase a banner image and navigation menus</p>
</section>
<footer>
<p>© 2025 Web Application .All rights reserved
</p>
</footer>
</body></html>
Css code
*{ margin:
0;
padding:0;
box-sizing:border-box;
}
body{
font-family:Arial,sans-serif;
}
header{
background-color:rgba(0,0,0,0.7);
position:fixed;
width:100%top:0;
left:0;
padding:10px o;
z-index:10;
}
nav ul{
list-style:none;
display:flex;
justify-content:center;
}
nav ul
li{ margin:0
20px;
}
nav ul li a {
text-decoration:none;
color:white;
font-size:18px;
padding:10px;
transition:background-color o.3s ease;
}
nav ul li a:hover{
background-color:rgba(255,255,255,0.3);
margin:0 20px;
}
.banner{
background-image:url("[Link]");
background-size:cover;
background-position:center;
color:white;text-align:center;
padding:100px 20px;
}
.banner
h1{ font-
size:48px;
margin-bottom:20px;
}
.banner
p{ font-
size:24px;
font-weight:300;
}
.content{ padding:6
0px 20px; text-
align:center;
background-color:#f4f4f4;
}
.content
h2{ font-
size:36px;
margin: bottom 20px;
}
.content
p{ font-
size:18px;
line-height:1.6;
}
footer{
text-align: center;
background-color:#333;
color:white;
padding:20px;position:relative;
bottom:0;
width:100%;
}
Download image of your wish in same folder , and give path of it near background image
…image .jpg