Académique Documents
Professionnel Documents
Culture Documents
05-02-21 1
Petite histoire de l’HTML
HTML 1 n’a jamais existé [1991].
HTML 2 aux mains de l’IETF.
HTML 3 Sir Tim reprend le pouvoir.
HTML 4 un bazar très puissant.
XHTML 1 de l’ordre et de la discipline.
XHTML 1.1, on craint le pire
XHTML 2, adieu le web !
05-02-21 2
Pourquoi XHTML 2 ?
HTML était mort depuis la version 4.
Les spécifications étaient troubles.
Vive le XML.
Arrivée du WHATWG !
XHTML2 ne verra jamais le jour.
Ian Hickson prend position.
Naissance du Web Hypertext Application Technology WG
05-02-21 3
W3C vs WHATWG
Démocratie contre monarchie
Web Forms 2.0 et Web Apps 1.0
Naissance de l’HTML5.
2006, l’année de la lucidité, quoique…
HTML5 et HTML 5
2009 le certificat de décès est rendu public
L’XHTML est mort, vive la syntaxe XHTML !
05-02-21 4
L’HTML5
Commit-Then-Review & Review-Then-Commit
L’HTML5 sera une proposition de recommandation…
… en 2022
10 ans pour l’élément « abbr »
Une évolution, pas une révolution et c’est tant mieux.
Si vous codez en HTML, vous codez déjà en HTML5 !
05-02-21 5
HTML5, les fondements
Ne pas réinventer la roue.
C’est grave, Doctype ?
<meta http-equiv="Content-Type" content="text/html; »
charset=UTF-8">, c’est fini !
<meta charset="UTF-8">
<script type="text/javascript" src="file.js"></script>
<script src="file.js"></script>
<link rel="stylesheet" type="text/css" href="file.css">
<link rel="stylesheet" href="file.css">
05-02-21 6
Rappel des termes
HTML
Une balise comporte
Des attributs
Contenant des valeurs
CSS
Un sélecteur
Définit des propriétés
Contenant des valeurs
05-02-21 7
L’élément a gonflé aux hormones
Un inline qui enveloppe !
<a href="index.html">
<h2>Mon super site</h2>
<p>Et tout ça dans un lien !</p>
</a>
05-02-21 8
<mark>
<strong> et <em> ne sont pas ce que l’ont croit !
Donner une importance au texte
Pourquoi pas un span et la propriété background-color ?
<figure> et <figcaption>
<figure>
BLOCK : Indique la présence d'une figure (image, code...)
illustrant le texte.
<figcaption>
INLINE : Description de la figure.
05-02-21 9
CSS3 : support et attentes
Polices exotiques
Ombrages
Transparence
Coins arrondis
Positionnement avancé
Rotation
05-02-21 10
Les sélecteurs… késako ?
Liste des sélecteurs : http://www.w3.org/Style/css3-
selectors-updates/WD-css3-selectors-
20010126.fr.html#selectors
05-02-21 11
Les types de police
.ttf : TrueType Font. Fonctionne sur IE9 et tous les autres
navigateurs.
.eot : Embedded OpenType. Fonctionne sur Internet Explorer
uniquement, toutes versions. Ce format est propriétaire de
Microsoft.
.otf : OpenType Font. Ne fonctionne pas sur Internet Explorer
.svg : SVG Font. Le seul format reconnu sur les iPhone et iPad
pour le moment.
.woff : Web Open Font Format. Nouveau format conçu pour le
Web qui fonctionne sur IE9 et tous les autres navigateurs.
05-02-21 12
Comment faire ?
@font-face
{ /* Définition d'une nouvelle police nommée LearningCurveProRegular */
font-family: 'LearningCurveProRegular';
src: url('LearningCurve_OT-webfont.eot');
src: url('LearningCurve_OT-webfont.eot?#iefix') format('embedded-opentype'),
url('LearningCurve_OT-webfont.woff') format('woff'),
url('LearningCurve_OT-webfont.ttf') format('truetype'),
url('LearningCurve_OT-webfont.svg#LearningCurveProRegular') format('svg');
}
05-02-21 13
Restons simples
Trouver des polices :
http://www.fontsquirrel.com/
http://www.dafont.com/fr/
http://www.google.com/webfonts#AboutPla
ce:about
05-02-21 14
Arrière-plans multiples
Images de fond :
body
{
background: url("soleil.png") fixed no-repeat top right,
url("neige.png") fixed;
}
La première image de cette liste sera placée par-dessus les
autres. Attention donc, l'ordre de déclaration des images a son
importance : si vous inversez le soleil et la neige dans le code CSS
précédent, vous ne verrez plus le soleil !
05-02-21 15
Le z-index, une solution ?
Les éléments avec le z-index le plus petit, seront les plus
« visibles ».
Pas de position, pas de z-index
Le z-index ne nous aidera donc pas !
05-02-21 16
Opacity, la transparence…
la propriété opacity et la notation RGBa.
Opacity :
Avec une valeur de 1, l'élément sera totalement opaque :
c'est le comportement par défaut.
Avec une valeur de 0, l'élément sera totalement
transparent.
Il faut donc choisir une valeur comprise entre 0 et 1. Par
exemple avec 0.6, votre élément sera opaque à 60%... et on
verra donc à travers !
05-02-21 17
Tout doit disparaître !
Opacity appliqué à un élément rendra tout le contenu de
cet élément transparent.
05-02-21 18
RGB…a
p
{
background-color: rgb(0,0, 255);
/* Pour les anciens navigateurs */
05-02-21 19
Et si on arrondissait les angles ?
p
{
border-radius: 10px 5px 10px 5px;
}
En haut à gauche
En haut à droite
En bas à droite
En bas à gauche
05-02-21 20
Des courbes elliptiques
Il est également possible d'affiner l'arrondi de nos angles
en créant des courbes elliptiques.
Il suffit d’indiquer 2 valeurs à la suite
p
{
border-radius: 200px 100px;
border-top-left-radius: 200px 100px;
top left
}
05-02-21 21
Générateur d’angles
http://border-radius.com
In the shadow…
Les ombres des boîtes
Les ombres du texte
05-02-21 22
box-shadow :
les ombres des boîtes
La propriété box-shadow s'applique à tout le bloc et
prend 4 valeurs dans cet ordre :
05-02-21 23
Mise à l’ombre…
p
{
box-shadow: 6px 6px 0px black;
}
05-02-21 24
Ombre du texte
p
{
text-shadow: 2px 2px 4px blue;
}
IE à partir de IE10
05-02-21 25
Rotation, un must
transform: rotate(Xdeg)
05-02-21 26
Trop de DIV tue le DIV
<header>
<footer>
<nav>
<section>
<aside>
<article>
05-02-21 27
Résumé d’uni mise en page
<header> - l’en-tête
<footer> - le pied-de-page
<nav> - les principaux liens de navigation - Menu(s) du
site
<section> - les parties thématiques de la page
<aside> - les informations complémentaires
<article> - Un article provenant d'une autre page ?
05-02-21 28
05-02-21 29
HTML5shiv
Placez ce code dans la balise <head>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com
/svn/trunk/html5.js"></script>
<![endif]-->
Sans rentrer dans le détail, sachez que <!--[if lt IE 9]> est
un commentaire conditionnel.
Ne sera lu que par IE < 9
05-02-21 30
Rappel sur le centrage de blocs
width: 350px;
On a indiqué une largeur (obligatoire)
margin: auto;
On peut donc demander à ce que le bloc soit centré avec
"auto "
Text-align permettra dès lors de centrer le contenu.
05-02-21 31
Le centrage vertical
vertical-align ne permet pas :
De positionner verticalement un texte dans un bloc
quelconque (DIV, P, etc...)
De positionner verticalement un bloc dans un autre bloc.
Ça sert à quoi ?
Principalement pour les tableaux…
Ou grâce à l’astuce table-cell
(impossible pour IE<7)
05-02-21 32
Flottant à tout-va
plutôt que float :
inline-block
Comportement des input par défaut
fonctionnent seulement pour les inline sous IE < 8
Ça sort d’où ?
Display
inline
block
inline-block
05-02-21 33
Et après ?
Retour à vertical-align :
baseline : aligne la base de l'élément avec celle de
l'élément parent (par défaut)
top : aligne en haut
middle : aligne au milieu
bottom : aligne en bas
05-02-21 34
Accepter l’échec
IE fait des progrès
Problème des mises à jour utilisateur
dégradation gracieuse
Accepter l’imperfection du design mais garder la perfection
de la navigation
05-02-21 35
WebForms 2.0
autofocus
required
placeholder
autocomplete
05-02-21 36
Javascript inutile ?
<input type="email" />
<input type="url" />
<input type="tel" />
<input type="number" />
<input type="range" />
<input type="color" />
05-02-21 37
Manipuler une date
<input type="date" />
05-02-21 39
Insérer de l’audio
<audio controls>
<source src="rango.mp3"></source>
<source src="rango.ogg"></source>
Veuillez mettre votre navigateur à jour !
</audio>
05-02-21 40
Video
<video src= " chemin "></video>
poster (image à la place de la vidéo, avant lancement)
controls (barre de contrôle)
width , height
loop (jouer en boucle)
autoplay (la vidéo sera jouée en boucle)
Preload (on ne peut pas le forcer, ça dépend du nav.)
auto (par défaut)
metadata : charge uniquement les métadonnées (durée, dimensions,
etc.).
none : pas de préchargement. Utile si vous nous voulez pas gaspiller de
bande passante sur votre site.
05-02-21 41
Formats video
3 éléments indispensables :
Un format conteneur : c'est un peu comme une boîte qui
va servir à contenir les deux éléments ci-dessous.
Un codec audio
Un codec vidéo
H.264 : l'un des plus puissants et des plus utilisés aujourd'hui...
mais il n'est pas 100% gratuit. (flou juridique)
Ogg Theora : un codec gratuit et libre de droits, mais moins
puissant que H.264. (Linux)
WebM : un autre codec gratuit et libre de droits, plus récent.
Proposé par Google, c'est le concurrent le plus sérieux à H.264 à
l'heure actuelle.
05-02-21 42
Audio et Video
http://www.mirovideoconverter.com/
05-02-21 43
WebApps
Canvas : permet de dessiner au sein de la page web, à l'intérieur de
la balise HTML <canvas>.
SVG : permet de créer des dessins vectoriels au sein des pages web.
Drag & Drop : permet le glisser / déposer des objets dans la page
web.
Web Sockets : permet des échanges plus rapides en temps réel
entre le navigateur du visiteur et le serveur qui gère le site web
(c'est une sorte d'AJAX amélioré). C'est un peu l'avenir pour les
applications web, qui pourront devenir aussi réactives que les vrais
programmes.
WebGL : permet d'introduire de la 3D dans les pages web, en
utilisant le standard de la 3D OpenGL. Les scènes 3D sont
directement gérées par la carte graphique.
05-02-21 44
Bibliographie
CSS avancées Vers HTML 5 et CSS 3, Raphaël Goetter,
Eyrolles.
HTML5 pour les Web Designers, Jeremy Keith, Eyrolles
http://html5demos.com/
http://www.alsacreations.com/article/lire/947-osez-
creer-site-html5-css3.html
http://www.html5.fr/
http://www.w3.org/
...
05-02-21 45