Scribd
Upload
47 views30 pages

Experiment No 1

The document describes creating an HTML/JavaScript program to display a CV on different websites. It includes the code to create a navigator page with links to the CV, institute website, department website and tutorial website. It then provides the HTML code for each of these pages, with the CV page being the most detailed.

Uploaded by

7888sanjay
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
47 views30 pages

Experiment No 1

The document describes creating an HTML/JavaScript program to display a CV on different websites. It includes the code to create a navigator page with links to the CV, institute website, department website and tutorial website. It then provides the HTML code for each of these pages, with the CV page being the most detailed.

Uploaded by

7888sanjay
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/ 30

Experiment No: 1

Aim: Write HTML / JavaScript to display your CV in a navigator, your Institute


website, Department Website and Tutorial website for specific subject.

Software Required: Notepad, SDK

Program:

1. Navigator.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Navigator</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #ffffff;
}

.nav {
background-color: #f0f0f0;
padding: 20px;
margin: 20px;
border-radius: 20px;
}

.nav p {
font-size: larger;
font-weight: 700;
margin: 0;
}
.center {
margin-top: 20px;
margin-left: auto;
margin-right: auto;
}
.center td {
padding: 10px;
}
.center a {
text-decoration: none;
color: #333;
font-weight: bold;
}
.center a:hover {
color: #007bff;
}
</style>
</head>
<body>
<div class="nav">
<table class="center">
<thead>
<p
style="
text-decoration: underline;
color: black;
font-size: larger;
font-weight: 700;
"
>
Navigator
</p>
</thead>
<tr>
<td><a href="myCV.html">My CV</a></td>
</tr>
<tr>
<td><a href="instituteWebsite.html">Institute Website</a></td>
</tr>
<tr>
<td><a href="departmentWebsite.html">Department Website</a></td>
</tr>
<tr>
<td><a href="tutorialWebsite.html">Tutorial Website</a></td>
</tr>
</table>
</div>
</body>
</html>

2. myCV.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My CV</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0fb;
color: #333;
}
a:active {
color: red;
}
.container {
/* max-width: 800px; */
margin: 0px;
padding: 20px;
background-color: #fff;
border: 1px solid #dfdddd;
border-radius: 5px;
}

header {
padding: 8px;
padding-bottom: 2px;
margin-bottom: 20px;
background-color: #f3efef;
border-radius: 8px;
}

h1,
h2,
h3,
h4 {
margin-top: 20px;
margin-bottom: 10px;
}

h2 {
font-size: 28px;
text-decoration: underline;
text-align: center;
}

h3 {
font-size: 24px;
text-decoration: underline;
}

h4 {
font-size: 18px;
color: #000000;
}

p{
font-size: 16px;
margin-bottom: 20px;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}

table,
th,
td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}

th {
background-color: #f2f2f2;
}

.project {
margin-bottom: 20px;
}

.project h3.title {
margin-bottom: 10px;
}

.project .field {
background-color: #bbcfd9;
color: #fff;
padding: 3px 8px;
border-radius: 5px;
}

.skills {
margin-top: 20px;
}

