View
222
Download
0
Category
Tags:
Preview:
Citation preview
HTML5/CSS3
Sommaire
1. Introduction
2. HTML51. Syntaxe
2. Sémantique
3. Fonctionnalités
3. CSS31. Sélecteurs
2. Mise en forme
3. Styles
4. Compatibilité
5. Conclusion
6. Questions?
7. Documentation
Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation
Introduction
Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation
html5
Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation
Syntaxe
<!DOCTYPE html>
<html lang=“fr">
<head>
<meta charset= “utf-8“ >
<link rel= “stylesheet“ href= “style.css“ />
<script src= “script.js“ />
</head>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd “ >
<html lang=“fr">
<head>
<meta http-equiv = “Content-Type“ content= “text/html;charset=utf-8“ >
<link rel= “stylesheet“ type=“text/style” href= “style.css“ />
<script type=“text/javascript” src= “script.js“ />
</head>
Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation
Sémantique
Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation
Sémantique
<hgroup>
<h1>Titre principal</h1>
<h2>Sous-titre</h2>
</hgroup>
Fonctionnalités
datalist
Nouveaux types d’input
Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation
<input type="text" list= "options“ >
<datalist id= "options“ >
<option value= "Option 1“ />
<option value= "Option 2“ />
…
</datalist>
</input>
Fonctionnalités
range
Nouveaux types d’input
Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation
<input type=“range" >
Fonctionnalités
number
Nouveaux types d’input
Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation
<input type=“number" >
Fonctionnalités
mailurltelcolorpaterndate…
Nouveaux types d’input
Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation
FonctionnalitésIntroduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation
barre de progression
<progress max=“100" value="50" >50 %</progress>
Fonctionnalités
Contenu éditable
Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation
FonctionnalitésIntroduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation
Drag & Drop
Drag in
Drag out
Fonctionnalités
Gestion native de l’audio et de la vidéo
Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation
Fonctionnalités
des images dynamiques avec l’API 2d
canvas
Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation
Fonctionnalités
canvas
Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation
de la 3d en temps réel avec webGL
démos: helloracer.com www.ninepointfive.org
Fonctionnalités
une page en dialogue constant avec le serveur.
WebSockets
Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation
FonctionnalitésIntroduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation
Géolocalisation
Fonctionnalités
Local storage pour les applications offline…
Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation
…IndexedDB pour communiquer avec SQL
Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation
CSS3
Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation
Sélecteurs
:nth-child(even) :nth-child(odd)input[type=‘number’]:not():first-child
Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation
Mise en forme
display: inline-block
Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation
Mise en forme
display: box
positionnement sur mesure
Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation
Mise en forme
Colonnes<p style = ‘column-count: 3’ ><p>
Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation
Styles
Bordures personnalisées
div{ border-image: url("border.png") 27 round stretch; }
Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation
Styles
Bordures arrondies
div{ border-radius: 20px;}
div{ border-radius: 20px 0px;}
div{ border-radius: 20px 20px 0px 20px;}
Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation
Styles
Ombres
div{ box-shadow: 12px 12px 6px black; text-shadow: 6px 6px 4px black;}
Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation
Styles
Dégradés
radial-gradient(60% 60%, ellipse closest-side, #93ccf3, #0b074a 140%)
background: linear-gradient(left top, #0b074a, #93ccf3 50%, #0b074a)
Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation
Styles
div{ box-shadow: box-reflect: below 4px linear-gradient(transparent, white);}
Réflexion
Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation
Styles
Transparence
div{ opacity: 0.5;}
Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation
Styles
Transformations
div{ transform: skew(-30deg, 0deg);}
div{ transform: rotate(-30deg);}
Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation
Styles
Transitions
;
div{ transition-property: all; transition-duration: 3s;}
Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation
Styles
@font-face
{
font-family: 'trashco';
src: url('trashco.eot');
}
Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation
Internet Explorer
Firefox
Chromium
Opera
Safari
0 10 20 30 40 50 60 70 80 90
8 8,7%6 68,9
16 75,4
10 48,9
5.0 54,3
9 29,7%
9 69,5
17 78,8
11 60,2
5.1 63,6
10 64,4
11 70,6
18 81,5
12 72,4
5.2 74,1
Su
pp
ort
HT
ML
5
Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation
Nombreuses fonctionnalités intéressantes mais support encore trop faible
Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation
Questions?
Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation
Sites en français www.html5-css3.fr www.alsacreation.com
Sites en anglais www.w3.org/CSS html5demos.com
Recommended