Web Designing Ravi

DAV institute of Engineering & Technology
(Jalandhar)
Practical file
Web Designing
Bachelor of computer Applications

Practical file
(Web designing UGCA1928)
Submitted to: Ms. Kanika Kapoor Submitted by: - Ravi Kumar

Semester: - 4th(BCA)
Uni. Roll no: - 2003566
Class Roll no: - 3213/20
1. Create a webpages of pizza shop with the help of HTML And CSS
Program:
html>
<body style="background-color:pink">
<h1 style="background-color:rgb(255, 0, 166); color:purple; text-align:center; padding: 12px">
<u>my favourite food </u>
</h1>
<h3 style="text-align: center; color: red; border: 3px double rgb(0, 255, 85); padding: 10px">
<marquee direction="up" ; scroll amount"4"> pizza</marquee>
</h3>
<p style="color:green; text-align: center; border: 3px solid green; padding: 20px;"> i like pizza a
lot , it is very
cheasy & testy</p>
<marquee scrollamount="52">
<center><img
src="https://media-cdn.tripadvisor.com/media/photo-s/13/31/89/b9/supreme-piza.jpg"
style=" border: 5px double rgb(26, 126, 198); width: 500px" ; height: 250px;
align="center"></center>
</marquee>
<p
style="color: blue; background-color:rgb(0, 213, 255); text-align: center; border: 3px solid green;
padding: 12px; margin: 10px;">
farmhouse is my favourite</p>
</body>
</html>
2.Create a webpage to display 4 famous place in this world In HTML
Program:
<html>
<body>
<h1>4 famous Places of World</h1>
<table border=2px solid red>
<tr>
<th> S.no</th>
<th>Place</th>
<th>Location</th>
<th>Image</th>
</tr>
<tr>
<td>1</td>
<td> Agra Fort</td>
<td>Uttar Pradesh</td>
<td><img src="https://img.traveltriangle.com/blog/wp-
content/uploads/2019/02/Agra-Fort-Uttar-Pradesh-400x267.jpg" height="150px"
width="290px"></td>
</tr>
<tr>
<td>2</td>
<td>Qutub Minar</td>
<td>Delhi</td>
content/uploads/2019/02/Qutub-Minar-Delhi-400x265.jpg" height="150px"
width="290px"></td>
</tr>
<tr>
<td>3</td>
<td>Hawa Mahal</td>
<td>Jaypur</td>
content/uploads/2019/02/Hawa-Mahal-Jaipur-400x267.jpg"
height="150px" width="290px"></td>
</tr>
<tr>
<td>4</td>
<td>Sanchi Stupa</td>
<td>Madhya Pradesh</td>
content/uploads/2019/02/Sanchi-Stupa-Madhya-Pradesh.jpg"
</tr>
</table>
</body>
</html>
Source code
<html>
<body>
<h1>famous places of world</h1>
<table border=2px solid red>
<tr>
<th> S.no</th>
<th>Place</th>
<th>Location</th>
<th>Image</th>
</tr>
<tr>
<td>1</td>
<td>Taj Mahal</td>
<td>Agra</td>
<td><img src="https://cdn.pixabay.com/photo/2019/11/02/08/15/tajmahal-
4595871_960_720.jpg" height="150px"
width="290px"></td>
</tr>
<tr>
<td>2</td>
<td>Red fort</td>
<td>Delhi</td>
<td><img src="https://cdn.pixabay.com/photo/2018/05/30/10/15/red-
3441143_960_720.jpg" height="150px"
width="290px"></td>
</tr>
<tr>
<td>3</td>
<td>Burj khalifa</td>
<td>dubai</td>
<td><img src="https://cdn.pixabay.com/photo/2020/03/11/14/32/burj-khalifa-
4922315_960_720.jpg"
</tr>
<tr>
<td>4</td>
<td>Satue of liberty</td>
<td>Newyork</td>
<td><img src="https://cdn.britannica.com/71/99571-050-DFF0A6E5/Statue-of-Liberty-
Island-New-York.jpg?w=690&h=388&c=crop"
</tr>
</table>
</body>
</html>
3.Create a timetable of our class With the help of HTML and CSS
Source code
<html >
h1 {
background-color: red;
color: blue;
display: flex;
margin: auto;
width: 17%;
text-align: center; }
h2 {
background-color: yellow;
color: rgb(109, 109, 129);
text-align: center; }
.A {
background-color: #e5cbcb;
color: blue; }
.B {
background-color: rgb(156 163 175);
color: green; }
.C {
background-color:rgb(80 55 55);
color: rgb(127, 146, 127); }
.D {
background-color: rgb(35, 179, 107);
color: rgb(194, 22, 157); }
.E {
background-color: rgb(251 207 202);
color: rgb(221, 22, 72); }
table {
text-align: center;
width: 100%;
height: 500px;
border: aqua; }
</style>
</head>
<body>
<h1>BCA 2nd year</h1>
<h2>time table of BCA 4th Semester</h2>
<table border="2px solid black">

