TABLE OF CONTENTS

SNO. CONTENTS PAGE NO.

1 CHAPTER-1 WEB TECHNOLOGY 1
INTRODUCTION
1.1 HISTORY OF WEB 2-3
1.2 TECHNOLOGY 4

2 CHPTER-2 MARKUP LANGUAGES AND STYLE SHEETS 5

INTRODUCTION
2.1 HTML 6

2.2 CSS 7
3 CHAPTER-3 HTML5 8
INTRODUCTION
3.1 WHY HTML 9-11

3.2 HTML5 VS HTML4 14

3.3 ADVANTAGES AND DISADVANTAGES OF HTML5 15-16

4 CHAPTER-4 CSS3 17
INTRODUCTION
4.1 WHY CSS 18-21

4.2 CSS VS CSS3 22

4.3 ADVANTAGES AND DISADVANTAGES OF CSS3 23-24

5 CHAPTER-5 BOOTSTRAP 25-26

INTRODUCTION
5.1 BOOTSTRAP 4 27

6 CHAPTER-6 JAVASCRPIT 28
INTRODUCTION
6.1 FEATURES 29-31

7 CHAPTER-7 CONTENT MANAGEMENT SYSTEM 32-33

INTRODUCTION

iv
7.1 BENEFITS OF CMS 34

8 CHAPTER-8 WORDPRESS 35-36

 9 ABOUT TRAINING PROJECT 37-41

10 CONCLUSION 42

11 REFRENCES 43

LIST OF TABLES
SNO. TABLE PAGE NO.
1 Table-1 New Tags in HTML 12-13
2 Table-2 HTML4 vs HTML5 14
3 Table-3 New Properties And Rules in CSS3 20

v
LIST OF FIGURES

SNO. FIGURES FIG NO.

1 WEB TECHNOLOGY Fig 1

2 HTML AND CSS Fig 2.1

3 HTML Fig 2.2

4 CROSS BROWSER SUPPORT Fig 3.1

5 HTML4 vs HTML5 Fig 4

6 CSS Fig 5

7 CSS BORDERS Fig 5.1

8 BROWSER COMPATIBILITY OF CSS Fig 5.2

9 BOOTSTRAP Fig 6

10 EXAMPLE OF BOOTSTRAP Fig 6.1

11 CONTENT MANAGEMENT SYSTEM Fig 7

12 BENEFITS OF CMS Fig 7.1

13 WORDPRESS Fig 8

vi
 Chapter 1
Web Technology

Fig 1

Introduction
Web servers and web browsers are communicating client-server computer programs for distributing
documents and information, generally called web data, over the Internet. Web data are marked up in
the HTML language for presentation and interaction with people in web browsers. Each web server
uses an IP address or domain name as well as a port number for its identification. People use web
browsers to send data requests to web servers with the HTTP protocol, and the web servers running
on server computers either retrieve the requested data from local disks or generate the data on the fly,
mark up the data in HTML, and send the resulting HTML files back to the web browsers to render.
Apache, Tomcat and IIS are popular web server programs, and IE and Firefox are popular web
browsers.
The term Web 2.0 was coined in 1999 to describe web sites that use technology beyond the static
pages of earlier web sites. It is closely associated with Tim O'Reilly because of the O'Reilly Media
Web 2.0 conference, which was held in late 2004. Although Web 2.0 suggests a new version of the
World Wide Web, it does not refer to an update to any technical specification, but rather to
cumulative changes in the ways software developers and end- users use the Web.
The word technology refers to the making, modification, usage, and knowledge of tools, machines,
techniques, crafts, systems, and methods of organization, in order to solve a problem, improve a pre-
existing solution to a problem, achieve a goal, handle an applied input/output relation or perform a
specific function. It can also refer to the collection of such tools, including machinery, modifications,
arrangements and procedures. Technologies significantly affect human as well as other animal
species' ability to control and adapt to their natural environments. The term can either be applied
generally or to specific areas: examples include constr0uction technology, medical technology, and
information technology.
1.1 History of Web
 The term "Web 2.0" was first used in January 1999 by Darcy DiNucci, a consultant on
electronic information design (information architecture). In her article, "Fragmented Future",
DiNucci writes:
 The Web we know now, which loads into a browser window in essentially static screenfuls,
is only an embryo of the Web to come. The first glimmerings of Web 2.0 are beginning to
appear, and we are just starting to see how that embryo might develop. The Web will be
understood not as screenfuls of text and graphics but as a transport mechanism, the ether
through which interactivity happens. It will appear on your computer screen; on your TV set
your car dashboard your cell phone hand-held game machines maybe even your microwave
oven.
 Writing when Palm Inc. was introducing its first web-capable personal digital assistant,
supporting web access with WAP, DiNucci saw the web "fragmenting" into a future that
extended far beyond the browser/PC combination it was identified with. Her vision of the
web's future focused on how the basic information structure and hyperlinking mechanism
introduced by HTTP would be used by a variety of devices and platforms. As such, her use of
the "2.0" designation refers to a next version of the web that does not directly relate to the
term's current use.
 The term Web 2.0 did not resurface until 2002. These authors focus on the concepts currently
associated with the term where, as Scott Dietzen puts it, "the Web becomes a universal,
standards-based integration platform". John Robb wrote: "What is Web 2.0? It is a system
that breaks with the old model of centralized Web sites and moves the power of the
Web/Internet to the desktop."
 In 2004, the term began its rise in popularity when O'Reilly Media and Media Live hosted the
first Web 2.0 conference. In their opening remarks, John Battelle and Tim O'Reilly outlined
their definition of the "Web as Platform", where software applications are built upon the Web
as opposed to upon the desktop. The unique aspect of this migration, they argued, is that
"customers are building your business for you". They argued that the activities of users
generating content (in the form of ideas, text, videos, or pictures) could be "harnessed" to
create value. O'Reilly and Battelle contrasted Web 2.0 with what they called "Web 1.0". They
associated Web 1.0 with the business models of Netscape and the Encyclopedia Britannica
Online. For example,
 Netscape framed "the web as platform" in terms of the old software paradigm: their flagship
product was the web browser, a desktop application, and their strategy was to use theird
dominance in the browser market to establish a market for high-priced server products.
2
  Control over standards for displaying content and applications in the browser would, in
theory, give Netscape the kind of market power enjoyed by Microsoft in the PC market.
Much like the "horseless carriage" framed the automobile as an extension of the familiar;
Netscape promoted a "WebTop" to replace the desktop, and planned to populate that webtop
with information updates and applets pushed to the webtop by information providers who
would purchase Netscape servers.
 In short, Netscape focused on creating software, updating it on occasion, and distributing it to
the end users. O'Reilly contrasted this with Google, a company that did not at the time focus
on producing software, such as a browser, but instead on providing a service based on data
such as the links Web page authors make between sites. Google exploits this user-generated
content to offer Web search based on reputation through its "PageRank" algorithm. Unlike
software, which undergoes scheduled releases, such services are constantly updated, a
process called "the perpetual beta". A similar difference can be seen between the
Encyclopedia Britannica Online and Wikipedia: while the Britannica relies upon experts to
create articles and releases them periodically in publications, Wikipedia relies on trust in
anonymous users to constantly and quickly build content. Wikipedia is not based on expertise
but rather an adaptation of the open source software adage "given enough eyeballs, all bugs
are shallow", and it produces and updates articles constantly. O'Reilly's Web 2.0 conferences
have been held every year since 2004, attracting entrepreneurs, large companies, and
technology reporters.
 The term Web 2.0 was initially championed by bloggers and by technology journalists,
