Inhouse Report

8/10/2019 Inhouse Report

1/38

AMITY SCHOOL OF ENGINEERING

Practical Training Project

On

Website Development

Guided By: Submitted By:

Mrs. Sheetal Sharma Deepansh Pandey

Dept. Computer Science A12405212013ASE Roll no - 2013

CSE5A (ASE)


2/38

ACKNOWLEDGEMENT

I would like to thank my Faculty Guide Mrs. Sheetal Sharma, at the department of

Computer Science for her advice throughout the development of my project. Her patience,

enthusiasm, responsibility and meaningful guidance helped me very much in directing this

project to its final destination.

I would also like to thank my family, for their constant support without which this project

wouldnt be complete.

Deepansh Pandey

A12405212013

B.Tech (CSE)

Batch of 2012-2016

ASE, Noida


3/38

ABSTRACT

The website Pandeypriya has been developed for a north india based company

Pandeypriya E Solution in an effort to make it more attractive and dynamic. The company

website has been developed using HTML to structure the content, CSS for styling the

content and JAVASCRIPT for animation. We developed the website at the domain named

www.pandeypriya.com. This website is well designed and has a proper arrangement of

links and images so that the browser may easily access through the website.


4/38

TABLE OF CONTENTS

ABSTRACT.....................................................................................................i

Chapter 1: INTRODUCTION.................................................................................................1

Chapter 2: MATERIALS AND METHODS..........................................................................2

2.1 - Software Requirements

2.2Methodology

Chapter 3: RESULT ...................................................................4

Chapter 4: DISCUSSIONS AND CONCLUSION.................................................................5

Appendix......


5/38

INTRODUCTION

The purpose of our project is to build a dynamic website. For this we have worked on

learning basics of html, css and javascript. During our project, we contacted Pandeypriya E

Solutions for building their website. Pandeypriya E Solutons is a north Indian company

that is specialized in data entry, Data Processing, Data extracting, Web promotion, product

entry, software development and much more. They are promoted by professional expertise

in both the domestic as well as international projects. They provide high quality services to

their clients at reasonable cost and complete the work in given time frame. The company

old website is based on HTML 4.0 and has no customer support facility and animations in

it. We decide a design and start working on building website. The company domain has

been purchased from godaddy and site hosting service is from 3ix. We have used HTML,

CSS and JAVASCRIPT for building their website.

HTML is used to design the building blocks of the website which gives a structure to the

content. It allows the images and links to be embedded into a single form and many tags

have been used to make the website more dynamic, individualistic and attractive. It allows

to make web pages which can be used to represent an individual, a specific group or the

whole community. It is used for professional and personal use.

CSS is the cascading style sheets which defines the look up and the layout of the text and

the images present in the content. It helped to gain control the presentation of the pages

without even changing the html. Different properties were use that affected the display of

the content under this section. It responsible for the design of the webpage, what we see on

a website is because of css, it defines the style ie. Margins, font,color etc.

JAVASCRIPT is used by us for animation. It affects the behavior of the HTML web pages.

It allows user interaction, communication and also help in document alteration. The syntax

has the java language. It is responsible for making our page eye catching. Using java we

have put sliders, google maps, live chats in our website.


6/38

MATERIALS REQUIRED

The software requirements for this project are as follows:

1. Notepad

2. Dreamweaver

3. Filezilla

Domain brought from http://in.godaddy.com/

Further used languages are:

1. HTML

2. CSS

3. JAVASCRIPT


7/38

METHODOLOGY

The index page:

The index page is the starting of the website whenever someone enters a domain name. The

user is automatically directed to the index page so using css. We have made the page look

eye catching as it represents the whole website.

The home page:

The home page is the main starting of website so we have put scrolling effect using

javascript to make page look more attractive. We have added portfolio, images to make the

main page contain all necessary information about the company.


8/38


9/38


10/38


11/38

The Portfolio page:

We have put all work experience and customer reviews under this page. The customer

reviews is the most important thing that will encourage other clients to provide projects to

company. We have put special enlarging effect using css in this page.


12/38


13/38

The service page:

We have described all the services provided by the company with all strategies. We have

also provided PayPal one click payment option in these web pages.


14/38


15/38

The about us page:

The about us page described about all details, qualification, ideology and reasons to choose

the company. We have subdivided the into who we are where company information is

given and why us where reason to choose company is given.


16/38

The contact us page:

It contains all relevant information about how to contact company. Here all office address

and phone numbers are provide and a half page google map. A customer query form is also

put on this page which emails all detail to company email id.


17/38


18/38


19/38

THE CASCADING STYLE SHEETS

body {

margin:0px;

font-family:"Open Sans";

background-color:#FFFFFF;

font-size:14px;

color:#666666;

}

h1,h2,h3,h4{

color:#000000;

}

a {

outline:none;

color:#000000;

text-decoration:none;

}

a img {

margin-top:0px;

display:block;

}


20/38

p {

font-size:14px;

line-height:24px;

letter-spacing:0.05em;

color:#959595;

float:right;

}

p a {

color:#666666 ;

}

#header {

background-color:#EAEAEA;

height:100p%;

margin:0;

width:100%;

z-index: 99;

font-size:16px;

}

#header div {

margin-left:100px;

overflow:hidden;


21/38

}

#header div a#logo {

display:inline;

float:left;

}

#logo

{

height:100px;

width:200px;

float:left;

position:relative;

}

.navbar {

margin-top:40px;

height: 100px;

padding: 0;

margin-left:240px;

position: absolute;

}

.navbar li {

height:auto;


22/38

width: 200px;

float: left;

text-align:center;

list-style:none;

font: 'Open Sans',Arial, Helvetica, sans-serif;

}

.navbar a {

padding: 0px 0;

color:#000000;

display:block;

}