<th style="color: red; background-color: black;">Time</th>
<th style="color: gray; background-color: black;">Monday</th>
<th style="color: yellow; background-color: black;">Tuesday</th>
<th style="color: green; background-color: black;">Wednesday</th>
<th style="color: burlywood; background-color: black;">Thursday</th>
<th style="color: cadetblue; background-color: black;">friday</th>
<tr class="A">
<td>9:00 - 9:45</td>
<td>Softwere Engineering</td>
<td>Database management system</td>
<td>Web designing</td>
<td>Operating system</td>
</tr>
<tr class="B">
<td>9:45 - 10:30</td>
<td>Database management system</td>
<td>Operating system</td>
<td>Web designing</td>
</tr>
<tr class="C">
<td>10:30 - 12:00</td>
<td>Operating system (lab)</td>
<td>Softwere Engineering (lab)</td>
<td>Web designing (lab)</td>
<td>Softwere Engineering (lab)</td>
<td>Database management system (lab) </td>
</tr>
<tr class="D">
<td>12:00-1:00</td>
<td>Break</td>
<td>Break</td>
<td>Break</td>
<td>Break</td>
<td>Break</td>
</tr>
<tr class="E">
<td>1:00 - 1:45</td>
<td>Operating system </td>
<td>Database management system </td>
<td>Softwere Engineering </td>
<td>MPD </td>
<td>Web designing </td>
</tr>
</table>
</body>
</html>
4. Create a website of my favorite sports In HTML And CSS
Source code
<html>
<body style="background:linear-gradient(to bottom right, black, rgb(196, 27, 27), rgb(180, 202,
180)) rgb(22, 22, 88)">
<div style="color:yellow; border: 2px solid red">
<h1 style="text-align: center; color:green">My favourite sport</h1>
<h3>Kabaddi</h3>
<p>Kabaddi is a contact team sport with origins in Tamil Nadu, India Ancient India. Played
between two teams of seven players, the objective of the game is for a single player on offence,
referred to as a "raider", to run into the opposing team's half of a court, touch out as many of
their defenders as possible, and retur to their own half of the court, all without being tackled by
the defenders, and in a single breath.Points are scored for each player tagged by the raider, while
the opposing team earns a point for stopping the raider. Players are taken out of the game if they
are touched or tackled, but are brought back in for each point scored by their team from a tag or
tackle.</p>
</div ">
<div style=" background-color:lightblue; border:3px solid rgb(132, 132, 160); margin-
left:100px">
<img width="400" height="200"
src="https://s01.sgp1.cdn.digitaloceanspaces.com/article/105764-xndorrtwrt-
1542337403.jpg">

<img width="400" height="200" src="https://thebridge.in/h-upload/2021/12/18/20350-
img20211218014524.webp">

<img width="400" height="200"
src="https://assets.khelnow.com/news/uploads/2022/01/Strong-defence-by-Patna-Pirates-
costs-Puneri-Paltan-the-match-3-1200x938.jpg">

</div>
<center>
<div>
<h3 style="color: lightblue; text-align:center; font-size: 20px">Related videos</h3>
<iframe width="340" height="290"
src="https://www.youtube.com/embed/wtKtA2u4NB8"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-
in-picture"
allowfullscreen></iframe>

< <iframe width="340" height="290"
src="https://www.youtube.com/embed/qMwdlWhZmH8"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-
in-picture"
allowfullscreen></iframe>

< <iframe width="340" height="290"
src="https://www.youtube.com/embed/wtKtA2u4NB8"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope;
picture-in-picture"
allowfullscreen>"</iframe>

</div>
</center>
<div class="link">
<a href="https://www.google.com/" target="_blank"> more information</a>
</div>
</body>
</html>
5. Animation use in CSS with the help of html
 Different type of animation and changes in this webpage

<html>
<style>
div h2 {
color: aqua;
font-style: italic; font-size: 40px; align-items: center;
justify-content: center;
}
div {
width: 200px; height: 200px;
background-color: red;
border: 2px solid yellow; animation: colorchange; animation-duration: 3s;

animation-iteration-count: infinite; animation-delay: 2s;
position: relative;
animation-direction: alternate; animation-timing-function: ease-in-out; border-radius: 30px;
animation-iteration-count: 4;
/* animation-fill-mode: forwards; */ font-size: 40px;
font-style: italic; justify-content: center; align-items: center;
}
@keyframes colorchange { 0% {
background-color: red; left: 0px;
top: 0px; color: green;
}
20% {
background-color: green; left: 300px;
top: 0px;
color: aquamarine;
}
40% {
background-color: blue; left: 300px;
top: 300px; color: coral;
}
60% {
background-color: brown; left: 0px;
top: 300px;
color: cornflowerblue;
}
100% {
background-color: black; left: 0px;
top: 0px;
color: cadetblue;
}
}
</style>
<body style="background-color: black;">
<h1>CSS ANIMATION</h1>
<div>
Sadeep yadav

</div>
</body>
</html>
6. Hotel visiting page with the help of Form in HTML