.skills h2 {
margin-bottom: 10px;
}
.heading {
/* margin-top:20px; */
padding: 20px;
text-align: center;
background-color: #f3efef;
font-family: Arial, Helvetica, sans-serif;
margin-bottom: 20px;
font-weight: 700;
border-radius: 8px;
font-size: 32px;
color: #000000;
margin-top: 10px;
margin-bottom: 25px;
text-decoration: underline;
text-shadow: #1d1b53;
/* font-style: italic; */
}
ul {
background-color: #bbcfd9;
border-radius: 8px;
background: #dae7ed;
padding: 30px;
padding-top: 7px;
padding-bottom: 6px;
/* margin-top:1px; */
/* margin-left: 10px; */
line-height: 120%;
}
</style>
</head>
<body>
<div class="container">
<!-- <div class="heading">My CV</div> -->
<header>
<h1 id="name">Sanjay Thakur</h1>
<div id="designation">
<span class="title">Student </span>
<span class="organization"
>@GL Bajaj Institute of Technology and Management</span
>
</div>
<div class="contact">
<div class="email">
<p>
Mail:
<a href="mailto:[email protected]">[email protected]</a>
</p>
</div>
</div>
</header>
<div class="content" role="main">
<section id="objective">
<h2 class="title">Objective</h2>
<div class="description">
<p>
I am 3rd year B.Tech student, and my interest is web development.
</p>
</div>
</section>
<section id="education">
<h2 class="title">Education</h2>
<div class="description">
<table>
<thead>
<tr>
<th>Duration</th>
<th>Qualification</th>
<th>Institute</th>
<th>Result</th>
</tr>
</thead>
<tr>
<td>4 year</td>
<td>B.Tech</td>
<td>GL Bajaj Institute of Technology and Management</td>
<td>84.4</td>
</tr>
<tr>
<td>2 year</td>
<td>HighSchool</td>
<td>--</td>
<td>87.5</td>
</tr>
</table>
</div>
</section>
<section id="projects">
<h2 class="title">Projects Undertaken</h2>
<div class="project">
<h3 class="title">Brain Tumor Detection</h3>
<div class="meta">
<span class="field">Machine Learning</span>
</div>
<p class="description">
The development of an accurate and efficient deep learning model
for brain tumor detection using MRI images has significant
implications for the early detection and diagnosis of brain
tumors. Early detection of brain tumors can improve the prognosis
and treatment outcomes for patients, as it can allow for prompt
initiation of treatment and better preservation of brain function.
</p>
</div>
<div class="project">
<h3 class="title">
<a
href="https://github.com/sanjay-1458/CRUD-Application-Using-React.js"
style="text-decoration: none; color: black"
>CRUD-Application-Using-React.js</a
>
</h3>
<div class="meta">
<span class="field">ReactJS</span>
</div>
<p class="description">
Designed a user interface for a CRUD application. Implemented 4-5
different functionalities within modular components. Interacted
with a RESTful API to execute CRUD operations and managed the
database.
</p>
</div>
<div class="project">
<h3 class="title">
<a
href="https://github.com/sanjay-1458/Python-ChatBot"
style="text-decoration: none; color: black"
>Python Chatbot</a
>
</h3>
<div class="meta">
<span class="field">NLP</span>
</div>
<p class="description">
Developed a chatbot using NLP to understand user questions and
provide automated responses. Implemented conversational AI
techniques for user interaction.
</p>
</div>
</section>
<section id="skills" class="skills">
<h2>Technical Skills</h2>
<span id="tech">
<ul>
<li>C++</li>
<li>Java</li>
<li>Python</li>
<li>SQL</li>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
<!-- C+
+,Java,Python,MongoDB,SQL,HTML,CSS,Javascript,NodeJS,ReactJS,ExpressJS -->
</span>
</section>
</div>
</div>
</body>
</html>

3. instituteWebsite.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Institute Website</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
background-color: #ffffff;
color: black;
}

h1 {
text-align: center;
}

h2 {
color: #000000;
font-size: 24px;
margin-top: 30px;
margin-bottom: 15px;
text-decoration: underline;
}

h3 {
color: #000000;
font-size: 20px;
margin-top: 25px;
margin-bottom: 10px;
/* text-decoration: dotted; */
}

p{
color: #000000;
font-size: 16px;
margin-bottom: 20px;
}

