Vertopal Com Web Development Report 2 PDF 1
Vertopal Com Web Development Report 2 PDF 1
BACHELOR OF TECHNOLOGY
(Computer Science and Engineering)
1
Acknowledgements
We are highly grateful to the Dr. Sehijpal Singh, Guru Nanak Dev Engineering
College (GNDEC), Ludhiana, for providing this opportunity to carry out the
major project work at Web Development. The constant guidance and encourage-
ment received from Dr. Kiran Jyoti H.O.D. CSE Department, GNDEC Ludhiana
has been of great help in carrying out the project work and is acknowledged
with reverential thanks. We would like to express a deep sense of gratitude
and thanks profusely to Prof. Jasdeep Kaur, without his/her wise counsel and
able guidance, it would have been impossible to complete the project in this
manner. We express gratitude to other faculty members of computer science and
engineering department of GNDEC for their intellectual support throughout the
course of this work. Finally, We are indebted to all whosoever have contributed
in this report work.
Mehakveer Singh
2
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 Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ....4
2.3 CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ...8
2.3.1 CSS Syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ..9
2.3.2 External Style Sheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ....9
2.3.3 Inline Style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ........9
2.4 Google fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .....11
3 Software Requirements Specification 12
3.1 Software . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ...13
3.1.1 Browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ....13
3.1.2 Text Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ....13
4 Project Planning 17
4.1 Flow of Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ..18
4.1.1 HOME . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .18
4.1.2 ABOUT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ....18
4.1.3 PROJECT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .....18
4.1.4 EVENTS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ...18
4.1.5 BLOGS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
5 Implementation 20
3
6 Conclusion and Future Scope 21
6.1 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ....21
6.2 Future Scope . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .21
Refrences
4
List of Figures
5
CHAPTER 1
INTRODUCTION
6
CHAPTER 2
WEB
2.1 HTTP
7
2.2 HTML
HTML stands for Hyper Text Markup
Language HTML is the standard markup
language for Web pages HTML elements
are the building blocks of HTML pages
HTML elements are represented by tags
BASIC TERMS:
Project stucture:
<!Doctype>
<html>
<body>
...........
............
...........
...........
</body>
</html>
2.2.1 HTML Elements
An HTML element is a start tag and an
end tag with content in between:
8
• <HTML> tag:
• HTML Headings
HTML headings are defined with h1 to h6
tags.
• HTML Paragraphs
HTML paragraphs are defined with p tags:
9
• HTML Links
HTML links are defined with a tags:
10
• HTML Images
HTML images are defined with img tags.
The source file (src), alternative text
(alt), width, and height are provided as
attributes:
• HTML Buttons
HTML buttons are defined with button
tags:
• HTML Lists
HTML lists are defined with ul
tag (unordered/bullet list) or ol tag
(ordered/num- bered list) tags, followed
by li tags (list items):
• HTML Tables
An HTML table is defined with a table
tag. Table rows are defined with tr tags.
Table headers are defined with th tags.
11
(bold and centered by default). Table cells
(data) are defined with td tags.
• <Body> tag:
Description. The HTML ¡body¿ tag de-
fines the main content of the HTML doc-
ument or the section of the HTML docu-
ment that will be directly visible on your
web page. This tag is also commonly re-
ferred to as the <body> element.
• <header>:
he <header> element is intended to
usually contain the section’s heading (an
<h1>-<h6> element or an <hgroup>
element), but this is not required. The
12
<header> element can also be used to
wrap a section’s table of contents, a
search form, or any relevant logos.
• <div> tag:
The <div> tag defines a division or a
section in an HTML document. The
<div> element is often used as a container
for other HTML elements to style them
with CSS or to perform certain tasks with
JavaScript.The div tag is known as Divi-
sion tag. The Div tag is used in HTML to
make divisions of content in the web page
like (text, images, header, footer, naviga-
tion bar etc). Div tag has
both open(<) and closing (>) tag and it
is mandatory to close the tag. The Div is
the most usable tag in web development
because it helps us to separate out data in
the web page and we can create a particu-
lar section for particular data or function
in the web pages.
Div tag is Block level tag It is a generic
container tag
It is used to the group of various tags of
HTML so that sections can be created and
style can be Applied on them.
Left center right.
• <br> tag:
The HTML anchor tag defines a hyper-
link that links one page to another page.
The href” attribute is the most important
attribute of the HTML a tag. An unvis-
ited link is displayed underlined and blue.
A visited link displayed underlined and
purple. An active link is underlined and
red.
• <footer> tages:
13
HTML5 <footer> Element. The
<footer> element specifies a footer for
a document or section. A <footer>
element should contain information about
its containing element. A footer typically
contains the author of the document,
copyright information, links to terms of
use, contact information, etc.
• <form> tag:
The <form>tag is used in conjunction
with form-associated elements. To create
a form, you can nest form-associated ele-
ments inside the opening/closing
<form> tags. You can also use the form
attribute within those elements to
reference the ID of the form to use.
2. CSS
CSS stands for Cascading Style Sheets.
Cascading Style Sheets is a style sheet
language used for describing the presenta-
tion of a document written in a markup
language like HTML. CSS is a cornerstone
technology of the World Wide Web, along-
side HTML and JavaScript.
1. CSS Syntax
A CSS rule consists of a selector and a
declaration block:
14
be 32px wide, center-aligned, and with
red.
Example:
15
Figure 2.4: .Css file linked with .html
file
3. Inline Style
We can apply CSS in a single element by
inline CSS technique.
The inline CSS is also a method to insert
style sheets in HTML document. This
method mitigates some advantages of style
sheets so it is advised to use this method
sparingly.
If you want to use inline CSS, you should
use the style attribute to the relevant tag.
16
Figure 2.6: Inline Style Sheet
3. Google fonts
Google Fonts is a Google API.
We can use Google Fonts in our Website
design.
17
When we use google fonts in designing
webpage it will be viewed as:
18
CHAPTER 3
Software Requirements Specifi-
cation
3.1 Software
3.1.1 Browser
sectionFirefox 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.
19
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.
20
nologies, a company founded by Opera
Software co-founder and former CEO
Jon Stephenson von Tetzchner Tatsuki
Tomita. It was officially launched on
April 6, 2016.
21
a desktop applica- tion built using web
technologies.
22
CHAPTER 4
Project Planning
4.1.1 HOME
This is a Environment friendly Organiza-
tion which helps to save greenery on Earth.
We are always happy to help and we pro-
vide help as most as we can. we save the
trees and inspire others to tree plantation
by different methods like social awareness
by giving advertisement or personally and
of course by our Website.
4.1.2 ABOUT
Our main mission is prevent our Eco Sys-
tem. An ecosystem is a community of liv-
ing organisms in conjunction with the non-
living components of their environ- ment,
interacting as a system. These biotic and
abiotic components are linked to- gether
through nutrient cycles and energy flows.
Recycle the plastic or toxic waste from
which trees and humans and animals can
be hurts.Recycling is the process of con-
verting waste materials into new materials
and objects. It is an alternative to ’con-
ventional” waste disposal that can save
material and help lower greenhouse gas
emissions.
4.1.3 PROJECT
Our mission is Prevent water pollution
refine it as much as we can and try to
control global warming. Water treatment
is any process that improves the quality of
water to make it more acceptable for use.
This method was refined in the following
two decades, and it culminated in the first
treated public water supply in the world,
installed by the us.
23
4.1.3 EVENTS
• Starts Campaigning About GO GREEN
• Saving Trees
• Tree Planting and Enrichment
• Less Use of Private Vehicles and More
Use of Public Transport Vehicles
• Recycle Everything You Can
• Look Into Your Community Choice En-
ergy Options
4.1.5 BLOG
Even a samll change in the way you
execute your program can make a
posi- tive impact on the environment
Ways To host a sustainable your pro-
gram
(1) ASK UP FRONT.
Put your green goals in your RFP so ven-
dors understand that it’s an important
part of the conversation. Advise them
to provide specifics about their green ini-
tiatives and to come up with a program
within your budget.
(2) BOOK GREEN.
Select a venue that’s already green-
certified. This way you know that the
site has green programs in place and can
easily execute your sustainability plan.
(3) BOOK NEARBY.
Reduce travel by picking a location that’s
close to the majority of your guests. You
can still be off-site without having to fly
everyone in.
(4) WALK THE TOWN.
Pick a venue that’s in a central location
near hotels and restaurants. This will
reduce the need for transportation and
encourage guests to explore on foot.
24
(5) SOURCE LOCALLY.
The farm-fresh movement makes sustain-
able selections an easy choice. But it’s not
just about local food: Consider buying
all of your meeting and event supplies on
location.
(6) GO PAPER-LITE OR PAPERLESS.
Reduce or eliminate printed programs,
packets and agendas, and anything else
that can be communicated electronically.
Smartphones and tablets make it easy to
stay connected, and planners can enrich
content with mobile apps, videos and
interactive elements.
(7) RETHINK THE WATER.
Bottled water is often a staple at meetings
and events. Cut down on the recy- clable
kind and opt for a reusable bottle instead.
Brand it with your color theme or logo to
make it a desirable keepsake.
(8) REQUEST REUSABLE.
When possible, use reusable items for your
event—linens, tableware and silver- ware.
Or, at the very least, explore compostable
options.
(9) COMMUNICATE CLEARLY.
Don’t assume everyone understands the
differences between recycle, compost and
trash. When it comes to explaining your
recycling plan, you can never be too clear.
(10) GIVE BACK.
If appropriate, add a community service
event to your agenda. Organizations like
Clean the World, which collects and re-
cycles soap and shampoo products dis-
carded by the hospitality industry and do-
nates them to impoverished global com-
munities, can accommodate large groups
of volunteers for short-term projects.
25
Chapter 5
Implementation
The system is to make teachers and stu-
dents carry out projects wherever and
whenever they may work. It helps teach-
ers and students begin developing an over-
all plan for managing their project. For
Project-Based Learning to be ensured as
stu- dent centered learning, the system
must give students experience in planning
for the project and in working in team
or class, and have students create their
assignments as form of HTML documents
or reports. Normally the environmental
education of elementary schools has to be
authentic in that it is concerned with a
real-world situ- ation or problem because
of cognitive development process of stu-
dents. Our model will be an alternative
of environmental education in classroom.
As a result, we ex- pect that students will
recognize the importance of environmental
protection and have motivation to practice
environmental conservation. In this paper,
the system is implemented on a Windows
NT 4.0 Server and subsequent IIS 4.0. We
use database management based on SQL
Server 7.0 and the HTML and ASP lan-
guage for man- aging information. My
Project is a website for a Environment
friendly organization.
26
Chapter 6 Conclusion and Future
Scope
Conclusion
This chapter summarizes the main suc-
cess of this research work and discusses
an about future research work to achieve
the ultimate goal in the field of perfor-
mance of web accessibility, web security,
load balancing and collective intelligence.
An in depth literature survey was carried
out and the critical analysis of the same
raised the following major shortcomings
and challenges in the web-centric query
optimization techniques.
1. Network is congested due to heteroge-
neous data (i.e., text, images, videos
etc), heavy weight of web applications
and repetition of queries. Due to these
prob- lems the access time of web appli-
cations is very high, which reduces the
overall performance of the web.
2. Web-centric queries are neither efficient
nor secure.
3. Huge information is available on the
servers but the load on servers is not
still balanced. In industry the devel-
opers distribute the huge information
of servers by introducing more servers
which produce requirement of the col-
lective intel- ligence. Further, to search
the efficient and relevant server is also a
big chal- lenge. The diagnostic thought
to above challenges guides towards the
design of following efficient approach,
model and frameworks:
• Portable Extended Cache Memory
to Reduce Web Traffic (PECA)
In this approach, it is desired to conserve
the heavy data at the client side. The ex-
periments were performed on few dummy
web sites of different sizes while saving
27
96 heavy data at client side. Difference
in the access times of different web sites
via traditional method and with the pro-
posed approach was compared. A ma-
jor improvement in the access time was
observed in contrast .that by using tra-
ditional methods. Also, an attempt was
made to reduce server load and network
traffic congestion and it actually resulted
into reduction of response time and hence
an improved web performance could be
observed.
• Secure Web Access Model for sen-
sitive data (SWAM)
SWAM in the context of biometric recog-
nition is being proposed. The proposed
security model SWAM provide an inter-
face to the authorized user’s and reduce
the threats regarding their sensitive areas.
Online web services will be more secure
using the online SWAM.
• Collective Intelligence based
Framework for Load Balancing of
Web Servers Collective Intelligence
based Framework for Load Balancing
of Web Servers is being proposed.
The aim of this work is to find the
overall best server with shortest path
and hence online balancing of web
servers could be achieved with the
help of collective intelligence based
framework for online load balancing.
The proposed concept is an extension
of, rather than a replacement for, tradi-
tional exploration process.
Future Scope
The work covered in the thesis tries to
solve various issues, whichemerged as a
result of literature survey. Still there are
many unopened questions left and are of
interest were identified and are mentioned
below:
28
• Web Security At Client Side
In this research work we proposed PECA,
but it still has shortcomings. For exam-
ple, when web document is required to be
save in the portableextended memory it
reduces the security due to decentraliza-
tion of data. During updates at client side
malicious codes may transfer to the client
machine. So, a web security framework is
required at the client side to make PECA
more secure and better performer. So in
near future, PECA and SWAM may be
merged.
• Server Side Load Balancing
Load balancing is a concept which is
still under research. Everyday newframe-
works, algorithms and models are being
developed and existing models are up-
dated. There is a vast scope for future
enhancement. For example, the users are
sending arbitrary data as a query on the
web, and hence web-centric queries can be
optimized at server level to reduce server
load to improve the server performance.
Further, implementation of our work is
pending and hence an improvement may
be recommended in the same.
• Ant Based Technology for Collec-
tive Intelligence At Server Side
The developers are distributing server’s
data to reduce the server’sload. This mech-
anism is increasing the requirement of col-
lective intelligence. In this research work,
ant technology for collective intelligence
is used, but this is framework is based on
client’s query. There are still many un-
opened questions. For example, what and
how much data is available in near servers?
Are these servers are reliable? What is the
credibility of these servers? In particular
the server must have all the relevant infor-
mation of their relative servers.
29
References
World Wide Web Design with HTML; By:
C. Xavier
https://www.overleaf.com/project
https://www.w3schools.com
https://www.geeksforgeeks.org
https://www.wikipedia.org/
https://in.000webhost.com/
30