<html>
<head>
<title>
Hotel Form
</title>
</head>
<body style="background-color: blueviolet">
<legend style="text-align: center"><u>Hotel Booking Form</u> </legend><br><br>
<form>
First Name: <input type="text"> <br><br>
Last Name: <input type="text"> <br><br>
Email: <input type="text"><br><br>
Mob Number: <input type="number"><br><br>
City: <input type ="text">
</form>
<br><br>
<fieldset style="background-color: aqua;color: blue">
<legend style="text-align: center">Booking Details </legend>
Check-in-Date:<input type="date"> <br><br>
Check-out-Date: <input type="date"> <br> <br>
Room type:<input type ="radio"name="roomtype">Deluxe

<input type ="radio"name="roomtype"> premium
<input type ="radio"name="roomtype"> King <br><br>
<br><br>
No.of Adults:<input type ="Number">
No. of Children:<input type="number"><br><br>
<br><br>
<button>Submit</button>
</body>
</html>
7. Animation and transform effect on hotel with the help of CSS
Program:
<!DOCTYPE html>
<html>
<style>
body{background-size:1500px 1000px;
}
li{display:inline;
margin:20px;
padding:10px;
border:1px solid yellow;
color:white;
transition: width 2s,transform2s,background-color 2s ease;}
li:hover{background-color:white;}
color:black
.demo{
margin: 120px;
padding:10px;
border:1px solid blue;
height:100px;
width:200px;
color:white;
background-color:yellowgreen;
transition:width 2s, height 2s, background-color 2s ease;}
div.demo:hover{width: 400px; height:300px; background-color:cyan;transform:rotate(45deg);}
image{transition: width 2s, height 2s;}
image:hover{ background-color:white;color:black;}
li:hover{ background-color:white;color:black;}
</style>
<body style="background-image:url(https://images.pexels.com/photos/53212/one-world-trade-
center-manhattan-owtc-new-york-53212.jpeg?auto=compress&cs=tinysrgb&w=600);">
<h1 style="text-align:center;color:black;font-
family:verdna">**************************TOUR AND
TRAVEL*********************************** </h1>
<br>
<div style="margin-left:100px;">
<ul>
<li><a href=</a> HOME</li>
<li><a href="https://www.visitsaudi.com/"</a> SERVICES</li>
<li><a href="https://wordpress.org/plugins/gallery-custom-links/"</a> GALERY</li>
<li><a href="#"> ABOUT</li>
<li><a href="https://www.makemytrip.com/"</a> CONTACTS Us</li>
</ul>
</div>
<div class="demo">
<img src="https://images.pexels.com/photos/733853/pexels-photo-
733853.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" width="200px height=100px">
</div>
</body>
</html>
8. Color Change And animation in JavaScript:
Program:
<html>
<body>
<h1>Javascript</h1>
<p id ="p1"style="color:blue">Color is blue</p>
<button type="button "id="b1"onclick="Change()"> Change color</button>
<br> </br>
<img id ="img1"src="https://images.unsplash.com/photo-1453728013993-
6d66e9c9123a?ixlib=rb-
1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTF8fGNoYW5nZXxlbnwwfHwwfHw%3D&w
=1000&q=80"width=400>
<img id
="img2"src="https://www.researchgate.net/publication/353422038/figure/fig2/AS:104890611270
0416@1627090113328/Image-7-4-3-2-5-9-3-11-45-3-0-2-4-0-1-7.ppm">
<button type="button"id="b2"onclick="show()">Show full</button>
<br></br>
<button type="button"id="b3"onclick="max()">View Full</button>
<script>
function Change(){
document.getElementById("p1").style.color="red";
}
function show(){
document.getElementById("img1").src="https://images.ctfassets.net/hrltx12pl8hq/7yQR5uJhwEk
RfjwMFJ7bUK/dc52a0913e8ff8b5c276177890eb0129/offset_comp_772626-
opt.jpg?fit=fill&w=800&h=300"
document.getElementById("img1").width="500"
document.getElementById("img1").height="400"
}
function max(){
document.getElementById("img2").src="https://cdn.jpegmini.com/user/images/slider_puffin_bef
ore_mobile.jpg"
document.getElementById("img2").width="500"
document.getElementById("img2").height="400"
}
</script>
</body>
</html>

Web Designing Ravi

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Designing Ravi

Uploaded by

Copyright:

Available Formats

DAV institute of Engineering & Technology

Bachelor of computer Applications

Submitted to: Ms. Kanika Kapoor Submitted by: - Ravi Kumar

<h1 style="background-color:rgb(255, 0, 166); color:purple; text-align:center; padding: 12px">

<u>my favourite food </u>

<marquee direction="up" ; scroll amount"4"> pizza</marquee>

cheasy & testy</p>

<table border="2px solid black">

4. Create a website of my favorite sports In HTML And CSS

5. Animation use in CSS with the help of html

 Different type of animation and changes in this webpage

border: 2px solid yellow; animation: colorchange; animation-duration: 3s;

<body style="background-color: black;">

6. Hotel visiting page with the help of Form in HTML

Room type:<input type ="radio"name="roomtype">Deluxe

You might also like