Web Programming Lab Session

WEB DEVELOPMENT : PRACTICAL 3 ENROLLMENT NO.
: 190210107027
WEB PROGRAMMING LAB SESSION

PRACTICAL 3
1. Creating a static webpage having multiple webpages

a. Some events are going to be organized in your college for which you are supposed to
develop a static website giving the details of the events. There are three categories of
events i.e. Technical Events, Sports Events, and Cultural Events. You need to give some
details and the schedule of these events on the website. a. Create four web pages. One
Home page and three pages for each event. The layout of all these pages is given below.
b. On Home Page, give links to the three pages as shown below layout.
c. When a user clicks on any event, open the event's webpage in the New Tab.
d. All the pages should be linked together i.e. the user should be able to navigate from any
webpage to any webpage.
CODE:
Index/home page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gec Mega TechFest2022</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="h1_head">GEC MEGA TECHFEST</h1>

<div class="home">
<p class="menu"> <a href="index.html">Home</a> </p>
<p class="menu"> <a target="_blank" href="technical.html">Techanical Event</a> </p>
<p class="menu"> <a target="_blank" href="cultural.html">Cultural Event</a></p>
<p class="menu"> <a target="_blank" href="sports.html">Sports Event</a> </p>
</div>
<div class="body_p1">
<h3>Descption</h3>
<p >
Welcome to Goverment engineering collage, bhavnagar!<br>
please accept our warmest greetings!<br>
<hr>
This website represents the structure of GEC MEGA TECHFEST held at Gec, bhavnagar.<br>
WEB DEVELOPMENT : PRACTICAL 3 ENROLLMENT NO.: 190210107027
we are employeeing sevral event including Techanical, Cultural and Sports.<br>

To participate in such event please go to relavent page in website.<br>
we happy to giude you futher. Moreover instrustion are given in relavent pages of our
website.<br>
</p>
</div>
<div>
<marquee class="marquee" behavior="scroll" direction="left">For more details, <a
target="_blank" href="http://www.gecbh.cteguj.in/">Visit GEC Bhavnagar official Website</a>
</marquee>
</div>
</body>
</html>
Sports event page:

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

<div class="home">
<p class="menu"> <a href="technical.html">Techanical Event</a> </p>
<p class="menu"> <a href="cultural.html">Cultural Event</a></p>
<p class="menu"> <a href="sports.html">Sports Event</a> </p>
</div>
<h3>Sports Event</h3>
<p>
i.Fest is the largest technical fest of Gujarat with its versatility in technical,
cultural, and social
events, with its intellectual and social-welfare oriented community and its
extremely enthusiastic
participants. With over 3500 participants attending the fest every year, i.Fest
provides the student
community with a humongous platform to interact with like-thinkers and inculcate
innovative and competitive
skills within young minds. Such festive technical events are held with an aim to
grab the best out of a
bundle of ideas constantly playing around within a group of people so that they are
given a voice as well as
an opportunity to ask for monetary as well as technical help from a capable
institute or a company wherever
needed.
</p>
</div>
<table class="table" border="3px">
<tr>
<td>Name</td>
<td>Date</td>
<td>Time</td>
<td>Solo or Team</td>
</tr>
<tr>
<td>FizzBuzz</td>
<td>25th FEB, 2022</td>
<td>11:00 A.M.</td>
<td>Solo</td>
</tr>
<tr>
<td>SellOut</td>
<td>26th, FEB, 2022</td>
<td>5:00 P.M.</td>
<td>Solo</td>
</tr>
<tr>
<td>i.clash</td>
<td>26th FEB, 2022</td>
<td>5:00 P.M.</td>
<td>Team</td>
</tr>
<tr>
<td>
i.Maze
</td>
<td>
26th FEB, 2022
</td>
<td>
10:00 A.M.
</td>
<td>Solo</td>
</tr>
</table>
<div>
target="_blank"
href="http://www.gecbh.cteguj.in/">Visit GEC Bhavnagar official Website</a>
</marquee>
</div>
</body>
</html>
Culture event page:

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

<div class="home">
</div>
<h3>Cultural Event</h3>
<p>
needed. </p>
</div>
<table border="3px" class="table">
<tr>
<td>Name</td>
<td>Date</td>
<td>Time</td>
</tr>
<tr>
<td>Fun events</td>
<td>25th FEB, 2022</td>
<td>12:00 P.M.</td>
<td>Team/Solo</td>
</tr>
<tr>
<td>
MechatronMania
</td>
<td>
25th FEB, 2022
</td>
<td>7:00 P.M.</td>
<td>
Solo
</td>
</tr>
<tr>
<td>TresureHunt</td>
<td>26th FEB, 2022</td>
<td>12:00 P.M.</td>
<td>Team</td>
</tr>
</table>
<div>
target="_blank"
</marquee>
</div>
</body>
</html>
Technical event page:

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

<div class="home">
</div>
<h3>Techanical Event</h3>
<p>

needed.
</p>
</div>
<table border="3px" class="table">
<tr>
<td>Name</td>
<td>Date</td>
<td>Time</td>
</tr>
<tr>
<td>CryptoRush</td>
<td>25th FEB, 2022</td>
<td>3:00 P.M.</td>
<td>Solo</td>
</tr>
<tr>
<td>RepoReboot</td>
<td>25th FEB, 2022</td>
<td>5:00 P.M.</td>
<td>Solo</td>
</tr>
<tr>
<td>iPapyrus</td>
<td>26th FEB, 2022</td>
<td>2:00 P.M.</td>
<td>Team</td>
</tr>
</table>
<div>
target="_blank"
</marquee>
</div>
</body>
</html>
Style.css
body{
background-color: #FFFF66;
margin-left: 50px;
margin-right: 50px;
}
.h1_head{
color:black(255, 5, 192);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 40px;
font-weight: 700;
margin-left: 30px;
}
.menu{
display: inline-flex;
font-size: 25px;
width: 20%;
height: 60px;
padding-left: 4%;
background-color: white;
align-items: center;
border: 5px;
border-radius: 15px;
font-weight: 600;
font-size: 30px;
border-color: black;
}
.body_p1{
font-size: 30px;
font-weight: 400;
font-family: Verdana, Geneva, Tahoma, sans-serif;
height: 500px;
}
.marquee{
background-color: yellowgreen;
font-size: 25px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
;
font-style: italic;
color: white;
padding: 0px;
font-weight: 600;
align-items: center;
line-height: 50px;
}
.table {
font-size: 20px;
font-weight: 400;
}
td {
padding: 5px;
}
OUTPUT:
HOME/INDEX
SPORTS
Technical
CULTURAL

Web Programming Lab Session

Uploaded by

Document Information

Original Description:

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 Programming Lab Session

Uploaded by

Copyright:

Available Formats

WEB DEVELOPMENT : PRACTICAL 3 ENROLLMENT NO.

WEB PROGRAMMING LAB SESSION

1. Creating a static webpage having multiple webpages

<h1 class="h1_head">GEC MEGA TECHFEST</h1>

we are employeeing sevral event including Techanical, Cultural and Sports.<br>

Sports event page:

<link rel="stylesheet" href="style.css">

<h1 class="h1_head">GEC MEGA TECHFEST</h1>

Culture event page:

<h1 class="h1_head">GEC MEGA TECHFEST</h1>

Technical event page:

<h1 class="h1_head">GEC MEGA TECHFEST</h1>

community with a humongous platform to interact with like-thinkers and inculcate

You might also like