Scribd
Upload
8 views18 pages

Notepad code

The document contains multiple HTML examples demonstrating various web design techniques, including hover effects, data lists, fieldsets, background images, footers, ordered lists, linking web pages, table attributes, forms, and CSS styling. Each example showcases different HTML elements and CSS properties, providing a practical guide for creating web pages. The overall content serves as a resource for learning and implementing HTML and CSS in web development.

Uploaded by

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

Notepad code

The document contains multiple HTML examples demonstrating various web design techniques, including hover effects, data lists, fieldsets, background images, footers, ordered lists, linking web pages, table attributes, forms, and CSS styling. Each example showcases different HTML elements and CSS properties, providing a practical guide for creating web pages. The overall content serves as a resource for learning and implementing HTML and CSS in web development.

Uploaded by

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

Hover function

EXAMPLE
<!DOCTYPE html>
<html lang="en">

<head>
<link rel="stylesheet"
href="./bootstrap/node_modules/bootstrap-icons/font/bootstrap-icons.css">
<style>
nav div {
border: 5px solid red;
font-size: 32px;
padding: 10px;
margin-bottom: 10px;
width: 350px;
border-radius: 10px;
background-color: rgb(183, 218, 26);
}

#icons {
color: rgb(235, 5, 5);
font-weight: bold;
}

nav div:hover {
background-color: blueviolet;
color: white;
font-size: x-large;
transition: 3s;
}
</style>
</head>

<body>

<nav>
<div>
<span id="icons" class=" bi bi-facebook" Facebook></span> <span>
Facebook </span>
</div>
<div>
<span id="icons" class=" bi bi-fast-forward"></span> <span> Fast
Forward</span>
</div>
</nav>
</body>

</html>

DATA LIST DL/DT/DD


EXAMPLE

<!DOCTYPE html>
<html lang="en">

<head>
<style>
dt {
color: blue;
font-size: xx-large;
text-shadow: 12px 10px 18px black;
width: fit-content;
padding: 10px;
margin: 10px;
}

dd {
font-size: xx-large;

width: fit-content;
}
dl{
display: grid;
grid-template-columns: 4fr 8fr;
background-color: blueviolet;
border: 10px solid greenyellow;
width: 70%;
border-radius: 10px;
box-shadow: 20px 20px 19px orange;
}
</style>
</head>

<body>
<dl>
<dt> Html</dt>
<dd> Hyper text markup language</dd>
<dt> Css</dt>
<dd> It is used to define style</dd>
<dt> Java Script</dt>
<dd>It is used to language for intersaction with html</dd>
</dl>
</body>

</html>

FIELDSET/ LEGEND
EXAMPLE
<!DOCTYPE html>
<html lang="en">
<head>
<style>
fieldset{
border: 10px solid red;
width: 50%;

}
legend{
font-size: xx-large;
color: rgb(4, 205, 34);
text-align: center;
}
dl{
display: grid;
grid-template-columns: 5fr 5fr;
font-size: xx-large;
}
dd{
color: darkblue;
}

dt{
color: blueviolet;
}

</style>

</head>
<body>
<fieldset>
<legend> Shopping Item</legend>
<dl>
<dt> mobiles</dt>
<dd> 20% off</dd>
<dt> smart watch</dt>
<dd> 50% off</dd>
<dt> home appliances</dt>
<dd> 90% off</dd>
</dl>
</fieldset>
</body>
</html>

Background image
Example
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body{
background-repeat: no-repeat ;
background-position: top center;
background-size: 700px 600px;
}
</style>
</head>
<body background="./netflix,jpg.jpg ">

</bod>
</html>

Footer making design


example
html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Amazon Footer</title>
</head>

