KEMBAR78
Web Technology | PDF | Html | Html Element
Scribd
Upload
8 views67 pages

Web Technology

The document contains a series of HTML programs demonstrating various HTML elements and their usage, including header tags, font tags, lists, tables, forms, and CSS styles. Each program is presented with its corresponding HTML code and a brief description of its functionality. The examples cover a wide range of HTML features, providing a comprehensive overview for learning HTML and CSS.

Uploaded by

bhardwajsharad7820
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
8 views67 pages

Web Technology

The document contains a series of HTML programs demonstrating various HTML elements and their usage, including header tags, font tags, lists, tables, forms, and CSS styles. Each program is presented with its corresponding HTML code and a brief description of its functionality. The examples cover a wide range of HTML features, providing a comprehensive overview for learning HTML and CSS.

Uploaded by

bhardwajsharad7820
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/ 67

PROGRAM-1

Write a program in HTML to show the use of header tags.


<html>
<body style="font-size: 25px;">
<h1>Header Tag In HTML</h1>
<article>
<header>
<h2 style="color: blue;">
Learn HTML
</h2>
</header>
</article>
</body>
</html>

OUTPUT:
PROGRAM-2
Write a program in HTML to show the use of Font tag and its various
attributes.
<html>
<body>
<p>This is a paragraph</p>
<font face="Arial" size="6" color="red">
Font tag with its attributes
</font>
</body>
</html>

OUTPUT:
PROGRAM-3
Write a program in HTML to display an unordered list with different value of
type attributes.
<html>
<head>
<title>
HTML Unordered Lists
</title>
</head>
<body>
<h2>Unordered Lists</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>Angular</li>
</ul>
</body>
</html>

OUTPUT:
PROGRAM-4
Write a program in HTML to display an ordered list with its different attributes
values.
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<h2>Ordered List</h2>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ol>
</body>
</html>

OUTPUT:
PROGRAM-5
Write a program in HTML to display the definition list.
<html>
<head>
<title>HTML dl Tag</title>
</head>
<body>
<dt>Definition List-</dt>
<dd>A list of terms with their definitions.</dd>
<dt>HTML-</dt>
<dd>
HyperText Markup Language.
</dd>
<dt>CSS-</dt>
<dd>
Cascading Style Sheet.
</dd>
</dl>
</body>
</html>

OUTPUT:
PROGRAM-6
Write a program in HTML to show the use of anchor tag.
<html>
<head>
<title>Use of anchor tag</title>
</head>
<body>
<a href="https://www.google.com"target="_blank">google</a>
</body>
</html>

OUTPUT:
PROGRAM-7
Write a program in HTML to display an image with its different attributes.
<html>
<body>
<img height="200px" src="lion-3840x2160-sky-rocks-4746.jpg" alt="lion mage">
</body>
</html>

OUTPUT:
PROGRAM-8
Write a program in HTML to display a table with its different attributes.
<html>
<body>
<table border="1px">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Shrey</td>
<td>Rajput</td>
<td>20</td>
</tr>
<tr>
<td>Sameer</td>
<td>Tyagi</td>
<td>20</td>
</tr>
</table>
</body>
</html>

OUTPUT:
PROGRAM-9
Write a program in HTML to display an image map.
<html>
<head>
<title>How to create an image map in HTML?</title>
</head>
<body style="text-align:center">
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20190227165729/area11.png" alt=""
width="300"height="119"
class="aligncenter size-medium wp-image-910965" usemap="#shapemap" />
<map name="shapemap">
<area shape="poly" coords="59, 31, 28, 83, 91, 83"
href="https://www.geeksforgeeks.org/html-tutorial/" alt="HTML Tutorial">
<area shape="circle" coords="155, 56, 26"
href="https://www.geeksforgeeks.org/css-tutorial/" alt="CSS Tutorial">
<area shape="rect" coords="224, 30, 276, 82"
href="https://www.geeksforgeeks.org/javascript/" alt="JavaScript Tutorial">
</map>
</body>
</html>

OUTPUT:
PROGRAM-10
Write a program in HTML to show the use of frames.
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset cols="25%,50%,25%">
<frame name="left" src="unorderedlist.html" />
<frame name="center" src="font.html" />
<frame name="right" src="table.html" />
<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>
</frameset>
</html>

OUTPUT:
PROGRAM-11
Write a program in HTML to display a HTML form with different form controls.
<html>
<head>
<title>Html Forms</title>
</head>
<body>
<h2>HTML Forms</h2>
<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

