Scribd
Upload
139 views17 pages

Webdesfile

The document provides code to design a cart page using HTML and Bootstrap. The code includes styling for the body with a lightcoral background color and larger font size. A table is defined with border collapse, full width, and height. Row styles alternate background colors. The page likely displays items added to a cart in a table format.

Uploaded by

Yatin Sharma
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
139 views17 pages

Webdesfile

The document provides code to design a cart page using HTML and Bootstrap. The code includes styling for the body with a lightcoral background color and larger font size. A table is defined with border collapse, full width, and height. Row styles alternate background colors. The page likely displays items added to a cart in a table format.

Uploaded by

Yatin Sharma
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/ 17

PROGRAM-1

->design a static webpage using html tags.

Input html-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
text-align: center;
}
body{
background-color: blueviolet;

}
</style>
</head>
<body>
<img src="mitlogo.webp" height="130px" width="129px" >
<h1>WEB DESIGNING</h1>
<p><b> Web designing </b>is the process of planning, conceptualizing, and
implementing the plan for designing a website in a way that is
functional and offers a
good user experience. User experience is central to the web designing
process. Websites
have an array of elements presented in ways that make them easy to
navigate. Web designing
essentially involves working on every attribute of the website that
people interact with,
so that the website is simple and efficient, allows users to quickly
find the information
they need, and looks visually pleasing. All these factors, when
combined, decide how well
the website is designed. </p>
<p><b>Key Benefit of Having a Good Web Design is mainly- <br>A good
web design can transform how your brand speaks to your audience.</b></p>
<B>An Impactful First Impression</B>
With a well-designed website, it becomes easier to make a grand first
impression. For
brands, it is all about how potential customers or clients view their
business, and this
is greatly influenced by how they view their website. Your website represents
your brand,
and when you focus on web designing, it can help you create a compelling and
powerful
first impression.
<h2>VISUAL ELEMENTS </h2>
<ul>
<LI>font</LI>
<LI> Colors</LI>
<LI> Shapes</LI>
<LI> Layout</LI>
<LI> Icons</LI>
</ul
</body>
</html>

OUTPUT-
PROGRAM-2
->Design a student’s table using HTML tags.

INPUT-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html{
background-color: aqua;
}
table{
border-collapse: collapse;
height: 500px;
width: 100%;
background-color: antiquewhite;

}
</style>
</head>
<body>
<h1>STUDENT DATA TABLE</h1>
<table border="1">
<tr>
<th>Student name</th>
<th>Roll No.</th>
<th>DOB</th>

</tr>
<tr>
<td>Aniket</td>
<td>66</td>
<td>1/1/2004</td>

</tr>
<tr>
<td>Priyanshu</td>
<td>13</td>
<td>1/2/2004</td>
</tr>
<tr>
<td>Setu</td>
<td>47</td>
<td>6/1/2004</td>

</tr>
<tr>
<td>karan</td>
<td>14</td>
<td>7/3/2004</td>
</tr>
<tr>
<td>yash</td>
<td>56</td>
<td>7/2/2004</td>
</tr>

</table>
</body>
</html>

Output-
PROGRAM-3
->Design a Frame of Homepage using HTML.

INPUT-

<html>
<frameset rows ="15%,9%,76%" border="4" solid blanchedalmond>
<frameset cols ="20%,80%" border="4" solid blanchedalmond >
<frame src="loginpage.htm" scrolling="h0">
<frame src="aktulogo1.pn">
</frameset>
<frame src="cart.htm" name="f3" scrolling="h0">
<frameset cols="16%,85%" border="4" border color="Red">
<frame src="catalogue.htm" name="f37">
<frame src="reg.htm" name="f38">
</frameset>
</frames
</body>

OUTPUT-
PROGRAM-4
->Design a static homepage of college website using HTML and CSS.

Input-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>indexfile</title>
<link rel="stylesheet" href="aktulogo1.png">
<style>
html{
font-weight: bolder;

}
body{
font-size: x-large;
font-weight: bolder;
color: black;

}
table{
border-collapse: collapse;
height: 500px;
width: 100%;

}
img{
width: 200px;

}
.firstline{
background-color: antiquewhite;
}
.secondline{
background-color: aliceblue;
}
.l3{
background-color: antiquewhite;
}
.l4{
background-color: aliceblue;
}
.l5{
background-color: antiquewhite;
}
.l6{
background-color: aliceblue;
}

</style>
</head>

<body>

