Akshita Ss

Acknowledgements
This work is just not an individual contribution till its completion. I take this
opportunity to express a deep gratitude towards my teacher for providing
excellent guidance encouragement and inspiration throughout the Training work.
Without his invaluable guidance, this work would never have been a successful
one.
.I would like to express deepest appreciation towards S. S. Thorat, Head of
Department of Electronic and telecommunication
At last we must express our sincere heartfelt gratitude to all the staff membersof
Information Technology Department who helped me directly or indirectly
duringthis course of work.
Akshita Tarachand Somkuwar

ABSTRACT
The aim of this Bachelor’s thesis was to develop a WordPress mobile-first style
website for the customer, Pohjois-Suomen Pesis. The main purpose of the
development was to learn website designing principles and create a responsive
website for the mobile and desktop platforms. The development process began
defining there requirements of the website and creating the requirements
document. Then next step was learning how to design a website layout and to
choose the colour scheme for the site. The website was constructed by WordPress
and Bootstrap. The result of the website was as desired. The website scaled all
the different platforms, and all the required requirements were fulfilled.
Contents
1 Introduction 1
1.1 WEB DEVELOPMENT
2 WEB 3
2.1 HTTP
2.1.1 HTTP Request / Response
2.1.2 The HTTP Request Circle
2.2 HTML 4
2.2.1 HTML Elements
2.2.2 HTML Documents
2.3 CSS 8
2.3.1 CSS Syntax
2.3.2 External Style Sheet
2.3.3 Inline Style
2.4 Google fonts 11
3 Software Requirements Specification 13
3.1 Software
3.1.1 Browser
3.1.2 Text Editor
4 Project Plane 17
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 20
6Conclusion and Future Scope 21
6.1Conclusion.
6.2Future Scope
References 23
List of figures
2.1 Heading Tag 4
2.2Document Structure 5
2.3.css file 9
2.4.css file linked with .html file 10
2.5Inline Syntax .css file. 10
2.6Inline Style Sheet. 11
2.7Google font using in .html file. 11
2.8Google font viewpage. 12
Chapter 1
Introduction
1.1 WEB DEVELOPMENT
Web development is the work involved in developing a web site for the Internet
oran intranet. Web development can range from developing a simple single static
page of plain text to complex web-based internet applications,
electronic businesses, and social network services
Chapter 2
WEB
2.1HTTP
HTTP stands for Hyper Text Transfer Protocol WWW is about communication
between web clients and servers Communication between client computers and
web servers is done by sending HTTP Requests and receiving HTTP Responses
2.1.1HTTP Request / Response
Communication between clients and servers is done by requests and responses:
a.A client (a browser) sends an HTTP request to the web
b.An web server receives the request
c.The server runs an application to process the request
d.The server returns an HTTP response (output) to the browser
e.The client (the browser) receives the response
2.1.2The HTTP Request Circle

A typical HTTP request / response circle:
a. The browser requests an HTML page. The server returns an HTML file.
b. The browser requests a style sheet. The server returns a CSS file.
c. The browser requests an JPG image. The server returns a JPG file
d. The browser requests JavaScript code. The server returns a JS file
e. The browser requests data. The server returns data (in XML or JSON).
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:
2.2.2 HTML Documents

The HTML document itself begins with html tag and ends with html tag followed by
'/' forward slash. The visible part of the HTML document is between body tag.
 <HTML> tag:
The HTML <title> tag is used for declaring the title, or name, of the HTML document.
The title is usually displayed in the browser's title bar (at the top). It is also displayed
in browser bookmarks and search results. The title tag is placed between the opening
and closing <head> tags. The <link> element is used to define a relationship between
an HTML document and an external re- source. This element is most commonly used
to define the relationship between a document and one or more external CSS
stylesheets.
HTML Headings
HTML headings are defined with hl to h6 tags.
<h1>This is heading 1</h1>
HTML Paragraph
HTML paragraphs are defined with p tags:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Links
HTML links are defined with a tags
<a href="https://www.w3schools.com">This is a link</a>
 HTML Images
