Web Design HTML Final Report
Web Design HTML Final Report
DECLARATION
Respected sir,
I have completed my “Internship/Industrial/In-Plant Training” at
AAGAAZ TRAINING CENTRE PVT. LTD., Patna, under the guidance of Er.
Chandan Kumar Soni (Director of ATCPL). During training I have learned
about different new technologies and worked on HTML, CSS & Java Scrip to
design and develop some basic and advance website. As best of my knowledge I
have collected following information.
Student’s Signature
COMPANY PROFILE
The main intension of this company is to make the students more practical for
his/her subjects/branch/field as per his/ her interest of study.
This company works and research for the new technologies adopted by the
industries todays, so that the students can get better and latest knowledge of the
new technologies of their field.
WHY INDUSTRIAL TRAINING?
Industrial Training is essential for the engineering students to improve
themselves for the industry they have to work in future. The industrial Training
in concern of development of the skill and attitude of students provides
following benefits:
Knowledge about their related industry,
Innovative skills in the students,
Self-confidence,
Ability to select a problem,
Ability to analyze the problem,
Commercial skills,
Ability of presentation and explanation on their subject,
Table of Content
1
List of Figures
Figure 3.1 Steps to create a website…… …………………………….
2
Figure 8.1.5 Sign up Page…………….……………………………..….
Figure 8.1.6 Check out…..…………….……………………………..….
Figure 8.1.7 Sell Request..…………….……………………………..….
Figure 8.1.8 Admin Panel.…………….……………………………..….
Figure 8.1.9 Contact Us and about us...……………………………..….
3
CHAPTER-1
INTRODUCTION
Education, An integral part of our Indian Society and it is important for every individual
to succeed in his life and help bring change to our world. In a country with more than 1.3 billion
people living, for everyone individual education is essential. To keep learning and developing
themselves and helping our environment, economy, social life be sustainable.
1.1 OBJECTIVES
Online Shopping is the process whereby consumers directly buy goods and services without
any intermediary service over the internet. The goal of this website is to develop a web based
interface for students of Jammu and Kashmir, the website would be easy to use and hence the
shopping experience pleasant for the users. The main goal of this website is:
I. To develop an easy to use web based interface where students can search for products
(books), view a complete description of the product and order the product.
II. A student can buy and sell books from home.
III. A student can get books on rent.
4
CHAPTER-2
WEB-DEVELOPMENT:
Web development is a broad term for the work involved in developing a web site for
the Internet (World Wide Web) or an intranet (a private network). Web development can range
from developing the simplest static single page of plain text to the most complex web-based
internet applications, electronic businesses, and social network services. A more
comprehensive list of tasks to which web development commonly refers, may include web
engineering, web design, web content development, client liaison, client-side/side scripting,
web server and network security configuration, and e-commerce development. Among web
professionals, "web development" usually refers to the main non-design aspects of building
web sites: writing markup and coding. Most recently Web development has come to mean the
creation of content management systems or CMS. These CMS can be made from scratch,
proprietary or open source. In broad terms the CMS acts as middleware between the database
and the user through the browser. A principle benefit of a CMS is that it allows non-technical
people to make changes to their web site without having technical knowledge.
For larger organizations and businesses, web development teams can consist of
hundreds of people (web developers) and follow standard methods like Agile methodologies
while developing websites. Smaller organizations may only require a single permanent or
contracting developer, or secondary assignment to related job positions such as a graphic
designer or information systems technician. Web development may be a collaborative effort
between departments rather than the domain of a designated department. There are three kind
of web developer specialization: front-end developer, back-end developer, and full-stack
developer.
2.1 WEB-SITE
Websites have many functions and can be used in various fashions; a website can be a
personal website, a commercial website for a company, a government website or a non-profit
organization website. Websites are typically dedicated to a particular topic or purpose, ranging
from entertainment and social networking to providing news and education. All publicly
accessible websites collectively constitute the World Wide Web, while private websites, such
as a company's website for its employees, and are typically a part of an intranet.
Web pages, which are the building blocks of websites, are documents, typically
composed in plain text interspersed with formatting instructions of Hypertext Markup
Language (HTML, XHTML). They may incorporate elements from other websites with
5
suitable markup anchors. Web pages are accessed and transported with the Hypertext Transfer
Protocol (HTTP), which may optionally employ encryption (HTTP Secure, HTTPS) to provide
security and privacy for the user. The user's application, often a web browser, renders the page
content according to its HTML markup instructions onto a display terminal.
Hyperlinking between web pages conveys to the reader the site structure and guides the
navigation of the site, which often starts with a home page containing a directory of the site
web content. Some websites require user registration or subscription to access content.
Examples of subscription websites include many business sites, news websites, academic
journal websites, gaming websites, file-sharing websites, message boards, web-based email,
social networking websites, websites providing real-time stock market data, as well as sites
providing various other services. As of 2016 end users can access websites on a range of
devices, including desktop and laptop computers, tablet computers, smartphones and smart
TVs.
A web site consists of web pages which are interconnected to each other and contain
various data and functionalities.
2.2 WEB-PAGE
A web page, or webpage, is a document that is suitable for the World Wide Web and
web browsers. A web browser displays a web page on a monitor or mobile device. The web
page is what displays, but the term also refers to a computer file, usually written in HTML or
comparable markup language. Web browsers coordinate the various web resource elements for
the written web page, such as style sheets, scripts, and images, to present the web page.
Typical web pages provide hypertext that includes a navigation bar or a sidebar menu
to other web pages via hyperlinks, often referred to as links.
On a network, a web browser can retrieve a web page from a remote web server. On a
higher level, the web server may restrict access to only a private network such as a corporate
intranet or it provides access to the World Wide Web. On a lower level, the web browser uses
the Hypertext Transfer Protocol (HTTP) to make such requests.
A static web page is delivered exactly as stored, as web content in the web server's file
system, while a dynamic web page is generated by a web application that is driven by server-
side software or client-side scripting. Dynamic website pages help the browser (the client) to
enhance the web page through user input to the server.
6
CHAPTER-3
Creating a web site requires multiple steps which includes the following:
Web Site
Data Base
UI
Fig 3.1
7
3.1 UI DEVELOPMENT
Technologies that are mostly used to develop a User Interface are:
HTML
CSS
Bootstrap.
3.1.1 HTML
Hypertext Markup Language (HTML) is the standard markup language for creating
web pages and web applications. With Cascading Style Sheets (CSS) and JavaScript it forms
a triad of cornerstone technologies for the World Wide Web. Web browsers receive HTML
documents from a webserver or from local storage and render them into multimedia web pages.
HTML describes the structure of a web page semantically and originally included cues for the
appearance of the document.
HTML elements are the building blocks of HTML pages. With HTML constructs,
images and other objects, such as interactive forms, may be embedded into the rendered page.
It provides a means to create structured documents by denoting structural semantics for text
such as headings, paragraphs, lists, links, quotes and other items. HTML elements are
delineated by tags, written using angle brackets. Tags such as <img /> and <input /> introduce
content into the page directly. Others such as <p>...</p> surround and provide information
about document text and may include other tags as sub-elements. Browsers do not display the
HTML tags, but use them to interpret the content of the page.
HTML can embed programs written in a scripting language such as JavaScript which
affect the behavior and content of web pages. Inclusion of CSS defines the look and layout of
content. The World Wide Web Consortium (W3C), maintainer of both the HTML and the CSS
standards, has encouraged the use of CSS over explicit presentational HTML since 1997.
HTML markup consists of several key components, including those called tags (and
their attributes), character-based data types, character references and entity references. HTML
tags most commonly come in pairs like <h1> and </h1>, although some represent empty
elements and so are unpaired, for example <img>. The first tag in such a pair is the start tag,
and the second is the end tag (they are also called opening tags and closing tags).
Another important component is the HTML document type declaration, which triggers
standards mode rendering.
8
The following is an example of the classic Hello world program, a common test
employed for comparing programming languages, scripting languages and markup languages.
This example is made using 9 lines of code:
(The text between <html> and </html> describes the web page, and the text between <body>
and </body> is the visible page content. The markup text "<title>This is a title</title>" defines
the browser page title.)
3.1.2 CSS
Cascading Style Sheets (CSS) is a style sheet language used for describing the
presentation of a document written in a markup language. Although most often used to set the
visual style of web pages and user interfaces written in HTML and XHTML, the language can
be applied to any XML document, including plain XML, SVG and XUL, and is applicable to
rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone
technology used by most websites to create visually engaging webpages, user interfaces for
web applications, and user interfaces for many mobile applications.
Separation of formatting and content makes it possible to present the same markup page
in different styles for different rendering methods, such as on-screen, in print, by voice (via
speech-based browser or screen reader), and on Braille-based tactile devices. It can also display
9
the web page differently depending on the screen size or viewing device. Readers can also
specify a different style sheet, such as a CSS file stored on their own computer, to override the
one the author specified.
Changes to the graphic design of a document (or hundreds of documents) can be applied
quickly and easily, by editing a few lines in the CSS file they use, rather than by changing
markup in the documents.
The CSS specification describes a priority scheme to determine which style rules apply
if more than one rule matches against a particular element. In this so-called cascade, priorities
(or weights) are calculated and assigned to rules, so that the results are predictable.
The CSS specifications are maintained by the World Wide Web Consortium (W3C).
Internet media type (MIME type) text/css is registered for use with CSS by RFC 2318 (March
1998). The W3C operates a free CSS validation service for CSS documents.
Types of CSS:
Inline CSS:
Internal CSS:
In this Thecss code is defined inside the style tag in the head section of the HTML page.
General Syntax:
<html>
<head>
<style>
</style>
</head>
</html>
10
External CSS:
In this the CSS code is written on another page and is linked to the HTML page. It is
advantageous to use this type of styling as we can use the same file to style various HTML
pages.
External CSS uses the extension .css and is applied using the following syntax
<html>
<head>
</head>
</html>
All the CSS style types are important but can be used in different situations.
Inline CSS is used when only small changes are to be done to the HTML tag and the
changes are to be reflected only to that specific tag
Internal CSS is used when the individual HTML pages have to be designed differently.
This also slows the page load system if the internal styling is long.
External CSS files are maintained to design multiple pages and use common styles over
various pages. It is useful as it helps in managing the resources in an easy manner.
Both HTML and CSS are used to create a UI but CSS behaves like a makeup on the face of an
actress which makes her look even more beautiful than she is in reality.
Fig 3.2
11
After using CSS in HTML Page:
Fig 3.3
3.1.3 BOOTSTRAP
Bootstrap is a free and open-source front-end web framework for designing websites
and web applications. It contains HTML- and CSS-based design templates for typography,
forms, buttons, navigation and other interface components, as well as optional JavaScript
extensions. Unlike many web frameworks, it concerns itself with front-end development only.
Bootstrap is the second most-starred project on GitHub, with more than 107,000 stars
and 48,000 forks.
Bootstrap, originally named Twitter Blueprint, was developed by Mark Otto and Jacob
Thornton at Twitter as a framework to encourage consistency across internal tools. Before
Bootstrap, various libraries were used for interface development, which led to inconsistencies
and a high maintenance burden. According to twitter developer Mark Otto:
―A super small group of developers and I got together to design and build a new internal
tool and saw an opportunity to do something more. Through that process, we saw ourselves
build something much more substantial than another internal tool. Months later, we ended up
with an early version of Bootstrap as a way to document and share common design patterns
and assets within the company.‖
After a few months of development by a small group, many developers at Twitter began
to contribute to the project as a part of Hack Week, a hackathon-style week for the Twitter
development team. It was renamed from Twitter Blueprint to Bootstrap, and released as an
12
open source project on August 19, 2011. It has continued to be maintained by Mark Otto, Jacob
Thornton, and a small group of core developers, as well as a large community of contributors.
On August 19, 2013, Bootstrap 3 was released, which redesigned components to use
flat design, and a mobile first approach.
On October 29, 2014, Mark Otto announced that Bootstrap 4 was in development. The
first alpha version of Bootstrap 4 was released on August 19, 2015.
Bootstrap 3 supports the latest versions of the Google Chrome, Firefox, Internet
Explorer, Opera, and Safari (except on Windows). It additionally supports back to IE8 and the
latest Firefox Extended Support Release (ESR).
Since 2.0, Bootstrap supports responsive web design. This means the layout of web
pages adjusts dynamically, taking into account the characteristics of the device used (desktop,
tablet, mobile phone).
The version 4.0 alpha release added Sass and flexbox support.
Now use bootstrap classes to reduce the work of designing which was earlier done
through CSS.
3.2 SCRIPTING
13
3.2.1 SERVER SIDE SCRIPTING
Server-side scripting is often used to provide a customized interface for the user. These
scripts may assemble client characteristics for use in customizing the response based on those
characteristics, the user‘s requirements, access rights, etc. Server-side scripting also enables
the website owner to hide the source code that generates the interface, whereas with client-side
scripting, the user has access to all the code received by the client. A down-side to the use of
server-side scripting is that the client needs to make further requests over the network to the
server in order to show new information to the user via the web browser. These requests can
slow down the experience for the user, place more load on the server, and prevent use of the
application when the user is disconnected from the server.
When the server serves data in a commonly used manner, for example according to the
HTTP or FTP protocols, users may have their choice of a number of client programs (most
modern web browsers can request and receive data using both of those protocols). In the case
of more specialized applications, programmers may write their own server, client, and
communications protocol that can only be used with one another.
Programs that run on a user‘s local computer without ever sending or receiving data over a
network are not considered clients, and so the operations of such programs would not be
considered client-side operations.
There are several languages that can be used for server-side programming:
PHP
ASP.NET (C# OR Visual Basic)
C++
Java and JSP
Python
Ruby on Rails and so on.
14
Fig 3.2.1
Such web pages use presentation technology called rich interfaced pages. Client-side
scripting languages like JavaScript or ActionScript, used for Dynamic HTML (DHTML) and
Flash technologies respectively, are frequently used to orchestrate media types (sound,
animations, changing text, etc.) of the presentation. Client-side scripting also allows the use of
15
remote scripting, a technique by which the DHTML page requests additional information from
a server, using a hidden frame, XML Http Requests, or a Web service.
The first widespread use of JavaScript was in 1997, when the language was
standardized as ECMAScript and implemented in Netscape 3.
Example:
The client-side content is generated on the client's computer. The web browser retrieves
a page from the server, then processes the code embedded in the page (typically written in
JavaScript) and displays the retrieved page's content to the user.
The most popularly used client side scripting languages is Java Script. Flow of request from
browser to server:
Fig 3.2.2
4.3 DATABASE
16
database is not generally portable across different DBMSs, but different DBMS can
interoperate by using standards such as SQL and ODBC or JDBC to allow a single application
to work with more than one DBMS. Database management systems are often classified
according to the database model that they support; the most popular database systems since the
1980s have all supported the relational model as represented by the SQL language. Sometimes
a DBMS is loosely referred to as a "database".
3.4 SQL
Originally based upon relational algebra and tuple relational calculus, SQL consists of
a data definition language, data manipulation language, and data control language. The scope
of SQL includes data insert, query, update and delete, schema creation and modification, and
data access control. Although SQL is often described as, and to a great extent is, a declarative
language (4GL), it also includes procedural elements.
SQL was one of the first commercial languages for Edgar F. Codd'srelational model, as
described in his influential 1970 paper, "A Relational Model of Data for Large Shared Data
Banks." Despite not entirely adhering to the relational model as described by Codd, it became
the most widely used database language.
SQL became a standard of the American National Standards Institute (ANSI) in 1986,
and of the International Organization for Standardization (ISO) in 1987. Since then, the
standard has been revised to include a larger set of features. Despite the existence of such
standards, most SQL code is not completely portable among different database systems without
adjustments.
3.5 QUERIES
The most common operation in SQL, the query, makes use of the declarative SELECT
statement. SELECT retrieves data from one or more tables, or expressions. Standard SELECT
statements have no persistent effects on the database. Some non-standard implementations of
SELECT can have persistent effects, such as the SELECT INTO syntax provided in some
databases.
Queries allow the user to describe desired data, leaving the database management
system (DBMS) to carry out planning, optimizing, and performing the physical operations
necessary to produce that result as it chooses.
A query includes a list of columns to include in the final result, normally immediately
following the SELECT keyword. An asterisk ("*") can be used to specify that the query should
return all columns of the queried tables. SELECT is the most complex statement in SQL, with
optional keywords and clauses that include:
The FROM clause, which indicates the table(s) to retrieve data from. The FROM clause
can include optional JOINsubclauses to specify the rules for joining tables.
17
The WHERE clause includes a comparison predicate, which restricts the rows returned
by the query. The WHERE clause eliminates all rows from the result set where the comparison
predicate does not evaluate to True.
The GROUP BY clause projects rows having common values into a smaller set of rows.
GROUP BY is often used in conjunction with SQL aggregation functions or to eliminate
duplicate rows from a result set. The WHERE clause is applied before the GROUP BY clause.
The HAVING clause includes a predicate used to filter rows resulting from the GROUP
BY clause. Because it acts on the results of the GROUP BY clause, aggregation functions can
be used in the HAVING clause predicate.
The ORDER BY clause identifies which column[s] to use to sort the resulting data, and
in which direction to sort them (ascending or descending). Without an ORDER BY clause, the
order of rows returned by an SQL query is undefined.
The DISTINCT keyword eliminates duplicate data.
18
CHAPTER-4
SCRIPTING LANGUAGES
4.1 PHP
Paradigm Imperative, functional, object-oriented, procedural, reflective
Designed by RasmusLerdorf
Developer The PHP Development Team, Zend Technologies
First appeared June 8, 1995; 21 years ago[1]
Stable release 7.1.5 / May 11, 2017; 16 days ago
Typing discipline Dynamic, weak, gradual (as of PHP 7.0.0)
Implementation C (primarily; some components C++)
language
OS Unix-like, Windows
License PHP License (most of Zend Engine under Zend Engine License&
The TSRM License)
Filename .php, .phtml, .php3, .php4, .php5, .php7, .phps
extensions
Website php.net
Major implementations
Zend Engine, HHVM, Phalanger, Quercus, Project Zero, Parrot
Influenced by
C, C++, Java, Perl, Tcl[1]
Influenced
Falcon, Hack
PHP is a server-side scripting language designed primarily for web development but
also used as a general-purpose programming language. Originally created by RasmusLerdorf
in 1994, the PHP reference implementation is now produced by The PHP Development Team.
PHP originally stood for Personal Home Page, but it now stands for the recursive acronym
PHP: Hypertext Preprocessor.
PHP code may be embedded into HTML or HTML5 markup, or it can be used in
combination with various web template systems, web content management systems and web
frameworks. PHP code is usually processed by a PHP interpreter implemented as a module in
the web server or as a Common Gateway Interface (CGI) executable. The web server software
combines the results of the interpreted and executed PHP code, which may be any type of data,
including images, with the generated web page. PHP code may also be executed with a
command-line interface (CLI) and can be used to implement standalonegraphical applications.
The standard PHP interpreter, powered by the Zend Engine, is free software released
under the PHP License. PHP has been widely ported and can be deployed on most web servers
on almost every operating system and platform, free of charge.
19
The PHP language evolved without a written formal specification or standard until
2014, leaving the canonical PHP interpreter as a de facto standard. Since 2014 work has gone
on to create a formal PHP specification.
I. Step 1: download the files. Download the latest PHP 5 ZIP package from
www.php.net/downloads.php. ...
II. Step 2: extract the files. ...
III. Step 3: configure php.ini. ...
IV. Step 4: add C: php to the path environment variable. ...
V. Step 5: configure PHP as an Apache module. ...
VI. Step 6: test a PHP file.
VII. Or we can install Xampp which have inbuilt php,mysql,apache server
Fig 4.1.1
4.3 JAVA SCRIPT
Although there are strong outward similarities between JavaScript and Java, including
language name, syntax, and respective standard libraries, the two are distinct languages and
20
differ greatly in their design. JavaScript was influenced by programming languages such as
self and Scheme.
JavaScript is also used in environments that are not Web-based, such as PDF
documents, site-specific browsers, and desktop widgets. Newer and faster JavaScript virtual
machines (VMs) and platforms built upon them have also increased the popularity of JavaScript
for server-side Web applications. On the client side, developers have traditionally implemented
JavaScript as an interpreted language, but more recent browsers perform just-in-time
compilation. Programmers also use JavaScript in video-game development, in crafting desktop
and mobile applications, and in server-side network programming with run-time environments
such as Node.js.
4.4 JQUERY
Microsoft and Nokia bundle jQuery on their platforms. Microsoft includes it with
Visual Studio for use within Microsoft's ASP.NET AJAX and ASP.NET MVC frameworks
while Nokia has integrated it into the Web Run-Time widget development platform.
4.5 AJAX
Ajax (also AJAX short for "asynchronous JavaScript and XML") is a set of Web
development techniques using many Web technologies on the client side to create
asynchronous Web applications. With Ajax, Web applications can send data to and retrieve
from a server asynchronously (in the background) without interfering with the display and
behavior of the existing page. By decoupling the data interchange layer from the presentation
layer, Ajax allows for Web pages, and by extension Web applications, to change content
21
dynamically without the need to reload the entire page. In practice, modern implementations
commonly substitute JSON for XML due to the advantages of being native to JavaScript.
Ajax is not a single technology, but rather a group of technologies. HTML and CSS can
be used in combination to mark up and style information. The DOM is accessed with JavaScript
to dynamically display – and allow the user to interact with – the information presented.
JavaScript and the XMLHttpRequest object provide a method for exchanging data
asynchronously between browser and server to avoid full page reloads.
4.6 JSON
Douglas Crockford originally specified the JSON format in the early 2000s; two
competing standards, RFC 7159 and ECMA-404, defined it in 2013. The ECMA standard
describes only the allowed syntax, whereas the RFC covers some security and interoperability
considerations.[3]
A restricted profile of JSON, known as I-JSON (short for "Internet JSON"), seeks to overcome
some of the interoperability problems with JSON. It is defined in RFC 7493.
22
CHAPTER-5
CONCLUSION
We have successfully implemented the site ‗Bookz Kart‘. With the help of various links
and tools, we have been able to provide a site which will be live soon and running on the web.
We have been successful in our attempt to take care of the needs of both the user as well as the
administrator. Finally we hope that this will go a long way in popularizing.
BIBLIOGRAPHY
1. www.javatutpoint.com
2. www.w3schools.com
3. www.getbootstrap.com
4. www.codeigniter.com
5. www.stackoverflow.com
6. www.fontawesome.io
7. www.php.net
8. Head first with PHP(Lynn Beighley and Michael Morrison)
9. Learn HTML and CSS faster(Mark Myers)
10. Wikipedia
23