center {
display: block;
margin-top: 20px;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<h1>
<center>GL Bajaj Institute of Technology and Management</center>
</h1>
<h2>About US</h2>
<p>
GL Bajaj Institute of Technology and Management is the 6th Institute
established under the prestigious banner of Rajeev Memorial Academic
Welfare Society (Registered Under Societies Registration Act 1860). The
institute is approved by All India Council for Technical Education
(AICTE), Ministry of HRD, Govt. of India and Affiliated to Dr. A.P.J.
Abdul Kalam Technical University (Formerly UPTU Lucknow).
<br />
<br />
GL Bajaj Institute of Technology and Management is one of the quality
driven Educational Institute in the Greater Noida/Delhi-NCR Region. GL
Bajaj stands out as one of the best engineering and management college in
UP. It also stands out in its approach to assist and equip the students
for their overall development, giving them a strong foundation for a
successful future. The institute offers B.Tech, MBA and MCA programs.
<br />
<br />
This self financed institute is governed by Rajeev Memorial Academic
Welfare Society (Registered Under Societies Registration Act 1860). It is
approved by All India Council for Technical Education (AICTE), Ministry of
Human Resource Development, Government of India and affiliated to Dr.
A.P.J. Abdul Kalam Technical University, Lucknow.
</p>
<h2>Campus Facilities</h2>
<h3>Green Initiative for Eco-Friendly Campus</h3>
<p>
The Institute has a state-of-the-art, PV Solar Panels, Solar Water Heating
and Water Harvesting .
</p>
<h3>Auditorium & Conference Room</h3>
<p>
The Institute has a state-of-the-art, fully air-conditioned auditorium
with a seating capacity of 350 people, huge amphitheater and numerous
conference rooms. Auditorium and conference rooms are well-equipped with
latest acoustics technology, sound system and reflect an excellent work of
modern architecture.
</p>
<h3>Class Rooms</h3>
<p>
Big and spacious lecture rooms have been specially designed and created to
hold lectures that are highly interpersonal. To compliment traditional
methods of teaching, the use of advanced aids like LCD Projectors, Public
Address Systems and various other on-line can be accessed if required.
</p>
<h3>Labs</h3>
<p>
Labs play a very critical role in technical education. Almost every topic
taught during lecture has a corresponding experiment. GL Bajaj pays great
attention to its labortries and the equipment in them. All the departments
at GL Bajaj are equipped with state of the art laboratories and workshop
to ensure that the students learn practical aspects of Engineering. The
faculty members are actively engaged in the research and development
activities with technical support of various industries and govt.
agencies.
</p>
<h3>Central Library</h3>
<p>
The Central Library of G L Bajaj is user-focused, innovative, and
excellence driven. The library has always benefited from the institute’s
culture, is pioneer in adopting new technology and is far ahead than many
libraries in the region. Central Library manages knowledge both in print
and digital formats, ensures seamless discovery and access to the
scholarly resources and provides faculty, students, and staff with
professional support to find, evaluate, manage, and use resources.
</p>
<h2>Academics</h2>
<h3>Departments</h3>
<p>
Computer Science & Engineering, Electronics & Communication Engineering,
Mechanical Engineering, Information Technology, Applied Science &
Humanities, Electrical & Electronics Engineering, Master of Computer
Applications (MCA) and Master of Business Administration (MBA) have an
independent infrastructure. Every department is driven by vibrant HOD and
has a strong team of Professors, Associate Professors and Assistant
Professors who device their own innovative ideas to enrich the educational
experience of the students.
</p>
<h2>COURSES & ADMISSION</h2>
<h3>Under Graduate (B.TECH)</h3>
<p>
Applied Computational Science & Engineering <br />
Civil Engineering <br />
Computer Sc. & Engg.(Regional language) <br />
Computer Science and Engineering <br />
Electrical and Electronics Engineering <br />
Electronics and Communication Engineering <br />
Information Technology <br />
Mechanical Engineering <br />
</p>
<h3>Post Graduate</h3>
<p>
M.Tech Computer Science and Engineering <br />
Master of Business Administration <br />
Master of Computer Applications <br />
MBA (Business Analytics) <br />
</p>
</body>
</html>

4. departmentWebsite.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Department</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
background-color: rgb(215, 232, 245);
}

h1 {
text-align: center;
margin-top: 20px;
margin-bottom: 10px;
}
h2 {
font-size: 28px;
margin-top: 20px;
margin-bottom: 10px;
text-decoration: underline;
text-align: center;
}

h3 {
color: #1c1616;
font-size: 24px;
margin-top: 25px;
margin-bottom: 10px;
text-decoration: underline;
}

h4 {
color: #000000;
font-size: 18px;
margin-top: 20px;
margin-bottom: 10px;
}

