Project Report

On
“Networking”

A Project
submitted in partial fulfillment of the
requirements for the award of the
‘PGDCA’

Under Guidance of
Mrs. Ritu Sharma Submitted By:
Prakash Rana
Kapil Chauhan
Anita Devi
Simran
Nitesh Kumar

pg. 1
 National Institute of Electronics and Information Technology

INDEX

S.no Topic Page

No
1 Acknowledgement 3
2 Declaration 4
3 Guide Certificate 5
4 Certificate 6
5 Introduction To Project 7
6 Importance of Networking 8
7 Hardware And Software Requirements 9
8 About HTML 10-12
9 About Notepad 13-14
10 About Chrome 15
11 Source code 16-27
12 Snapshot of Project 28-39
13 References 40

pg. 2
 ACKNOWLEDGEMENT

The successful completion of this project could not have been possible
without the help and guidance of many people. We take this opportunity to
express our sincere thanks and deep gratitude to all those people who
extended their whole hearted co-operation and helped us in completing this
project successfully.

We are grateful to Mrs. Ritu Sharma for providing us the opportunity to

undertake this project. We thank our guide who has been a source of
inspiration & knowledge for us throughout the completion of the project.
Her support for us was invaluable during the period we were working under
her on project.

SUBMITTED BY: -

Sr. No NAME REGISTRATION SIGNATURE

1 Prakash Rana SHED222RO233
2 Kapil Chauhan SHED222RO234
3 Simran SHED222RO235
4 Anita Devi SHED222RO236
5 Nitesh Kumar SHED222RO237

pg. 3
 DECLARATION
We hereby declare that the work is being presented by us in this project,
entitled “Networking” in partial fulfillment of requirement for PGDCA
Diploma, and submitted at the “NIELIT Shimla” is an authentic piece of our
own work carried out under the supervision of Mrs. Ritu Sharma.

SUBMITTED BY: -

Sr. No NAME REGISTRATION SIGNATURE

1 Prakash Rana SHED222RO233
2 Kapil Chauhan SHED222RO234
3 Simran SHED222RO235
4 Anita Devi SHED222RO236
5 Nitesh Kumar SHED222RO237

pg. 4
 GUIDE CERTIFICATE

This is to certify that this project entitled “NETWORKING” submitted in fulfilment

of the Diploma in PGDCA to the NIELIT Shimla, done by Prakash Rana
(SHED222RO233), Kapil Chauhan (SHED222R0234), Simran (SHED222R0235),
Anita Devi (SHED222R0236), Nitesh Kumar (SHED222R0237) is an authentic work
carried out by them at NIELIT Shimla Centre under my guidance. The matter
embodied in this project work has not been submitted earlier for award of any degree
or diploma to the best of my knowledge and belief.

Signature of the Students Signature of the Guide

(Ritu Sharma)

pg. 5
 CERTIFICATE

This is to certify that the project entitled “Networking” carried out by

Prakash Rana (SHED222RO233), Kapil Chauhan (SHED222R0234),
Simran (SHED222R0235), Anita Devi (SHED222R0236), Nitesh Kumar
(SHED222R0237) for the partial fulfillment of the requirement for the
PGDCA is a bona fide record the work done by the candidates as certified
by the candidate, under my guidance. To the best of my knowledge, this
work has not been submitted for award of any other degree or diploma.

Project Guide Director in Charge

Mrs. Ritu Sharma

pg. 6
 Introduction to project
The networking project aims to explore the fundamentals of web
development. It involves information about transmission of data, network
topologies, network types, network security, etc. Through this project,
viewers gain knowledge of various networking concepts like various
networking devices, networking models, components and features of a
network

What our website will provide to the users

➢ This is a web-based and static web site, providing information about

Networking. As networking is very crucial now a days so awareness
about it must be there.

➢ Various links are provided to guide the users to related pages with
specific information. This website provides respective information about
various aspects of networking.

➢ Anyone can edit this project and can add their contribution to it.

pg. 7
 Importance of Networking
Networking plays a crucial role in today's interconnected world. It enables
communication, collaboration, and resource sharing between devices,
systems, and individuals. The importance of networking can be summarized
as follows:

