NAME : Priyanshu Negi COURSE : WEB TECHNOLOGIES (TBC 404)
SECTION : A1 SEMESTER : 4 TH
ROLLNO : 62
PROBLEM STATEMENT 1 : Design the home page
OBJECTIVE :
• Insert a logo on the top left corner of the web page.
• Insert Hyperlinks on all 5 menu options.
• Image 1 should have solid border with red color, Image two should have dotted border with
green color.
• Background color of the paragraph should be pink. Text should contain all the text
formatting tags. Paragraph
should be aligned right.
• Create footer at the bottom of the web page.
CODE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
color: #333;
min-height: 100vh;
position: relative;
}
header {
background-color: #333;
color: white;
text-align: center;
padding: 1em;
}
nav {
background-color: #555;
padding: 1em;
text-align: center;
}
nav a {
color: white;
text-decoration: none;
padding: 0.5em 1em;
margin: 0 1em;
border-radius: 8px;
background-color: #888;
NAME : Priyanshu Negi COURSE : WEB TECHNOLOGIES (TBC 404)
SECTION : A1 SEMESTER : 4 TH
ROLLNO : 62
cursor: pointer;
transition: background-color 0.3s ease;
}
nav a:hover {
background-color: #666;
}
section {
padding: 2em;
background-color: #fff;
border-radius: 12px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
margin: 20px;
}
h2 {
color: #333;
text-align: center;
}
p{
color: #555;
line-height: 2;
}
.about-container {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}
.about-text {
flex: 1;
margin: 20px;
}
.about-image {
flex: 1;
text-align: center;
}
.about-image img {
width: 100%;
border-radius: 12px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
.contact-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
justify-content: center;
align-items: center;
text-align: center;
margin-top: 30px;
}
.contact-container img {
NAME : Priyanshu Negi COURSE : WEB TECHNOLOGIES (TBC 404)
SECTION : A1 SEMESTER : 4 TH
ROLLNO : 62
width: 100%;
border-radius: 12px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
.contact-container img[src="gehulogo.svg"] {
background-color: #0FD2F9;
}
.contact-container a, .contact-container p {
background-color: #0FF9B9;
;
color: white;
padding: 15px;
border-radius: 12px;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 1em;
position: absolute;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<img src="clg.png" alt="University Logo" height="100">
</header>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#admission">Admission</a>
<a href="#courses">Courses</a>
<a href="#contact">Contact</a>
</nav>
<section id="home">
<h2>Welcome to Graphic Era Hill University</h2>
<div id="about" class="my-20 grid max-w-7xl grid-cols-1 gap-6 px-4 text-lg sm:mx-auto lg:grid-cols-3">
<div class="text-neutral-700">
<img src="GEHUDehradun.jpg" alt="About Image 1" height=220>
<div class="my-20 grid max-w-7xl grid-cols-1 gap-6 px-4 text-lg sm:mx-auto lg:grid-cols-3" >
</div>
<h2 class="text-3xl"><span>At the forefront of Quality Higher Education and Academic Excellence
<strong>Graphic Era Hill University</strong></span></h2>
<div class="text-neutral-700">
Founded in 2011, Graphic Era Hill University is a private university located in Dehradun, Uttarakhand, India, with
the goal of providing world-class education. The University has achieved numerous milestones in its glorious past on
the basis of its academic rigor, consistently Top Performing Students and Alumni and an immensely strong and
qualified teaching fraternity.
Graphic Era Hill University is based in the magnificent and serene city of Dehradun, nestled in the valley surrounded
NAME : Priyanshu Negi COURSE : WEB TECHNOLOGIES (TBC 404)
SECTION : A1 SEMESTER : 4 TH
ROLLNO : 62
by Rajaji National Park on one end and Clement Town Cantonment on the other. The University prides itself on its
University regime that warrants the holistic development of all the students part of the Graphic Era Fraternity.
</div>
</div>
</div>
</section>
<section id="about">
<h2>About the University</h2>
<div class="my-20 flex max-w-7xl flex-col gap-6 px-4 text-lg sm:mx-auto">
<h2 class="text-3xl"><span>This is <strong>Graphic Era</strong>! We're Glad You Asked!</span></h2>
<div class="text-neutral-700">
At Graphic Era Hill University, it is a matter of pride that we have three self-contained campuses located at
Dehradun, Bhimtal, and Haldwani that offer a comprehensive and enriching academic experience to our students.
Our campuses have been meticulously designed to provide world-class amenities, including innovative academic,
research, sports, and training facilities, along with luxurious and comfortable student accommodations.
</div>
<div class="text-neutral-700">
All three campuses strive to create a nurturing environment that helps students grow and thrive in all aspects of their
lives. Our campuses are home to a diverse student population who come from all over the world, contributing to a
vibrant and inclusive learning community.
</div>
<div class="text-neutral-700">
At GEHU it is our commitment to providing high-quality education and research opportunities that contribute to
knowledge creation and innovation, not just in our region, but on an international scale. Our faculty members are
experts in their respective fields and are dedicated to inspiring and mentoring the next generation of leaders.
</div>
<div class="text-neutral-700">
GEHU Dehradun, Bhimtal, and Halwani campuses provide a range of co-curricular activities, cultural events, and
social initiatives that help students develop their skills, passions, and interests outside of the classroom.
</div>
<div class="text-neutral-700">
In summary, GEHU's all three campuses at three different locations offer a world-class education and research
experience that fosters innovation, diversity, and community. With a commitment to excellence in teaching and
research, we are proud to be an important and much sought-after center of learning and research, shaping the future
of our students and our world.
</div>
</div>
</section>
<section id="about">
<div class="contact-container grid grid-cols-1 gap-6 sm:grid-cols-4">
<div class="">
<img src="gehulogo.svg" alt="Contact Image 1">
</div>
<div class="">
<a href="https://dehradun.gehu.ac.in" class="cursor-pointer text-base font-semibold text-neutral-100 hover:text-
brand-400">Dehradun</a>
<p class="mt-2 text-neutral-200">
Graphic Era Hill University<br>
Bell Road, Clement Town Dehradun<br>
Uttarakhand
</p>
</div>
NAME : Priyanshu Negi COURSE : WEB TECHNOLOGIES (TBC 404)
SECTION : A1 SEMESTER : 4 TH
ROLLNO : 62
<div class="">
<a href="https://bhimtal.gehu.ac.in" class="cursor-pointer text-base font-semibold text-neutral-100 hover:text-brand-
400">Bhimtal</a>
<p class="mt-2 text-neutral-200">
Graphic Era Hill University<br>
SatTal Road, Bhimtal, Nainital, Uttarakhand 263136
</p>
</div>
<div class="">
<a href="https://hadlwani.gehu.ac.in" class="cursor-pointer text-base font-semibold text-neutral-100 hover:text-
brand-400">Haldwani</a>
<p class="mt-2 text-neutral-200">
Graphic Era Hill University<br>
Tularampur, Near Mahalaxmi Temple, opp. Middas Squar, Haldwani, Uttarakhand 263139
</p>
</div>
</div>
</section>
<footer>
© 2024 Graphic Era Hill University. All rights reserved.
</footer>
</body>
</html>
OUTPUT :
NAME : Priyanshu Negi COURSE : WEB TECHNOLOGIES (TBC 404)
SECTION : A1 SEMESTER : 4 TH
ROLLNO : 62
NAME : Priyanshu Negi COURSE : WEB TECHNOLOGIES (TBC 404)
SECTION : A1 SEMESTER : 4 TH
ROLLNO : 62
PROBLEM STATEMENT 2 : Create a web page to display departments and course
information using ordered and unordered list. Also describe the course information
using appropriate list type.
OBJECTIVE : To designing the departments and course information using ordered and
unordered list.
CODE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Departments and Course Information</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
h1 {
text-align: center;
}
.department {
margin-bottom: 20px;
}
.department h2 {
color: #333;
}
.course-list {
margin-left: 20px;
}
.course-details {
margin-left: 40px;
}
</style>
</head>
<body>
<h1>Departments and Course Information</h1>
<div class="department">
<h2>Computer Science</h2>
<ul class="course-list">
<li>Introduction to Programming
<ul class="course-details">
<li>Course Code: CS101</li>
<li>Credit Hours: 3</li>
<li>Instructor: John Smith</li>
</ul>
</li>
<li>Data Structures and Algorithms
<ul class="course-details">
<li>Course Code: CS201</li>
NAME : Priyanshu Negi COURSE : WEB TECHNOLOGIES (TBC 404)
SECTION : A1 SEMESTER : 4 TH
ROLLNO : 62
<li>Credit Hours: 4</li>
<li>Instructor: Jane Doe</li>
</ul>
</li>
</ul>
</div>
<div class="department">
<h2>Mathematics</h2>
<ul class="course-list">
<li>Calculus I
<ul class="course-details">
<li>Course Code: MAT101</li>
<li>Credit Hours: 3</li>
<li>Instructor: Michael Johnson</li>
</ul>
</li>
<li>Linear Algebra
<ul class="course-details">
<li>Course Code: MAT201</li>
<li>Credit Hours: 4</li>
<li>Instructor: Emily Brown</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
OUTPUT :
NAME : Priyanshu Negi COURSE : WEB TECHNOLOGIES (TBC 404)
SECTION : A1 SEMESTER : 4 TH
ROLLNO : 62
PROBLEM STATEMENT 3 : Design the Weather Forecast formats tabular layout.
OBJECTIVE : To designing the Weather Forecast tabular layout.
CODE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="widtd=device-widtd, initial-scale=1.0">
<style>
body
{
color : white;
background-color:#000000;
text-align: center;
}
table {
width: 50%;
border-collapse: collapse;
text-align: center;
margin-bottom: 10px;
}
th, td {
color : white;
border: 3px solid #008000;
text-align: center;
padding: 15px;
text-align: center;
}
thead
{
NAME : Priyanshu Negi COURSE : WEB TECHNOLOGIES (TBC 404)
SECTION : A1 SEMESTER : 4 TH
ROLLNO : 62
text-align: center;
}
th {
background-color: #000000;
}
.weather-gif {
background-color:#000000;
width: 70%;
max-width: 200px;
}
</style>
</head>
<body>
<h2>Weather Forecast</h2>
<table>
<thead>
<tr>
<th colspan="7"><h2>Weather Report</h2></th>
</tr>
<tr>
<td>Date</td>
<td>2024-01-18</td>
<td>2024-01-19</td>
<td>2024-01-20</td>
<td>2024-01-21</td>
<td>2024-01-22</td>
<td>__________</td>
</tr>
</thead>
<tbody>
<tr>
<td>DAY HIGH</td>
NAME : Priyanshu Negi COURSE : WEB TECHNOLOGIES (TBC 404)
SECTION : A1 SEMESTER : 4 TH
ROLLNO : 62
<td>20</td>
<td>24</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>DAY LOW</td>
<td>17</td>
<td>15</td>
<td>16</td>
<td>12</td>
<td>10</td>
<td></td>
</tr>
<tr>
<td><u>CONDITION</u></td>
<td rowspan = 2><img class="weatder-gif" src="icons8-summer.gif" alt="Weatder Animation" height = 80
width = 80 ></td>
<td rowspan = 2><img class="weatder-gif" src="icons8-partly-cloudy-day.gif" alt="Weatder Animation" height
= 80 width = 80 ></td>
<td rowspan = 2><img class="weatder-gif" src="icons8-cloud-lightning.gif" alt="Weatder Animation" height =
80 width = 80 ></td>
<td rowspan = 2><img class="weatder-gif" src="icons8-partly-cloudy-day.gif" alt="Weatder Animation" height
= 80 width = 80 ></td>
<td rowspan = 2><img class="weatder-gif" src="icons8-snow.gif" alt="Weatder Animation" height = 80 width
= 80 ></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
NAME : Priyanshu Negi COURSE : WEB TECHNOLOGIES (TBC 404)
SECTION : A1 SEMESTER : 4 TH
ROLLNO : 62
OUTPUT :
NAME : Priyanshu Negi COURSE : WEB TECHNOLOGIES (TBC 404)
SECTION : A1 SEMESTER : 4 TH
ROLLNO : 62
PROBLEM STATEMENT 4 : Write a HTML web script to display a video with video controller on
the webpage.
OBJECTIVE : To Display the video with video controller.
CODE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Player</title>
</head>
<body>
<h1>Video Player</h1>
<video controls width="640" height="360">
<source src="tempplatef.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
OUTPUT :
PROBLEM STATEMENT 5 : Write a HTML web script to display an audio with audio controller
on the webpage.
OBJECTIVE : To Display the audio with audio controller.
CODE :
NAME : Priyanshu Negi COURSE : WEB TECHNOLOGIES (TBC 404)
SECTION : A1 SEMESTER : 4 TH
ROLLNO : 62
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Audio Player</title>
</head>
<body>
<h1>Audio Player</h1>
<audio controls>
<source src="Parindey - B Praak Gippy Grewal Sargun Mehta Roopi Gill Avvy Sra Latest Punjabi Songs 2024
[TubeRipper.com].mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
OUTPUT :