OUTPUT:
PROGRAM-12
Write a program in HTMLto show the use of Internal CSS.
<html>
<head>
<title>Internal CSS</title>
<style>
h1 {
color: blue;
font-size: 40px;
text-align: center;
}
p{
color: purple;
font-size: 25px;
line-height: 1.5;
text-align: center;
}
</style>
</head>
<body>
<h1>Vivek College of Education</h1>
<p>A Computer Science Portal..!</p>
</body>
</html>

OUTPUT:
PROGRAM-13
Write a program in HTML to show the use of Inline CSS.
<html>
<body>
<button style="background-color: red; color: white; padding:20px 40px; border: none; border-radius:
5px;">
Click Me
</button>
</body>
</html>

OUTPUT:
PROGRAM-14
Write a program in HTML to show the use of External CSS.
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="main">
<h1 class="head">
Vivek college of Education
</h1>
<p class="des">
A computer science portal
</p>
</div>
</body>
</html>
//CSS
*{
margin: 0;
padding: 0;
}
.main{ displa
y: flex;
align-items: center;
flex-direction: column;
}
.head{
color: blueviolet;
}
.des{
color: brown;
font-size: 20px;
}

OUTPUT:
PROGRAM-15
Create a web page to display your college time table using HTML and CSS.
<html>
<head>
<title>Time Table</title>
<style>
body {
font-family: Arial, sans-
serif; background-color:
#ffffff;
margin: 0;
padding: 0;
}
h1 {
text-align: center;
color: #343a40;
}
table {
border-collapse: collapse;
margin: 20px auto;
background-color: #f8de6b;
border: 2px solid #000000;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
th,
td {
border: 1px solid #000000;
padding: 10px;
text-align: center;
}
th {
background-color: #8efbff;
color: #343a40;
}
.highlight {
background-color: #c4a000;
}
.special {
background-color: #d9c5ff;
}
</style>
</head>
<body>
<h1>TIME TABLE</h1>
<table>
<tr>
<th>Day/Period</th>
<th>I<br>9:30-10:30</th>
<th>II<br>10:30-11:30</th>
<th>III<br>11:30-12:30</th>
<th>IV<br>12:30-1:20</th>
<th><br>1:20-2:00</th>
<th>V<br>2:00-3:00</th>
<th>VI<br>3:00-4:00</th>
</tr>
<tr>
<td class="highlight"><b>Monday</b></td>
<td>.net</td>
<td>Web technology</td>
<td>Lab</td>
<td>AI</td>
<td rowspan="6" class="special"><b>LUNCH</b></td>
<td>multimedia</td>
<td>Lab</td>
</tr>
<tr>
<td class="highlight"><b>Tuesday</b></td>
<td>.net</td>
<td>Multimedia</td>
<td>Lab</td>
<td>Web technology</td>
<td>AI</td>
<td>Lab</td>
</tr>
<tr>
<td class="highlight"><b>Wednesday</b></td>
<td>Multimedia</td>
<td>Lab</td>
<td>.net</td>
<td>Web technology</td>
<td>Lab</td>
<td>AI</td>
</tr>
<tr>
<td class="highlight"><b>Thursday</b></td>
<td>.net</td>
<td>AI</td>
<td>Lab</td>
<td>Multimedia</td>
<td>Lab</td>
<td>Web technology</td>
</tr>
<tr>
<td class="highlight"><b>Friday</b></td>
<td>Multimedia</td>
<td>.net</td>
<td>Web technology</td>
<td>Lab</td>
<td>AI</td>
<td>Lab</td>
</tr>
<tr>
<td class="highlight"><b>Saturday</b></td>
<td>Web technology</td>
<td>AI</td>
<td>Lab</td>
<td>Multimedia</td>
<td>Lab</td>
<td>.net</td>
</tr>
</table>
</body>
</html>

OUTPUT:
PROGRAM-16
Create a Resume with the help of HTML and CSS.
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="full">
<div class="left">
<div class="image">
<img src="Shrey.jpg" style="width:100px;">
</div>
<div class="Contact">
<h2>Contact</h2>
<p>
<b>Email id:</b>iamshrey001@gmail.com</p>
<p>
<b>Mobile no :</b>6397034947
</p>
</div>
<div class="Skills">
<h2>Skills</h2>
<ul>
<li>
<b>Programming Languages :Java, C++, C#</b>
</li>
<li>
<b>Frontend : HTML, CSS, JavaScript, React</b>
</li>
<li>
<b>Backend : Node.js</b>
</li>
</ul>
</div>
<div class="Language">
<h2>Language</h2>
<ul>
<li>English</li>
<li>Hindi</li>
</ul>
</div>
<div class="Hobbies">
<h2>Hobbies</h2>
<ul>
<li>Singing</li>
<li>Swimming</li>
</ul>
</div>
</div>
<div class="right">
<div class="name">
<h1>Shrey Kumar</h1>
</div>
<div class="title">
<p>Web Developer</p>
</div>
<div class="Summary">
<h2>Profile</h2>
<p>
To secure a challenging position in a reputable organization to expand my learning knowledge and skill
</p>
</div>
<div class="Experience">
<h2>Experience</h2>
<li>
Actively engaged in web creative design and development.
</li>
<li>Designing project & planning</li>
</ul>
<li>Working on designing</li>
</ul>
</div>
<div class="Education">
<h2>Education</h2>
<table>
<tr>
<th>CBSE Board/University</th>
<th>Passing year</th>
<th>percentage</th>
</tr>
<tr>
<td>10</td>
<td>2019-2020</td>
<td>70%</td>
</tr>
<tr>
<td>12</td>
<td>2021-2022</td>
<td>65%</td>
</tr>
<tr>
<td>BCA</td>
<td>2022-2025</td>
<td>70%</td>
</tr>
</table>
</div>
<div class="project">
<ul>
<li>
<h2>Project1</h2>
<p>This project is based on HTML & CSS
</p>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
//CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: rgb(253, 254, 255);
display: flex;
justify-content: center;
align-items: center;
}
.full {
width: 50%;
max-width: 1000px;
min-height: 100px;
background-color: rgb(245, 239, 231);
margin: 0px;
display: grid;
grid-template-columns: 2fr 4fr;
}
.left {
position: initial;
background-color: rgb(126, 219, 231);
padding: 20px;
}
.right
{ position:
initial;
background-color: rgb(162, 202, 206);
padding: 20px;
}
.image, .Contact, .Skills, .Language, .Hobbies, .title,
.Summary, .Experience, .Education, .project
{ margin-bottom: 30px;
}
.h2 {
background-color: rgb(4, 96, 150);
}

