Scribd
Upload
12 views

Week 4

html codes

Uploaded by

pravallikaallipilli1
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
12 views

Week 4

html codes

Uploaded by

pravallikaallipilli1
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/ 14

18/12/23

WEEK-4

38
21331A1204
Objective: Designing of rich GUI with styling using CSS.
Aim: Design a static webpage for online book store using Frames
Program:
Frameset page:
<html>
<frameset rows="15%,*">
<frame name="top" src="top.html" />
<frameset cols="15%,*">
<frame name="left" src="left.html" />
<frame name="dis"/>
</frameset>
</frameset>
</html>
Top Page:
<html>
<head>
<title>BOOK STORE</title>
</head>
<body>
<div style="background-color:gray; float:left; width:1500px; height:70px;">
<table>
<tr>
<td>
<img src="Amazon.jpg" width="100px" height="50px">
</td>
<td> &emsp; &emsp;</td>
<td>Deliever to<br>
<select>
<option>select</option>
<option>Mumbai</option>
<option>Hyderabad</option>
<option>Bengalore</option>
<option>Vishakapatnam</option>
<option>Delhi</option>
</select>
</td>
<td>&emsp; &emsp; </td>
<td>&emsp; &emsp; </td>
<td><input style="width:400px;" type="text" placeholder="Search here"> </td>
39
21331A1204
<td width="270px">
<button style="width: 31px; height: 31px; padding-right: 26px; background-color:yellow;">
<img src="search.png" width="20px" height="20px"></button></td>
<td width="90px"><a href="home.html">Home</a></td>
<td width="90px"><a href="login.html">Login</a></td>
<td width="90px"><a href="orders.html">Orders</a></td>
<td><a href="CART.html">Cart</a></td>
<td>&emsp; &emsp; &emsp;</td>
<td>&emsp; &emsp; &emsp; &emsp;</td>
</tr>
</table>
</div>

Left side menu:

<html>
<div style="float:left;background-color:lightgray; width:200%; height:600px;">
<ul type="none">
<li style="height:5%"><li>
<li style="height:5%"><a href="home.html" target="dis">Home</a><hr></li>
<li>&emsp; &emsp;</li>
<td width="90px"><a href="login.html" target="dis">Login</a><hr></td>
<li>&emsp; &emsp;</li>
<li style="height:5%"><a href="sign up.html" target="dis">SignUp</a><hr></li>
<li>&emsp; &emsp;</li>
<li style="height:5%"><a href="profile.html" target="dis">Profile</a><hr></li>
<li>&emsp; &emsp;</li>
<li style="height:5%"><a href="CART.html" target="dis" >Cart</a><hr></li>
<li>&emsp; &emsp;</li>
<li style="height:5%"><a href="payment.html" target="dis">Payment</a><hr></li>
<li>&emsp; &emsp;</li>
<ul>
</div>
</html>

40
21331A1204
Outputs:
Frame Page:

Payment page:

41
21331A1204
Home Page:

42
21331A1204
Sign in page:

Signup Page :

43
21331A1204
Profile Page :

Cart Page:

44
21331A1204
Aim: Design a web page to show CSS demo

Program:
<html>
<head>
<title>Css properties</title>
<style>
.ol1{
background-color:hotpink; padding: 20px;
list-style-image: url('arrow.png');
list-style-position:inside;
}
.ol1 li{
padding: 5px; background-color:pink;
}
.ul1{
background-color: rgb(218, 123, 0); padding: 30px;
list-style-image:url('check.png');
list-style-position:inside;
}
.ul1 li{
background-color: orange; margin: 10px;
}
.box{
width: 350px; height: 200px;
background-color: lightblue; border: 20px solid purple; padding: 30px;
margin: 50px; color: white;
}

.text-div{ width: 700px;


border: 2px solid black;
}
h1.a{
text-align: center;
text-transform: uppercase; color: rgb(67, 156, 225);

}
p.x{
text-indent: 60px; text-align: justify; letter-spacing: 2px;
45
21331A1204
}
a.a{
text-decoration: none; color: rgb(247, 13, 204);
}
h3{
background-color: blueviolet; color: white;
}
p.a{
text-decoration: overline;
}
p.b{
text-decoration: underline;
}
p.c{
text-decoration: line-through;
}
p.d{
text-transform: capitalize;
}
h1.b{
text-shadow: 3px 3px rgb(0, 108, 138);
}
.container1{
border: 2px solid gray; height: 400px;
width: 1100px;
}
div.gallery { margin: 5px;
border: 1px solid #ccc; float: left;
width: 250px;
}

div.gallery:hover {
border: 1px solid orange;
}

div.gallery img { width: 100%;


height: 40%;
}

46
21331A1204
div.desc { padding: 15px;
text-align: justify;
}
img{
width: "";
height: "";
}
.links{
border: 2px solid gray;

}
a:link { color: red;
}
a:visited { color: green;
}
a:hover { color: hotpink;
}
a:active { color: blue;
}

p.parag{ display: none;


background-color:DeepPink; padding: 20px;
}
div.pseudo:hover p.parag{ display: block;
}
.pseudo-text::first-line{ color: crimson;
}
.pseudo-text::first-letter{ font-size: xx-large; color: blueviolet;

}
</style>
</head>
<body>
<div>
<h1>CSS lists</h1> This is an ordered list
<ol class="ol1">
<li>Morning</li>
<li>Afternoon</li>
47
21331A1204
<li>Night</li>
</ol>
This is an unordered list
<ul class="ul1">
<li>Images</li>
<li>Videos</li>
<li>Audios</li>
</ul>
</div>
<hr>
<h1>CSS Box model</h1>
<div class="box">
Box model consists of content,padding,borders and margins.
</div>
<hr>
<div class="text-div">
<h1 class="a">Text Properties</h1>
<p class="x">This is a text written by changing some text properties like,
text-align, text-transform,text-indent, letter-spacing, text-decoration and color. You can also refer
the W3 schools website from
<a class="a" href="https://www.w3schools.com/css/css_text.asp"> this link.</a>to know more
about text properties and how to use them.
</p>
<h3>This is made by adding background-color and text color</h3>
<p class="a">This is overlined text</p>
<p class="b">This is underlined text</p>
<p class="c">This is line-through text</p>
<p class="d">This is capitalized text</p>
<h1 class="b">This is a Shadow effect</h1>
</div>
<br>
<div class="container1">
<h1 style="color: rgb(34, 144, 241);text-align: center;">IMAGE GALLERY</h1>
<div class="gallery">
<a target="_blank" href="1.jpg">

<img src="1.jpg" alt="Cinque Terre">


</a>
<div class="desc">Add a description of the image here</div>

48
21331A1204
</div>
<div class="gallery">
<a target="_blank" href="2.jpg">
<img src="2.jpg" alt="Forest">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="3.jpg">
<img src="3.jpg" alt="Northern Lights">
</a>
<div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
<a target="_blank" href="4.jpg">
<img src="4.jpg" alt="Mountains">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<hr>
<div class="links">
<h2>CSS Links </h2>
<a class="l" href="css.html">This is a link.</a>
<br> This link will be pink in color(by default)
<br>It will change to red color when hover
<br>It will change to blue color when you click on it
</div>
<hr>
<h1>Pseudo classes and elements</h1>
<div class="pseudo">
Hover on this to view the paragraph
<p class="parag">This is made using pseudo class</p>
</div>

<div class="pseudo-text">
This is a paragraph made by using pseudo elements.<br>
</div>
49
21331A1204
The first line will be of different color and the first letter will be of different color and size
</body>
</html>

OUTPUT :

50
21331A1204
51
21331A1204

You might also like