html5 + css3

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>
...  ...
</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>
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>
</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
Select images: <input type="file"
name="img" multiple="multiple" />
</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

html5 + css3

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

html5 + css3

Загружено:

Авторское право:

Доступные форматы

HTML5 / CSS3

Cooperation entre le World Wide Web Consortium (W3C) et le Web

WHATWG, travaillait sur de nouveaux formulaires et applications, le

En 2014, la W3C et le WHATWG annoncent leur sparation!

lObjectif ultime, faciliter laccs linformation via tous les devices et

Toutes les nouvelles fonctionnalits seront bases sur HTML, CSS et

Rduire au maximum la ncessit de plugins externes comme Flash,

Essayer de remplacer par des tags ce qui se fait en masse avec du

HTML5 doit supporter plusieurs devices (mobiles)

Doctype simple mmoriser,

Il ny a plus de type= dans la balise <link>, utilisation de rel= la

Nombreuses valeurs possibles pour rel : stylesheet, author, icon, prefetch,

Il ny a plus de type= dans la balise <script> non plus :

Header, footer, nav, section, article, aside, . et dautres

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

First-child last-child exemple li:first-child

<audio controls autoplay="true" loop preload="true">

Les mthodes sont les mmes : play(), pause(), load()

Avec les API cest encore mieux !

<object width="425" height="344">

<video width="320" height="240" controls="controls">

Lattribut controls ajoute les boutons de contrle (play, stop, etc.)

src : source de la vido

width et height : dimension de la vido. SI non spcifis, valent la largeur et la

poster : L'attribut poster permet de spcifier une image que le navigateur

Autoplay : Spcifie au navigateur de lancer la lecture de la vido

autobuffer : spcifie au navigateur de commencer le tlchargement de la

loop : un autre attribut boolen, indique de lire la vido en boucle.

Ajout de nombreux validateurs qui auparavant ncessitaient du JavaScript,

Ajout de nombreux types nouveaux pour les champs de formulaire,

Sortir des champs du formulaire, exemple

<input type="search" name="search_field" form="search_form"/>

<form id="search_form" action="search.php" method="post">

Permettent davoir plusieurs actions possibles dans un formulaire. Lattribut

<form action="post.php" method="post">

<input type="text" value="optional"><br/>

<input type="text" value="required" required>

<input type="time" value="06:06" required>

Avec comme CSS

<input type="submit formnovalidate="formnovalidate" value=Soumettre sans valider" />

En gnral, deux boutons de soumission

De nombreux nouveaux types de champs <input> ont t introduits, tous ne

color, date, datetime, datetime-local, email, month, number, range, search,

Nous allons voir des exemples de quelques un de ces champs

Choisissez une couleur: <input type="color" name="favcolor" />

Anniversaire: <input type="date" name="bday" />

adapte le clavier sur mobiles

Solution de repli : lib javascript jQuery UI, Dojo, etc.

Permet de choisir la date et lheure

Choisissez la semaine : <input type="week" name=no_semaine" />

<input type="month" name="bdaymonth" />

Idem date mais permet de choisir juste le mois

E-mail: <input type="email" name="useremail" />

Intrt : propose un clavier contextualis sur mobile ou tablette

Attributs implicites required, invalid etc.

<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

<input type="range" name=n" min="1" max="10" />

Attributs : idem que ceux de type=number