p{
color: #000000;
font-size: 16px;
margin-bottom: 20px;
}
table {
width: 80%;
margin: auto;
padding: 20px;
border: 1px solid #cecbcb;
background-color: #f9f1f1;
}
th,
td {
text-align: left;
}
</style>
</head>
<body>
<h1>ASCE</h1>
<table>
<tr>
<td colspan="2">
<h2>Computer Science and Engineering</h2>
</td>
</tr>
<tr>
<td colspan="2">
<h3>About Department</h3>
<h4>
B.Tech (4 Years) & M.Tech (2 Years), Approved by AICTE Affiliated to
Dr. A.P.J. Abdul Kalam Technical University
</h4>
<p>
The Department of Computer Science Engineering at GL Bajaj Institute
of Technology was established in the year 2005 with a vision to help
the IT boom and fulfill the need of dynamic Software Engineers
globally. Since then, especially in the last ten years of the IT
revolution, the department has taken long strides and is now among
one of the best department in the college. The Department aims to
nurture students in terms of modern computer techniques and to
prepare them, to cope well with the technical advancements in
future. Computer Science being the flagship branch of Engineering
takes focus in scientific research, scientific programming, and
software engineering.
</p>
</td>
</tr>
<tr>
<td colspan="2">
<h3>The Department offers</h3>
<p>
The Department offers four years Bachelor’s Degree Program in
Computer Engineering with an intake of 300, two years Master’s
Degree program in Computer Engineering with an intake of 18. The
Department conducts various Seminars, Workshops, Conferences,
Symposiums, Short term training and Certifications from reputed
groups in accordance to the demand of the future technical needs.
</p>
</td>
</tr>
</table>
<table>
<tr>
<td colspan="2">
<h2>Information Technology</h2>
</td>
</tr>
<tr>
<td colspan="2">
<h3>About Department</h3>

<p>
The Department of Information Technology at G.L. Bajaj Institute of
Technology & Management was established in the year 2007 with a
vision to develop competent IT professionals catering to the needs
of Industry and society in a global perspective. The Department aims
to foster students to attain professional excellence by providing
exposure to new IT tools and technologies. Information Technology
being the flagship branch of Engineering takes focus in scientific
research, scientific programming, Application programming, and
software engineering. The Department has well-equipped laboratories
with state-of-the-art hardware and software resources, lecture
halls, seminar halls, tutorial rooms and faculty sections. The
Department has a blend of experienced and young faculty members who
also work as mentors to the equally diligent and hardworking
students.
</p>
</td>
</tr>
<tr>
<td colspan="2">
<h3>The Department offers</h3>
<p>
The Department offers four years Bachelor’s Degree Program in
Information Technology with an intake of 180. IT Department
regularly conducts various Seminars, Guest Lectures, Workshops,
Summer Training and Value Added Courses in accordance to the demand
of IT Industry. The Department is working in close association with
industry and research organization in the field of Information
Technology. Our Alumni remain in constant touch with us and are
contributing in the development of the department. Placements for
our graduates are the best in the Institute. The faculty members of
the department have excellent academic experience.
</p>
</td>
</tr>
</table>
</body>
</html>

5. tutorialWebsite.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tutorial Website</title>
<style>
body {
font-family: Arial, sans-serif;
}

h1 {
text-align: center;
text-decoration: underline;
font-weight: 500;
}

table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}

th,
td {
border: 1px solid #ccc;
padding: 8px;
text-align: center;
vertical-align: middle;
}
td:hover {
background-color: #e6f0f1;
}

th {
background-color: #f2f2f2;
}
a{
text-decoration: none;
color: blue;
}

a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>Tutorial Website</h1>
<br /><br />
<table>
<tr>
<th>Syllabus</th>
</tr>
<tr>
<td><a href="#">Syllabus Link</a></td>
</tr>
</table>
<br />
<table>
<tr>
<th>Subject Name</th>
</tr>
<tr>
<td><a href="#">Web Technology</a></td>
</tr>
<tr>
<td><a href="#">Software Project Management</a></td>
</tr>
<tr>
<td><a href="#">Data Analytics</a></td>
</tr>
<tr>
<td><a href="#">Computer Networks</a></td>
</tr>
</table>
</body>
</html>

Output:
1.Navigator:
2.CV:
3. Institute Website:

4. Department Website:
5. Tutorial Website:

You might also like