culminating in the 2006 TIME magazine Person of The Year (You). That is, TIME selected
the masses of users who were participating in content creation on social networks, blogs,
wikis, and media sharing sites. In the cover story, Lev Grossman explains:

It is a story about community and collaboration on a scale never seen before. It is about the cosmic
compendium of knowledge Wikipedia and the million-channel people network YouTube and the online
metropolis my space. It is about the many wresting power from the few and helping one another for
nothing and how that will not only change the world but also change the way the world changes

3
1.2 Technology

 The Internet by Berners-Lee in late 1991.

 Berners-Lee considered HTML to be an application of SGML. It was formally defined as
such by the Internet Engineering Task Force (IETF) with the mid-1993 publication of the
first proposal for an HTML specification: "Hypertext Markup Language (HTML)" Internet-
Draft by Berners-Lee and Dan Connolly, which included an SGML Document Type
Definition to define the grammar.
After the HTML and HTML+ drafts expired in early 1994, the IETF created an HTML Working
Group, which in 1995 completed "HTML 2.0", the first HTML specification intended to be
treated as a standard against which future implementations should be based. Competing interests
stalled further development under the auspices of the IETF. Since 1996, the HTML
specifications have been maintained, with input from commercial software vendors, by the
World Wide Web Consortium (W3C).[12] However, in 2000, HTML also became an international
standard (ISO/IEC 15445:2000). HTML 4.01 was published in late 1999, with further errata
published The word technology refers to the making, modification, usage, and knowledge of
tools, machines, techniques, crafts, systems, and methods of organization, in order to solve a
problem, improve a preexisting solution to a problem, achieve a goal, handle an applied
input/output relation or perform a specific function. It can also refer to the collection of such
tools, including machinery, modifications, arrangements and procedures. Technologies
significantly affect human as well as other animal species' ability to control and adapt to their
natural environments. The term can be applied either generally or to specific areas: examples
include construction technology, medical technology, and information technology.
Technology has affected society and its surroundings in a number of ways. In many societies,
technology has helped develop more advanced economies (including today's global economy)
and has allowed the rise of a leisure class. Many technological processes produce unwanted by-
products, known as pollution, and deplete natural resources, to the detriment of the Earth and its
environment. Various implementations of technology influence the values of a society and new
technology often raises new ethical questions. Examples include the rise of the notion of
efficiency in terms of human productivity, a term originally applied only to machines, and the
challenge of traditional norms.
According to above, information technology means the making of new things, modifications in
things and something that changes human efforts in daily life that is known as technology.
In upcoming chapters, we will discuss about New technologies in web standards like Html and
Css.

4
 Chapter 2
Markup Languages and
Style Sheets

Fig 2

INTRODUCTION
A (document) markup language is a modern system for annotating a document in a way that
is syntactically distinguishable from the text. The idea and terminology evolved from the
"marking up" of manuscripts, i.e., the revision instructions by editors, traditionally written
with a blue pencil on authors' manuscripts. Examples are typesetting instructions such as
those found in troff, TeX and Latex, or structural markers such as XML tags. Markup
instructs the software displaying the text to carry out appropriate actions, but is omitted from
the version of the text that is displayed to users. Some markup languages, such as HTML,
have pre-defined presentation semantics, meaning that their specification prescribes how the
structured data are to be presented; others, such as XML, do not.
A widely used markup language is Hyper Text Markup Language (HTML), one of the
document formats of the World Wide Web. HTML, which is an instance of SGML (though,
strictly, it does not comply with all the rules of SGML), follows many of the markup
conventions used in the publishing industry in the communication of printed work between
authors, editors, and printers. A web style sheet is a form of separation of presentation and
content for web design in which the markup (i.e., HTML or XHTML) of a webpage contains
the page's semantic content and structure, but does not define its visual layout (style).
Instead, the style is defined in an external style sheet file using a style sheet language such as
CSS or XSLT. This design approach is identified as a "separation" because it largely
supersedes the antecedent methodology in which a page's markup defined both style and
structure.

5
2.1 HTML (Markup Language)
Hyper Text Markup Language (HTML) is the main markup language for creating web pages and
other information that can be displayed in a web browser. HTML is written in the form of HTML
elements consisting of tags enclosed in angle brackets (like <html>), within the web page
content. HTML tags most commonly come in pairs like <h1> and </h1>, although some tags,
known as empty elements, are unpaired, for example <img>. The first tag in a pair is the start
tag, the second tag is the end tag (they are also called opening tags and closing tags). In between
these tags, web designers can add text, tags, comments and other types of text-based content. The
purpose of a web browser is to read HTML documents and compose them into visible or audible
web pages. The browser does not display the HTML tags, but uses the tags to interpret the
content of the page.HTML elements form the building blocks of all websites. HTML allows
images and objects to be embedded and can be used to create interactive forms. It provides a
means to create structured documents by denoting structural semantics for text such as headings,
paragraphs, lists, links, quotes and other items. It can embed scripts written in languages such as
JavaScript, which affect the behavior of HTML web pages. Web browsers can also refer to
Cascading Style Sheets (CSS) to define the appearance and layout of text and other material. The
W3C, maintainer of both the HTML and the CSS standards, encourages the use of CSS over
explicit presentational HTML markup.

History (HTML)
 In 1980, physicist Tim Berners-Lee, who was a contractor at CERN, proposed and
prototyped ENQUIRE, a system for CERN researchers to use and share documents.
 In 1989, Berners-Lee wrote a memo proposing an Internet-based hypertext system. The first
publicly available description of HTML was a document called "HTML Tags", first
mentioned on through 2001.
 In 2004, development began on HTML5 in the Web Hypertext Application Technology
Working Group (WHATWG), which became a joint deliverable with the W3C in 2008.


2.2 CSS (Cascading Style Sheet)
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, but the language can
also be applied to any kind of XML document, including plain XML, SVG and XUL. 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. 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 tableless 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 specifies 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).

History(CSS)

 Style sheets have existed in one form or another since the beginnings of SGML in the 1980s.
 Cascading Style Sheets were developed as a means for creating a consistent approach to
providing style information for web documents.
 To improve web presentation capabilities, nine different style sheet languages were proposed
to the World Wide Web Consortium's (W3C) www-style mailing list.
 Of the nine proposals, two were chosen as the foundation for what became CSS: Cascading
HTML Style Sheets (CHSS) and Stream-based Style Sheet Proposal (SSP). CHSS, a
language that has some resemblance to today's CSS, was proposed by Håkon Wium Lie in
October 1994.
 Lie's proposal was presented at the "Mosaic and the Web" conference (later called WWW2)
in Chicago, Illinois in 1994, and again with Bert Bos in 1995.Development of HTML, CSS,
and the DOM had all been taking place in one group, the HTML Editorial Review Board
(ERB). Early in 1997, the ERB was split into three working groups: HTML Working group,
chaired by Dan Connolly of W3C; DOM Working group, chaired by Lauren Wood of
SoftQuad; and CSS Working group, chaired by Chris Lilley of W3C.
 The CSS Working Group began tackling issues that had not been addressed with CSS level 1,
resulting in the creation of CSS level 2 on November 4, 1997.
 It was published as a W3C Recommendation on May 12, 1998. CSS level 3, which was
started in 1998, is still under development as of 2009.

7
 Chapter 3
HTML5

Features
 New Elements
 New Attributes
 Full CSS3 Support
 Video and Audio
 2D/3D Graphics
 Local Storage
 Local SQL Database
 Web Applications

Fig 3

Introduction
HTML5 is a markup language for structuring and presenting content for the World Wide
Web(Web Pages) and is a core technology of the Internet. It is the fifth version of the
HTML(Hyper Text Markup Language) standard. Its core aims have been to improve the
language with support for the latest multimedia while keeping it easily readable by humans
and consistently understood by computers and devices (web browsers, parsers, etc.). HTML5
is intended to subsume not only HTML 4, but also XHTML 1 and DOM Level 2 HTML.
Following its immediate predecessors HTML 4.01 and XHTML 1.1, HTML5 is a response to
the observation that the HTML and XHTML in common use on the World Wide Web are a
mixture of features introduced by various specifications, along with those introduced by
software products such as web browsers, those established by common practice, and the
many syntax errors in existing web documents. It is also an attempt to define a single markup
language that can be written in either HTML or XHTML syntax. It includes detailed
processing models to encourage more interoperable implementations; it extends, improves
and rationalises the markup available for documents, and introduces markup and application
programming interfaces (APIs) for complex web applications. For the same reasons, HTML5
is also a potential candidate for cross-platform mobile applications. Many features of
HTML5 have been built with the consideration of being able to run on low-powered devices
such as smartphones and tablets. In December 2011, research firm Strategy Analytics
forecast sales of HTML5 compatible phones will top 1 billion in 2013.
In particular, HTML5 adds many new syntactic features. These include the new <video>,
<audio> and <canvas> elements, as well as the integration of scalable vector graphics (SVG)
content (that replaces the uses of generic <object> tags) and MathML for mathematical
formulas. These features are designed to make it easy to include and handle multimedia and
graphical content on the web without having to resort to proprietary plugins and APIs.
3.1 Why HTML?
 In previous version HTML have some limitations. To cover them a new version of HTML
was introduced that was known as HTML5.
 There are many features in HTML5 which will attract us in coming future.
 Now HTML5 have some benefits, some of them are:-

1. Accessibility
HTML5 makes creating accessible sites easier for two main reasons: semantics and ARIA. The
new (some currently available) HTML headings like <header>, <footer>, <nav>, <section>,
<aside>, etc. allow screen readers to easily access content. Before, your screen readers had no
way to determine what a given <div> was even if you assigned it an ID or Class. With new
semantic tags screen readers can better examine the HTML document and create a better
experience for those who use them.
ARIA is a W3C spec that is mainly used to assign specific ―roles‖ to elements in an
HTML document – essentially creating important landmarks on the page: header, footer,
navigation or article, via role attributes. This has been well overlooked and widely under-used
mostly due to the fact that it wasn‘t valid, however, HTML5 will validate these attributes. Also,
HTML5 will have built in roles that can‘t be over-ridden making assigning roles a no brainer.
For a more in depth discussion on HTML5 and ARIA please visit the WAI.

2. Video and Audio Support

Forget about Flash Player and other third party media players, make your videos and audio truly
accessible with the new HTML5 <video> and <audio> tags. Getting your media to play correctly
has always been pretty much a nightmare, you had to use the <embed> and <object> tags and
assign a huge list of parameters just to get the thing visible and working correctly. Your media
tags just become these nasty, huge chunks of confusing code segments. HTML5′s video and
audio tags basically treat them as images; <video src=‖url‖/>. But what about all those
parameters like height, width and autoplay? No worries my good man, just define those
attributes in the tag just like any other HTML element: <video src=‖url‖ width=‖640px‖
height=‖380px‖ autoplay/>.

3. Doctype
<!DOCTYPE html>
Yup that‘s it, that is the doctype, nothing more, nothing less. Pretty simple right? No more
cutting and pasting some long unreadable line of code and no more dirty head tags filled with
doctype attributes. You can simply and easily type it out and be happy. The really great thing
about it though, beyond the simplicity, is that it works in every browser clear back to the dreaded
IE6.

9
 4. Cleaner Code

If you are passionate about simple, elegant, easy to read code then HTML5 is the beast for you.
HTML5 allows you to write clear and descriptive code, semantic code that allows you to easily
separate meaning from style and content.
With HTML5 you can finally cure your ―divitis‖ and ―classitis‖ by using semantic and
HTML headers to describe your content. Previously you would generally just use div‘s for every
block of content than drop an id or class on it to describe its content but with the new
<section>,
<article>, <header>, <footer>, <aside> and <nav> tags, HTML5 allows you to code your markup
cleaner as well as keep your CSS better organized and happier.
5. Smarter Storage
One of the coolest things about HTML5 is the new local storage feature. It‘s a little bit of a cross
between regular old cookies and a client-side database. It‘s better than cookies because it allows
for storage across multiple windows, it has better security and performance and data will persist
even after the browser is closed. Because it‘s essentially a client side data base you don‘t have to
worry about the user deleting cookies and it is been adopted by all the popular browsers.Local
storage is great for many things, but it‘s one of HTML5 tools that are making web apps possible
without third party plugins. Being able to store data in the user‘s browser allows you to easily
create those app features like: storing user information, the ability to cache data, and the ability
to load the user‘s previous application state.
6. Better Intraction
Awe, we all want better interactions, we all want a more dynamic website that responds to the
user and allows the user to enjoy/interact your content instead of just look at it. Enter <canvas>,
the drawing HTML5 tag that allows you to do most (if not more) interactive and animated
possibilities than the previous rich internet application platforms like Flash.
Beyond <canvas>, HTML5 also comes with a slew of great APIs that allow you to build a better
user experience and a beefier, more dynamic web application — here‘s a quick list of native
APIs:
 Drag and Drop (DnD)
 Offline storage database
 Browser history management
 document editing
 Timed media playback

7. Game Development
Yup, that is correct, you can develop games using HTML5′s <canvas> tag. HTML5 provides a
great, mobile friendly way to develop fun, interactive games. If you‘ve built Flash games before,
you‘ll love building HTML5 games.

10
 8. Cross Browser Support

Fig 4
Your modern, popular browsers all support HTML5 (Chrome, Firefox, Safari IE9 and Opera)
and the HTML5 doctype was created so that all browsers, even the really old and annoying ones,
er, IE6 can use it. But just because old browsers recognize the doctype that doesn‘t mean they
can use all the new HTML5 tags and goodies.
9. Mobile, Mobile, Mobile
Mobile browsers have fully adopted HTML5 so creating mobile ready projects is as easy as
designing and constructing for their smaller touch screen displays — hence the popularity of
Responsive Design.

There are some great meta tags that also allow you to optimize for mobile:

 Viewport: allows you to define viewport widths and zoom settings

 Full screen browsing: IOS specific values that allow Apple devices to display in
full screen mode
 Home Screen Icons: like favicons on desktop, these icons are used to add favorites to the
home screen of an IOS and Android mobile device
10. It’s The Future, GET WITH IT
The number one reason why you should start using HTML5 today is this: it‘s the future, start
using it now so you don‘t get left behind. HTML5 is not going anywhere and as more and more
elements get adopted more and more companies will start to develop in HTML5. HTML5 is
essentially just HTML, it‘s not scary, it‘s not anything you really need to figure out or relearn —
if you‘re developing XHTML strict right now you are already developing in HTML5 so why not
take full advantage of it‘s current capability?
You really don‘t have any excuses not to adopt HTML5 and begin your new love affair with it.
Truly, the only real reason I prefer to use HTML5 is just to write cleaner code, all the other
benefits and fun features I haven‘t even really jumped into yet, but that is the great thing about it,
you can just start using it right now and not even change the way you design. So, start using it
right now, whether you are just simplifying and making your markup more semantic OR you are
gonna build some sick new mobile game that will take over the world — who knows, maybe you
can start selling stuffed animal versions of your gaming characters too.
11
New Tags In HTML5

S.no Tag Use

1 <article> Specifies an article
2 <aside> Specifies content aside from the
page content
3 <audio> Specifies sound content
4 <bdi> For bi-directional text formatting
5 <canvas> Define graphics
6 <command> Specifies a command
7 <data> Allows for machine-readable data to
be provided
8 <datagrid> Allows for an interactive representation of
tree, list, or tabular data
9 <datalist> Specifies an “autocomplete” dropdown list
10 <details> Specifies details of an element
11 <embedded> Specifies external application or interactive
content
12 <eventsource> Specifies a target for events sent by a server
13 <figcaption> Specifies caption for the figure element.
14 <figure> Specifies a group of media content, and their
caption
15 <footer> Specifies a footer for a section or page
16 <header> Specifies a group of introductory or
navigational aids, including
hgroup
elements
17 <hgroup> Specifies a header for a section or page
18 <keygen> Generates a key pair
19 <mark> Specifies marked text
20 <meter> Specifies measurement within a predefined
range
21 <nav> Specifies navigation links
22 <progress> Specifies progress of a task of any kind
23 <ruby> Specifies a ruby annotation (used in East
Asian typography)
24 <rp> Used for the benefit of browsers that don’t
support ruby annotations
25 <rt> Specifies the ruby text component of a ruby
annotation.
26 <section> Specifies a section

12
27 <source> Specifies media resources
28 <summary> Specifies a summary / caption for the
<details> element
29 <time> Specifies a date/time
30 <track> Specifies a text track for media such as video
and audio
31 <video> Specifies a video
32 <wbr> Specifies a line break opportunity for very
long words and strings of text with no
spaces.

Table 1

13
 3.2 HTML5 VS. HTML4

Fig 5

HTML4 HTML5
Developed in 1990. Introduced in 2011 and Still developing.
It has loose syntax. Like <p> etc. Has not loose syntax.
It used common structures. HTML5 is developed keeping in mind the usage
of modern websites. New tags have been added:
‗header‘ for headings; ‗nav‘ for website
navigation block; ‗footer‘ for bottom lines in
web page; ‗section‘, ‗article‘ or ‗aside‘ for
particular sections such as blogs, etc.
HTML4 supports what is called ‗tag soup‘, HTML5 is attempting to solve this, so that
this is, the ability to write malformed code and browser developers can standardize and save
have it corrected into a valid document. But the time and money. It is also more flexible to
problem is that rules for doing this aren‘t handle inaccurate syntax, and it specifies the
written anywhere, so developers just have to rules related to the parsing and lexing.
test malformed documents in various browsers
(especially Internet Explorer) to handle any
errors. Also, HTML4 lacks rules for parsing,
which makes it more difficult to handle errors.
HTML4 is the markup language used for HTML5 is not yet an official standard, all major
writing websites worldwide, and it is supported browsers (Safari, Chrome, Firefox, Opera,
by all web browsers. Internet Explorer) support most of its
features.
HTML4 needed external software, like Flash, HTML5 can embed video on web-pages without
to play videos and multimedia content. using any special software. It is also said to be
capable of playing video games (8-
bit) on the browser itself.
Table2
14
3.3 ADVANTAGES AND DISADVANTAGES OF HTML5
Advantages:
Basically HTML5 has it‘s many new syntactical features, which include the <video>, <audio>,
and <canvas> elements, as well as the integration of SVG content. Due to these new elements, it
will be very easy to integrate multimedia and graphical content to web without using flash and
third party plugins.

Some of advantages are:

 Mutuality:
Due to usability purpose the web sites made by developers are highly interactive nowadays and
for this developers need to include fluid animations, stream video, play music and Social
Network sites like Facebook and Twitter into the websites. Till now they have only the option to
integrate it with the help of Flash or Silverlight, Flex or javascript like tools. But these consume
so much time to develop and even the complexity of web application also increased. But now
with the help of HTML5 it is possible to embed video and audio, high quality drawings, charts
and animation and many other rich content without using any plugins and third party programs
as the functionality is built into the browser.
 Consistency:
As websites adopt the new HTML5 elements we will see more greater consistency in terms of
the HTML used to code a web page on one site compared to another. This will make it more
easier for designers and developers to immediately understand how a web page is structured.
 Client-Side Database:
While cookies have been used to track unique user data for years, they have serious
disadvantages. The largest flaw is that all of your cookie data is added to every HTTP request
header. This can end up having a measurable impact on response time. So a best practice is to
reduce cookie size. With HTML5 we can do better by using sessionStorage and localStorage(two
different storage in HTML5) in place of cookies. It is not a permanent database, but enables you
to store structured data, temporarily.
 Geolocation:
With help of Geolocation any one can find out where you are in the world and sharing that
information with people. There is different ways to figure out where you are — your IP address,
your wireless network connection, which cell tower your phone is talking to, or dedicated GPS
hardware that calculates latitude and longitude from information sent by satellites in the sky. But
The new HTML5 geolocation APIs make location, whether generated via GPS or other methods,
directly available to any HTML5-compatible browser-based application.

15
Disadvantages:

All we are using HTML5 today, but the reality is that there's a few problems that prevent the
language from use in modern websites.

Some of them are:

 Browser Support:
The main problem with HTML5's acceptance is that only modern browsers support it. By
modern, I mean almost everything except for Internet Explorer. The new version...IE9 offers
excellent support, but as of this writing it's not quite out of beta. Even if it were, the majority of
people will still use older versions of IE for quite some time. There are things you can do to
make the language play nice with older browsers, but none of them are perfect.
 The Language is a Spec:
Another problem is that although parts of the language are very stable, the language itself is
considered a work in progress, so technically, any of the elements could change at any time. The
language is not expected to be completed for several years, which complicates things further.
Thankfully, a lot of the language is considered stable and ready to use. I think it's such a great
move forward, that you should develop a Graceful Degradation approach to writing your HTML.
That simply means writing HTML that will work with older browsers, but will offer users with
more modern browsers an enhanced experience.
 Media Licensing Issue:
Another ugly fact about HTML5 is that because of licensing issues, rich media has to be
compressed in multiple formats in order to be compatible with most browsers. So you'll probably
use something like mp3 audio for webkit browsers (safari, chrome), and ogg for Mozilla
(Firefox) browsers. It involves a bit more work and it is a pain, but hopefully those issues will be
resolved soon.
16
 Chapter 4
CSS3
Features
 Latest Standard for
Cascading Style Sheet.
 New ways for fantastic design.
 Added new modules.
 Completely backwards compatible.

Introduction

 Very briefly, CSS stands for ‗Cascading

Fig 6
Style Sheets‘ and is a mark-up language for altering and giving style to a website or elements
within a website. The 3 represents the next generation/version of style sheet language.
 It is very important to learn that while it is fun to learn and play with CSS3, it is still not yet
fully supported in current browsers. This means that if you are to incorporate CSS3 in a live
website, it would be a good idea to make sure there is fallback code for the browsers that are
struggling to support it.
 CSS3 is short form for Cascading Style Sheet Version 3. Earlier there was version 2(CSS2).
CSS3 added some new features. CSS3 is completely backwards compatible, so you will not
have to change existing designs. Browsers will always support CSS2. CSS3 offers a huge
variety of new ways to create an impact with your designs, with quite a few important
changes.
 Using CSS3 keyframe animations, developers can create smooth, maintainable animations
that perform relatively well and that don‘t require reams of scripting. It‘s just another way
that CSS3 is helping to solve a real-world problem in an elegant manner.
 CSS3 is a sprawling specification that attempts to modularize CSS and both extend and
improve on previous CSS versions.
 Web professionals looking to make a determination of what to pay attention to in the future
of CSS3 are likely put off by the list of various components found at
www.w3.org/style/css/current-work#css3.
 4.1 Why CSS3?
 In previous version CSS have some limitations. To cover them a new version of CSS was
introduced that was known as CSS3.
 There are many features in CSS3 which will attract us in coming future.
 Now CSS3 have some benefits, some of them are:-

1. CSS3 Borders:

CSS3 contain following border properties:

 border-radius
 box-shadow
 border-image

With CSS3, you can create rounded borders, add

shadow to boxes, and use an image as a border -
without using a design program, like Photoshop.
The CSS3 border-radius property allows web
Fig 7
developers to easily utilise rounder corners in their design elements, without the need for corner
images or the use of multiple div tags, and is perhaps one of the most talked about aspects of
CSS3.
Since first being announced in 2005 the border-radius property has come to enjoy widespread
browser support (although with some discrepancies) and, with relative ease of use, web
developers have been quick to make the most of this emerging technology.

2. CSS3 Text Effects:

CSS3 contain following background properties:

 background-size
 background-origin

CSS3 contains several new background properties, which allow greater control of the
background element. CSS3 allows web designers to specify multiple background images for
box elements, using nothing more than a simple comma-separated list. The property adds
new functionality to CSS allowing designers to specify the size of background images using
either lengths, percentages, or by using one of two keywords; contain or cover.

18
 3. CSS3 Text Effects:
CSS3 contain following Text Effect properties:
 text-shadow
 word-wrap

The new CSS3 properties give developers a wonderful chance to enhance their designs in a way
that‘s quick and easy, yet visually impressive. To give a website a visually impressive look,
designers put emphasis on neat and stylish typography. For years designers have depended on
Photoshop, but CSS3 is a revolution with easy-to-create text effects. Almost all of the major
browsers now support most of the CSS3 features so that‘s another reason for mastering the new
techniques.

4. CSS3 Fonts:

Before CSS3, web designers had to use fonts that were already installed on the user's computer.
With CSS3, web designers can use whatever font he/she likes. When you have found/bought the
font you wish to use, include the font file on your web server, and it will be automatically
downloaded to the user when needed.Your "own" fonts are defined in the CSS3 @font-face rule.
5. CSS3 2D Transforms:
A transform is an effect that lets an element change shape, size and position.
CSS3 contain following 2D Transforms properties:
 translate()
 rotate()
 scale()
 skew()
 matrix()
6. CSS3 3D Transforms:
CSS3 allows you to format your elements using 3D transforms.
CSS3 contain following 3D transforms properties:
 rotateX()
 rotateY()

7. CSS3 Transitions:
With CSS3, we can add an effect when changing from one style to another, without using Flash
animations or Java Script

19.
New Properties and Rules in CSS3
S.No Property Use
1 border-radius the border-radius property is used to create rounded
corners.
2 border-image border-image property you can use an image to create
a border.
3 border-shadow the box-shadow property is used to add shadow to
boxes.
4 Background-size The background-size property specifies the size of
the background image.
5 Background-orizin The background-origin property specifies the
positioning area of the background images.
6 Text-shadow the text-shadow property applies shadow to text.
7 Word-wrap the word-wrap property allows you to force the text
to wrap.
8 @font-face Your "own" fonts are defined in the CSS3 @font-
face rule.
9 Translate( ) With the translate() method, the element moves from
its current position, depending on the parameters
given for the left (X-axis) and the top (Y-axis)
position.
10 Rotate( ) With the rotate() method, the element rotates
clockwise at a given degree. Negative values are
allowed and rotates the element counter-clockwise.
11 Scale( ) With the scale() method, the element increases or
decreases the size, depending on the parameters
given for the width (X-axis) and the height (Y-axis).
12 Skew( ) With the skew() method, the element turns in a given
angle, depending on the parameters given for the
horizontal (X-axis) and the vertical (Y-axis) lines.
13 Matrix( ) The matrix() method combines all of the 2D
transform methods into one.
14 rotateX( ) With the rotateX() method, the element rotates
around its X-axis at a given degree.
15 RotateY( ) With the rotateY() method, the element rotates
around its Y-axis at a given degree.
16 Transition CSS3 transitions are effects that let an element
gradually change from one style to another.
17 @keyframes The @keyframes rule is where the animation is
created. Specify a CSS style inside the @keyframes
rule and the animation will gradually change from the
current style to the new style.
18 Animation animation is created in the @keyframe, bind it to a
selector, otherwise the animation will have no effect.
Table 3

20
Browser Comptability:
CSS3 is not yet a W3C standard, but the major browsers support many of the new properties.
The browser support for some properties are given below.

Fig 8

Some Browsers which don’t compatible with css?

For those browsers we fix bug. For some famous browsers which are given below
Browser Name Bug Fix/Hacks
 Mozilla Firefox- -moz-
 Google Chrome- -webkit-
 Opera Mini- -0-
 Rockmalt- -k-
 Internet Explorer- -ms-
 Safari- -webkit-


 4.2 CSS VS CSS3

 We believe in the power, speed and ―update-ability‖ of CSS3. Not having to load
background images as structural enhancements (such as PNGs for rounded corners and
gradients) can save time in production (i.e. billable hours) and loading (i.e. page speed). At
company, we‘ve happily been using CSS3 on client websites for over a year now, and we
find that implementing many of these properties right now is the most sensible way to build
websites. Which is better than CSS.
 CSS3 is an advanced version of CSS. It is still under development mode but many browsers
have started supporting it long back. Newer versions of Mozilla, Chrome, Opera support
CSS3 with some modifications in the code for each one of them. For using css3 in browsers
we should use some modifications in code. While using CSS we don‘t have to use
Modifications in code.
 In the mid- to late nineties and into the early part of this century, most web designers and
developers were using a feature of HTML called tables to maintain the ―look‖ or
their websites, and the result was that HTML files were often very large and hard to
maintain. With CSS, however, developers could keep design and data separate, which made
for clean, easy to maintain HTML and faster load times, since the file sizes were
smaller. CSS3 promises similar results by offering features that could only be accomplished
through the use of images by using traditional CSS.
 The border-radius property is an excellent example. While CSS allows developers to add a
border to box elements, developers had to create an image that matched exactly the size and
shape of the CSS box in order to get the look of rounded corners. The creation of these
images increases development time, and calling these images from the server means slower
load times for users and higher server strain.
 One drawback of using CSS3 is that while the latest releases for all the major browsers
support CSS3, many users do not use the current release. Site owners opting for CSS3 design
should take care to ensure that while adding flare, they do not create a ―broken‖ site for
users without CSS3 support.

22
4.3 ADVANTAGES AND DISADVANTAGES OF CSS3
ADVANTAGES:

 Using style sheets:

Long before the development of the concept of Cascading Style Sheets to refer to CSS3 colors,
fonts, backgrounds, borders, etc. the HTML-markup was used. But with the introduction of
Cascading Style it became possible to ask in a separate style sheet, causing users to have easy
and convenient tool. Related to this the another advantage of CSS3 – it is easier to make
changes: You can modify individual modules, which after testing are integrated with the overall
system.

 Differentiation and isolation:

The concept of CSS3 allows you to separate presentation from structure. For example, before
heading to indicate the center of the page in Arial bold blue color the HTML-markup was used
like this:

<h2 align="center">

<font color="blue" size="+6" face="Arial">

<i> Usage of CSS </ i>

</ Font>

</ H2>

 Layout multiple columns:

Module is based on multiple columns (Multi-Column Module)/ It is an important function of
CSS3, which allows to place text in multiple columns. The advantage for users is that while
reading the text in multiple columns you do not need to scroll up and down and side to side, the
text is easy to read, it is not too short lines and, above all, everything can be placed on the same
page that layout makes a convenient and economical.

 Flexibility in use:
The concept of cascading style sheets allows you to attach information to CSS-style in a separate
document or as an attachment within a HTML-document. You can also import multiple style
sheets anywhere. Users can specify an alternative style sheets, choosing between them as needed.

23
DISADVANTAGES:

 Browser Support:
Different browsers will render CSS3 layout differently as a result of browser bug or lack of
support for CSS3 features if CSS3 "hacks" was not implemented in browser.

It‘s the main disadvantage of css3. CSS3 still not providing the browser support. For covering
over it we have use some modifications and some hacks, because w3c still not fully launched
CSS3. It‘s sill developing that‘s the biggest disadvantages of it.

24
 CHAPTER 5
BOOTSTARP

fig 9

INTROUCTION
Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web
development. It contains CSS- and (optionally) JavaScript-based design templates
for typography, forms, buttons, navigation and other interface components.
Bootstrap is the third-most-starred project on GitHub, with more than 131,000 stars, behind
only freeCodeCamp (almost 300,000 stars) and marginally behind Vue.js framework.
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."
Bootstrap is a web framework that focuses on simplifying the development of informative web pages (as
opposed to web apps). The primary purpose of adding it to a web project is to apply Bootstrap's choices
of color, size, font and layout to that project. As such, the primary factor is whether the developers in
charge find those choices to their liking. Once added to a project, Bootstrap provides basic style
definitions for all HTML elements. The end is a uniform appearance for prose, tables and form elements
across web browsers. In addition, developers can take advantage of CSS classes defined in Bootstrap to
further customize the appearance of their contents. For example, Bootstrap has provisioned for light-
and dark-colored tables, page headings, more prominent pull quotes, and text with a highlight.
Bootstrap also comes with several JavaScript components in the form of jQuery plugins. They provide
additional user interface elements such as dialog boxes, tooltips, and carousels. Each Bootstrap
component consists of an HTML structure, CSS declarations, and in some cases accompanying
JavaScript code. They also extend the functionality of some existing interface elements, including for
example an auto-complete function for input fields.
The most prominent components of Bootstrap are its layout components, as they affect an entire web
page. The basic layout component is called "Container", as every other element in the page is placed in
it. Developers can choose between a fixed-width container and a fluid-width container. While the latter
always fills the width of the web page, the former uses one of the four predefined fixed widths,
depending on the size of the screen showing the page:

 Smaller than 576 pixels

 576–768 pixels
 768–992 pixels
 992–1200 pixels
 Larger than 1200 pixels
Once a container is in place, other Bootstrap layout components implement a CSS grid layout through
defining rows and columns.
A precompiled version of Bootstrap is available in the form of one CSS file and three JavaScript files
that can be readily added to any project. The raw form of Bootstrap, however, enables developers to
implement further customization and size optimizations. This raw form is modular, meaning that the
developer can remove unneeded components, apply a theme and modify the uncompiled Sass files.

26
5.1 Bootstrap 4
Mark Otto announced Bootstrap 4 on October 29, 2014. The first alpha version of Bootstrap 4 was
released on August 19, 2015. The first beta version was released on 10 August 2017. Mark suspended
work on Bootstrap 3 on September 6, 2016, to free up time to work on Bootstrap 4. Bootstrap 4 was
finalized on January 18, 2018.
Significant changes include:

 Major rewrite of the code

 Replacing Less with Sass
 Addition of  Reboot , a collection of element-specific CSS changes in a single file, based
on  Normalize
 Dropping support for IE8, IE9, and iOS 6
 Adding responsive spacing and sizing utilities
 Switching from the pixels unit in CSS to root ems
 Increasing global font size from 14px to 16px
 Dropping the  panel ,  thumbnail ,  pager , and  well  components
 Dropping the  Glyphicons  icon font
 Huge number[quantify] of utility classes
 Improved form styling, buttons, drop-down menus, media objects and image classes
Bootstrap 4 supports the latest versions of the Google Chrome, Firefox, Internet Explorer, Opera,
and Safari (except on Windows). It additionally supports back to IE9 and the latest Firefox Extended
Support Release (ESR).

Fig 10

27
 CHAPTER 6
JAVASCRIPT

INTRODUCTION
JavaScript  often abbreviated as JS, is a high-level, interpreted scripting language that conforms to
the ECMAScript specification. JavaScript has curly-bracket syntax, dynamic typing, prototype-
based object-orientation, and first-class functions.
Alongside HTML and CSS, JavaScript is one of the core technologies of the World Wide Web.
[9]
 JavaScript enables interactive web pages and is an essentia part of web applications. The vast majority