<table border="1">
<tr class="firstline">
<th><img src="aktulogo1.png" alt="aktulogo" width="70px"></th>
<th colspan="4">AKTU</th>
</tr>
<tr class="secondline">
<td>HOME</td>
<td><a href="loginpage.html">LOGIN</a></td>
<td ><a href="reg.html">REGISTRATION</a></td>
<td> <a href="catalogue.html">CATALOGUE</a></td>
<td><a href="cart.html">CART</a></td>
</tr>
<tr class="l3">
<td>CSE</td>
</tr>
<tr class="l4">
<td>ECE</td>
</tr>
<tr class="l5">
<td>EEE</td>
</tr>
<tr class="l6">
<td>CIVIL</td>
</tr>

</table>

</body>
</html>
Output-
PROGRAM-7
->Design a Login page using HTML and CSS.

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

<style>

.main{
text-align: center;
font-size: 40px;
}
html{
background-color: skyblue;
}
</style>
</head>
<body>
<div class="main">
<h1>LOGIN PAGE</h1>
<div>
USERNAME:
<input type="text" placeholder="USERNAME">
</div>
<div>
PASSWORD:
<input type="text" placeholder="PASSWORD">
</div>
<div>
<input type="submit">
<input type="reset">
</div>
</div>

</body>
</html>
Output-
PROGRAM-8
->Design a Registration page using HTML & Bootstrap

Input-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html{
background-color: lightcoral;
font-size: larger;
font-size: 30px;
}
div{
text-align: center;
}
.address{
width: 300px;
}

</style>
</head>
<body>
<div class="rmain">
<h1>REGISTRATION PAGE</h1>

1.NAME:
<input type="text"><br>
2.PASSWORD:
<input type="password"><br>

3.EMAIL ID:
<input type="text"><br>

4PHONE:
<input type="text"><br>
5.SEX:
MALE<input type="radio">
FEMALE <input type="radio"><br>

6.DATE OF BIRTH:
<input type="date"><br>
7.LANGUAGES KNOWN: <br>
ENGLISH<input type="checkbox">
HINDI <input type="checkbox">
TELGUE <input type="checkbox">
TAMIL <input type="checkbox"><br>

8.ADDRESS
<input type="text" class="address"><br>
<input type="button" value="submit">
<input type="button" value="reset">

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

Output-
PROGRAM-9
->Design a Catalogue page using HTML & Bootstrap

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

body{
background-color: aqua;
}
table{
width: 100%;
font-size: larger;
}
img{
width: 150px;
}
td{
font-size: larger;

}
.l1{
background-color: antiquewhite;
}
.l2{
background-color: aliceblue;
}
.l3{
background-color: antiquewhite;
}

</style>
</head>
<body>
<table>
<tr class="l1">
<td><img src="html book.png" alt="html book"></td>
<td>Book title:Web Designing with Html and CSS</td>
<td>Price:$50</td>
<td><img src="add to cart.jpg" alt="atc"></td>

</tr>
<tr class="l2">
<td><img src="ai.jpg" alt="ai book"></td>
<td>Title:Artificial Intelligence</td>
<td>Price:$60</td>
<td><img src="add to cart.jpg" alt="atc"></td>
</tr>
<tr class="l3">
<td><img src="python.png" alt="python book"></td>
<td>Title:Head First Python</td>
<td>Price:$65</td>
<td><img src="add to cart.jpg" alt="atc"></td>
</tr>
</table>
</body>
</html>

Output-
PROGRAM-10
->Design a Cart page using HTML & Bootstrap

Input-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-color: lightcoral;
font-size: larger;

}
table{

border-collapse: collapse;
width: 100%;
height: 500px;

}
.l1{
background-color: aliceblue;
}
.l2{
background-color: antiquewhite;
}
.l3{
background-color: azure;
}
.l4{
background-color: antiquewhite;
}

</style>
</head>
<body>
<table border="1">
<tr>
<th>Book Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Amount</th>
</tr>
<tr class="l1">
<td>Web Designing with HTML and CSS</td>
<td>$50</td>
<td>3</td>
<td>$150</td>
</tr>
<tr class="l2">
<td>Artificial Intelligence</td>
<td>$60</td>
<td>4</td>
<td>$240</td>
</tr>
<tr class="l3">
<td>Python book</td>
<td>$65</td>
<td>5</td>
<td>$325</td>
</tr>
<tr class="l4">
<td>Total Amount</td>
<td></td>
<td></td>
<td>=$715</td>
</tr>
</table>
</body>
</html>
Output-

You might also like