Projects HTML & Wabsite

7/30/2019 Projects HTML & Wabsite

1/30

Preface

In todays competitive world, computer has assumed critical importance in every field. It

has become an essential qualification for almost all ventures. In our Bachelor of

Computer Application, we have been prepared to be at par with the industrial

requirements. But theoretical knowledge is not just enough in present eras. Theoretical

knowledge accompanied with the practical knowledge makes us ready for making a good

performance when we enter the industry.

Training phase is a very important phase in ones course and gives the student an

opportunity to expose himself to the environment of well knit institution and hence

understand how the skills that he acquired during theoretical studies to practical situation.

This training has been developed as a part of industrial training, which Punjab State

Board of Technical Education & Industrial Training requires its students to undergo. The

purpose of the industrial training is to familiarize the students of Computer-Graduate

Degree course with the present working environment of the Indian industry. To providethem with an opportunity to study the latest technological trends that has been

established.

It provides an opportunity to both upgrade skills and add to the corpus of professional

knowledge in an environment that provides you with practical and theoretical knowledge.

1


2/30

ACKNOWLEDGEMENT

This humble endeavor bears the imprint of many persons who were in one way or the

other helpful in the completion of our three years degree. We would like to take this

opportunity to present our vote of thanks to our guides who acted as lighting pillars to

enlighten our way through out this project. This project would not have been possible

without the kind assistance and guidance of many people who indeed were helpful,

cooperative and kind during the entire course of our project.

The acknowledgment would not be complete without expressing our indebtedness to our

teacher in charge Mr. Virender Singh who guided us in this project and was the constant

source of reference for us and showed full interest at each and every step of our project .

Chahat Pahwa

2


3/30

OBJECTIVES

Error Handling

Response to Users Errors and undesired situation has been taken care of to ensure that

the system operates without halting in case of such situations and proper error messages

are given.

Safety

The system is able to avoid catastrophic behavior.

User Friendliness

The System is easy to learn and understand. A native user can also see the system

effectively, without any difficulty. .

Cost Element

In the new system, servicing a given demand in a program does not require lot of money.

The system is reliable, versatile and efficient.

Response TimeThe response time of all operations is according to the user needs.

User Satisfaction

The system is such that it stands up to the user expectations.

3


4/30

Introduction

The Minor Project is On Basic Business website template by Using HTML, JavaScript

and CSS (style sheet). It just contains some project details and 4 pages of Home Page,

About Us, JavaScript Functions and Our Projects page.

Home Page

About Us

Services(JavaScript Functions) Our Projects

4


5/30

Requirements

In this phase we have filtered the information yet gathered within framework of the

Students Database Management objective and the environment in which project is to be

developed. I have concentrated the focus on the resources: hardware as well as software

available for this project development. The input of this phase is all the logical

information gathered yet and the output is the software requirement specification.

Besides, clearly specifying what the proposed software should do, http://w3schools.com

helped us understand our requirements better.

Specific Requirements

Hardware Interfaces

Software Interfaces

5


6/30

HARDWARE USED

Processor - Intel Core i7 2.9 GHz 2nd Generation

HDD - 750 GB

RAM - 8 GB

Graphics Radon 1GB Graphic Card

SOFTWARE USED

HTML (Hyper Text Markup Language)

Java Script

Cascading Style Sheets (CSS)

Notepad plus

Adobe Photoshop CS5

Adobe Dreamweaver CS5

OPERATING SYSTEM USED

Windows 7 Home Premium

WEB BROWSERS USED

Internet Explorer 9

Google Chrome

6


7/30

INTRODUCTION TO HTML

HTML stands for Hyper Text Markup Language. In 1980, a markup language was

developed to create documents that could be displayed consistently on computers of

different hardware and operating systems. It was called the Standard Generalized Markup

Language or SGML on web.

HTML or Hyper Text Markup Language has evolved from the SGML. HTML is used to

construct formatted pages for the web known as web pages. It comprises of:

MARKUP LANGUAGE

It refers to the tags which specify how to incorporate text, graphics, and sound and also

control visual elements such as fonts, font sizes and paragraph sizing.

