HTML5 / CSS3
Philosophie et
Historique
HTML5 VERSION GOLD POUR 2022 !?
Cooperation entre le World Wide Web Consortium (W3C) et le Web
Hypertext Application Technology Working Group (WHATWG).
WHATWG, travaillait sur de nouveaux formulaires et applications, le
W3C sur XHTML 2. En 2006, ils ont dcid de cooprer pour crer HTML5.
En 2014, la W3C et le WHATWG annoncent leur sparation!
QUELQUES RGLES
lObjectif ultime, faciliter laccs linformation via tous les devices et
plateformes (la sparation entre le contenu et la mise en forme)
Toutes les nouvelles fonctionnalits seront bases sur HTML, CSS et
JavaScript
Rduire au maximum la ncessit de plugins externes comme Flash,
Essayer de remplacer par des tags ce qui se fait en masse avec du
script (menus, etc)
HTML5 doit supporter plusieurs devices (mobiles)
Structure dun
document
HTML5
SIMPLIFICATION FOND !
Doctype simple mmoriser,
Il ny a plus de type= dans la balise <link>, utilisation de rel= la
place
Nombreuses valeurs possibles pour rel : stylesheet, author, icon, prefetch,
next, prev, etc.
Il ny a plus de type= dans la balise <script> non plus :
<script src="script.js"></script> suffit
SIMPLIFICATION FOND !
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
... <!-- Le reste du contenu --> ...
</body>
</html>
Nouvelles
Balises
TROP DE <DIV> TUE <LE DIV>
Aujourdhui Hier
<body> <body>
<header>header de la page</header> <div class=header>header de la page</div>
<nav> le menu de navigation</nav> <div class=menu> le menu de navigation</div>
<section> <div class=contenu>
<article> <div class=souscontenu>
<h1>titre de larticle</h1> <h1>titre de larticle</h1>
<p> lorem upsum dolorit</p> <p> lorem upsum dolorit</p>
</article> </div>
</section> </div>
</body> </body>
</html> </html>
Header, footer, nav, section, article, aside, . et dautres
Rgles de
montage HTML
LES INVITABLES
Rinitialiser le tout : navigateur touche pas mon code !
Les Float/width : a floooote !
Gestion des background : la flexibilit fond
Les positions absolute/relative : Layers !
Et bien sr les margin, padding, width, height etc
Les slecteurs
CIBLER SANS ABUSER DES CLASSES
h1+p
#conteneur {
Section > p ou section p ? counter-reset:titrecp; }
First-child last-child exemple li:first-child
li:nth-child(2) #conteneur p:before{
p[lang] content:counter(titrecp);
p[lang|="en"] counter-increment:titrecp; }
Vido et audio
AUDIO TROP SIMPLE
<audio controls autoplay="true" loop preload="true">
<source src="mixdown.ogg" />
<source src="mixdown.mp3" />
</audio>
AUDIO : LES ATTRIBUTS
Attributs : les mmes que pour le tag vido part poster : src, preload,
autoplay, loop, controls
Les mthodes sont les mmes : play(), pause(), load()
Avec les API cest encore mieux !
Site rfrence : http://gs.statcounter.com/#desktop-browser_version-MA-
monthly-201606-201611-bar
LA VIDO HIER
<object width="425" height="344">
<param name="movie"
value="http://www.youtube.com/v/9sEI1AUFJKw&hl=en_GB&fs=1&">
</param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/9sEI1AUFJKw&hl=en_GB&fs=1&"
type="application/x-shockwave-flash"
allowscriptaccess="always" allowfullscreen="true"
width="425" height="344">
</embed>
</object>
LA VIDO AUJOURDHUI
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Votre navigateur ne supporte pas le tag video.
</video>
Lattribut controls ajoute les boutons de contrle (play, stop, etc.)
Le premier format support sera lu !
Noubliez pas de garder l alternatif en object
LA VIDO : LES ATTRIBUTS
src : source de la vido
width et height : dimension de la vido. SI non spcifis, valent la largeur et la
hauteur du fichier vido.
controls : Si cet attribut boolen est prsent, le navigateur affiche ses propres
contrles vido pour la lecture et le volume.
poster : L'attribut poster permet de spcifier une image que le navigateur
utilisera alors que la vido est en cours de tlchargement, ou jusqu' ce que
l'utilisateur commence la lecture de la vido.
LA VIDO : DAUTRES ATTRIBUTS
Autoplay : Spcifie au navigateur de lancer la lecture de la vido
automatiquement.
autobuffer : spcifie au navigateur de commencer le tlchargement de la
vido tout de suite, en anticipant sur le fait que l'utilisateur lira la vido.
loop : un autre attribut boolen, indique de lire la vido en boucle.
Formulaires
et inputs
FORMULAIRE HTML5
Enorme volution, alors que les formulaires navaient quasiment pas chang
depuis 1997
Ajout de nombreux validateurs qui auparavant ncessitaient du JavaScript,
Ajout de nombreux types nouveaux pour les champs de formulaire,
auparavant fournis par des bibliothques JavaScript
FORMULAIRE HTML5 : NOUVEAUTS
Sortir des champs du formulaire, exemple
<input type="search" name="search_field" form="search_form"/>
<form id="search_form" action="search.php" method="post">
<fieldset>
<legend>Options</legend>
<input type="checkbox"/>Option 1
<input type="checkbox"/>Option 2
</fieldset>
</form>
ATTRIBUTS FORMACTION ET FORMMETHOD
Permettent davoir plusieurs actions possibles dans un formulaire. Lattribut
"formaction" remplace dans ce cas lattribut "action" du formulaire
<form action="post.php" method="post">
<input type="submit"
formaction="preview.php"
formmethod="get"
value="Prvisualiser">
<input type="submit" value="Envoyer">
</form>
ATTRIBUT AUTOFOCUS
Permet de mettre le focus sur un champ particulier dun formulaire, sitt la page
charge entirement dans le navigateur.
<form action="demo_form.asp">
Nom:<input type="text" name="nom" autofocus="autofocus"/>
Prnom: <input type="text" name="pre"/>
<input type="submit"/>
</form>
LES PSEUDO CLASS CSS
<input type="text" value="optional"><br/>
<input type="text" value="required" required>
<input type="time" value="06:06" required>
Avec comme CSS
<style>
input:optional {background-color: silver}
input:required {background-color: fuchsia}
</style>
ATTRIBUT NOVALIDATE
<input type="submit formnovalidate="formnovalidate" value=Soumettre sans valider" />
Permet de soumettre un formulaire mme sil contient des champs qui doivent tre
valids et qui sont incorrects
Ex : un formulaire qui a un champ email ou un champ required et qui ne sont pas remplis
En gnral, deux boutons de soumission
LES NOUVEAUX CHAMPS <INPUT>
De nombreux nouveaux types de champs <input> ont t introduits, tous ne
sont pas encore supports, mme par les versions les plus rcentes des
navigateurs
color, date, datetime, datetime-local, email, month, number, range, search,
tel, time, url, week
Nous allons voir des exemples de quelques un de ces champs
LE CHAMP COLOR
Choisissez une couleur: <input type="color" name="favcolor" />
LE CHAMP DATE
Anniversaire: <input type="date" name="bday" />
adapte le clavier sur mobiles
Solution de repli : lib javascript jQuery UI, Dojo, etc.
LE CHAMP DATETIME-LOCAL
Permet de choisir la date et lheure
Support idem type=date
Anniversaire : <input type="datetime-local" name="bdaytime" />
LE CHAMP WEEK
Choisissez la semaine : <input type="week" name=no_semaine" />
LE CHAMP MONTH
<input type="month" name="bdaymonth" />
Idem date mais permet de choisir juste le mois
LE CHAMP EMAIL
E-mail: <input type="email" name="useremail" />
Intrt : propose un clavier contextualis sur mobile ou tablette
Attributs implicites required, invalid etc.
Possibilit de styler la saisie
LE CHAMP EMAIL
<!DOCTYPE html>
<html>
<head>
<style>
[required] {
border-color: #88a;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 255, .8);
}
:invalid {
border-color: #e88;
-webkit-box-shadow: 0 0 10px rgba(255, 0, 0, .8);
}
</style>
</head>
<body>
<form action="demo_form.asp">
Email: <input type="email" name="email" />
<input type="submit" />
</form>
</body>
</html>
LE CHAMP NUMBER
<input type="number" name="quantity" min="1" max="5" />
Attributs possibles : max, min, step, value (valeur par dfaut)
Clavier contextuel sur mobiles, validations idem type=email
LE CHAMP RANGE
<input type="range" name=n" min="1" max="10" />
Attributs : idem que ceux de type=number
Propose un clavier contextuel sur mobile
LE CHAMP TELEPHONE
Telephone: <input type="tel" name="usrtel" />
Intrt principal : tablettes, smartphones !
LE CHAMP OUTPUT
<form oninput="o.value=a.value*b.value">
<input name="a" value="2" type="number"> x <input name="b"
value="3" type="number"> = <output name="o">6</output>
</form>
Sitt quon a saisi les deux premires valeurs le champ <output> est mis jour,
pas besoin de JavaScript !
LE CHAMP DATALIST
Cette balise sert crer une liste de suggestions associe un champ
(comme dans Google Suggest).
L'id du tag <datalist> doit tre identique la valeur de lattribut "list " du
champ <input> associ.
LE CHAMP DATALIST : EXEMPLE
<form action="" method="">
<input list="browsers" name="browser" />
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit" />
</form>
Le champs de saisie va proposer une liste avec de lauto-compltion :
PRSNENTATION HTML DES IINPUTS
Aprs les nouveau Type, on trouver de nouveaux attributs qui sappliquent
tous les champs, et permet aussi de sortir des champs des formulaires lui
mme tout en y tant rattachs.
Cela permet plus de souplesse pour la cration de linterface utilisateur.
ATTRIBUT MULTIPLE
Attribut qui permet de saisir plusieurs information de la mme nature et
mme nom dans le mme champ du formulaire.
Peut-tre utilis aussi avec les types file et email
<form action="demo_form.asp">
Select images: <input type="file"
name="img" multiple="multiple" />
<input type="submit" />
</form>
ATTRIBUT AUTOFOCUS
Permet de mettre le focus sur un champ particulier dun formulaire, sitt la
page charge entirement dans le navigateur.
<form action="demo_form.php">
Nom:<input type="text" name="nom"
autofocus="autofocus"/><br />
Prnom: <input type="text" name="pre"/><br />
<input type="submit"/>
</form>
LUTILISATION DES PATTERNS
Possibilit de mettre des patterns et un placeholder
<input type="tel" placeholder="(555) 555-5555 pattern="^\(?\d{3}\)?[-\s]\d{3}[-
\s]\d{4}.*?$" />
Utile via les styles ou de la gestion dvnement JavaScript pour la validation
Merci
