FOUR WEEK TRAINING ON WEB
DEVELOPMENT
Submitted by Nidhi Kumari
Roll no. :- 210910106065
Program Name: BCA
Under the Guidance of
Mr. Aman Garg,AM(SIS)
Bachelor of Computer Application
IPEM,GZB
(22/08/2023 to 22/09/2023)
DECLARATION
I hereby declare that I have completed my four weeks
summer training at Indian Oil Corporation from 22/08/2023 to
22/09/2023 under the guidance of Mr Aman Garg,AM(SIS). I
hereby undertake that the project undertaken by me is the
genuine work of mine.
(Signature of student)
Name:Nidhi Kumari
Roll no: 210910106065
Date: 22/12/2023
ACKNOWLEDGEMENT
It is my proud privilege and duty to acknowledge the kind of help and guidance received from several
people in preparation of this report. It would not have been possible to prepare this report in this form
without their valuable help, cooperation and guidance.
First and foremost, I wish to record our sincere gratitude to Indian Oil Corporation
Coordinators for their constant support and encouragement in preparation of this report and for making
available videos and interface facilities needed to prepare this report.
The seminar on “Web Development” was very helpful to us in giving the necessary background
information and inspiration in choosing this topic for the seminar. Their contributions and technical support in
preparing this report are greatly acknowledged.
Last but not the least, we wish to thank our parents for financing our studies in this college as well as for
constantly encouraging us to learn engineering. Their personal sacrifice in providing this opportunity to learn
computer Science is gratefully acknowledged.
Introduction
This report outlines the website creation purpose for “Khoj”, a
website designed for the Indian Oil Cooperation. The purpose
of this report is to provide an overview of the steps involved in
developing the website, include planning, design ,
development and deployment.
Contents
1 INTRODUCTION 2
1.1 WEB DEVELOPMENT . . . . . . . . . . . . . . . . . . . . . . . 2
2 WEB 3
2.1 HTTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.1.1 HTTP Request / Response . . . . . . . . . . . . . . . . . . 3
2.1.2 The HTTP Request Circle . . . . . . . . . . . . . . . . . . 3
2.2 HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2.2.1 HTML Elements . . . . . . . . . . . . . . . . . . . . . . . 4
2.2.2 HTML Documents . . . . . . . . . . . . . . . . . . . . . . 4
2.3 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.3.1 CSS Syntax . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.3.2 External Style Sheet . . . . . . . . . . . . . . . . . . . . . 9
2.3.3 Inline Style . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.4 Google fonts.............................................................................................................11
3 Software Requirements Specification
3.1 Software......................................................................................................................................
3.1.1 Browser......................................................................................................................
3.1.2 Text Editor..................................................................................................................
4 Project Planning
4.1 Flow of Project............................................................................................................................
4.1.1 HOME.........................................................................................................................
4.1.2 ABOUT........................................................................................................................
4.1.3 PROJECT......................................................................................................................
4.1.4 EVENTS.......................................................................................................................
4.1.5 BLOG...........................................................................................................................
5 Implementation
6 Conclusion and Future Scope
6.1 Conclusion..................................................................................................................................
6.2 Future Scope...............................................................................................................................
References
INTRODUCTION TO WEB DEVELOPMENT
Web development refers to the creating, building, and
maintaining of websites. It includes aspects such as web
design, web publishing, web programming, and database
management. It is the creation of an application that works
over the internet i.e. websites.
The word Web Development is made up of two words, that
is:
*Web: It refers to websites, web pages or anything that
works over the internet.
*Development: It refers to building the application from
scratch.
Web Development can be classified into two ways:
• Frontend Development
Backend Development
Front end development
The part of a website where the user interacts directly is
termed as front end. It is also referred to as the ‘client side’
of the application.
Back end development
Backend is the server side of a website. It is part of the
website that users cannot see and interact with. It is the
portion of software that does not come in direct contact with
the users. It is used to store and arrange data.
HTML
HTML stands for Hyper Text Markup Language. It is used to
design web pages using a markup language. HTML is a
combination of Hypertext and Markup language. Hypertext
defines the link between web pages. A markup language is
used to define the text document within the tag which
defines the structure of web pages. This language is used to
annotate (make notes for the computer) text so that a
machine can understand it and manipulate text accordingly.
Most markup languages (e.g. HTML) are human-readable.
The language uses tags to define what manipulation has to
be done on the text.
CSS
Cascading Style Sheets, fondly referred to as CSS, is a simply
designed language intended to simplify the process of
making web pages presentable. CSS allows you to apply
styles to web pages. More importantly, CSS enables you to do
this independently of the HTML that makes up each web
page. It describes how a webpage should look: it prescribes
colours, fonts, spacing, and much more. In short, you can
make your website look however you want. CSS lets
developers and designers define how it behaves, including
how elements are positioned in the browser.
While HTML uses tags, CSS uses rulesets. CSS is easy to learn
and understand, but it provides powerful control over the
presentation of an HTML document.
JAVA SCRIPT
JavaScript is a lightweight, cross-platform, single-
threaded, and interpreted compiled programming language.
It is also known as the scripting language for webpages. It is
well-known for the development of web pages, and many
non-browser environments also use it.
JavaScript is a weakly typed language (dynamically typed).
JavaScript can be used for Client-side developments as well
as Server-side developments. JavaScript is both an
imperative and declarative type of language. JavaScript
contains a standard library of objects, like Array, Date,
and Math, and a core set of language elements
like operators, control structures, and statements.
Software Requirements Specification
3.1 Software
3.1.1 BROWSER
Firefox has always been known for its flexibility and support for
extensions, but in recent years it had started to lag behind the
competition in terms of speed. Firefox Quantum, first released last
year, represented a total overhaul of the browser’s code base, with
speeds now comparable with Google Chrome. That’s not just on top-
end computers, either – the new Firefox makes frugal use of RAM,
even with masses of tabs open.
• Mozilla Firefox
Mozilla Firefox is a free and open-source web browser
developed by The Mozilla Foundation and its subsidiary, Mozilla
Corporation. Firefox is avail- able for Windows, macOS, Linux,
BSD, illumos and Solaris operating systems. Its sibling, Firefox
for Android, is also available.
• Google Chrome
Google Chrome is a cross-platform web browser developed by
Google. It was first released in 2008 for Microsoft Windows, and
was later ported to Linux, macOS, iOS, and Android. The
browser is also the main component of Chrome OS, where it
serves as the platform for web apps.
• Microsoft Edge
Microsoft Edge is a web browser developed by Microsoft. It
was first re- leased for Windows 10 and Xbox One in 2015, then
for Android and iOS in 2017. Edge includes integration with
Cortana and has extensions hosted on the Microsoft Store.
• Opera
Opera is a web browser for Microsoft Windows, Android,
macOS, and Linux operating systems. Opera Ltd. is publicly
listed on the NASDAQ stock ex- change, with majority
ownership and control belonging to Chinese Business- man
Yahui Zhou, creator of Beijing Kunlun Tech which specialises in
mobile games and cybersecurity specialist Qihoo 360. Opera is a
Chromium-based browser using the Blink layout engine. It
differentiates itself because of a dis- tinct user interface and other
features.
• Vivaldi
Vivaldi is a freeware, cross-platform web browser developed
by Vivaldi Tech- nologies, a company founded by Opera
Software co-founder and former CEO Jon Stephenson von
Tetzchner and Tatsuki Tomita. It was officially launched on April
6, 2016.
3.1.2 TEXT EDITOR
We admit there’s a whiff of nostalgia about this entry, given that
Notepad++ was one of the earliest text editors we used on Windows.
But the app deserves its place on this list, because it can still compete
with the best of them. For no money what- soever, you get a capable (if
sometimes workmanlike) editor with plenty of features, and you can
also mess about with the interface to make it better suit your require-
ments.
• Notepad ++
Image result for notepad++ informationnotepad-plus-plus.org
Notepad++ is a text editor and source code editor for use with
Microsoft Windows. It sup- ports tabbed editing, which allows
working with multiple open files in a single window. The
project’s name comes from the C increment operator.
PROJECT PLANNING
Planning Phase
During the planning phase the goal and objective
of website were identified. The key consideration
included:
● Analyzing the need and preferences of the Indian Oil
Corporation’s employees, customer and partners.
● Determining the primary functions of website, such as
providing information about product, their plant, their
functional location, class and characteristics.
● Outlining the website structure: Defining the main
sections, pages, and navigation hierarchy to ensure a
logical and user-friendly layout with search bar.
DESIGN PHASE
The design phase involved creating the visual and
interactive elements of the website. Key activities
included:
- Wireframing: Developing low-fidelity wireframes to
outline the basic layout and structure of webpage,
considering the placement of key elements, such as the
header, navigation menu, content sections, and footer.
- Visual Design: Creating the website's aesthetic by
choosing appropriate colour schemes, typography, and
imagery that align with the Indian Oil Corporation's
branding guidelines. Design mockups were created to
present the visual concept for approval.
- Responsiveness: Ensuring the website design is responsive,
adapting to different screen sizes and devices, including
desktop computers, tablets, and smartphones.
DEVELOPMENT PHASE
The development phase involved turning the design
concepts into a fully functional website. Key activities
included:
- Front-end Development: Converting the design mockups
into HTML, CSS, and Bootstrap Library, ensuring the visual
elements and interactive features are accurately
implemented.
- Back-end Development: Building the characteristic page on
html and retrieving the characteristics by clicking the details
button included in each card
- Content Creation: Generating and
organizing the website's content,
including Cards, side bar, and
multimedia assets (images, logo etc).
- Testing: Conducting thorough testing
to identify and resolve any technical
issues, ensuring compatibility across
different web browsers, and validating
the website's responsiveness and
functionality.
CODE FOR THE
RESPECTIVE WEBSITE:
CONCLUSION
The website creation process for "Khoj" - Indian Oil
Corporation involved careful planning, thoughtful
design, development, and successful deployment. By
following a structured approach, the website was
designed to meet the specific needs of the Indian Oil
Corporation. It provides a clear picture of the plants,
their class and their functional location using a specific
card for a particular plant that help user to access the
information easily. The web page include the side bar
for filter to the plants. Ongoing monitoring and
continuous improvement will be essential to ensure
the website remains effective and aligned with the
evolving requirements of the Indian Oil Corporation.
FINAL WEBPAGE
BIBLIOGRAPHY
• https://getbootstrap.com/docs/5.0/getting-started/
introduction/
• https://www.tutorialspoint.com/pyqt/
• https://www.tutorialspoint.com/sqlite/
sqlite_quick_guide.html
https://getbootstrap.com/docs/5.0/getting-started/javascri
pt/
https://themes.getbootstrap.com/