WEB PAGE CONTENTS

It refers to the actual text information, which is displayed on the page .

HTML Tags

HTML markup tags are usually called HTML tags

HTML tags are keywords surrounded by angle brackets like

HTML tags normally come in pairs like and

The first tag in a pair is the start tag, the second tag is the end tag

Start and end tags are also called opening tags and closing tags.

HTML Documents - Web Pages

HTML documents describe web pages

HTML documents contain HTML tags and plain text

HTML documents are also called web pages

The purpose of web browsers (like Internet Explorer) is to read HTML documents and

display them as web pages. The browser does not display the HTML tags, but uses the

tags to interpret the content of the page.

7


8/30

Tag Description

< html > Defines an HTML document

< body > Defines the document's body

< h1 > to < h6 > Defines header 1 to header 6

< !-- > Defines a comment

< p > Defines a paragraph

< br / > Inserts a single line break

< hr / > Defines a horizontal rule

< b > Defines bold text

< big > Defines big text

< em > Defines emphasized text

< i> Defines italic text

< small > Defines small text

< strong > Defines strong text

< sub > Defines subscripted text

< sup > Defines superscripted text

< ins > Defines inserted text

< del > Defines deleted text

< s > Deprecated. Use instead

< strike > Deprecated. Use instead

< u > Deprecated. Use styles instead

< tt > Defines teletype text

< var > Defines a variable

< abbr > Defines an abbreviation

< blockquote > Defines a long quotation

< table > Defines a table

< th > Defines a table header

< tr > Defines a table row

8
http://www.w3schools.com/tags/tag_html.asphttp://www.w3schools.com/tags/tag_body.asphttp://www.w3schools.com/tags/tag_hn.asphttp://www.w3schools.com/tags/tag_comment.asphttp://www.w3schools.com/tags/tag_p.asphttp://www.w3schools.com/tags/tag_br.asphttp://www.w3schools.com/tags/tag_hr.asphttp://www.w3schools.com/tags/tag_font_style.asphttp://www.w3schools.com/tags/tag_font_style.asphttp://www.w3schools.com/tags/tag_phrase_elements.asphttp://www.w3schools.com/tags/tag_font_style.asphttp://www.w3schools.com/tags/tag_font_style.asphttp://www.w3schools.com/tags/tag_phrase_elements.asphttp://www.w3schools.com/tags/tag_sup.asphttp://www.w3schools.com/tags/tag_sup.asphttp://www.w3schools.com/tags/tag_ins.asphttp://www.w3schools.com/tags/tag_del.asphttp://www.w3schools.com/tags/tag_strike.asphttp://www.w3schools.com/tags/tag_strike.asphttp://www.w3schools.com/tags/tag_u.asphttp://www.w3schools.com/tags/tag_font_style.asphttp://www.w3schools.com/tags/tag_phrase_elements.asphttp://www.w3schools.com/tags/tag_abbr.asphttp://www.w3schools.com/tags/tag_blockquote.asphttp://www.w3schools.com/tags/tag_table.asphttp://www.w3schools.com/tags/tag_th.asphttp://www.w3schools.com/tags/tag_tr.asphttp://www.w3schools.com/tags/tag_body.asphttp://www.w3schools.com/tags/tag_hn.asphttp://www.w3schools.com/tags/tag_comment.asphttp://www.w3schools.com/tags/tag_p.asphttp://www.w3schools.com/tags/tag_br.asphttp://www.w3schools.com/tags/tag_hr.asphttp://www.w3schools.com/tags/tag_font_style.asphttp://www.w3schools.com/tags/tag_font_style.asphttp://www.w3schools.com/tags/tag_phrase_elements.asphttp://www.w3schools.com/tags/tag_font_style.asphttp://www.w3schools.com/tags/tag_font_style.asphttp://www.w3schools.com/tags/tag_phrase_elements.asphttp://www.w3schools.com/tags/tag_sup.asphttp://www.w3schools.com/tags/tag_sup.asphttp://www.w3schools.com/tags/tag_ins.asphttp://www.w3schools.com/tags/tag_del.asphttp://www.w3schools.com/tags/tag_strike.asphttp://www.w3schools.com/tags/tag_strike.asphttp://www.w3schools.com/tags/tag_u.asphttp://www.w3schools.com/tags/tag_font_style.asphttp://www.w3schools.com/tags/tag_phrase_elements.asphttp://www.w3schools.com/tags/tag_abbr.asphttp://www.w3schools.com/tags/tag_blockquote.asphttp://www.w3schools.com/tags/tag_table.asphttp://www.w3schools.com/tags/tag_th.asphttp://www.w3schools.com/tags/tag_tr.asphttp://www.w3schools.com/tags/tag_html.asp