of websites use it,[10] and major web browsers have a dedicated JavaScript engine to execute it.
As a multi-paradigm language, JavaScript supports event-driven, functional,
and imperative (including object-oriented and prototype-based) programming styles. It has APIs for
working with text, arrays, dates, regular expressions, and the DOM, but the language itself does not
include any I/O, such as networking, storage, or graphics facilities. It relies upon the host environment
in which it is embedded to provide these features.
Initially only implemented client-side in web browsers, JavaScript engines are now embedded in many
other types of host software, including server-side in web servers and databases, and in non-web
programs such as word processors and PDF software, and in runtime environments that make JavaScript
available for writing mobile and desktop applications, including desktop widgets.
The terms Vanilla JavaScript and Vanilla JS refer to JavaScript not extended by any frameworks or
additional libraries. Scripts written in Vanilla JS are plain JavaScript code.[11][12]
Although there are similarities between JavaScript and Java, including language name, syntax, and
respective standard libraries, the two languages are distinct and differ greatly in design. JavaScript was
influenced by programming languages such as Self and Scheme.[13] The JSON serialization format, used
to store data structures in files or transmit them across networks, is based on JavaScript.
Trademark
"JavaScript" is a trademark of Oracle Corporation in the United States.[33] It is used under license for
technology invented and implemented by Netscape Communications and current entities such as
the Mozilla Foundation.
6.1 Features:
The following features are common to all conforming ECMAScript implementations, unless explicitly
specified otherwise.
Universal support:
All popular modern Web browsers support JavaScript with built-in interpreters.
Imperative and structured:
JavaScript supports much of the structured programming syntax
from C (e.g.,  if  statements,  while  loops,  switch  statements,  do while  loops, etc.). One partial
exception is scoping: JavaScript originally had only function scoping with  var . ECMAScript 2015
added keywords  let  and  const  for block scoping, meaning JavaScript now has both function and
block scoping. Like C, JavaScript makes a distinction between expressions and statements. One
syntactic difference from C is automatic semicolon insertion, which allows the semicolons that would
normally terminate statements to be omitted.
Dynamic Typing:
JavaScript is dynamically typed like most other scripting languages. A type is associated with
a value rather than an expression. For example, a variable initially bound to a number may be reassigned
to a string. JavaScript supports various ways to test the type of objects, including duck typing.
Run-time evaluation:
JavaScript includes an  eval  function that can execute statements provided as strings at run-time.
Prototype-based (object-oriented):
JavaScript is almost entirely object-based. In JavaScript, an object is an associative array, augmented
with a prototype (see below); each string key provides the name for an object property, and there are
two syntactical ways to specify such a name: dot notation ( obj.x = 10 ) and bracket notation
( obj['x'] = 10 ). A property may be added, rebound, or deleted at run-time. Most properties of an
object (and any property that belongs to an object's prototype inheritance chain) can be enumerated
using a  for...in  loop.
Functions as object constructors:
Functions double as object constructors, along with their typical role. Prefixing a function call
with new will create an instance of a prototype, inheriting properties and methods from the constructor
(including properties from the  Object  prototype). ECMAScript 5 offers
the  Object.create  method, allowing explicit creation of an instance without automatically
inheriting from the  Object  prototype (older environments can assign the prototype to  null ). The
constructor's  prototype  property determines the object used for the new object's internal prototype.
New methods can be added by modifying the prototype of the function used as a constructor.
JavaScript's built-in constructors, such
as  Array  or  Object , also have prototypes that can be modified.

29
Functions as methods:
Unlike many object-oriented languages, there is no distinction between a function definition and
a method definition. Rather, the distinction occurs during function calling; when a function is called as a
method of an object, the function's local this keyword is bound to that object for that invocation.
Functional
A function is first-class; a function is considered to be an object. As such, a function may have
properties and methods, such as  .call()  and  .bind() . A nested function is a function defined within
another function. It is created each time the outer function is invoked. In addition, each nested function
forms a lexical closure: The lexical scope of the outer function (including any constant, local variable,
or argument value) becomes part of the internal state of each inner function object, even after execution
of the outer function concludes. JavaScript also supports anonymous functions.

Functions as roles (Traits and Mixins):

JavaScript natively supports various function-based implementations of Role patterns
like Traits and Mixins. Such a function defines additional behavior by at least one method bound to
the  this  keyword within its  function  body. A Role then has to be delegated explicitly
via  call  or  apply  to objects that need to feature additional behavior that is not shared via the
prototype chain.

Object composition and inheritance:

Whereas explicit function-based delegation does cover composition in JavaScript, implicit delegation
already happens every time the prototype chain is walked in order to, e.g., find a method that might be
related to but is not directly owned by an object. Once the method is found it gets called within this
object's context. Thus inheritance in JavaScript is covered by a delegation automatism that is bound to
the prototype property of constructor functions.
Run-time environment:
JavaScript typically relies on a run-time environment (e.g., a Web browser) to provide objects and
methods by which scripts can interact with the environment (e.g., a webpage DOM). It also relies on the
run-time environment to provide the ability to include/import scripts
(e.g., HTML  <script>  elements). This is not a language feature per se, but it is common in most
JavaScript implementations. JavaScript processes messages from a queue one at a time. JavaScript calls
a function associated with each new message, creating a call stack frame with the
function's arguments and local variables. The call stack shrinks and grows based on the function's needs.
When the call stack is empty upon function completion, JavaScript proceeds to the next message in the
queue..

Variadic functions:
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. Variadic functions can also
be created by using the  bind  method.
 30
Array and object literals:
Like many scripting languages, arrays and objects (associative arrays in other languages) can each be
created with a succinct shortcut syntax. In fact, these literals form the basis of the JSON data format.

Regular expressions:
JavaScript also supports regular expressions in a manner similar to Perl, which provide a concise and
powerful syntax for text manipulation that is more sophisticated than the built-in string functions.
JavaScript is officially managed by Mozilla Foundation, and new language features are added
periodically. However, only some JavaScript engines support these new feature:

 property getter and setter functions (supported by WebKit, Gecko, Opera, ActionScript, and
Rhino)conditional  catch  clauses
 iterator protocol (adopted from Python)
 shallow generators-coroutines (adopted from Python)

Syntax: Simple examples- Variables in JavaScript can be defined using either

the  var ,  let  or  const  keywords.

let x; // declares the variable x and assigns to it the special value "undefined" (not to be
confused with an undefined value)
let y = 2; // declares the variable y and assigns to it the value 2
let z = "Hello, World!"; // declares the variable z and assigns to it a string containing
"Hello, World!"

31
 CHAPTER 7
CONTENT MANAGEMENT SYSTEM

Fig 11

INTRODCTION

A content management system (CMS) manages the creation and modification of digital content. These
systems typically support multiple users in a collaborative environment, allowing to perform document
management with different styles of governance and workflows. Usually the content is a website (or
part of it) and the term commonly refers to web content management systems. Web content may include
text and embedded graphics, photos, video, audio, maps, and program code (such as for applications)
that displays content or interacts with the user. By their nature, CMSs support the separation of content
and presentation.

Structure:
A content management system (CMS) typically has two major components: a content management
application (CMA), as the front-end user interface that allows a user, even with limited expertise, to add,
modify, and remove content from a website without the intervention of a webmaster; and a content
delivery application (CDA), that compiles the content and updates the website.