HTML images are defined with img tags.
The source file (src), alternative text (alt), width, and height are provided as
attributes:
<img src="img_w3schools.jpg" alt="W3Schools" style="width:120px; height:150px"
 HTML Buttons
HTML buttons are defined with button tags:
<button>Click me</button>
 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):
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
 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. (bold and centered by default). Table cells (data) are
defined with td tags.
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
• <Body> tag:
Description. The HTML ¡body, tag defines the main content of the HTML document or
the section of the HTML document that will be directly visible on your web page. This
tag is also commonly referred 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 <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 Division tag. The Div
tag is used in HTML to make divisions of content in the web page like (text, images,
header, footer, navigation 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 particular
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 hyperlink that links one page to another page. The
"href" attribute is the most important attribute of the HTML a tag. An unvisited link is
displayed underlined and blue. A visited link displayed underlined and purple. An
active link is underlined and red.
 <footer> tages:
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 elements 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.3 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, alongside HTML and JavaScript.
2.3.1 CSS Syntax
A CSS rule consists of a selector and a declaration block:
The selector points to the HTML element to style (h1). The declaration block (in curly
braces) contains one or more declarations separated by semicolons. Each declaration
includes a CSS property name and a value, separated by a colon. In the following
example all p tag elements will be 32px wide, center-aligned, and with red.
Example:
<style>
font-size: 32px;
color: red;
text-align: center;
} </style>
2.3.2 External Style Sheet
The external style sheet is generally used when you want to make changes on mul-
tiple pages. It is ideal for this condition because it facilitates you to change the lookthe
entire web site by changing just one file. It uses the link tag on every pages and the
link tag should be put inside the head section.
Example:
body {background-color: orange; font-family:verdana)
h1 {color: white;}
p {font-size: 20px;}
The external style sheet may be written in any text editor but must be saved with
a .css extension. This file should not contain HTML elements.
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="mystyle.css">
<body>
<h1>My First CSS Example</h1>
</body> </html>
Figure 2.4: css file linked with html file.
2.3.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
<htmitag style="cssproperty1:value; cssproperty2:value;"></htmltag>
Figure 2.5: Inline Syntax ess file
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="mystyle.css">
<body>
<h1>My First CSS Example</h1>
<p style="font-size: 25px">This is a paragraph.</p>
<p style="font-size:30px">This is a paragraph.</p>
</body>
2.4 Google fonts
Google Fonts is a Google API.
We can use Google Fonts in our Website design.
<!DOCTYPE html>
<html> <head>
<link href='https://fonts.googleapis.com/css?family=Sofia' rel='stylesheet'>
<style> body {
font-family: 'Sofia'; font-size: 22px;
}
</style>
</head>
<body>
<h1>Sofia</h1>
<p>Imagination is more important than knowledge.</p>
<p>123456790</p>
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
</body>
</html>
Figure 2.7: Google font using in hunl file
When we use google fonts in designing webpage it will be viewed as:

Chapter 3
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 available 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 released
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 requirements.
• Notepad ++
Image result for notepad++ informationnotepad-plus-plus.org Notepad++ is a

text editor and source code editor for use with Microsoft Windows. It supports
tabbed editing, which allows working with multiple open files in a single window.
The project's name comes from the C increment operator.
• Atom
Atom is a free and open-source text and source code editor for macOS, Linux,
and Microsoft Windows with support for plug-ins written in Node.js, and
embedded Git Control, developed by GitHub, Atom is a desktop application
built using web technologies.
• Brackets
Brackets is a source code editor with a primary focus on web development.

Created by Adobe Systems, it is free and open-source software licensed under
the MIT License, and is currently maintained on GitHub by Adobe and other
open-sourced developers. It is written in JavaScript, HTML and CSS.
• Sublime Text
Sublime Text is a proprietary cross-platform source code editor with a Python