9/30

< td > Defines a table cell

< caption > Defines a table caption

< colgroup > Defines groups of table columns

< col > Defines the attribute values for one or more columns in a table

< thead > Defines a table head

< tbody > Defines a table body

< tfoot > Defines a table footer

HTML Basic Document

Page Title

Body of the Page to be displayed on Web Browser.

Heading Elements

Largest Heading

. . .

. . .

. . .

. . .

Smallest Heading

Text Elements

this is a paragraph

(line break)

(horizontal rule)

this text is preformatted

9
http://www.w3schools.com/tags/tag_td.asphttp://www.w3schools.com/tags/tag_caption.asphttp://www.w3schools.com/tags/tag_colgroup.asphttp://www.w3schools.com/tags/tag_col.asphttp://www.w3schools.com/tags/tag_thead.asphttp://www.w3schools.com/tags/tag_tbody.asphttp://www.w3schools.com/tags/tag_tfoot.asphttp://www.w3schools.com/tags/tag_td.asphttp://www.w3schools.com/tags/tag_caption.asphttp://www.w3schools.com/tags/tag_colgroup.asphttp://www.w3schools.com/tags/tag_col.asphttp://www.w3schools.com/tags/tag_thead.asphttp://www.w3schools.com/tags/tag_tbody.asphttp://www.w3schools.com/tags/tag_tfoot.asp


10/30

Logical Styles

this text is emphasized

This text is strong

This is some computer code

Physical Styles

This text is bold

This text is italic

Links, Anchors, and Image Elements

This is a Link

Send e-mail

A named anchor:

Useful Tips Section

Jump to the Useful Tips Section

Unordered list

First item

Next item

Ordered list

First item

Next item

Definition list

10


11/30

First term

Definition

Next termDefinition

Tables

someheader

someheader

sometext

sometext

Frames

Forms

11


12/30

ApplesBananas

Cherries

12


13/30

INTRODUCTION TO JAVA SCRIPT

What is JavaScript?

JavaScript was designed to add interactivity to HTML pages.

JavaScript is a scripting language.

A scripting language is a lightweight programming language

A JavaScript consists of lines of executable computer code

A JavaScript is usually embedded directly into HTML pages

JavaScript is an interpreted language (means that scripts execute without

preliminary compilation)

JavaScript is used in billions of Web pages to add functionality, validate

forms, communicate with the server, and much more.

JavaScript supports much of the structured programming syntax from C

(e.g., if statements, while loops, switch statements, etc.). One partial

exception is scoping: C-style block-level scoping is not supported (instead,

JavaScript has function-level scoping). JavaScript 1.7, however, supportsblock-level scoping with the let keyword. Like C, JavaScript makes a

distinction between expressions and statements. One syntactic difference

from C is automatic semicolon insertion, in which the semicolons that

terminate statements can be omitted.

JavaScript is almost entirely object-based. JavaScript objects are

associative arrays, augmented with prototypes (see below). Object

property names are string keys: obj.x = 10 and obj['x'] = 10 are equivalent,

the dot notation being syntactic sugar. Properties and their values can be

added, changed, or deleted at run-time. Most properties of an object (and

those on its prototype inheritance chain) can be enumerated using a for...in

loop. JavaScript has a small number of built-in objects such as Function

and Date.

13


14/30

An indefinite number of parameters can be passed to a function. The

function can access them through formal parameters and also through the

local arguments object.

What can a JavaScript Do?

JavaScript gives HTML designers a programming tool

HTML authors are normally not programmers, but JavaScript is a scripting