➢ Communication: Networking provides a platform for efficient and effective

communication, enabling individuals and organizations to exchange
messages, collaborate, and share information in real-time.

➢ Resource Sharing: Networking allows for the sharing of hardware,

software, and data resources, optimizing their utilization and reducing
duplication of efforts. This leads to cost savings and increased productivity.

➢ Collaboration: Networking enables individuals and teams to collaborate and

work together regardless of their physical location. It promotes teamwork,
knowledge sharing, and innovation.

➢ Internet and World Wide Web: Networking forms the backbone of the
internet and the World Wide Web, connecting billions of devices and users
worldwide. It enables access to a vast amount of information, online
services, and global communication.

➢ Business Growth: Networking is essential for businesses to connect with

customers, partners, and suppliers. It facilitates e-commerce, online
transactions, and enables organizations to expand their reach and market
presence.

➢ Security and Data Protection: Networking includes the implementation of

security measures to protect data and systems from unauthorized access,
ensuring privacy, confidentiality, and integrity of information.

pg. 8
 HARDWARE AND SOFTWARE REQUIREMENT

Minimum Hardware Requirements:

Processor: Pentium-3 or above
RAM: 128 MB or above
Hard Disk: 80 GB or above

Minimum Software Requirement:

Notepad
Browser (Google Chrome or higher or any other browser)

pg. 9
 ABOUT HTML
HTML is a collection of platform-independent styles (indicated by mark
up tags) that define the various components of a World Wide Web
document. HTML was invented by Tim Berners-Lee while at CERN, the
European Laboratory for Particle Physics in Geneva.
The first publicly available description of HTML was a document called
HTML Tags, first mentioned on the Internet by Berners-Lee on late 1991.
It describes 22 elements comprising the initial, relatively simple design of
HTML. Thirteen of these elements still exist in HTML 4. HTML is a text
and image formatting language used by internet browsers to dynamically
format web pages. The semantics of many of its tags can be traced to early
text formatting languages such as runoff. Runoff was developed in the
early 11960s for the CTSS (Compatible Time – Sharing System) operating
system, and its formatting commands were derived from the commands
used by typesetters to manually format documents. Runoff was later
incorporated into the UNIX operating system in more advanced formatting
programs such as roff, nroff, and troff.

HTML Tags Chart:

• HR: This tag adds horizontal rules to our web pages.
• BR: This tag simply inserts a line break.
• IMG: This tag display inline images to our web pages.
• LIST: This tag is used to listing our web pages.
• HEADING: This tag is used for all the styles appear in bold face.
• NBSP TAG: This tag is used to give the space.
• PARAGRAPH: This tag is used to adjust the paragraph.
• LINK TAG: This tag is used to create the links to a specific place
in either the same web page or another web page.
• TABLE TAG: This tag is used to create the tables in our web page.
• ALIGN TAG: This tag is used to set the different alignment like
right, centre left, justify etc.
• FONT TAG: This tag is used to formatting.
• B, U, and I TAG: These tags are used to format text bold, underline,
italic.
• PADDINGS: Padding is used to create space around an element’s
pg. 10
 content, inside of any defined borders.
• COLSPAN: It is an HTML attributes that allows you to span a
row or column across multiple cells.
• CSS STYLE: It is used to format the layout of a webpage.

HTML Attributes chart:

• FACE: This attribute is used with font tag & amp; used to change
the face of the text.
• COLOR: This attribute is used with different tags to set the colours
such as HR, FONT, TABLE etc.
• SIZE: This attribute is used with different tags to set the size such as
FONT, HR, TABLE.
• STYLE: This attribute is used to give different styles to text
such as BOLD, ITALIC, UNDERLIVE etc.
• BGCOLOR: This attribute is used to set background colour.
• BORDER: This attribute is used to set the border.
• WIDTH: This tag is used to set the width.
• ORDER LIST: This attribute is used to create order list.
• UNORDER LIST: This tag is used to create unordered list.

BENEFITS OF HTML:

• HTML is basically scripting language used to design web pages.

