What is HTML?
 HyperText Markup Language (HTML) is the
main markup language for creating web
pages and other information ...
What is CSS?


CSS stands for Cascading Style Sheets.



Styles define how to display HTML elements.




Its most comm...
Types of CSS
External

Internal

In-line

<link href="path/to/file.css" rel="stylesheet">
Types of CSS
External

<link href="path/to/file.css" rel="stylesheet">

<style type="text/css"> ...... </style>

Internal
...
Types of CSS
External

<link href="path/to/file.css" rel="stylesheet">

<style type="text/css"> ...... </style>

Internal
...
Rough Timeline of Web Technologies
YEAR

VERSION

1991

HTML

1994

HTML2

1996
1997

CSS+Javascript

FEATURES

Color,font...
HTML5
HTML5

CSS3

HTML4

JS

HTML5 is a markup language for structuring and presenting content for the
World Wide Web and...
Features of HTML5
 Offline/Storage

 Multimedia

 Graphics

 Semantics and Markup
Offline/Storage

HTML5, web pages can store data locally within the user's browser.

Earlier, this was done with cookies. ...
Localstorage
- Stores data with no expiration date.
- The data will not be deleted when the browser is closed, and will be...
Deleting Data from Storage

You can delete a single key-value pair of data from the storage or you can
delete all the data...
Multimedia
<video id="video" src="movie.webm" autoplay controls>
</video>

<audio id="audio" src="sound.mp3" controls> </a...
Multimedia
<video id="video" src="movie.webm" autoplay controls>
</video>

Example

<audio id="audio" src="sound.mp3" cont...
Graphics



 Canvas 2D
 Canvas 3D
 SVG
Canvas


The HTML5 <canvas> tag is used to draw graphics, on the fly, via scripting
(usually JavaScript).



Draw a rect...
Canvas 2D Example
What is SVG?







SVG stands for Scalable Vector Graphics
SVG is used to define vector-based graphics for the Web
...
Semantics and Markup
Semantic = Meaning.

Semantic elements = Elements with meaning.

A semantic element clearly describes...
Better semantic tags
HTML5 offers new semantic elements to clearly define different parts of a web
page:



<header>



...
Markup for applications

Example
New form types

Example
HTML and API's
HTML5 APIs
 Application Cache API
 DataTransfer API
 Command API
 Constraint Validation API
 History API
 MediaContr...
Application Cache API: Example
which means that a web application is cached, and accessible without
an internet connection...
History API:
The History objects provide a representation of the pages in the
session history of browsing contexts. back()...
- CSS is used to control the style and layout of Web pages.

- CSS3 is completely backwards compatible,so you will not hav...
CSS3 Borders
With CSS3, you can create rounded borders, add shadow to boxes, and use an
image as a border - without using ...
CSS3 Text Effects
CSS3 contains several new text features.

In this chapter you will learn about the following text proper...
Transforms and Transitions
Transforms
A transform is an effect that lets an element change shape, size and
position.
You c...
Animation
CSS3, we can create animations, which can replace animated images, Flash
animations, and JavaScripts in many web...
Thank you
Presentation about html5 css3
Presentation about html5 css3
Upcoming SlideShare
Loading in...5
×

Presentation about html5 css3

1,816

Published on

This presentation about HTML5 and CSS3 presents with example and described valid points with simple example code and live preview.

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,816
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
106
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Presentation about html5 css3

  1. 1. 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.
  2. 2. 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.
  3. 3. Types of CSS External Internal In-line <link href="path/to/file.css" rel="stylesheet">
  4. 4. Types of CSS External <link href="path/to/file.css" rel="stylesheet"> <style type="text/css"> ...... </style> Internal In-line
  5. 5. Types of CSS External <link href="path/to/file.css" rel="stylesheet"> <style type="text/css"> ...... </style> Internal In-line <p style=“color:#ffffff;"> ...... </p>
  6. 6. 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
  7. 7. 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.
  8. 8. Features of HTML5  Offline/Storage  Multimedia  Graphics  Semantics and Markup
  9. 9. 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
  10. 10. 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;
  11. 11. 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();
  12. 12. Multimedia <video id="video" src="movie.webm" autoplay controls> </video> <audio id="audio" src="sound.mp3" controls> </audio>
  13. 13. Multimedia <video id="video" src="movie.webm" autoplay controls> </video> Example <audio id="audio" src="sound.mp3" controls> </audio> Example
  14. 14. Graphics    Canvas 2D  Canvas 3D  SVG
  15. 15. 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.
  16. 16. Canvas 2D Example
  17. 17. 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
  18. 18. 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.
  19. 19. 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>
  20. 20. Markup for applications Example
  21. 21. New form types Example
  22. 22. HTML and API's
  23. 23. 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
  24. 24. 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
  25. 25. 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.
  26. 26. - 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
  27. 27. 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
  28. 28. CSS3 Text Effects CSS3 contains several new text features. In this chapter you will learn about the following text properties:  text-shadow  word-wrap
  29. 29. 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
  30. 30. 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
  31. 31. Thank you
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×