Language with a very simple syntax!

JavaScript can put dynamic text into an HTML page -

A JavaScript statement like this: document.write("" + name + "") can

write a variable text into an HTML page

JavaScript can react to events

A JavaScript can be set to execute when something happens, like when a page has

finished loading or when a user clicks on an HTML element

JavaScript can read and write HTML elements -

A JavaScript can read and change the content of an HTML element

JavaScript can be used to validate data -

A JavaScript can be used to validate form data before it is submitted to a server.

This saves the server from extra processing

JavaScript can be used to detect the visitor's browser

A JavaScript can be used to detect the visitor's browser, and - depending on the

browser - load another page specifically designed for that browser

14


15/30

Introduction to CSS

Cascading Style Sheets (CSS) is a style sheet language used for describing the

presentation semantics (the look and formatting) of a document written in a markup

language. Its most common application is to style web pages written in HTML and

XHTML.

CSS is designed primarily to enable the separation of document content (written in

HTML or a similar markup language) from document presentation, including elements

such as the layout, colors, and fonts.[1] This separation can improve content accessibility,

provide more flexibility and control in the specification of presentation characteristics,

enable multiple pages to share formatting, and reduce complexity and repetition in the

structural content (such as by allowing for table less web design). CSS can also allow the

same markup page to be presented in different styles for different rendering methods,

such as on-screen, in print, by voice (when read out by a speech-based browser or screen

reader) and on Braille-based, tactile devices. It can also be used to allow the web page to

display differently depending on the screen size or device on which it is being viewed.

While the author of a document typically links that document to a CSS style sheet,

readers can use a different style sheet, perhaps one on their own computer, to override the

one the author has specified.

CSS has various levels and profiles. Each level of CSS builds upon the last, typically

adding new features and typically denoted as CSS 1, CSS 2, CSS 3, and CSS 4. Profiles

are typically a subset of one or more levels of CSS built for a particular device or user

interface. Currently there are profiles for mobile devices, printers, and television sets.

Profiles should not be confused with media types, which were added in CSS 2.

15


16/30

Syntax of CSS

CSS has a simple syntax and uses a number of English keywords to specify the names of

various style properties.

A style sheet consists of a list of rules. Each rule or rule-set consists of one or more

selectors, and a declaration block. A declaration-block consists of a list of declarations inbraces. Each declaration itself consists of a property, a colon (:), and a value. If there are

multiple declarations in a block, a semi-colon (;) must be inserted to separate each

declaration. In CSS, selectors are used to declare which part of the markup a style applies

to, a kind of match expression. Selectors may apply to all elements of a specific type, to

elements specified by attribute, or to elements depending on how they are placed relative

to, or nested within, others in the document tree.

Pseudo-classes are used in CSS selectors to permit formatting based on information that

is outside the document tree. An often-used example of a pseudo-class is : hover, whichidentifies content only when the user 'points to' the visible element, usually by holding the

mouse cursor over it. It is appended to a selector as in a:hover or #elementid:hover.

A pseudo-class classifies document elements, such as :link or :visited, whereas a pseudo-

element makes a selection that may consist of partial elements, such as: first-

line or :first-letter.[4]

Selectors may be combined in many ways, especially in CSS 2.1, to achieve great

specificity and flexibility.

Here is an example using the above rules:

selector [, selector2, ...][:pseudo-class]{

property: value;

[property2: value2;

...]

}

/* comment */

16
http://en.wikipedia.org/wiki/Cascading_Style_Sheets#cite_note-4http://en.wikipedia.org/wiki/Cascading_Style_Sheets#cite_note-4http://en.wikipedia.org/wiki/Cascading_Style_Sheets#cite_note-4


17/30

Advantages of CSS

CSS facilitates publication of content in multiple presentation formats based on nominal

parameters. Nominal parameters include explicit user preferences, different web

browsers, the type of device being used to view the content (a desktop computer or

mobile Internet device), the geographic location of the user and many other variables.

Site-wide consistency When CSS is used effectively, in terms of inheritance and

"cascading," a global style sheet can be used to affect and style elements site-wide. If the

