Project report

1
CHAPTER 1
INTRODUCTION
We are the 'CASH OUT OF TRASH' community.We aim to aware people on how to
generate income from their waste or use their waste to genenrate income.We are the growing
community now.We appreciate useful blogs and photos to our community blog site.This
initiative was started by a few green thinkers who thought it is necessary to aware people
about waste managment.They believed that even waste can be utitlised.So we aim to work on
this idea .Anyone who thinks they can generate cash out of trash,they belong to us.
PROJECT’S MOTTO
The main aim of the project was to develop a website which would come smart city of
various cities.The project is basically targeted at those people who would like to though
about environment.

2
CHAPTER 2
WHY WE
LARGEST COMMUNITY
We are the largest green thinking community now and we aim to expand our thinking
throughout the world
NON-PROFITABLE
We are a helping community.So,we aim to generate awareness which could led to better
future.
E-THINKING
Our main motto is to generate cash out of trash.So we aim to sell eco-friendly pots,plates and
other stuff at cheap rates.
24*7 SUPPORT
We aim to provide 24X7 support help to people who wish to join our community or wish to
purchase something from our community.

4
CHAPTER 4
TECHNOLOGY USED
THERE ARE FOLLOWING LANGUAGE UDED TO DEVOLOPE THIS
WEBSITE—
HTML
CSS
JAVASCRIPT
PHP
SQL
SOFTWARE USED:--
MS-WORD
NOTEPAD++

5
CHAPTER 5
HTML(HYPER TEXT MARKUP LANGUAGE)
HTML BASIC
HTML is the standard markup language for creating Web pages.
 HTML stands for Hyper Text Markup Language
 HTML describes the structure of Web pages using markup
 HTML elements are the building blocks of HTML pages
 HTML elements are represented by tags
 HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
 Browsers do not display the HTML tags, but use them to render the content of the
page
EXAMPLE:-
<!DOCTYPE html>
<html>
<head>
<title>PageTitle</title>
</head>
<body>
<h1>MyFirstHeading</h1>
<p>Myfirstparagraph.</p>
</body>
</html>
OUTPUT:-

6
HTML EDITOR
Web pages can be created and modified by using professional HTML editors.However, for
learning HTML we recommend a simple text editor like Notepad (PC) or TextEdit (Mac).We
believe using a simple text editor is a good way to learn HTML.Follow the four steps below
to create your first web page with Notepad or TextEdit.
Step 1: Open Notepad (PC)
Open Start > Programs > Accessories > Notepad
Step 2: Write Some HTML
Step 3: Save the HTML Page
Save the file on your computer. Select File > Save as in the Notepad menu.Name the
file "index.htm" and set the encoding to UTF-8 (which is the preferred encoding for HTML
files).

7
Step 4: View the HTML Page in Your Browser
Open the saved HTML file in your favorite browser (double click on the file, or right-click -
and choose "Open with").
The result will look much like this:

8
HTML BASIC TAGS
HEADING TAGS
Any document starts with a heading. You can use different sizes for your headings. HTML
also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and
<h6>. While displaying any heading, browser adds one line before and one line after that
heading.
Example:
This will produce following result:

9
PARAGRAPH TAGS
The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of
text should go in between an opening <p> and a closing </p> tag as shown below in the
example:
LINE BREAK TAGS
Whenever you use the <br /> element, anything following it starts from the next line. This tag is an
example of an empty element, where you do not need opening and closing tags, as there is nothing to
go in between them.The <br /> tag has a space between the characters br and the forward slash. If
you omit this space, older browsers will have trouble rendering the line break, while if you miss the
forward slash character and just use <br> it is not valid in XHTML

10
CENTERING CONTENT
You can use <center> tag to put any content in the center of the page or any table cell.
HORIZONTAL LINES
Horizontal lines are used to visually break up sections of a document. The <hr>tag creates a
line from the current position in the document to the right margin and breaks the line
accordingly.For example you may want to give a line between two paragraphs as in the
given example below:

11
This produce following result:will
PRESERVEFORMATTING
Sometimes you want your text to follow the exact format of how it is written in the HTML
document. In those cases, you can use the preformatted tag <pre>.Any text between the
opening <pre> tag and the closing </pre> tag will preserve the formatting of the source
document.

