WebTech (P2)
WebTech (P2)
WebTech (P2)
Objective: Write an HTML program for designing your institute backside which
includes the information related to each department in your organization.
Introduction
The <iframe> tag is used to embed an external document or webpage within an HTML
document. It creates a rectangular region, known as an inline frame, where the browser
displays the external content. This tag is commonly used to:
• Embed videos, maps, or other web pages within a webpage
• Create responsive and dynamic layouts
• Improve user experience by providing additional information or functionality
Basic Syntax
<frameset rows="50%,50%">
</frameset>
Hyperlinks, also known as links, are a fundamental element in HTML (Hypertext Markup
Language). They enable users to navigate between web pages, documents, or resources by
clicking on a clickable element, such as text, images, or icons.
A hyperlink is defined using the <a> tag, also known as the anchor tag. The basic structure is:
• href attribute specifies the URL (Uniform Resource Locator) of the linked resource.
• Link Text is the text or content that serves as the clickable element.
Code:-
<!DOCTYPE html>
<html>
<head>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
#header {
background-color: #d45500;
color: white;
padding: 20px;
font-size: 24px;
display: flex;
align-items: center;
#header img {
width: 60px;
height: 60px;
margin-right: 20px;
#main {
display: flex;
#menu {
background-color: #f4f4f4;
padding: 20px;
font-size: 18px;
width: 25%;
box-sizing: border-box;
#menu a {
display: block;
color: #000;
padding: 10px;
text-decoration: none;
margin-bottom: 10px;
#menu a:hover {
background-color: #ddd;
#content {
width: 75%;
padding: 20px;
box-sizing: border-box;
iframe {
width: 100%;
height: 100%;
border: none;
</style>
</head>
<body>
<div id="header">
</div>
</table>
</header>
<br>
<hr><br>
<section>
<nav>
<table>
<tr>
<b>
<td><a href="#"><span>Infrastructure</span></a>       
<td><a href="#"><span>News</span></a>       
<td><a href="#"><span>General
Information</span></a>       
<td><a href="#"><span>Circulars</span></a>       
</b>
</tr>
</table>
</nav>
</section>
<div id="main">
<div id="menu">
</div>
<div id="content">
<iframe name="contentFrame" src="aboutus.html"></iframe>
</div>
</div>
</body>
</html>
About us
<!DOCTYPE html>
<html>
<body>
<h2>About Us</h2>
<p>ABES Engineering College is one of the prestigious institutes offering quality technical education...
The vision is to take ABES Engineering College to such a level that, it is at par with the leading institutions of
the world in providing leadership to the international education system and be amongst the top rated institutions
of the world by providing a transformative education to create leaders and innovators embedded in traditional
Indian values.
</p>
<p> ABES Engineering College believes in providing the best college experience to the students. With state of the
art facilities and upgraded infrastructure ABESEC is one of the best colleges in AKTU. The technologically upgraded
classrooms facilitate teaching through advanced tools and techniques. The college has air-conditioned classrooms
with Wi-Fi enabled projectors, tutorial rooms, libraries, seminar rooms and fully equipped auditorium.</p>
<p> The library is anem powering unit providing audio-visual aids to the students. The college is enriched with
renovated hostels, medical support systems, modern gymnasium, floodlit stadium, swimming pool and a vast
parking facility. The college provide saneco-friendly environment to its students by being a complete smoke-
freezone, and it has also taken active steps towards latest initiatives of solar energy and other green initiatives.The
college has take next ensive measures to address the need for vigilance and security.The campus is fully CCTV-
enabled to cater to the safety requirements of the students and staff.</p>
<h1>Mission</h1>
<ul>
<ol>
<li>A spirit to be of utmost use to the industry, corporate sector and the society at large.</li>
<li>An intense desire to take challenging responsibilities and leadership roles.</li>
</ol>
</li>
<li>To develop an environment for creating new knowledge through research and by thriving to explore innovative
ideas.</li>
</ul>
</body>
</html>
Department
<!DOCTYPE html>
<html>
<head>
<title>Departments</title>
</head>
<body>
<h2>Departments</h2>
<select id="departments">
</select>
<p id="department-info">
<!-- Information about the selected department can go here if you want to display additional text or info. -->
</p>
</body>
</html>
Faculty
<!DOCTYPE html>
<html>
<body>
<h2>Faculty</h2>
<p>Our esteemed faculty includes experienced professors, lecturers, and industry experts...</p>
<thead>
<th>S.No</th>
<th>E-mail</th>
</thead>
<tr>
<td>pragati.srivastava@abes.ac.in</td>
</tr>
<tr>
<td>Associate Professor</td>
<td>amit.agrawal@abes.ac.in</td>
</tr>
<tr>
<td>bidyut.mahato@abes.ac.in</td>
</tr>
<tr>
<td>MR. VIVEK KUMAR VERMA</td>
<td>vivek.verma@abes.ac.in</td>
</tr>
<tr>
<td>praveen.raghuvanshi@abes.ac.in</td>
</tr>
<tr>
<td>Assistant Professor</td>
<td>vikash.tiwari@gmail.com</td>
</tr>
<tr>
<td>sumit.maheshwari@abes.ac.in </td>
</tr>
</table>
</body>
</html>
Career
<!DOCTYPE html>
<html>
<body>
<h2>Career</h2>
<p>ABES Engineering College, Ghaziabad provides a vibrant work environment for its faculty members and staff.
The communication is open and focus is on creating a flat organization where
everyone has a voice and can be heard. We encourage participative development and performance- oriented
culture
</p>
<p>ABESEC pride ourselves in offering a great working environment which is built on principles of quality and
inclusion. The organization draws its’ strength from:</p>
<ol>
<li>An environment that facilitates faculty and staff achieve their full potential</li>
<li>Policies that care for group and individual needs including free medical insurance for all</li>
</ol>
</body>
</html>
Output: