Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
Presentation about html5 css3
1.
2. What is HTML?
HyperText 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.
3. What is CSS?
CSS stands for Cascading Style Sheets.
Styles define how to display HTML elements.
Its most common application is to style web pages written in HTML and
XHTML.
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.
7. Rough Timeline of Web Technologies
YEAR
VERSION
1991
HTML
1994
HTML2
1996
1997
CSS+Javascript
FEATURES
Color,font,Margin,
border,padding,Image...etc
HTML4
1998
CSS2
2000
XHTML
2002
Tableless Web Design
2005
AJAX
2009
HTML5
Absolute,fixed,relative
positioning of elements and zindex, bidirectional text, and new
font properties
8. HTML5
HTML5
CSS3
HTML4
JS
HTML5 is a markup language for structuring and presenting content for the
World Wide Web and a core technology of the Internet.
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.
9. Features of HTML5
Offline/Storage
Multimedia
Graphics
Semantics and Markup
10. Offline/Storage
HTML5, web pages can store data locally within the user's browser.
Earlier, this was done with cookies. However, Web Storage is more secure and
faster. The data is not included with every server request, but used ONLY
when asked for. It is also possible to store large amounts of data, without
affecting the website's performance.
The data is stored in key/value pairs, and a web page can only access data
stored by itself.
HTML5 Web Storage defines two types of key-value storage types
Localstorage
Session storage
11. Localstorage
- Stores data with no expiration date.
- The data will not be deleted when the browser is closed, and will be
available the next day, week, or year.
- 5MB per app per browser. According to the HTML5 spec, this limit can
be increased by the user when needed
localStorage.clickcount=Number(localStorage.clickcount)+1;
Session Storage
- Stores data for one session.
- Session storage is per-page-per-window and is limited to the lifetime
of
the window.
- The sessionStorage object is equal to the localStorage object, except
that it stores the data for only one session.
- The data is deleted when the user closes the browser window.
sessionStorage.clickcount=1;
12. Deleting Data from Storage
You can delete a single key-value pair of data from the storage or you can
delete all the data all at once.
Deleting a Specific Key-Value Pair
If you want to delete specific piece of data and you know the key name, you
simply supply the key name to the removeItem method like this:
localStorage.removeItem(clickcount);
Clearing the Entire Storage
To clear the storage used by your web app, invoke the clear() method, like this:
localStorage.clear();
16. Canvas
The HTML5 <canvas> tag is used to draw graphics, on the fly, via scripting
(usually JavaScript).
Draw a rectangle, a gradient rectangle, a multi color rectangle, and some
multicolor text.
However, the <canvas> element has no drawing abilities of its own (it is
only a container for graphics) - you must use a script to actually draw the
graphics.
In order to leverage the HTML5 Canvas, we'll need to place the canvas tag
somewhere inside the HTML document, access the canvas tag with
JavaScript, create a context, and then utilize the HTML5 Canvas API to
draw visualizations.
18. What is SVG?
SVG stands for Scalable Vector Graphics
SVG is used to define vector-based graphics for the Web
SVG defines the graphics in XML format
SVG graphics do NOT lose any quality if they are zoomed or resized
Every element and every attribute in SVG files can be animated
SVG images can be created and edited with any text editor
19. Semantics and Markup
Semantic = Meaning.
Semantic elements = Elements with meaning.
A semantic element clearly describes its meaning to both the browser and the
developer.
Examples of non-semantic elements: <div> and <span> - Tells nothing about
its content.
Examples of semantic elements: <form>, <table>, and <img> - Clearly defines
its content.
20. Better semantic tags
HTML5 offers new semantic elements to clearly define different parts of a web
page:
<header>
<nav>
<section>
<article>
<aside>
<figcaption>
<figure>
<footer>
24. HTML5 APIs
Application Cache API
DataTransfer API
Command API
Constraint Validation API
History API
MediaController API
Text Track API
APIs for the text field selections
25. Application Cache API: Example
which means that a web application is cached, and accessible without
an internet connection.
Offline browsing - users can use the application when they're offline
Speed - cached resources load faster
Reduced server load - the browser will only download
updated/changed resources from the server.
DataTransfer API: Example
Drag and drop is a very common feature. It is when you "grab" an
object and drag it to a different location.
Drag and drop is a very common feature. It is when you "grab" an object and drag it to a different location.
In HTML5, drag and drop is part of the standard, and any element can
be draggable.
Constraint Validation API:
means of implementing client side validation on web forms.
The core of constraint validation is an algorithm browsers run when a form
26. History API:
The History objects provide a representation of the pages in the
session history of browsing contexts. back(),forward() and go().
MediaController API:
An API to interact with the <audio> and <video> elements.
You can do things like play (controller.play) and pause (controller.pause).
More on media elements here.
Text Track API:
An API to interact with the <audio> and <video> associated text tracks,
like subtitles or captions.
APIs for the text field selections:
The input and textarea text elements define an API for handling their
selection.
27.
28. - CSS is used to control the style and layout of Web pages.
- CSS3 is completely backwards compatible,so you will not have to change
existing designs. Browsers will always support CSS2.
CSS3 Modules
CSS3 is split up into "modules". The old specification has been split into
smaller pieces, and new ones are also added.
Some of the most important CSS3 modules are:
Selectors
Box Model
Backgrounds and Borders
Text Effects
29. CSS3 Borders
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.
In this chapter you will learn about the following border properties:
Box with rounded corners
Example
border-radius
box-shadow
border-image
30. CSS3 Text Effects
CSS3 contains several new text features.
In this chapter you will learn about the following text properties:
text-shadow
word-wrap
31. Transforms and Transitions
Transforms
A transform is an effect that lets an element change shape, size and
position.
You can transform your elements using 2D or 3D transformation.
3D example1 3D Example2
Transitions
32. Animation
CSS3, we can create animations, which can replace animated images, Flash
animations, and JavaScripts in many web pages.
Example
Multiple Column Layout
With CSS3, you can create multiple columns for laying out text - like in
newspapers!
multiple column properties:
column-count
column-gap