8/7/2019 Presentation HTML5 & CSS3

1/22

HTML5

CSS3HRICHI Mohamed

8/7/2019 Presentation HTML5 & CSS3

2/22

HTML 5

The World

is moving toHTML5

Steve JobsApple CEO

8/7/2019 Presentation HTML5 & CSS3

3/22

Were bettingbig on

HTML5Vic Gundotra

Google Vice President,Engineering

8/7/2019 Presentation HTML5 & CSS3

4/22

The futureof the Webis HTML5

Dean HachamovitchMicrosoft Corporate Vice President of Internet

Explorer

8/7/2019 Presentation HTML5 & CSS3

5/22

Cest quoi

lHTML5 ?

8/7/2019 Presentation HTML5 & CSS3

6/22

HTML 5 Le markup de la future gnration

dapplications Web

De nombreuses nouveauts

Cette version HTML5 est actuellement

en dveloppement

Beaucoup de parties ne sont pas encore

implmentes

8/7/2019 Presentation HTML5 & CSS3

7/22

HTML5 SIMPLIFICATION

(no xmlns)

8/7/2019 Presentation HTML5 & CSS3

8/22

HTML5 NOUVELLES BALISES Nouveaux lments smantiques

, , , etc.

Pas encore implments dans tous les

navigateurs Balise audio sans ncessiter un

plug-in

Balise vido

Balise convas Permet dedessiner dans une Bitmap

8/7/2019 Presentation HTML5 & CSS3

9/22

HTML5 NOUVELLES

BALISESAvant en HTML4 Aprs en HTML5

8/7/2019 Presentation HTML5 & CSS3

10/22

HTML5 COMPATIBILIT

8/7/2019 Presentation HTML5 & CSS3

11/22

HTML5

Dmos

8/7/2019 Presentation HTML5 & CSS3

12/22

CSS3 Coins arrondis avec la proprit

border-radius

Plusieurs fonds possibles en arrire-plan

Ombre porte avec la proprit box-shadow

Des effets sur le texte

Des boutons adorable

Des animations

Les dgrads

Les slecteurs

8/7/2019 Presentation HTML5 & CSS3

13/22

CSS3 COINS ARRONDIS

8/7/2019 Presentation HTML5 & CSS3

14/22

CSS3 MULTI BACKGROUND

8/7/2019 Presentation HTML5 & CSS3

15/22

CSS3 OMBRE PORTE

8/7/2019 Presentation HTML5 & CSS3

16/22

CSS3 effets sur le texte

8/7/2019 Presentation HTML5 & CSS3

17/22

CSS3 boutons

8/7/2019 Presentation HTML5 & CSS3

18/22

CSS3 LES ANIMATIONS

8/7/2019 Presentation HTML5 & CSS3

19/22

CSS3 Les dgrads

FireFox

Safari

8/7/2019 Presentation HTML5 & CSS3

20/22

CSS3 LES SLECTEURS

Slecteur dattribut

[att^=val] commence par val

[att$=ident] nit exactement parident

Combinateur dadjacence indirecte

div~img { border: 1px solid #ccc; }

Pseudo-classes

:nth-child() , :nth-last-child()

tr:nth-child(2n+1) // ligne paire

Pseudo-lment ::selection { background-color: blue; }

modier la couleur de fond du texte en coursde slection.

8/7/2019 Presentation HTML5 & CSS3

21/22

CSS3 COMPATIBILITY

8/7/2019 Presentation HTML5 & CSS3

22/22

MERCI