Vous êtes sur la page 1sur 46

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