.navbar li:hover, a:hover{background-color:#999999; color:#ffffff;}

.navbar li ul {

display:none;

height:auto;

padding: 0px;

}

.navbar li:hover ul {

display:block;

}

.navbar li ul li {background-color:#EAEAEA; }


23/38

.navbar li ul li a {

text-align:justify ;

padding-left:5px;

padding-top:10px;

padding-bottom:10px;

border-left: 1px solid #CCCCCC ;

border-right: 1px solid #CCCCCC;

}

.select {

color:#FFFFFF;

background-color:#999999;

}

#body {

margin:0 auto 97px;

min-height:1440px;

padding:38px 29px 0;

width:1300px;

}

#testi.start h2{

margin-left:120px;

}


24/38

#testi.start div{

margin-top:10px;

MARGIN-LEFT:100PX;

text-ALIGN:justify;

}

#guru.over{

padding-top:30px;

margin-left:100px;

text-align:justify;

margin-right:100px;


}

#soft.content{

padding-top:30px;

margin-left:100px;

text-align:justify;

margin-right:100px;


}

#data.content{

padding-top:30px;


25/38

margin-left:100px;

text-align:justify;

margin-right:100px;


}

#seo.content{

padding-top:30px;

margin-left:100px;

text-align:justify;

margin-right:100px;


}

#seo.content img{

margin-left:400px;

}

#seopack.content img{

margin-left:100px;

margin-top:30px;

}

#seopack.content form{

margin-left:700px;


26/38

margin-right:200px;


}

#virt.content{

padding-top:30px;

margin-left:100px;

text-align:justify;

margin-right:100px;


}

#virt.content table{ border-collapse:separate; border-spacing: 2px; }

#webd.content{

padding-top:30px;

margin-left:100px;

text-align:justify;

margin-right:100px;


}

#about.detail {


27/38

padding-top:30px;


margin-left:100px;

margin-right:100px;

text-ALIGN:justify;

}

#why.us table{

padding-top:30px;

margin-left:100px;

margin-right:100px;

text-align:justify;


}

#bottom_mask.mask2 {

position: absolute;

bottom: 0;

left: 0;

width: 100%;

height: 30px;

z-index: 99;

background: url(../img/bottom_mask.png) no-repeat center top;


28/38

}

#googleMap{

width:100%;

height:520px;

}

#contacttext.lony h1{

text-align:left;

margin-left:100px;

margin-top:20px;

}

#contacttext.lony img{

width:100%;

height:2px;

margin-left:100px;

margin-right:100px;

margin-top:0px;

}

#form.fill .chalu table{

margin-left:40px;

margin-top:0px;

}


29/38

#footer {

background:url(../img/footer.png) repeat-x;

width:100%;

height:150px;

}

#footer p{

color:#000000;

}

#footer.contact table{

width:940px;


}


30/38

RESULT

Thus the final website of PANDEYPRIYA E SOLUTION is shown below:

1.

The index Page

2. The home page:


31/38

3. The portfolio page:


32/38

4. The service page:

5. About us page:


33/38

6. Contact us page:


34/38

DISCUSSION

As discussed above, a website is a collection of web pages containing information, images,

links. Lastly, we are able to create a website for the company named PANDEYPRIYA E

SOLUTIONS using HTMLfor structuring the content, CSS for providing style to the web

page and JAVASCRIPT used for making the HTML web page for animation.

Therefore, these features make the website more attractive and more dynamic than before

with much more features included in the developed website.

Thus the website above has been well designed and helps the browser to access easily

throughout the website without any complications. The new website has been developed in

HTML 5.0 and have latest feature like customer chat, customer query form, sliders,magnifying texts and pictures , fading text. These effects had made the website to look

more attractive and eye catching. The new website will allow more interaction opportunity

to the customers.


35/38

CONCLUSION AND RECOMMENDATION

Website - Pandeypriya E Solutions is a website designing project where we have used

HTML, CSS and JAVASCRIPT to add more attractive features to it.

Pandeypriya E Solution is a north Indian company that is specialized in fields like data

entry, website designing, HTML promoting, Data Processing, Data extracting, Web

promotion, copywriting, product entry and many more. There is a requirement of more

dynamic and eye catching website for the company. We worked hard and researched a lot

on various latest technology updates like parallax scrolling, Google maps, live chat etc.

These things made the website look attractive. This website was aimed to be easily

accessible by the browser and compatible with all the devices. The problem during thispractical training taught us a lot about things that we can never learn from a book.


36/38

FUTURE IMPLICATIONS

In Website - Pandeypriya E Solution website we have added different type of features

like different designs of cascading style sheets and animations using JavaScript. We would

surely try to design more better and eye catching website and upgrade more features in

website we develop in future. We think there is great scope of website designing. We

would try to discover different features of website so that more dynamic website can be

designed. We would also try to develop our own built features that can be used to sell to

other companies. We can develop our own songs and shopping website.


37/38

REFERNCES

1. Black Book for HTML5

- Covers CSS3, JavaScript, XML, XHTML, PHP and jQuery

2.

Blog and posts

- https://ihatetomatoes.net/simple-parallax-scrolling-tutorial/. Here we learn about

making parallax scroll which is used on our home page.

3. Website

- http://www.w3schools.com/html/

- http://www.w3schools.com/css

- http://www.codecademy.com/

These websites are used to learn some codes and running small codes.4. Google

5. Forums

- http://www.htmlforums.com/ where some similar problems we are facing

already discussed which help us to save lots of time.

6. Pandeypriya

- The data provided by the company that is to be put on their site. They also

helped up financially by paying the cost of domain and hosting.

7. Godaddy.com

- The domain Pandeypriya.com has been bought from this domain seller.


38/38

Documents

Inhouse Report