situation arises that the styling of the elements should need to be changed or adjusted,

these changes can be made by editing rules in the global style sheet. Before CSS, this sort

of maintenance was more difficult, expensive and time-consuming.

Bandwidth A style sheet, internal or external, will specify the style once for a range of

HTML elements selected by class, type or relationship to others. This is much more

efficient than repeating style information inline for each occurrence of the element. An

external style sheet is usually stored in the browser cache, and can therefore be used on

multiple pages without being reloaded, further reducing data transfer over a network.

Page reformatting With a simple change of one line, a different style sheet can be used

for the same page. This has advantages for accessibility, as well as providing the ability to

tailor a page or site to different target devices. Furthermore, devices not able to

understand the styling still display the content.

Accessibility Without CSS, web designers must typically lay out their pages with

techniques that hinder accessibility for vision-impaired users, like HTML tables

17


18/30

ANALYSIS

Analysis is a detailed study of various applications performed by a system and

relationships within and outside of system. A key question is that what must be done to

solve a problem? One aspect of analysis is defining the boundaries of the system and

determining whether or not a candidate system should consider other related system.During analysis, data are collected on the available files, decision points and transitions

handled by the present system. Some logical model and tools are used in analysis. Data

flow diagram, interviews, forms etc.

Analysis include following:-

Planning

Initial investigation

Structured analysis

Planning:-

The first step in analysis is planning. Planning in s/w project development means to

prepare, in the customer technology, a concise statement of the problem, to be solved and

constrained that exists for its solution. The definitive problem statement should include a

description of the present situation and the goals to be achieved by the new system.

Initial investigation

The first step in initial investigation is to define the problem that the user request. The

problem must be stated clearly. Understood and agree upon the user and analyst. It must

state the objective the user is trying to achieve and the result the user wants to see. Given

user identification of the need, the analyst proceeds to propose the strategies by asking,

18


19/30

electing and gathering information from existing manual system. The analyst can also use

prototyping for this purpose.

Structured analysis:-

Structured analysis is a set of techniques and graphical tools that allow the analyst to

develop a new kind of system specification. These are easily understandable to the user.

Structured analyses consider new goals and structured tools for analysis. Tools used instructured analysis are data flow diagram, data dictionary, structured English, and

decision tables.

19


20/30

DESIGNING

In systems design the design functions and operations are described in detail, including

screen layouts, business rules, process diagrams and other documentation. The output of

this stage will describe the new system as a collection of modules or subsystems.

The design stage takes as its initial input the requirements identified in the approved

requirements document. For each requirement, a set of one or more design elements will

be produced as a result of interviews, workshops, and/or prototype efforts.

Design elements describe the desired software features in detail, and generally include

functional hierarchy diagrams, screen layout diagrams, tables of business rules, business

process diagrams, pseudocode, and a complete entity-relationship diagram with a full data

dictionary. These design elements are intended to describe the software in sufficient detail

that skilled programmers may develop the software with minimal additional input design.

20


21/30

Screenshots

Home Page

21


22/30

About Us

22


23/30

Our Projects

23


24/30

Our Services

24


25/30

TESTING

25


26/30

The code is tested at various levels in soft+-ware testing. Unit, system and user

acceptance testings are often performed. This is a grey area as many different opinions

exist as to what the stages of testing are and how much if any iteration occurs. Iteration is

not generally part of the waterfall model, but usually some occur at this stage. In thetesting the whole system is test one by one.

TYPES OF TESTING

Defect tracking

Model-based testing

System testing

Black-box testing

DEFECT TRACKING:-

In engineering, defect tracking is the process of finding defects in a product (by

inspection, testing, or recording feedback from customers), and making new versions of

the product that fix the defects. Defect tracking is important in software engineering as

complex software systems typically have tens or hundreds or thousands of defects:

managing, evaluating and prioritizing these defects is a difficult task: defect tracking

systems are computer database systems that store defects and help people to manage

them.

MODEL-BASED TESTING:-

Model-based testing is the application of Model based design for designing and optionally

executing the necessary artifacts to perform software testing. Models can be used to

represent the desired behavior of the System under Test (SUT), or to represent the desired