<style>
@import url('https://fonts.googleapis.com/css2?
family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,10
0;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body {
font-family: "Poppins", serif;
font-weight: 300;
font-size: 15px;
font-style: normal;
display: grid;
grid-template-rows: 1fr 10fr;
}

header {
background-color: rgb(55, 71, 90);
/* border: 2px solid black; */
color: rgb(248, 243, 243);
text-align: center;
padding: 10px;
}

section {
/* border: 2px solid red; */
background-color: rgb(35, 47, 62);
color: rgb(247, 243, 243);
}

section section{
width: 80%;
display: grid;
margin-left: 215px;
grid-template-columns: 1fr 1fr 1fr 1fr;
}

section menu{
margin-top: 40px;
/* width: 200px; */
}
footer {
padding: 30px 0 30px 0;
border-top: 1px solid rgba(255, 255, 255, 0.182);
background-color: rgb(35, 47, 62);

footer img {
width: 90px;
}

footer section {
display: grid;
margin-left: 40%;
grid-template-columns: 1fr 1fr;
width: 380px;
}
menu div{
margin-top: 5px;
}

section menu span{


color: white;
font-weight: bolder;
font-size: 20px;
}

span img{
width: 20px;
margin: 0 5px -5px 0;
}

section div span{


cursor: pointer;
border: 1px solid white;
padding: 5px 10px 5px 10px;
border-radius: 5px;

}
.a1{
width: 149px;
}
.a2{
width: 149px;
}

.a3{
width: 202px;
}
</style>

<body>
<header>
Back to top
</header>

<section>
<section>
<menu class="a1">
<span>Get to Know Us</span>
<div>About Amazon</div>
<div>Careers</div>
<div>Press Releases</div>
<div>Amazon Science</div>
</menu>
<menu class="a2">
<span>Connect with Us</span>
<div>Facebook</div>
<div>Twitter</div>
<div>Instagram</div>
</menu>
<menu class="a3">
<span>Make Money with Us</span>
<div>Sell on Amazon</div>
<div>Sell under Amazon Accelerator</div>
<div>Protect and Build Your Brand</div>
<div>Amazon Global Selling</div>
<div>Supply to Amazon</div>
<div>Become an Affiliate</div>
<div>Fulfilment by Amazon</div>
<div>Advertise Your Products</div>
<div>Amazon Pay on Merchants</div>
</menu>
<menu class="a4">
<span>Let Us Help You</span>
<div>Your Account</div>
<div>Returns Centre</div>
<div>Recalls and Product Safety Alerts</div>
<div>100% Purchase Protection</div>
<div>Amazon App Download</div>
<div>Help</div>
</menu>

</section>

</section>
<footer>
<section>
<div>
<img class="img" src="./Amazon-Logo-White-Transparent.png" alt="">
</div>
<div>
<span><img src="./lang.png" alt="">English</span>
<span><img src="./India Flag.png" alt="">India</span>
</div>
</section>

</footer>
</body>

</html>

Orderlist
numbering 123 and abc
example

<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
<ol type="1">
<li> Html</li>
<li> css</li>
<li>js</li>
<li> bootstrap</li>
<li> react</li>
<li> sql</li>
</ol>
</body>
</html>

link web page to html page


example
<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
<a href="https://www.youtube.com/" target="_blank"> Click this to open youtube
</a><br>
<a href="https://www.facebook.com/" target="_blank"> click this to open
facebook </a><br>
<a href="https://www.instagarm.com/" target="_blank"> click this to open
insatagram </a>
</body>
</html>

Table attributes
example
<!DOCTYPE html>
<html lang="en">

<head>
<title> Table and lists</title>
</head>

<body>
<H1> Html TABLE</H1>
<table>
<thead>
<tr>
<th>Name</th>
<th>Employee id</th>
<th>Employee role </th>
<th> Employee salary </th>
</tr>
</thead>
<tbody>
<tr>
<td>Ravi</td>
<td>55655</td>
<td>programmer</td>
<td> 20000</td>
</tr>
<tr>
<td>Bhola</td>
<td>11215</td>
<td>html developer</td>
<td> 30000</td>
</tr>
<tr>
<td>Divas</td>
<td> 958221</td>
<td>css developer </td>
<td>40000</td>
</tr>
</tbody>

</table>
</body>

</html>

Forms
submit function
<!DOCTYPE html>
<html lang="en">
<head>

<title>Forms</title>
</head>

<h2> Tell Me About Yourself </h2>


<form action="backend.php"></form>
<div>
Name :<input type="Name">
</div><BR>
<div>
My role: <input type="My role">
</div>
<div> <br>
email:<input type="email" name="email" >
</div>
<div><BR>
<input type="submit" value=" SUBMIT NOW">
</div>
<div><br>
<input type="date" name="Date>">

</div>
</body>
</html>

Data list Side by side


<!DOCTYPE html>
<html lang="en">
<head>
<title> data list side by side</title>
<style>
#childlist{
display: flex;
margin-bottom: 20px;
}
li{
margin-right: 40px;
margin-top: 10px;
}
</style>
</head>
<body>
<ol type="1">
<li> the element that will not return presentation directly are know as </li>
</ol>
<ol type="A" id="childlist">
<li> normal element</li>
<li> void element</li>
<li> RC data</li>
<li> Raw text</li>
</ol>
the row tent element are
<ol type="A" id="childlist">

<li> bold</li>
<li> image</li>
<li> Copy</li>
</ol>
</body>
</html>

making of home page


by css attributes.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
h2:hover{
color: red;
transition: 3s;
}
a:link{
text-decoration: none;
}
img:hover{
width: max-content;
transition: 3s;
}
a:visited{
color: green;
}
a:active{
color: red;
}
</style>
</head>
<body>
<img width="40px" src="./Bag.jpg">
<h2> heading</h2>
<a href="https://www.youtube.com/"> HOME </a>
<span> I </span>
<a href="https://www.pvrcinemas.com/" target="_blank">PVR cinema </a>
</body>
</html>

Attributes selector
form
<!DOCTYPE html>
<html lang="en">
<head>

<style>
input[type="button"]{
background-color: red;
}

</style>
</head>
<body>
<dl>
<dt> Name</dt>
<dd><input type="text"></dd>
<dt> mobile</dt>
<dd> <input type="text"><dd>
</dl>
<input type="button" value="Register">
<input type="button" value="cancel">
</body>
</html>

Border image
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container{
border: 20px solid transparent;
border-image: url("./Bag.jpg") space 50;
padding: 5px;
}
</style>
</head>
<body>
<div class="container">
container
</div>
<P> Para in container</P>
</body>
</html>

Shopping website
<!DOCTYPE html>
<html lang="en">

<head>
</head>
<style>
header,footer{
text-align: center;
color: red;
font-size: 50px;
background-color: orange;
border: 2px solid gray;
border-radius: 100px;
padding: 10px;
}
section{
display: grid;
grid-template-columns: 3fr 3fr 6fr;
height: 470px;
margin-top: 50px;
}
nav div{
font-size: 25px;
background-color: tomato;
color: white;
width: 150px;
border: 1px solid black ;
margin-bottom: 1px;
border-radius: 15px;
text-align: center;
margin-left: -10px;
}
main{
background-color: aqua;
width: 200px;
height: 200px;
}

</style>

<body>

<header> Amazon shopping</header>


<section>
<nav>
<menu>
<div>Home</div>
<div>Services</div>
<div>Gallery</div>
<div>Contact-us</div>
<div>AboutUS</div>
</menu>
</nav>
<main>
shopping main content
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo sit
provident, vel illum id rerum laboriosam corporis, doloribus architecto, nam ab
unde recusandae ea blanditiis. Aliquam numquam omnis libero harum
</main>
<article>
50% off on Electronics
</article>
<figure>
image here
<figcaption> <img src="./Bag.jpg" alt=""></figcaption>
</figure>
<dialog> help</dialog>
<aside> ads here</aside>
</section>
<footer> Copyright2025</footer>
</body>

</html>
inter document
link in html
<!DOCTYPE html>
<html lang="en">

<head>

</head>
<style>
div{
background-color: tomato;
border: 5px solid black;
padding: 10px;
margin-bottom: 20px;
}
.topics:target{
background-color: black;
color: white;
font-size: xx-large;
}
li{
display: inline;
margin-right: 50px;

a{
color: black;
font-size: 40px;
text-decoration: none;
}
</style>
<body>
<nav>
<ul>
<li><a href="#html">html</a></li>
<li><a href="#css">css</a></li>
<li> <a href="#java script">java script</a></li>
</ul>
</nav>
<div class="topics" id="html">
<h2> html</h2>
<p> Html is markup language</p>
</div>
<div class="topics" id="css">
<h2> css</h2>
<p> its define style for css</p>
</div>
<div class="topics" id="java script">
<h2> java script</h2>
<p> it is a programming language</p>
</div>
</body>

</html>

intra document
link in html
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<style>
li{
font-size: 40px;
background-color: gold;
width: 350px;
border: 5px solid black;
margin-bottom: 10px;
border-radius: 20px;
text-align: center;

</style>
<body>
<ul>
<li><a href="https://www.amazon.in/" target="_blank"> amazon shopping</a></li>
<li><a href="https://www.flipkart.com/" target="_blank"> flipkart
shopping</a></li>
</ul>
</body>
</html>

JAVA SCRIPT
DOM HIERACHY
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
function bodyload(){

window.document.forms[0].elements[0].value="Register";
window.document.forms[1].elements[1].value="login";
window.document.forms[0].elements[1].value="submit";
window.document.forms[1].elements[0].value="Enter the password";

}
</script>
</head>
<body onload="bodyload()">
<div>
<img width="250" name="pic" height="200" border="1" src="./Bag.jpg";
</div>
<div>
<form>
<h2>Register</h2>
<input type="button" name="btnregister">
<input type="email">
</form>
</div>
<div>
<form>
<h2> Login</h2>
<input type="text">
<input type="button" name="btnlogin">

</form>
</div>

</body>
</html>

DOM HEIRACHY
BY USING NAME ELEMENT

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
function bodyload(){

frmregister.btnregister.value="Register";
window.document.forms[0].Ravi.value="Bhola";
frmlogin.btnlogin.value="submit";
window.document.forms[1].elements[0].value="rendering";

}
</script>
</head>
<body onload="bodyload()">
<div>
<img width="250" height="200" border="1" src="./Bag.jpg";>
</div>
<div>
<form name="frmregister">
<h2>Register</h2>
<input type="button" name="btnregister">
<input type="email" name="Ravi">
</form>
</div>
<div>
<form name="frmlogin">
<h2> Login</h2>
<input type="text">
<input type="button" name="btnlogin">

</form>
</div>

</body>
</html>

DOM HEIRACHY
BY USING ID ELEMENT
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
function bodyload(){
document.getElementById("btrlogin").value="diavs";
document.getElementById("btrregister").value="Ravi";

}
</script>
</head>
<body onload="bodyload()">
<div>
<img width="250" height="200" border="1" src="./Bag.jpg";>
</div>
<div>
<form >
<h2>Register</h2>
<input type="button" id="btrregister">
<input type="email" >
</form>
</div>
<div>
<form >
<h2> Login</h2>
<input type="text" id="btrlogin">
<input type="button">

</form>
</div>

</body>
</html>
Hover function
EXAMPLE
<!DOCTYPE html>
<html lang="en">

<head>
<link rel="stylesheet"
href="./bootstrap/node_modules/bootstrap-icons/font/bootstrap-icons.css">
<style>
nav div {
border: 5px solid red;
font-size: 32px;
padding: 10px;
margin-bottom: 10px;
width: 350px;
border-radius: 10px;
background-color: rgb(183, 218, 26);
}

#icons {
color: rgb(235, 5, 5);
font-weight: bold;
}

nav div:hover {
background-color: blueviolet;
color: white;
font-size: x-large;
transition: 3s;
}
</style>
</head>

<body>

<nav>
<div>
<span id="icons" class=" bi bi-facebook" Facebook></span> <span>
Facebook </span>
</div>
<div>
<span id="icons" class=" bi bi-fast-forward"></span> <span> Fast
Forward</span>
</div>
</nav>
</body>

</html>

DATA LIST DL/DT/DD


EXAMPLE

<!DOCTYPE html>
<html lang="en">

<head>

<style>
dt {
color: blue;
font-size: xx-large;
text-shadow: 12px 10px 18px black;
width: fit-content;
padding: 10px;
margin: 10px;
}

dd {
font-size: xx-large;

width: fit-content;
}
dl{
display: grid;
grid-template-columns: 4fr 8fr;
background-color: blueviolet;
border: 10px solid greenyellow;
width: 70%;
border-radius: 10px;
box-shadow: 20px 20px 19px orange;
}
</style>
</head>

<body>
<dl>
<dt> Html</dt>
<dd> Hyper text markup language</dd>
<dt> Css</dt>
<dd> It is used to define style</dd>
<dt> Java Script</dt>
<dd>It is used to language for intersaction with html</dd>
</dl>
</body>

</html>

FIELDSET/ LEGEND
EXAMPLE
<!DOCTYPE html>
<html lang="en">
<head>
<style>
fieldset{
border: 10px solid red;
width: 50%;

}
legend{
font-size: xx-large;
color: rgb(4, 205, 34);
text-align: center;
}
dl{
display: grid;
grid-template-columns: 5fr 5fr;
font-size: xx-large;
}
dd{
color: darkblue;
}

dt{
color: blueviolet;
}

</style>

</head>
<body>
<fieldset>
<legend> Shopping Item</legend>
<dl>
<dt> mobiles</dt>
<dd> 20% off</dd>
<dt> smart watch</dt>
<dd> 50% off</dd>
<dt> home appliances</dt>
<dd> 90% off</dd>
</dl>
</fieldset>
</body>
</html>

#Icons how to implement


example

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="./bootstrap/node_modules/bootstrap-icons/font/bootstrap-icons.css">
</head>
<body>
<nav class="bi bi-airplane-engines"></nav>
</body>
</html>

You might also like