• HTML provides easy creation and attractive appearance of website.
• HTML provides a way to put up our thoughts among others.
• We can use any text editor or word processor to create HTML web
pages.
• HTML supports almost any type of browsers.
• HTML provides different type of tags & amp; attributes to crate web
pages.
• We can easily create links between different web pages.
• We can view the different files in a single page with the help
of frames in HTML.
• HTML supports different types of images from different drives.
• HTML supports easy designing of web pages for attractive website.

pg. 11
TAGS:
HTML tags (otherwise known as “HTML elements”), and their
respective attributes are used to create HTML documents so that we
can view them I browsers and other user agents. Tags are
instructions that are embedded directly into the text of the document.
There are two types of html tags- container tags and empty tags.
At the end of this topic, we will able to,
➢ Understand the WEBSITE DEVELOPMENT LIFE CYCLE.
➢ Understand DIFFERENT TAGS USED IN HTML.

HTML USER INTERFACE

The user interface (also known as human computer interface or man-
machine interface (MMI)) is the aggregate of means by which people –
the users- interact with the system – a particular machine, device,
computer program or other complex tool. The user interface provides
means of:
➢ Input, allowing the users to manipulate a system
➢ Output, allowing the system to indicate the effects of
the user’s manipulation

Web – based user interfaces or web user interfaces (WUU) accept

input and provide output by generating web pages which are
transmitted via the internet and viewed by the user using a web browser
program.

pg. 12
 ABOUT NOTEPAD

Notepad is a basic text editor that you can use to create simple documents.
It has not really changed much even though all other standard Windows
tools were upgraded with each new version. The most common use for
Notepad is to view or edit text(.txt) files, but many users find Notepad a
simple tool for creating Web pages.

Hence:

Notepad supports only very basic formatting; you cannot accidentally

save special formatting in documents that need to remain pure text. This
is especially useful when creating HTML documents for a web page
because special characters or other formatting may not appear in your
published web page or may even cause errors.
Notebooks can be distinguished along several dimensions and sub-
dimensions:

• Type of surface
• Form factor (size and weight)
• Binding and cover material (including printing and graphics)
• Pre- printed material or writing surfaces (lines, graphics, text)

Notepad is a simple text editor included with all versions of Microsoft

since Windows 1.0 in 1985.

The Benefits of Notepad

The humble Windows Notepad has been with us for 35 years now, tucked
into every version of Windows since Windows 1.0. It has a simple job: To
easily view, create, and edit text files, which are one of the most
fundamental building blocks of modern computing.

Even in this day and age, Notepad is still a useful tool for making quick
notes on your computer. Sure, there are specialized note-taking apps that
support more sophisticated formatting, data structuring, or cloud-based
synchronization between platforms. But for some people, the extra features
just mean extra baggage that they’d rather not deal with. Here’s why
Notepad is still great.
pg. 13
It is Quick and Lightweight

When you want to write something down, you want to do it quickly

while the idea is still fresh. In that way, Notepad shines. Click the
Notepad icon and the program pops on-screen in a flash. There is no
waiting for libraries and fancy features to load into memory before you
can use the program. When inspiration strikes, every moment counts,
and Notepad is ready and waiting to capture your ideas.

By the way, if you want a quick way to timestamp your notes with
Notepad, just hit F5, and the current date and time will be instantly inserted
into your file.

You Stay in Control

Notepad lets you save your notes (as text files) exactly where you want
them, and you have no one but your operating system to answer to about
how you organize, copy, or back them up. You can migrate your notes to
another app by opening them in any app that understands text files.

If you use a note-taking app, your notes might be locked behind a paid
subscription account and stored in the cloud. The company storing the data
is the gatekeeper of your ideas.

No Fancy Text Formatting

It is true: if you need text formatting features, such as bold, italics, or

changing font sizes, Notepad is not the solution. You can, however, use
symbols and punctuation for simple formatting. Asterisks make great bullet
points, tabs can form indented lists, ALL CAPS serve as good headers, and
repeated dashes or equal signs make great line separators. And, do not forget
the classic _adding emphasis_ using the underscore character.