12
NONBREAKING SPACES
Suppose you want to use the phrase "12 Angry Men." Here you would not want a browser to
split the "12, Angry" and "Men" across two lines:
In cases where you do not want the client browser to break text, you should use a
nonbreaking space entity   instead of a normal space. For example, when coding the
"12 Angry Men" in a paragraph, you should use something similar to the following code:

13
HTML FORMATTING
BOLDTEXT
Anything that appears within <b>...</b> element, is displayed in bold as shown below:
ITALICTEXT
Anything that appears within <i>...</i> element is displayed in italicized as shown below:
UNDERLINEDTEXT
Anything that appears within <u>...</u> element, is displayed with underline as shown
below:

14
STRIKETEXT
Anything that appears within <strike>...</strike> element is displayed with strikethrough,
which is a thin line through the text as shown below:
SUPERSCRIPT TEXT
The content of a <sup>...</sup> element is written in superscript; the font size used is the
same size as the characters surrounding it but is displayed half a character's height above the
other characters.

15
SUBSCRIPT TEXT
The content of a <sub>...</sub> element is written in subscript; the font size used is the
same as the characters surrounding it, but is displayed half a character's height beneath the
other characters.
GROUPING CONTENT
The <div> and <span> elements allow you to group together several elements to create
sections or subsections of a page.For example, you might want to put all of the footnotes on
a page within a <div> element to indicate that all of the elements within that <div> element
relate to the footnotes. You might then attach a style to this <div> element so that they
appear using a special set of style rules.

16

17
HTML IMAGES
INSERTIMAGE
You can insert any image in your web page by using <img> tag. Following is the simple
syntax to use this tag.
The <img> tag is an empty tag, which means that it can contain only list of attributes and it
has no closing tag.
Example
To try following example, let's keep our HTML file test.htm and image file test.png in the
same directory:

18
HTML TABLES
The HTML tables allow web authors to arrange data like text, images, links, other tables,
etc. into rows and columns of cells.
The HTML tables are created using the <table> tag in which the <tr> tag is used to create
table rows and <td> tag is used to create data cells.
Example
TABLEHEADING
Table heading can be defined using <th> tag. This tag will be put to replace <td> tag, which
is used to represent actual data cell. Normally you will put your top row as table heading as
shown below, otherwise you can use <th> element in any row.

19
TABLES BACKGROUNDS
You can set table background using one of the following two ways:
 bgcolor attribute - You can set background color for whole table or just for one cell.
 background attribute - You can set background image for whole table or just for one
cell.
 You can also set border color also using bordercolor attribute.

20
Here is an example of using background attribute. Here we will use an image available in
/images directory.

21
This will produce following result. Here background image did not apply to table's header.
TABLEHEIGHTANDWIDTH
You can set a table width and height using width and height attrubutes. You can specify
table width or height in terms of pixels or in terms of percentage of available screen area.

22
TABLEHEADER,BODY,ANDFOOTER
Tables can be divided into three portions: a header, a body, and a foot. The head and foot are
rather similar to headers and footers in a word-processed document that remain the same for
every page, while the body is the main content holder of the table.
The three elements for separating the head, body, and foot of a table are
 <thead> - to create a separate table header.
 <tbody> - to indicate the main body of the table.
 <tfoot> - to create a separate table footer.

23
HTML EMAIL LINKS
HTMLEMAILTAG
HTML <a> tag provides you option to specifiy an email address to send an email. While
using <a> tag as an email tag, you will use mailto:email address along with href attribute.
Following is the syntax of using mailtoinstead of using http.
This code will generate following link which you can use to send email.
Now if a user clicks this link, it launches one Email Client ( like Lotus Notes, Outlook
Express etc. ) installed on your user's computer. There is another risk to use this option to
send email because if user do not have email client installed on their computer then it would
not be possible to send email.
DEFAULTSETTINGS
You can specify a default email subject and email body alongwith your email address.
Following is the example to use default subject and body.
This code will generate following link which you can use to send email.

24
HTML COLORS
Colors are very important to give a good look and feel to your website. You can specify
colors on page level using <body> tag or you can set colors for individual tags
using bgcolor attribute.
The <body> tag has following attributes which can be used to set different colors:
HTMLCOLORCODING METHODS
There are following three different methods to set colors in your web page:
 Color names - You can specify color names directly like green, blue or red.
 Hex codes - A six-digit code representing the amount of red, green, and blue that