testing strategies and testing environment. The picture on the right depicts the former

approach. General model-based testing setting A model describing the System Under Test

(SUT) is usually an abstract, partial presentation of the system under test's desired

behavior. These test cases are collectively known as the abstract test suite. The abstract

test suite cannot be directly executed against the system under test because it is on the

wrong level of abstraction. Therefore an executable test suite must be derived from the

abstract test suite that can communicate with the system under test. This is done by

mapping the abstract test cases to concrete test cases suitable for execution.

26


27/30

IMPLEMENTATION

An implementation is a realization of a technical specification or algorithm as a program,

software component, or other computer system through programming and deployment.

Many implementations may exist for a given specification or standard. For example, web

browsers contain implementations of World Wide Web Consortium-recommended

specifications, and software development tools contain implementations of programming

languages. Implementation refers to post-sales process of guiding a client from purchase

to use of the software or hardware that was purchased. This includes Requirements

Analysis, Scope Analysis, Customizations, Systems Integrations, User Policies, User

Training and Delivery. These steps are often overseen by a Project Manager using Project

Management Methodologies set forth in the Project Management Body of Knowledge.

Software Implementations involve several professionals that are relatively new to the

knowledge based economy such as Business Analysts, Technical Analysts, Solutions

Architect, and Project Managers.

System implementation generally benefits from high levels of user involvement and

management support. User participation in the design and operation of information

systems has several positive results. First, if users are heavily involved in systems design,

they move opportunities to mold the system according to their priorities and business

requirements, and more opportunities to control the outcome. Second, they are more

27


28/30

likely to react positively to the change process. Incorporating user knowledge and

expertise leads to better solutions.

The relationship between users and information systems specialists has

traditionally been a problem area for information systems implementation efforts. Users

and information systems specialists tend to have different backgrounds, interests, and

priorities. This is referred to as the user-designer communications gap. These differences

lead to divergent organizational loyalties, approaches to problem solving, and

vocabularies.

28


29/30

SOFTWARE MAINTENANCE

Software Maintenance in software engineering is the modification of a software product

after delivery to correct faults, to improve performance or other attributes.

A common perception of maintenance is that it merely involves fixing defects. However,

one study indicated that the majority, over 80%, of the maintenance effort is used for non-

corrective actions (Pigosky 1997). This perception is perpetuated by users submitting

problem reports that in reality are functionality enhancements to the system.

Software maintenance and evolution of systems was first addressed by Meir M.

Lehman in 1969. Over a period of twenty years, his research led to the formulation

ofLehman's Laws (Lehman 1997). Key findings of his research include that maintenanceis really evolutionary development and that maintenance decisions are aided by

understanding what happens to systems (and software) over time. Lehman demonstrated

that systems continue to evolve over time. As they evolve, they grow more complex

unless some action such as code refactoring is taken to reduce the complexity.

SOFTWARE MAINTENANCE PROCESSES

This section describes the six software maintenance processes as:

The implementation processes contains software preparation and transition

activities, such as the conception and creation of the maintenance plan, the

preparation for handling problems identified during development, and the

follow-up on product configuration management.

The problem and modification analysis process, which is executed once

the application has become the responsibility of the maintenance group.

The maintenance programmer must analyze each request, confirm it (by

reproducing the situation) and check its validity, investigate it and propose

a solution, document the request and the solution proposal, and, finally,

obtain all the required authorizations to apply the modifications.

The process considering the implementation of the modification itself.

The process acceptance of the modification, by confirming the modified

work with the individual who submitted the request in order to make sure

the modification provided a solution.

29


30/30

The migration process (platform migration, for example) is exceptional,

and is not part of daily maintenance tasks. If the software must be ported

to another platform without any change in functionality, this process will

be used and a maintenance project team is likely to be assigned to thistask.

Internet & Web Technology

Bibliography

www.google.com

www.w3schools.com

www.csstricks.com

www.appengine.google.com
http://www.google.com/http://www.w3schools.com/http://www.csstricks.com/http://www.appengine.google.com/http://www.google.com/http://www.w3schools.com/http://www.csstricks.com/http://www.appengine.google.com/