pg. 14
 ABOUT GOOGLE CHROME

Chrome, an Internet browser released by Google, Inc., a major American

search engine company, in 2008. By 2013 Chrome had become the dominant
browser, surpassing Microsoft’s Internet Explorer and Mozilla’s Firefox in
popularity.

Chrome is based on the open-source code of the Chromium project, but

Chrome itself is not open-source. The first beta version of Chrome was
released on September 2, 2008, for personal computers (PCs) running
various versions of Microsoft
Corporation’s Windows OS (operating system). The development of
Chrome was kept a well-guarded secret until a Web-based “comic book”
describing the browser was released just hours before links appeared on
Google’s Web site to download the program. Instead, Google stated that its
goal was to advance the usefulness of the Internet by including features that
would work better with newer Web-based technologies, such as the
company’s Google Apps (e.g., calendar, word processor, spreadsheet), that
operate within a browser. This concept is often called “cloud computing,” as
the user relies on programs operating “out there,” somewhere “in the cloud”
(on the Internet).

Part of Chrome’s speed improvement over existing browsers is its use of a

new JavaScript engine (V8). Chrome uses code from Apple Inc.’s Web Kit,
the open-source rendering engine used in Apple’s Safari Web browser.
Chrome is the first browser to feature isolated, or protected, windows (or
tabs) for each Web page or Web application running in it. While this means
that each new tab that is opened requires as much dedicated computer
memory as the first tab, it also means that if any computer code causes one
of these tabs to crash, it will not bring down the entire browser. Closing a tab
fully releases its allocated memory, thus solving a persistent problem of
older browsers, which frequently have to be restarted in order to release the
increasing amounts of memory that are requisitioned over time.

On July 7, 2009, Google announced plans to develop an open-source

operating system, known as Chrome OS. The first devices to use Chrome OS
were released in 2011 and were netbooks called Chromebooks. Chrome OS,
which runs on top of a Linux kernel, requires fewer system resources than
most operating systems because it uses cloud computing, in which the only
software run on a Chrome OS device is Chrome and all other software
applications are accessed through the Internet inside the Chrome browser.

pg. 15
 Home Page Code:
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<title> New Method</title>
<style type="text/css" >

* { margin:0px;
padding:0px;
box-sizing: border-box;
}

body { padding:0px; margin:0px; }

.common1
{
float:left; width:100%; margin-right: 0px;
}
.header
{
background-color:white;
height: 100px;
width:100%;
position:absolute;
top: 0px;
left:0px;
right:0px;
bottom:80px;
}

.nav {
width:100%;
overflow:auto;
margin:0px;
margin-top: 0%;
margin-bottom: 60px;
}

.nav .menu-tab {
width:100%;
position: absolute;
top:110px;
background-color:dimgray;
height:100px ;
margin-top:0px;
}

.nav .menu-tab a
pg. 16
{ font-size:20px;
font-weight:bold;
display:block;
border-radius: 20px;
border-color: orange;
border:1px;
float:left;
background-color:dimgray;
color:white;
padding:13px;
padding-right: 25px;
padding-left: 25px;

text-decoration:none;

margin: 15px;
margin-top: 35px;
margin-left:60px;
}

.nav .menu-tab a:hover

{
color:yellow;
}

.below-tab
.sidenav
{ float:left;
width:20%;
margin-left: 20px;
margin-right:20px;
}

.below-tab
.sidenav a { padding:0px; margin-bottom:8px; margin-right:25px; margin-left:25px; text-
decoration: none; }

.below-tab
margin-right: 10px;
.sidenav a:hover
{ background-color: black; color:yellow; }

.below-tab
.mid-content
{ float:left;
width:55%;
font-size: 20px;

margin-left:10px;
margin-right:0px;
padding-right:20px;
pg. 17
 padding-left: 25px;
margin-left: 55px;
line-height:40px; word-spacing:7px; letter-spacing:4px; }

.below-tab
.mid-content h1 { color:crimson}

.below-tab
.mid-content h1:hover
{
color:chartreuse;
}