Common features:
Content management systems typically provide some of these features:

 search engine optimization

 Integrated and online documentation
 Modularity and extensibility
 User and group functionality
 Templating support for changing designs
 Installation and upgrade wizards
 Integrated audit logs
 Compliance with various accessibility frameworks and standards, such as WAI-ARIA
 Reduced need to code from scratch
 Unified user experience
 Version control
 Edit permission management
 Indexing and search
 Format or style management through themes
 Web-based publishing

Other types of content management system:

Digital asset management systems are another type of CMS. They manage content with clearly defined
author or ownership, such as documents, movies, pictures, phone numbers, and scientific data.
Companies also use CMSs to store, control, revise, and publish documentation.
There are also component content management systems (CCMS), which are CMSs that manage content
at a modular level rather than as pages or articles. CCMSs are often used in technical communication
where many publications reuse the same content.
Best known CMSs:
Based on market share statistics, the most popular content management system is WordPress, used by
more than 28% of all websites on the Internet, and by 59% of all websites using a known content
management system, followed by Joomla and Drupal.
 33
7.1 BENEFITS OF USING CMS:

Fig 12

Here are seven key benefits of using a CMS to run your business website.
 It's easy for the non-technically minded. ...
 It allows multiple users. ...
 It streamlines scheduling. ...
 It improves site maintenance. ...
 Design changes are simple. ...
 It helps you manage content. ...
 You're in control.

The Disadvantage of a Content Management System

 Contains hundreds of files. A site that contains many files leaves itself open to errors. ...
 Limited flexibility in design. CMS sites primarily use templates for design. ...
 Limited SEO of web pages. The web pages of a CMS site are generated dynamically. ...
 SEO Maintenance. ...
 Slow loading. ...
 Expensive design. ...
 Maintenance costs.
 34
CHAPTER 8
WORDPRESS

Fig 13

WordPress (WordPress.org) is a content management system (CMS) based on PHP and MySQLthat is

usually used with the MySQL or MariaDB database servers but can also use the SQLite database
engine. Features include a plugin architecture and a template system. It is most associated
with blogging but supports other types of web content including more traditional mailing
lists and forums, media galleries, and online stores. Used by more than 60 million websites, including
33.6% of the top 10 million websites as of April 2019, WordPress is the most
popular website management system in use. WordPress has also been used for other application
domains such as pervasive display systems (PDS).
WordPress was released on May 27, 2003, by its founders, Matt Mullenweg and Mike Little,] as
a fork of b2/cafelog. The software is released under the GPLv2 (or later) license.
To function, WordPress has to be installed on a web server, either part of an Internet hosting
service like WordPress.com or a computer running the software package WordPress.org in order to
serve as a network host in its own right. A local computer may be used for single-user testing and
learning purposes.
Overview:
"WordPress is a factory that makes webpages"is a core analogy designed to clarify the functions of
WordPress: it stores content and enables a user to create and publish webpages, requiring nothing
beyond a domain and a hosting service.
WordPress has a web template system using a template processor. Its architecture is a front controller,
routing all requests for non-static URIs to a single PHP file which parses the URI and identifies the
target page. This allows support for more human-readable permalinks.
Themes
WordPress users may install and switch among different themes. Themes allow users to change the look
and functionality of a WordPress website without altering the core code or site content. Every
WordPress website requires at least one theme to be present and every theme should be designed using
WordPress standards with structured PHP, valid HTML (HyperText Markup Language), and Cascading
Style Sheets (CSS). Themes may be directly installed using the WordPress "Appearance" administration
tool in the dashboard, or theme folders may be copied directly into the themes directory, for example
via FTP. The PHP, HTML and CSS found in themes can be directly modified to alter theme behavior, or
a theme can be a "child" theme which inherits settings from another theme and selectively overrides
features. WordPress themes are generally classified into two categories: free and premium. Many free
themes are listed in the WordPress theme directory, and premium themes are available for purchase
from marketplaces and individual WordPress developers. WordPress users may also create and develop
their own custom themes. The free theme Underscores created by the WordPress developers has become
a popular basis for new themes.
Other features:
WordPress also features integrated link management; a search engine–friendly,
clean permalink structure; the ability to assign multiple categories to posts; and support for tagging of
posts. Automatic filters are also included, providing standardized formatting and styling of text in posts
(for example, converting regular quotes to smart quotes). WordPress also supports
the Trackback and Pingback standards for displaying links to other sites that have themselves linked to a
post or an article. WordPress posts can be edited in HTML, using the visual editor, or using one of a
number of plugins that allow for a variety of customized editing features.
Multi-user and multi-blogging:
Prior to version 3, WordPress supported one blog per installation, although multiple concurrent copies
may be run from different directories if configured to use separate database tables. WordPress Multisites
(previously referred to as WordPress Multi-User, WordPress MU, or WPMU) was a fork of WordPress
created to allow multiple blogs to exist within one installation but is able to be administered by a
centralized maintainer. WordPress MU makes it possible for those with websites to host their own
blogging communities, as well as control and moderate all the blogs from a single dashboard.
WordPress MS adds eight new data tables for each blog.
As of the release of WordPress 3, WordPress MU has merged with WordPress.

36
8 About Project :-

A Social Media Website for sharing your thoughts with

your friends. social

Project is divided into following different modules

• Setting up Server and Web Framework
• Setting up Routes and Controllers
• Creating different Models for Database
• Authentication and Authorization
• Adding different functionalities like posts,
comments etc.
Technologies Used are:-

Front End
• HTML5 for basic structure and DOM
• CSS for styling
• JAVASCRIPT for a dynamic experience
Back End
• Node.js as a platform and runtime environment
• Express as a Web Framework
• EJS – Embedded JavaScript Templates
• Mongoose as a database
• passport for authentication, authorisation and social login
• Multer for uploading files on server
• Ajax for giving a dynamic nature to the website
• Sass for making css rules easier to write
• Nodemailer for updating users of their action on their mail.
• Kue for creating jobs and storing them on redis server
• WebSockets for chatting with other user
9 CONCLUSION

In my training during the company I got an opportunity to learn the work ethics of company. I think it is
the most important part of my training. Here I also learnt about the developing as we have to make
websites using content management systems. I was taught the frontend and backend web development
so I think knowledge of web development and work ethics in company will surely give long-term
benefits to my life.

FUTURE SCOPE OF WEB DEVELOPMENT:

For any business, a website matters more than anything, when it comes to reaching out to customers
online. A website is the representation of the business online. These days, every business realizes
the need for having a website and are putting in efforts to design and develop the best site for taking
their products or services online. This is where we can see a great deal of scope for web development
and design.
With the tremendous progress in the launch of websites, people who can create exemplary designs and
platforms for their online presence is what businesses are searching for. Web developers and designers
are bringing in all the best of their technical expertise and skills to develop and unique
design websites that are and capable of pulling the crowd.
10 REFERENCES:

http://www.w3schools.com/css3

http://www.css3.info

https://en.wikipedia.org/wiki/Cascading_St
yle_Sheets
https://www.w3.org/Style/CSS/current-
work.en.html
https://www.w3schools.com/html/html5_int
ro.asp http://www.html5rocks.com