makes up the color.
 Color decimal or percentage values - This value is specified using the rgb( )
property.
Now we will see these coloring schemes one by one.
HTMLCOLORS-COLORNAMES
You can sepecify direct a color name to set text or background color. W3C has listed 16
basic color names that will validate with an HTML validator but there are over 200 different
color names supported by major browsers.
Here is the list of W3C Standard 16 Colors names and it is recommended to use them.
Here are the examples to set background of an HTML tag by color name

25
BROWSERSAFECOLORS
Here is the list of 216 colors which are supposed to be safest and computer independent
colors. These colors very from hexa code 000000 to FFFFFF and they will be supported by
all the computers having 256 color palette.

26
MIMEMEDIATYPES
MIME (Multipurpose Internet Mail Extension) media types were originally devised so that
e-mails could include information other than plain text. MIME media types indicate the
following things:
 How different parts of a message, such as text and attachments, are combined into the
message.
 The way in which each part of the message is specified.
 The way different items are encoded for transmission so that even software that was
designed to work only with ASCII text can process the message.
Now MIME types are not just for use with e-mail; they have been adopted by Web servers
as a way to tell Web browsers what type of material was being sent to them so that they can
cope with that kind of messages correctly.
MIME content types consist of two parts:
 A main type
 A sub-type
The main type is separated from the subtype by a forward slash character. For example,
text/html for HTML.
This chapter is organized for the main types:
 text
 image
 multipart
 audio
 video
 message
 model
 application
For example, the text main type contains types of plain text files, such as:

27
HTML LINKS
Links are found in nearly all web pages. Links allow users to click their way from page to
page.
HTML LINKS – HYPERLINKS
HTML links are hyperlinks
You can click on a link and jump to another document.When you move the mouse over a
link, the mouse arrow will turn into a little hand.
HTML Links – Syntax
In HTML, links are defined with the <a> tag:
The href attribute specifies the destination address of the link.
HTML LINK COLORS
By default, a link will appear like this (in all browsers):
 An unvisited link is underlined and blue
 A visited link is underlined and purple
 An active link is underlined and red
You can change the default colors, by using styles:

28
HTML LAYOUTS
HTML Layout Example
HTML LAYOUT ELEMENTS
Websites often display content in multiple columns (like a magazine or newspaper).HTML5
offers new semantic elements that define the different parts of a web page:
 <header> - Defines a header for a document or a section
 <nav> - Defines a container for navigation links
 <section> - Defines a section in a document
 <article> - Defines an independent self-contained article
 <aside> - Defines content aside from the content (like a sidebar)
 <footer> - Defines a footer for a document or a section
 <details> - Defines additional details

29
 <summary> - Defines a heading for the <details> element
HTML LAYOUT TECHNIQUES
There are four different ways to create multicolumn layouts. Each way has its pros and cons:
 HTML tables
 CSS float property
 CSS framework
 CSS flexbox

30
CHAPTER 6
DESCRIBE WEBSITE
HOMEPAGE
ABOUT US
WHY WE

32
GALARY
REGISTER IN OUR WEBSITE

33
SOCIAL LINKS
FACEBOOK
TWITTER
GOOGLE+
LINKED
YOUTUBE

34
CHAPTER 7
CONTENS IN THIS WEBSITE
CONTENTS
SMART EDUCATION
Tele-education systems today promise wider access to education and support for lifelong
learning. An organization that uses the Internet to publish hyperlinked multimedia content
can reach a wider audience. Instead of reading the book, students read the screen. In most
cases, live instruction catches students' attention and interest much more effectively than
static materials. Real-time interactive virtual classrooms can therefore play an indispensable
role in distance learning.Now a student from India can learn from the professors of US. IITs
also have started their online teaching programme named NPTEL facilitating students to get
benefited from the lectures of the pioneers in the field of technology. Access to these
features is a vital and important criteria for a city to be Smart