.below-tab
.blank-box
{ float:left;
width:12%;
margin-left: 7px;
margin-bottom: 70px;
padding-bottom: 80px;

</style>
</head>
<body >

<div class="header">

<img src="net3.jpg" width="440" height="110">

<img src="net4.jpg" width="455" height="110">
<!-- <img src="net1.webp" width="200" height="110"> -->
<img src="net2.jpg" width="445" height="110">

<!-- <img src="net5.jpg" width="225" height="110"> -->

</div>

<div class="nav">

<div class="menu-tab">

<a href="HOME7.html" target="_top" > Home</a>

<a href="About Us .html"> About Us</a>

<a href="Protocols.html" target="_top"> Protocols</a>

pg. 18
 <a href="VSAT.html" target="_top"> VSAT</a>
<a href="Cloud-Computing.html" target="_top"> Cloud Computing</a>
<a href="IP Address.html" target="_top"> IP Address</a>

</div>

</div>

<br> <br> <br> <br> <br> <br> <br> <br> <br>

<img src="nielit-image.jpg" width="200" height="150" align="right">
<br> <br> <br> <br> <br> <br>

<div class="below-tab">
<div class="sidenav" >

<a href="Introduction.html" target="_top" >

<font style=" background-color:lime; color:white;
display:block;
padding:10px 4px 10px 4px;
border:1px black solid;
border-radius: 14px;
margin:5px;
text-decoration:none;
text-align: center;
font-weight: bolder;
font-variant-caps: all-petite-caps;
font-size: x-large;
scroll-margin-right: 3px;
">

Introduction </font> </a>

<a href=" Features.html" target="_top" >
<font style=" background-color:indigo; color:white;
display:block;
padding:10px 5px 10px 5px;
border:1px black solid;
border-radius: 14px;
margin:8px;
text-decoration:none;
text-align: center;
font-weight: bolder;
font-variant-caps: all-petite-caps;
font-size: x-large;
scroll-margin-right: 3px; ">

Features </font> </a>

<a href="Components.html" target="_top" >

<font style=" background-color:dodgerblue; color:white;
display:block;
pg. 19
 padding:10px ;
border:1px black solid;
border-radius: 14px;
margin:8px;
text-decoration:none;
text-align: center;
font-weight: bolder;
font-variant-caps: all-petite-caps;
font-size: x-large;
scroll-margin-right: 3px; ">

Components </font> </a>

<a href="Topologies.html" target="_top" >

<font style=" background-color:firebrick; color:white;
display:block;
padding:10px 20px 10px 20px;
border:1px black solid;
border-radius: 14px;
margin:5px;
text-decoration:none;
text-align: center;
font-weight: bolder;
font-variant-caps: all-petite-caps;
font-size: x-large;
scroll-margin-right: 3px; ">

Topologies </font> </a>

<a href="Transmission Mode.html" target="_top">

<font style=" background-color:forestgreen; color:white;
display:block;
padding:10px 20px 10px 20px;
border:1px black solid;
border-radius: 14px;
margin:5px;
text-decoration:none;
text-align: center;
font-weight: bolder;
font-variant-caps: all-petite-caps;
font-size: x-large;
scroll-margin-right: 3px; ">

Transmission </font> </a>

<a href="Network Types.html" target="_top" >

<font style=" background-color:dodgerblue; color:white;
display:block;
padding:10px 20px 10px 20px;
border:1px black solid;
border-radius: 14px;
pg. 20
 margin:5px;
text-decoration:none;
text-align: center;
font-weight: bolder;
font-variant-caps: all-petite-caps;
font-size: x-large;
scroll-margin-right: 3px; ">

Network Types </font> </a>

<a href="Network Security.html" target="_top" >

<font style=" background-color:gold; color:black;
display:block;
padding:10px 20px 10px 20px;
border:1px black solid;
border-radius: 14px;
margin:5px;
text-decoration:none;
text-align: center;
font-weight: bolder;
font-variant-caps: all-petite-caps;
font-size: x-large;
scroll-margin-right: 3px; ">

Security </font> </a>

<a href="OSI Models.html" target="_top" >

<font style=" background-color:maroon; color:white;
display:block;
padding:10px 20px 10px 20px;
border:1px black solid;
border-radius: 14px;
margin:5px;
text-decoration:none;
text-align: center;
font-weight: bolder;
font-variant-caps: all-petite-caps;
font-size: x-large;
scroll-margin-right: 3px; ">

OSI Model </font> </a>

<a href="GALLERY.HTML" target="_top" >

<font style=" background-color:crimson; color:white;
display:block;
padding:10px 20px 10px 20px;
border:1px black solid;
border-radius: 14px;
margin:5px;
margin-bottom: 220px;
text-decoration:none;
pg. 21
 text-align: center;
font-weight: bolder;
font-variant-caps: all-petite-caps;
font-size: x-large;
scroll-margin-right: 3px; ">

PHOTO GALLERY </font> </a> <br> <br> <br> <br> <br> <br>
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br><br> <br> <br> <br> <br> <br> <br>
<br> <br> <br> <br> <br>
<img src="internet.png" width="280px" height="450px" >

</div>

<div class="mid-content">
<h1 align="center" > NETWORKING </H1> <br> <br> <br>

<img src="net1.webp" width="90%px" height="400px" > <br> <br>

<p>
A computer network is a group of computers that has the potential to transmit,
receive and exchange voice, data, and video traffic. A network connection can be set up with
the help of either cable or wireless media. In modern times, computer networks are very
important as information technology is increasing rapidly all over the world. The network and
data communication are the essential factors to rise information technology in the world as
technology's advancement is on the system, including the gadgets. ARPANET began the
networking long ago.
<br> <br>
<img src="EVOLUTION-OF-NETWORK-2.png" height="400px" width="600px"
>
<br> <br>
In 1957, when SPUTNIK Satellite was launched by Russia. An agency named
ADVANCED RESEARCH PROJECT AGENCY (ARPA) was started by
American, and its first satellite was launched within 18 months after establishment. Then they
used ARPANET to share the information on another computer. America's Dr. LIED LIEDER
has this all responsibility. Then, ARPANET came to India in 1969, and its name changed from
Indian to NETWORK.

For the United States Department of Defense, the funding of the design of the Advanced
Research Projects Agency Network (ARPANET) was began by ARPA. In 1969, the network
began to develop on the basis of the developed designs in the 1960s.

<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
</p>
</div> </div>
</body></html>

pg. 22
 Gallery Source Code:
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<head> <title>GALLERYt</title>
<style type="text/css" >

/* this is appling top navigation bar on this page

marquee
{
float:left;
margin-top: 0px;
margin-bottom: 32px;
}

marquee
{
width:100%;
position:fixed;
top:0px;
}

.nav
.menu-tab
{
height: 30px;
padding-top: 6px;
padding-bottom: 6px;
}

.nav {
width:100%;
overflow:auto;
margin:0px;
margin-top: 20px;
margin-bottom: 60px;
}
.nav .menu-tab {
width:100%;
position: fixed;
background-color: olive;
height:60px ;
margin-top:10px;
}

.nav .menu-tab a
{
font-weight:bold;
display:block;
pg. 23
 border-radius: 20px;
border-color: orange;
border:1px;
float:left;
background-color:orange;
color:black;
padding:10px;
padding-right: 35px;
padding-left: 25px;
text-decoration:none;
margin: 10px;
margin-top: 3px;
margin-bottom: 40px;
}
.nav .menu-tab a:hover
{
background-color:mediumorchid;
color:white;
}

*/

/* this is appling top navigation bar on this page end point */

*{
margin:0px;
padding:0px;
box-sizing: border-box;
}

body
{
background-color: khaki;
width:100%;
height: 1500px;
}

H1
{
background-color:lightcoral;
color:white;
font-family: 'Times New Roman', Times, serif;
text-align:center;
padding-bottom:50px;
line-height: 50px;
padding-top: 40px;
font-size: 60px;
word-spacing: 15px;
}

img
pg. 24
 { background-color:peru;
padding:1px;
margin-bottom:2px;
margin-left: 35px;
margin-right: 35px;
margin-top:70px;
border: 2px solid blue;
}

.photo-name
.photo
{
display: block;
width:100%;
}

.photo-name
.photo
font
{
float:left;

background-color: aqua;
color:red;
font-size: 50px;
padding-left:50px;
padding-right: 110px;
padding-top: 10px;
padding-bottom: 10px;
margin-right: 89px;
margin-left:60px;
margin-top:2px;
margin-bottom: 70px;
}

.photo-name1
.photo
{
display: block;
width:100%;
}

.photo-name1
.photo
font
{
float:left;

background-color: aqua;
color:red;
pg. 25
 font-size: 50px;
padding-left:50px;
padding-right: 110px;
padding-top: 10px;
padding-bottom: 10px;
margin-right: 80px;
margin-left:40px;
margin-top:2px;
margin-bottom: 70px;
}

</style>
</head>
<body>
<!-- this is appling top navigation bar on this page
<marquee scrollamount="4" direction="left" bgcolor="yellow" width="100%" height="40px"
> <font size="+2" color="red">This is our Project based website given by the NIELIT
Institute, Jakhu, shimla (171001), (HP) </font> </marquee>

<div class="nav">
<div class="menu-tab">
<a href="FRAMES.html" target="_top" > Home</a>
<a href="#"> About Us</a>
<a href="#"> Protocols</a>
<a href="VSAT.html" target="_top"> VSAT</a>
<a href="#"> Cloud Computing</a>
<a href="#"> IP Address</a>
</div>
</div> -->
<!-- this is appling top navigation bar on this page end point -->
<br> <br> <br> <br> <br>

<h1> PHOTO GALLERY</h1>

<img src="download (5).jpg" width="330px" height="340px" >
<img src="download (6).jpg" width="330px" height="340px">
<img src="download (7).jpg" width="330px" height="340px"> <br>

<div class="photo-name" >

<div class="photo"> <font color="magenta" font-size="55px"> Router
</font> </div>
<div class="photo"> <font color="magenta" font-size="55px" > Hub </font>
</div>
<div class="photo"> <font color="magenta" font-size="55px" > Gateway
</font> <br> </div>

</div>
<img src="download (8).jpg" width="350px" height="330px">
<img src="images (8).jpg" width="350px" height="330px">
<img src="images (9).jpg" width="350px" height="330px">

pg. 26
 <div class="photo-name1" >
<div class="photo"> <font color="magenta" font-size="55px" > Firewall
</font> </div>
<div class="photo"> <font color="magenta" font-size="55px" > Switch
</font> </div>
<div class="photo"> <font color="magenta" font-size="55px" > Wires
</font> </div>
</div>

<img src="images (13).jpg" width="350px" height="330px">

<img src="images (11).jpg" width="350px" height="330px">
<img src="images (14).jpg" width="350px" height="330px">

<div class="photo-name1" >

<div class="photo"> <font color="magenta" font-size="55px" > Hacker
</font> </div>
<div class="photo"> <font color="magenta" font-size="55px" >
Phishing </font> </div>
<div class="photo"> <font color="magenta" font-size="55px" > Virus
</font> </div>
</div>

<img src="download (10).jpg" width="350px" height="330px">

<img src="http.jpg" width="350px" height="330px">
<img src="Network2.png" width="350px" height="330px">

<div class="photo-name1" >

<div class="photo"> <font color="magenta" font-size="55px" >
Threats </font> </div>
<div class="photo"> <font color="magenta" font-size="55px" >
HTTP </font> </div>
<div class="photo"> <font color="magenta" font-size="55px" >
Network </font> </div>

</div>
</body>
</html>

pg. 27
SNAPSHOT OF PROJECT

pg. 28
pg. 29
pg. 30
pg. 31
pg. 32
pg. 33
pg. 34
pg. 35
pg. 36
pg. 37
pg. 38
pg. 39
 Reference:

https://www.javatpoint.com/html-tutorial
https://www.javatpoint.com/html-with-css
https://www.geeksforgeeks.org/web-technology/html-css/
https://www.w3schools.com/html/html_css.asp

pg. 40