OUTPUT:
PROGRAM-17
Design a Web page for your college using HTML and CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="clgHeader">
<div id="clgName"><h1>Vivek University</h1></div>
<div id="clgAddress">Moradabad Road,Post Agri Bijnor(UP)</div>
</div>
<div class="navBar">
<div class="navContent">The College</div>
<div class="navContent">Courses</div>
<div class="navContent">Placements</div>
<div class="navContent">Facilities</div>
<div class="navContent">Library</div>
</div>
</header>
<main>
<hr>
<div class="main1">
<div class="intro">
<div class="introHead"><h2>Welcome to Vivek College of Education</h2></div>
<div class="introDef">Vivek College was founded by 'Shivika Educational Society' in 2003 to meet the need
of training and education from all areas of professional education and research. The college affiliated to
MJP Rohilkhand University, Bareilly, and getrecognized under section 2(f)& 12(B) of the UGC Act 1956. The
college campus is located on the Moradabad Bijnor statehighway with the natural greenery and
surroundings of the holy river Ganges. The lush green campus with sprawling lawnsand playgrounds have
esthetically been planned and is designed with exquisite facilities to develop congenial environmentfor the
students pursuing their studies and coming away from the daily hustle-bustle of city life. Along with its
wealth ofnatural resources the campus offers an academically, socially and culturally enriching
environment. We have well-equippedlibrary, smart class rooms, auditorium, computer lab and Wi-Fi
campus etc. The campus contains the fragrance of learningsand the feeling of self-discipline.
</div>
</div>
<img class="clgImg" src="clg.jpg" alt="">
</div>
<hr>
<div class="main2">
<div class="facultyHead">
<h2>Meet Our Faculty</h2>
</div>
<div class="facultyMember1">
<h3>Mr. Pranshu Kumar</h3>
<p>Professor of Computer Science</p>
</div>
<div class="facultyMember2">
<h3>Dr. Brijendra Singh Yadav</h3>
<p>Professor of Business Administration and Commerce</p>
</div>
</div>
<hr>
<div class="main3">
<h2 class="main3h">Contact Us</h2>
<p>Email: vivekcollege@gmail.com. </p>
<p>Phone: 7055604050, 8057100200</p>
</div>
</main>
<hr>
<footer>
<div class="copyright">
<p>&copy; 2025 Vivek University. All rights reserved.</p>
<p>Designed by Shrey Rajput</p>
</div>
</footer>
</body>
</html>
//CSS
*{
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
padding-left: 200px;
padding-right:
200px;
}
.clgHeader{ h
eight: 90px;
background-color: rgb(235, 235, 235);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#clgName{
font-size: 25px;
color: rgb(0, 182, 238);
}
#clgAddress{ fo
nt-size: 20px;
}
.navBar{ heig
ht: 50px;
background-color: rgb(0, 182, 238);
display: flex;
align-items: center;
justify-content: space-evenly;
}
.navContent{
color: white;
font-size: 20px;
}
hr{
margin: 5px;
border: 5px solid rgb(226, 226,
226); border-radius: 5px;
}
.main1{ disp
lay: flex;
gap: 10px;
justify-content: center;
}
.clgImg{ heigh
t: 300px;
border-radius: 20px;
}
.introHead{ col
or: green;
font-size: 25px;
}
.introDef{
font-size: 19px;
padding: 5px;
border-radius: 20px;
background-color: rgb(226, 226, 226);
}
.main2{ disp
lay: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
}
.facultyHead{ f
ont-size: 25px;
color: brown;
}
.facultyMember1{ disp
lay: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.facultyMember2{ disp
lay: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.main3{
font-size: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
}
.main3h{ col
or: brown;
}
.copyright{ hei
ght: 100px;
background-color: rgb(228, 228, 228);
margin: 10px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

OUTPUT:
PROGRAM-18
Design a Student Registration Form for a College/University by using HTML
and CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form class="form" action="action.js">
<h1>Student Registration Form</h1>
<hr>
<b>Full Name:</b>
<input type="text" placeholder="Enter full name">
<b>Email Address:</b>
<input type="text" placeholder="Enter email address">
<b>Phone Number:</b>
<input type="number" placeholder="Enter your phone no.">
<b>Date Of Birth:</b>
<input type="date">
<b>Gender:</b>
<select name="Gender" id="Gender">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<b>Select Course:</b>
<select name="course" id="course">
<option value="BCA">BCA</option>
<option value="BBA">BBA</option>
</select>
<b>Permanent Address:</b>
<textarea name="Address" id="Address" placeholder="Enter your permanent address"></textarea>
<div class="submit">
<button class="sub">Submit</button>
<button class="res">Reset</button>
</div>
</form>
</body>
</html>
//CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
body{ displa
y: flex;
align-items: center;
justify-content: center;
margin: 100px;
background-color: rgb(231, 231, 231);
}
h1{
align-self: center;
}
hr{
width: 450px;
align-self:
center;
border: 3px solid rgb(223, 223,
223); border-radius: 3px;
}
button{ heigh
t: 36px;
width: 100px;
font-size: 16px;
border-radius: 18px;
}
textarea{ hei
ght: 80px;
}
.form{ padding
: 30px;
background-color: white;
width: 900px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 8px;
border-radius: 20px;
}
.sub{
color: white;
background-color: green;
}
.submit{
align-self: flex-end;
}
OUTPUT:
PROGRAM-19
Design a Login Page using HTML and CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="login">
<h2>Login</h2>
<p>Username:</p>
<input type="text" placeholder="Enter your username">
<p>Password:</p>
<input type="password" placeholder="Enter password">
<button>Login</button>
<a href="#">Forget Password?</a>
<p class="signup">Don't have an account?<a href="#"> Sign up</a></p>
</div>
</body>
</html>
//CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
body{
background-color: rgb(228, 228, 228);
display: flex;
justify-content: center;
align-items: center;
}
h2{
align-self:
center; font-size:
40px;
}
p{
font-size: 18px;
}
input{
font-size: 16px;
padding: 10px;
border: 2px solid rgba(122, 122, 122,
0.5); border-radius: 5px;
}
button{ colo
r: white;
font-size: 16px;
padding: 10px;
background-color: #4CAF50;
border: none;
border-radius: 5px;
width: 100px;
align-self: flex-end;
}
a{
font-size: 18px;
text-decoration: none;
align-self: center;
}
.login{ padding
: 60px;
margin: 150px;
border-radius: 20px;
background-color: white;
width: 500px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 24px;
}
.signup{
align-self: center;
}

OUTPUT:
PROGRAM-20
Design a website for your college using HTML and CSS(website must contain
minimum 6 webpages).
//index.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>
<link rel="stylesheet" href="style.css">
</head>

<body>
<header>
<div class="clgHeader">
<div id="clgName">
<h1>Vivek University</h1>
</div>
<div id="clgAddress">Moradabad Road,Post Agri Bijnor(UP)</div>
</div>
<div class="navBar">
<div class="navContent"><a href="index.html">Home</a></div>
<div class="navContent"><a href="about.html">The College</a></div>
<div class="navContent"><a href="courses.html">Courses</a></div>
<div class="navContent"><a href="placement.html">Placements</a></div>
<div class="navContent"><a href="facilities.html">Facilities</a></div>
<div class="navContent"><a href="library.html">Library</a></div>
</div>
</header>
<main>
<hr>
<div class="main1">
<div class="intro">
<div class="introHead">
<h2>Welcome to Vivek College of Education</h2>
</div>
<div class="introDef">Vivek College was founded by 'Shivika Educational Society' in 2003 to meet the
need of training and education from all areas of professional education and research. The college
affiliated to MJP Rohilkhand University, Bareilly, and get recognized under section 2(f)& 12(B) of
the UGC Act 1956. The college campus is located on the Moradabad Bijnor state highway with the
natural greenery and surroundings of the holy river Ganges. The lush green campus with sprawling
lawns and playgrounds have esthetically been planned and is designed with exquisite facilities to
develop congenial environment for the students pursuing their studies and coming away from the
daily hustle-bustle of city life. Along with its wealth of natural resources the campus offers an
academically, socially and culturally enriching environment. We have well-equipped library, smart
class rooms, auditorium, computer lab and Wi-Fi campus etc. The campus contains the fragrance of
learnings and the feeling of self-discipline.
</div>
</div>
<img class="clgImg" src="clg.jpg" alt="">
</div>
<hr>
<div class="main2">
<div class="facultyHead">
<h2>Meet Our Faculty</h2>
</div>
<div class="facultyMember1">
<h3>Mr. Pranshu Kumar</h3>
<p>Professor of Computer Science</p>
</div>
<div class="facultyMember2">
<h3>Dr. Brijendra Singh Yadav</h3>
<p>Professor of Business Administration and Commerce</p>
</div>
</div>
<hr>
<div class="main3">
<h2 class="main3h">Contact Us</h2>
<p>Email: vivekcollege@gmail.com. </p>
<p>Phone: 7055604050, 8057100200</p>
</div>
</main>
<hr>
<footer>
<div class="copyright">
<p>&copy; 2025 Vivek University. All rights reserved.</p>
<p>Designed by Shrey Rajput</p>
</div>
</footer>
</body>
</html>
//about.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About</title>
<link rel="stylesheet" href="about.css">
</head>
<body>
<header>
<div class="clgHeader">
<div id="clgName">
<h1>Vivek University</h1>
</div>
<div id="clgAddress">Moradabad Road,Post Agri Bijnor(UP)</div>
</div>
<div class="navBar">
<div class="navContent"><a href="index.html">Home</a></div>
<div class="navContent"><a href="about.html">The College</a></div>
<div class="navContent"><a href="courses.html">Courses</a></div>
<div class="navContent"><a href="placement.html">Placements</a></div>
<div class="navContent"><a href="facilities.html">Facilities</a></div>
<div class="navContent"><a href="library.html">Library</a></div>
</div>
</header>
<main>
<div class="main1">
<img src="About.jpg" alt="clg photo">
</div>
<div class="main2">
<h2>About Us</h2>
<p> Vivek College was founded by 'Shivika Educational Society' in 2003 to meet the needs of professions
from all areas of Professional Education and Research. The college is affiliated to MJP Rohilkhand
University, Bareilly and recognized under section 2 (f) & 12 (B) of the UGC Act 1956. The college campus is
located on the Moradabad, Bijnor State Highway within the natural greenery surroundings of the holy river
Ganges.
The lush green campus with sprawling lawns and playgrounds is esthetically planned and designed with
exquisite facilities to develop congenial environment for the students pursuing their studies far from the
daily hustle-bustle of city life. Along with its wealth of natural resources the campus offers an
academically, socially and culturally enriching environment including well equipped library, smart class
room, auditorium, computer lab and Wi-Fi campus etc.
<br><br><br>
The atmosphere of the campus promotes quality of life and commitment to higher values and the value
based education
system of the college is exemplary.</p>
</div>
</main>
<footer>
<div class="copyright">
<p>&copy; 2025 Vivek University. All rights reserved.</p>
<p>Designed by Shrey Rajput</p>
</div>
</footer>
</body>
</html>
//courses.html
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Courses</title>
<link rel="stylesheet" href="courses.css">
</head>

<body>
<header>
<div class="clgHeader">
<div id="clgName">
<h1>Vivek University</h1>
</div>
<div id="clgAddress">Moradabad Road,Post Agri Bijnor(UP)</div>
</div>
<div class="navBar">
<div class="navContent"><a href="index.html">Home</a></div>
<div class="navContent"><a href="about.html">The College</a></div>
<div class="navContent"><a href="courses.html">Courses</a></div>
<div class="navContent"><a href="placement.html">Placements</a></div>
<div class="navContent"><a href="facilities.html">Facilities</a></div>
<div class="navContent"><a href="library.html">Library</a></div>
</div>
</header>
<main>
<h2>Our Courses</h2>
<div class="courses">
<div class="ug">
<h3>UG Courses</h3>
<ul>
<li>BAMS</li>
<li>B Pharma | D Pharma</li>
<li>P.B.B.Sc(Nursing)</li>
<li>B.Sc(Nursing)</li>
<li>BPT | BMLT</li>
<li>ANM | GNM</li>
<li>B.A.LL.B | LL.B</li>
<li>B.Sc(Hons.)</li>
<li>B.Sc(Home Science)</li>
<li>BBA</li>
<li>B.Com(Hons.)</li>
<li>BCA</li>
<li>B.Ed</li>
<li>D.EL.Ed | BTC</li>
</ul>
</div>
<div class="pg">
<h3>PG Courses</h3>
<ul>
<li>M.Pharm</li>
<li>MSW</li>
<li>MBA(Integrated)</li>
<li>MBA</li>
<li>M.Sc(Home Science)</li>
<li>MCA</li>
</ul>
</div>
</div>
</main>
<footer>
<div class="copyright">
<p>&copy; 2025 Vivek University. All rights reserved.</p>
<p>Designed by Shrey Rajput</p>
</div>
</footer>
</body>
</html>
//placement.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Placements</title>
<link rel="stylesheet" href="placement.css">
</head>
<body>
<header>
<div class="clgHeader">
<div id="clgName">
<h1>Vivek University</h1>
</div>
<div id="clgAddress">Moradabad Road,Post Agri Bijnor(UP)</div>
</div>
<div class="navBar">
<div class="navContent"><a href="index.html">Home</a></div>
<div class="navContent"><a href="about.html">The College</a></div>
<div class="navContent"><a href="courses.html">Courses</a></div>
<div class="navContent"><a href="placement.html">Placements</a></div>
<div class="navContent"><a href="facilities.html">Facilities</a></div>
<div class="navContent"><a href="library.html">Library</a></div>
</div>
</header>
<main>
<h2> RECRUITERS : INTRODUCTION</h2>
<div class="mainData">
<h3>Introduction</h3>
<p> In today’s competitive environment where to get a respectful job is still a challenge for many students,
we at Vivek Group of Colleges are very much focused on the subject of student’s placement. We have set
up a Corporate Resource Committee. It constitutes the Faculties with prior corporate experience,
academicians and students from various departments. It is our continuous Endeavour to create all efforts
which bring students and various corporate at a common platform. We groom students according to
changing requirements of industry with the help of soft training, corporate behavioural training and other
company specific requirements</p>
<h3>Objective</h3>
<p> Since we project ourselves as Placement Cell and not a job provider to students yet all efforts are made
to provide 100% students - a common platform for corporate interaction.</p>
<h3>Functions of a Placement cell</h3>
<p> The primary function of the placement cell is to facilitate the students regarding their interaction with
placement cell <br>
To arrange corporate lectures time to time for students for better understanding of industry trends<br>
To collect the data of all the working students so that this can be worked upon further<br>
To arrange the various Industrial visits from time to time for different courses to give the students a perfect
experintial learning<br>
To take up the Summer Internship Programs of the student</p>
<h3>Guidelines to companies</h3>
<p>The Company which is coming to campus must be a registered company under companies Act<br>
The Company must have minimum employee strength of 300<br>
The Company must have fair business dealings and proven track record<br>
The Company must inform the details of executives coming to campus well in advance<br>
The Companies must share the details of exceutives and complete job profile which they are offering to the
students at least for 1 year and cannot expel the student before that.</p>
</div>
</main>
<footer>
<div class="copyright">
<p>&copy; 2025 Vivek University. All rights reserved.</p>
<p>Designed by Shrey Rajput</p>
</div>
</footer>
</body>
</html>
//facilities.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Facilities</title>
<link rel="stylesheet" href="facilities.css">
</head>
<body>
<header>
<div class="clgHeader">
<div id="clgName">
<h1>Vivek University</h1>
</div>
<div id="clgAddress">Moradabad Road,Post Agri Bijnor(UP)</div>
</div>
<div class="navBar">
<div class="navContent"><a href="index.html">Home</a></div>
<div class="navContent"><a href="about.html">The College</a></div>
<div class="navContent"><a href="courses.html">Courses</a></div>
<div class="navContent"><a href="placement.html">Placements</a></div>
<div class="navContent"><a href="facilities.html">Facilities</a></div>
<div class="navContent"><a href="library.html">Library</a></div>
</div>
</header>
<main>
<h2>FACILITIES</h2>
<p> For the smooth functioning of the system and for the 'Ease of Maintenance' Vivek College of Education
provides various facilities to the students as follows:</p>
<div class="mainData">
<div class="items">The Library facility with Book bank scheme</div>
<div class="items">The Computer Lab with Wi-Fi connectivity</div>
<div class="items">The Transport Facility</div>
<div class="items">The Stationery</div>
<div class="items">The Canteen</div>
<div class="items">E-library</div>
</div>
</main>
<footer>
<div class="copyright">
<p>&copy; 2025 Vivek University. All rights reserved.</p>
<p>Designed by Shrey Rajput</p>
</div>
</footer>
</body>
</html>
//library.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Library</title>
<link rel="stylesheet" href="library.css">
</head>
<body>
<header>
<div class="clgHeader">
<div id="clgName">
<h1>Vivek University</h1>
</div>
<div id="clgAddress">Moradabad Road,Post Agri Bijnor(UP)</div>
</div>
<div class="navBar">
<div class="navContent"><a href="index.html">Home</a></div>
<div class="navContent"><a href="about.html">The College</a></div>
<div class="navContent"><a href="courses.html">Courses</a></div>
<div class="navContent"><a href="placement.html">Placements</a></div>
<div class="navContent"><a href="facilities.html">Facilities</a></div>
<div class="navContent"><a href="library.html">Library</a></div>
</div>
</header>
<main>
<div class="mainData">
<h2>INTRODUCTION</h2>
<p> An academic Library is a library which is an integral component of any Higher Education Institution and
serves two complementary purpose i.e. to support the curriculum, and to support the research of the
university faculty and students. Modern academic libraries generally also provide access to electronics
resources.</p>
<h3>Aims and objectives of college library:</h3>
<p>A library attached or associated with a college and used by teacher, students and staff of the college is
known as college library. The objectives of colleges libraries are as discussed below:<br>
1. It helps in all educational and instruction all programs of the college. <br>
2. It develops a habit of deep of and advanced studies of subjects beyond and text books of subjects,
in Students.<br>
3. It enhances the understanding of different subjects or discipline among the students.<br>
4. It prepares the students as an intelligent aware, Informative and enlightened to play the role of
a responsible citizen.<br>
5. It assists the resource works and lays down the initiative base for research work in students.<br>
6. It informs the teacher with latest up- dates in their respective subject area.<br>
7. It provide healthy entertainment material to its users.</p>
<h3>Library Rules:</h3>
<p> 1. Members must show their Library-card on entering the Library, while borrowing book(s) and at any
time it asked to do so by the library staff.<br>
2. Use of Mobile phone is not permitted.<br>
3. Personal belongings like bsg must be kept in the Almirah available at the main entrance.<br>
4. No library material can be taken out of the library without permission.<br>
5. Strict silence decorum and discipline must be maintained in the library.<br>
6. Every member must sign the register available at the entrance.<br>
7. Members are free to browse through the books. Books taken out of the shelves must be put on a
table. Replacing the books on shelves is not encouraged as if it may be misplaced. Misplaced is a lost
books.<br>
8. Readers should not mark, underline, write on, tear pages from or damage the Library documents.<br>
9. News-papers and Magazines must be read only in the library on specific stand/place and should not
be taken on any reading area.<br>
10. Anyone who violates the rules and regulations of the library would be liable to lose the privileges
of library membership.</p>
</div>
</main>
<footer>
<div class="copyright">
<p>&copy; 2025 Vivek University. All rights reserved.</p>
<p>Designed by Shrey Rajput</p>
</div>
</footer>
</body>
</html>
//style.css
*{
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
padding-left: 200px;
padding-right:
200px;
}
.clgHeader{
height: 90px;
background-color: rgb(235, 235, 235);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#clgName{
font-size: 25px;
color: rgb(0, 182, 238);
}
#clgAddress{ fo
nt-size: 20px;
}
.navBar{
height: 50px;
background-color: rgb(0, 182, 238);
display: flex;
align-items: center;
justify-content: space-evenly;
}
.navContent{ colo
r: white;
font-size: 20px;
}
hr{
margin: 5px;
border: 5px solid rgb(226, 226,
226); border-radius: 5px;
}
.main1{ disp
lay: flex;
gap: 10px;
justify-content: center;
}
.clgImg{ heigh
t: 300px;
border-radius: 20px;
}
.introHead{ col
or: green;
font-size: 25px;
}
.introDef{
font-size: 19px;
padding: 5px;
border-radius: 20px;
background-color: rgb(226, 226, 226);
}
.main2{ disp
lay: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
}
.facultyHead{ f
ont-size: 25px;
color: brown;
}
.facultyMember1{ disp
lay: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.facultyMember2{ disp
lay: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.main3{
font-size: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
}
.main3h{ col
or: brown;
}
.copyright{ hei
ght: 100px;
background-color: rgb(228, 228, 228);
margin: 10px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
//about.css
*{
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
padding-left: 200px;
padding-right:
200px;
}
.clgHeader{
height: 90px;
background-color: rgb(235, 235, 235);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#clgName{
font-size: 25px;
color: rgb(0, 182, 238);
}
#clgAddress{ fo
nt-size: 20px;
}
.navBar{ hei
ght: 50px;
background-color: rgb(0, 182, 238);
display: flex;
align-items: center;
justify-content: space-evenly;
}
.navContent{ colo
r: white;
font-size: 20px;
}
hr{
margin: 5px;
border: 5px solid rgb(226, 226,
226); border-radius: 5px;
}
h2{
font-size: 35px;
}
p{
font-size: 20px;
}
main{ displa
y: flex;
flex-direction: column;
align-items: center;
}

.copyright{ hei
ght: 100px;
background-color: rgb(228, 228, 228);
margin: 10px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
//courses.css
*{
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
padding-left: 200px;
padding-right:
200px;
}
.clgHeader{
height: 90px;
background-color: rgb(235, 235, 235);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#clgName{
font-size: 25px;
color: rgb(0, 182, 238);
}
#clgAddress{ fo
nt-size: 20px;
}
.navBar{ hei
ght: 50px;
background-color: rgb(0, 182, 238);
display: flex;
align-items: center;
justify-content: space-evenly;
}
.navContent{ colo
r: white;
font-size: 20px;
}
hr{
margin: 5px;
border: 5px solid rgb(226, 226,
226); border-radius: 5px;
}
h2{
font-size: 35px;
color: brown;
text-align: center;
padding-top: 30px;
}
h3{
color: blueviolet;
padding-bottom: 10px;
}
.courses{ padd
ing: 50px;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
li{
list-style-type: circle;
padding: 5px;
}
.copyright{ hei
ght: 100px;
background-color: rgb(228, 228, 228);
margin: 10px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
//placement.css
*{
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
padding-left: 200px;
padding-right:
200px;
}
.clgHeader{
height: 90px;
background-color: rgb(235, 235, 235);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#clgName{
font-size: 25px;
color: rgb(0, 182, 238);
}
#clgAddress{ fo
nt-size: 20px;
}
.navBar{ hei
ght: 50px;
background-color: rgb(0, 182, 238);
display: flex;
align-items: center;
justify-content: space-evenly;
}
.navContent{ colo
r: white;
font-size: 20px;
}
hr{
margin: 5px;
border: 5px solid rgb(226, 226,
226); border-radius: 5px;
}
h2{
font-size: 35px;
color: brown;
text-align: center;
padding-top: 30px;
}
h3{
font-size: 25px;
}
p{
font-size: 18px;
}
.mainData{
display: flex;
flex-direction: column;
gap: 10px;
}
.copyright{ hei
ght: 100px;
background-color: rgb(228, 228, 228);
margin: 10px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
//facilities.css
*{
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
padding-left: 200px;
padding-right:
200px;
}
.clgHeader{
height: 90px;
background-color: rgb(235, 235, 235);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#clgName{
font-size: 25px;
color: rgb(0, 182, 238);
}
#clgAddress{ fo
nt-size: 20px;
}
.navBar{ hei
ght: 50px;
background-color: rgb(0, 182, 238);
display: flex;
align-items: center;
justify-content: space-evenly;
}
.navContent{ colo
r: white;
font-size: 20px;
}
hr{
margin: 5px;
border: 5px solid rgb(226, 226,
226); border-radius: 5px;
}
h2{
font-size: 60px;
color: brown;
text-align: center;
padding-top: 30px;
}
p{
font-size: 20px;
text-align: center;
}
.mainData{
display: flex;
flex-wrap: wrap;
align-items:
center;
justify-content: center;
gap: 40px;
padding: 50px;
}
.items{ displ
ay: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 20px;
font-size: 20px;
color: white;
background-color:
blueviolet; border-radius:
20px;
width: 300px;
height: 100px;
}
.copyright{ hei
ght: 100px;
background-color: rgb(228, 228, 228);
margin: 10px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
//library.css
*{
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
padding-left: 200px;
padding-right:
200px;
}
.clgHeader{
height: 90px;
background-color: rgb(235, 235, 235);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#clgName{
font-size: 25px;
color: rgb(0, 182, 238);
}
#clgAddress{ fo
nt-size: 20px;
}
.navBar{ hei
ght: 50px;
background-color: rgb(0, 182, 238);
display: flex;
align-items: center;
justify-content: space-evenly;
}
.navContent{ colo
r: white;
font-size: 20px;
}
hr{
margin: 5px;
border: 5px solid rgb(226, 226,
226); border-radius: 5px;
}
h2{
font-size: 30px;
color: brown;
padding: 30px;
}
.mainData{
display: flex;
flex-direction: column;
padding: 50px;
gap: 10px;
}
.copyright{ hei
ght: 100px;
background-color: rgb(228, 228, 228);
margin: 10px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

OUTPUT:

You might also like