35
SMART ENVIRONMENT
Guess every one of us was asked this question at some point or the other by our teachers
when we were children. We ask you the same question again with a slight change.Caught
you off guard again, huh?Let's see and find out how this is different from the environment
which our esteemed teachers had taught us.
E-GOVERNANCE
E-Government i.e. Electronic Government is the use of Information and Communications
Technology (ICT) to run or carry on the business of the Government of a Country. However
the term E-government is misleading, as it implies an electronic substitute for the physical
government. Electronic substitution of a government is not possible as Government is a unit
of people coming together to administer a country.In this e-era, there is no point having the
same conventional methods of running the government. Let us find out more in this regard.
SMART HEALTH
Health is the most important aspect of someone's life.A sound mind resides in a healthy
body. How much we try we can never replace health with any other aspect. How Smart is a
cityToday we don't need good health facilities, we need Smart Health facilities.Smart Health
is nothing but providing health facilities to the citizen in a smarter way with the use of
SMART LIVING
There was a time people used to say: "Simple Living, High Thinking".But the trend today
has a slight difference. Phones have become smart, Cities are getting smarter. It is needless to
say that the newer generation is smarter than the older generation and so is their living. Smart
Living involves improved standards in several aspects of day-to-day life, ranging from
domiciles, workplaces, the way people are transported within cities, context of construction
of buildings, growing existence of innovation etc.
E-WASTE MANAGEMENT
The global growth in electrical and electronic equipment production and consumption is
exponential. Due to this, Electronic waste (e-waste) is the fastest growing waste stream
today. E-waste means waste electrical and electronic equipment, whole or in part or rejects
from their manufacturing and repair process, which are intended to be discarded. But due
to an inefficient system of e-waste management, the rate of its increase is alarming. This
can never be ignored.

36
E-WATER MANAGEMENT
There is a famous line form The Rime of the Ancient Mariner by Samuel Taylor Coleridge -
"Water, water everywhere, And All the boards did shrink;
Water,Water everywhere, nor any drop to drink."The earth has an abundance of water, but
unfortunately, only a small percentage (about 0.3%) is usable by humans. The other 99.7% is
in the oceans, soils, icecaps, and floating in the atmosphere. The rime is indeed, which some
people might call, a prophecy of the doomsday. We would see water all around us, but like a
new born child we would be helpless, and craving for water. You can go on days without
food, but you will not survive a day without water.If we do nothing about it, then we would
be facing similar consequences. Cash Out Of Trash has brought a great platform where one
can learn the techniques of smart water management so that it could be used for the
betterment of our environment.
SMART TRANSPORTATION
City transportation is an important pillar for quality of life of citizens in a city. Currently, in
most of the cities, public and private road transportation are the key mode of commuting
and logistics. Some large and mega cities have metro and local train network as the
backbone transportation mode. But this is not enough. Our transportation services must be
smart and capable enough. Smart City needs a smart system of transportation.
CASE STUDY
All talking but no reality is of no use for the people of this era. This is the era of facts and
data. Even if a project has a very good content, scope and use but doesn't provide a reality
check is useless.We at Cash Out Of Trash bring to you the best case studies related to the
upcoming technical advances and scope of development with respect to the Smart Cities.
These are some of the Case Studies on different perspectives of Smart Cities by the leading
technical, manufacturing and services companies of the world. Please have a look on what
these Pioneers in the field of development have to say.
i. Approaches to Urban Planning - by IBM
Download pdf
ii. Perspectives on Intelligent Cities - by Accenture
Download pdf
iii. Role of IT in Smart Cities - by CISCO
Download pdf

37
CONCLUSION
In this paper, we proposed a learning model called Web Project Learning to provide
motivation and collaborative learning to students in the Web environment. We expect that
students are concerned with the problems of their regional environments and investigate them
when our learning model is applied to environmental education. Our model also encourages
students to interchange their own peculiar environmental characteristics. Using the proposed
model, students can strengthen research and organization skills while being responsible and
self-motivated. As they gain learning experience for the pure joy of learning, their emotional
interest, intrinsic motivation, and hunger for knowledge can also be increased. The students
are immersed in an authentic learning environment while undertaking the project. Their
activities encourage them to exercise life skills such as problem solving, communication and
collaboration, making decisions, and using information technology. Also, parents are
concerned about their children’s development and thus will participate in and contribute to
the project. As teachers examine the students' work and prepare the project, their own
understanding of students' development is deepened.

38
REFRENCES
I would like to thank to my senior my friends and my elder sister to help me in this project.
JUSCO [http://www.tata.com/company/profile/Jamshedpur-Utilities-and-Services-
Company]

Project report

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Project report

Similar to Project report (20)

Recently uploaded

Recently uploaded (20)

Project report