WebTech (P2)

Download as pdf or txt
Download as pdf or txt
You are on page 1of 11

Practical-2

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

<iframe src="URL" title="description"></iframe>


The <frame> tag is used to define a single frame within a frameset. It is a deprecated tag in
HTML5, but it is still supported for backward compatibility.
Here is an example of using the <frame> tag:

<frameset rows="50%,50%">

<frame src="left.htm" name="left" frameborder="1" scrolling="yes">

<frame src="right.htm" name="right" frameborder="1" scrolling="yes">

</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:

<a href="URL">Link Text</a>

• 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>

<title>ABES Engineering College</title>

<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;

height: calc(100% - 80px); /* Adjusting height minus header */

#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>

<!-- Header with College Name and Logo -->

<div id="header">

<img src="ABES logo.png" alt="ABES Engineering College Logo">

<div>ABES ENGINEERING COLLEGE</div>

</div>

</table>
</header>

<br>

<hr><br>

<section>

<nav>

<table>

<tr>

<b>

<td><a href="#"><span>Infrastructure</span></a>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp

<td><a href="#"><span>News</span></a>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp

<td><a href="#"><span>General

Information</span></a>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp

<td><a href="#"><span>College Rules</span></a>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp

<td><a href="#"><span>Circulars</span></a>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp

<td><a href="tel:+9627862074"><span>9627862074 , 9412118264</span></a>

</b>

</tr>

</table>

</nav>

</section>

<!-- Main Layout with Menu and Content -->

<div id="main">

<!-- Left Menu Section -->

<div id="menu">

<a href="aboutus.html" target="contentFrame">About Us</a>

<a href="departments.html" target="contentFrame">Departments</a>

<a href="faculty.html" target="contentFrame">Faculty</a>

<a href="career.html" target="contentFrame">Career</a>

</div>

<!-- Right Content Section using iframe -->

<div id="content">
<iframe name="contentFrame" src="aboutus.html"></iframe>

</div>

</div>

</body>

</html>

About us

<!-- aboutus.html -->

<!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>

<li>To create an ambiance for healthy teaching-learning process.</li>

<li>To nurture the students and infuse in them-

<ol>

<li>A passion to excel professionally.</li>

<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>

<p>Select a department from the dropdown list below:</p>

<select id="departments">

<option value="cse">Computer Science & Engineering</option>

<option value="ece">Electronics & Communication Engineering</option>

<option value="me">Mechanical Engineering</option>

<option value="ce">Civil Engineering</option>

<option value="ee">Electrical Engineering</option>

</select>

<p id="department-info">

<!-- Information about the selected department can go here if you want to display additional text or info. -->

You can choose any department to see more details.

</p>
</body>

</html>

Faculty

<!-- faculty.html -->

<!DOCTYPE html>

<html>

<body>

<h2>Faculty</h2>

<p>Our esteemed faculty includes experienced professors, lecturers, and industry experts...</p>

<table border="1" width="00px" height="400px">

<thead>

<th>S.No</th>

<th>Name of the Faculty</th>

<th>E-mail</th>

</thead>

<tr>

<td>DR. PRAGATI SHRIVASTAVA DEB</td>

<td>Assistant Professor(Selection Grade) & Head</td>

<td>pragati.srivastava@abes.ac.in</td>

</tr>

<tr>

<td>DR. AMIT AGRAWAL</td>

<td>Associate Professor</td>

<td>amit.agrawal@abes.ac.in</td>

</tr>

<tr>

<td>DR. BIDYUT MAHATO</td>

<td>Assistant Professor(Selection Grade)</td>

<td>bidyut.mahato@abes.ac.in</td>

</tr>

<tr>
<td>MR. VIVEK KUMAR VERMA</td>

<td>Assistant Professor(Sr. Scale)</td>

<td>vivek.verma@abes.ac.in</td>

</tr>

<tr>

<td>MR. PRAVEEN KUMAR RAGHUVANSHI</td>

<td>Assistant Professor(Sr. Scale)</td>

<td>praveen.raghuvanshi@abes.ac.in</td>

</tr>

<tr>

<td>MR. VIKASH TIWARI</td>

<td>Assistant Professor</td>

<td>vikash.tiwari@gmail.com</td>

</tr>

<tr>

<td>MR. SUMIT MAHESHWARI</td>

<td>Assistant Professor(Sr. Scale)</td>

<td>sumit.maheshwari@abes.ac.in </td>

</tr>

</table>

</body>

</html>

Career

<!-- career.html -->

<!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>A culture of mutual trust</li>

<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>

<li>Assigning priority to Individual growth in career</li>

</ol>

<h2>Current Openinings - 31st August 2024</h2>

</body>

</html>
Output:

You might also like