Professional Documents
Culture Documents
Project Report On WebDevelopment
Project Report On WebDevelopment
2.2 CSS 7
3 CHAPTER-3 HTML5 8
INTRODUCTION
3.1 WHY HTML 9-11
4 CHAPTER-4 CSS3 17
INTRODUCTION
4.1 WHY CSS 18-21
6 CHAPTER-6 JAVASCRPIT 28
INTRODUCTION
6.1 FEATURES 29-31
iv
7.1 BENEFITS OF CMS 34
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
6 CSS Fig 5
9 BOOTSTRAP Fig 6
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
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.
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:
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.
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.
Introduction
1. CSS3 Borders:
border-radius
box-shadow
border-image
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
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:
<h2 align="center">
</ Font>
</ H2>
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:
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:
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.
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)
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:
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.
Fig 13
36
8 About Project :-
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.
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