application programming interface. It natively supports many programming
languages and markup languages, and functions can be added by users with plu-
gins, typically community-built and maintained under free-software licenses.
Chapter 4
Project Planning
4.1 Flow of Project

4.1.1 HOME
This is a Environment friendly Organization which helps to save greenery on
Earth. We are always happy to help and we provide 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 System. An ecosystem is a community of
living organisms in conjunction with the nonliving 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 converting waste materials into new materials and objects. It is an
alternative to "conventional" 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 control global warming, water treatment is any process
that improves the quanty 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.
4.1.4 EVENTS
• Starts Campaigning About GO GREEN
• Saving Trees
• Tree Planting and Enrichment
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 program
(1) ASK UP FRONT.
Put your green goals in your RFP so vendors understand that it's an important
part of the conversation. Advise them to provide specifics about their green
initiatives 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.
(5) SOURCE LOCALLY.
The farm-fresh movement makes sustainable 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
elsethat 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 recycles soap and shampoo products
dis- carded by the hospitality industry and donates them to impoverished global
com- munities, can accommodate large groups of volunteers for short-
term projects.
Chapter 5
Implementation
The system is to make teachers and students carry out projects wherever and
whenever they may work. It helps teachers and students begin developing an
overall 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 students. 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 language for managing
information. My Project is a website for a Environment friendly organization.
Chapter 6
Conclusion and Future Scope
6.1 Conclusion
This chapter summarizes the main success of this research work and discusses an
about future research work to achieve the ultimate goal in the field of performance
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 heterogeneous 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 applications 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 developers distribute the huge information of servers by
introducing more servers which produce requirement of the collective 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
experiments were performed on few dummy web sites of different sizes while
saving 96 heavy data at client side. Difference in the access times of different web
sites via traditional method and with the proposed approach was compared. A
major improvement in the access time was observed in contrast tothat by using
traditional 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 sensitive data (SWAM)
SWAM in the context of biometric recognition is being proposed. The proposed
security model SWAM provide an interface 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, traditional
exploration process.
6.2 Future Scope

The work covered in the thesis tries to solve various issues, which emerged as a
result of literature survey. Still there are many unopened questions left and are of
interest were identified and are mentioned below: 97
• Web Security At Client Side
In this research work we proposed PECA, but it still has shortcomings. For
example, when web document is required to be save in the portable extended
memory it reduces the security due to decentralization 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 new frame-
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 serverperformance. Further, implementation of our work is pending
and hence an improvement may be recommended in the same.
• Anti Based Technology for Collective Intelligence At Server Side
The developers are distributing server's data to reduce the server's load. This
mechanism is increasing the requirement of collective 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 unopened 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 information of their relative servers.
References
[1] World Wide Web Design with HTML; By: C. Xavier
[2] https://www.overleaf.com/project
[3] https://www.w3schools.com
[4] https://www.geeksforgeeks.org
[5] https://www.wikipedia.org/
[6] https://in.000webhost.com/

Akshita Ss

Uploaded by

Copyright:

Available Formats

Akshita Ss

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Akshita Ss

Uploaded by

Copyright:

Available Formats

Acknowledgements

Akshita Tarachand Somkuwar

1.1 WEB DEVELOPMENT

2.1.2The HTTP Request Circle

2.2.1 HTML Elements

2.2.2 HTML Documents

When we use google fonts in designing webpage it will be viewed as:

Google Chrome is a cross-platform web browser developed by Google. It was

Vivaldi is a freeware, cross-platform web browser developed by Vivaldi Tech-

Image result for notepad++ informationnotepad-plus-plus.org Notepad++ is a

Brackets is a source code editor with a primary focus on web development.

Sublime Text is a proprietary cross-platform source code editor with a Python

4.1 Flow of Project

6.2 Future Scope

You might also like