Veille HTML5/CSS3 sur Twitter: @fgribreau
Ceci est le support de ma conférence @EPSI_Nantes sur HTML5/CSS3.
Si vous remarquez une information incorrecte n'hésitez pas à me le faire savoir ;)
7. W3C
World Wide Web Consortium
«La W3C est un organisme de standardisation [...] chargé de promouvoir la
compatibilité des technologies du WEB telles que HTML, XHTML, [...], CSS, [...].»
8. W3C
World Wide Web Consortium
«La W3C est un organisme de standardisation [...] chargé de promouvoir la
compatibilité des technologies du WEB telles que HTML, XHTML, [...], CSS, [...].»
«Le W3C émet [...] des recommandations à valeur de standards
industriels.»
31. Vérifiez l’imbrication
<b><i>Texte en gras italique</b></i>
<b><i>Texte en gras italique</i></b>
✔ XHTML 1.1
Mais...mais...
Il y a une autre erreur...
44. HTML 2.0
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0 Level 2//EN">
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML Level 2//EN">
HTML 3.0
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.0//EN">
HTML 3.2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
frameset.dtd">
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN">
45. En résumé... le Doctype
<!DOCTYPE
html
PUBLIC
"-‐//W3C//DTD
XHTML
1.0
Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-‐frameset.dtd">
<!DOCTYPE
html
PUBLIC
"-‐//W3C//DTD
XHTML
1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-‐transitional.dtd">
46. En résumé... le Doctype
long
complexe
difficile à reteni
r
<!DOCTYPE
html
PUBLIC
"-‐//W3C//DTD
XHTML
1.0
Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-‐frameset.dtd">
<!DOCTYPE
html
PUBLIC
"-‐//W3C//DTD
XHTML
1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-‐transitional.dtd">
59. Formatage de la police
Alignement et contrôle de paragraph
Positionnement et affichage d'éléments
Marges et espace
Pseudo-formats
CSS Espaces intérieurs
Formatage de tableaux «Cascading Style Sheets»
Bordures
Formatage de listes
Couleurs et images d'arrière plan
105. «Le client souhaite des bordures arrondies»
« Il veut cette police là ! »
« Un texte sur plusieurs colonnes ! »
« Cette photo doit subir une rotation de 50° »
« Ce titre doit être ombré ! »
« ... »
113. Limites de HTML4 atteintes
Flash pour afficher du
contenu multimédia
114. Limites de HTML4 atteintes
Flash pour afficher du
contenu multimédia
Flash pour utiliser de
nouvelles polices
115. Limites de HTML4 atteintes
Flash pour afficher du
contenu multimédia
Flash pour utiliser de
nouvelles polices
Flash pour les animations
3D/complexes
116. Limites de HTML4 atteintes
Flash pour afficher du Vérification des formulaires
contenu multimédia en javascript
Flash pour utiliser de
nouvelles polices
Flash pour les animations
3D/complexes
117. Limites de HTML4 atteintes
Flash pour afficher du Vérification des formulaires
contenu multimédia en javascript
Flash pour utiliser de Librairies javascript lourdes
nouvelles polices pour gérer le drag&drop
Flash pour les animations
3D/complexes
118. Limites de HTML4 atteintes
Flash pour afficher du Vérification des formulaires
contenu multimédia en javascript
Flash pour utiliser de Librairies javascript lourdes
nouvelles polices pour gérer le drag&drop
Flash pour les animations Librairies javascript lourdes
3D/complexes pour animer le contenu
119. Limites de HTML4 atteintes
Flash pour afficher du Vérification des formulaires
contenu multimédia en javascript
Flash pour utiliser de Librairies javascript lourdes
nouvelles polices pour gérer le drag&drop
Flash pour les animations Librairies javascript lourdes
3D/complexes pour animer le contenu
193. Bordure arrondie avant CSS3
Equivalent HTML*:
<div class="block">
<div>
<div></div>
Contenu du block
</div>
<div></div>
<div></div>
<p>Contenu du block</p>
<div></div>
<div>
De 4 à 8 éléments
<div></div>
<div></div>
</div>
pour réaliser la bordure </div>
* d’autres formes sont possibles
194. Bordure arrondie avant CSS3
Images
Equivalent HTML*:
<div class="block">
<div>
<div></div>
Contenu du block
</div>
<div></div>
<div></div>
<p>Contenu du block</p>
<div></div>
<div>
De 4 à 8 éléments
<div></div>
<div></div>
</div>
pour réaliser la bordure </div>
Trop de CSS [...]
* d’autres formes sont possibles
195. Bordure arrondie avec CSS3
Contenu du block
HTML: <div>Contenu du block</div>
CSS3:
196. Bordure arrondie avec CSS3
Contenu du block
HTML: <div>Contenu du block</div>
CSS3: div {border-radius:20px;}
197. Bordure arrondie avec CSS3
Contenu du block
HTML: <div>Contenu du block</div>
CSS3: div {border-radius:20px;}
198. Les ombres avant CSS3
Contenu du block Texte avec Ombre
* d’autres formes sont possibles
199. Les ombres avant CSS3
Contenu du block Texte avec Ombre
Equivalent HTML*:
<div class="block">
<div>
<p>Contenu du block</p>
</div>
<div>
<div></div>
<div></div>
</div>
</div>
* d’autres formes sont possibles
200. Les ombres avant CSS3
Fla
sh
Contenu du block Texte avec Ombre
Equivalent HTML*:
<div class="block">
<div>
<p>Contenu du block</p>
</div>
<div>
<div></div>
<div></div>
</div>
</div>
* d’autres formes sont possibles
201. Les ombres avec CSS3
Contenu du block Texte avec Ombre
HTML: <p>Contenu du block</p> <p>Texte avec Ombre</p>
CSS3:
202. Les ombres avec CSS3
Contenu du block Texte avec Ombre
HTML: <p>Contenu du block</p> <p>Texte avec Ombre</p>
CSS3: p {box-shadow:3px 3px 8px
#000000;}
203. Les ombres avec CSS3
Contenu du block Texte avec Ombre
HTML: <p>Contenu du block</p> <p>Texte avec Ombre</p>
p {text-shadow:3px 3px
CSS3: p {box-shadow:3px 3px 8px
3px #000000;}
#000000;}
✔ W3C