<!-- Slide number: 1 -->
HTML5
OUALI Mohamed
<!-- Slide number: 2 -->
HTML & CSS : D finition
HTML = HyperText Markup Language
Cr en 1991
Fonction : donner du sens et structurer du contenu
CSS = Cascading Style Sheet
Cr en 1996
Fonction : mettre en forme le contenu en lui ajoutant du style
<!-- Slide number: 3 -->
HTML & CSS : Versions
Versions actuelles
HTML5 et CSS3
Toutes les deux non finalis es (encore en d veloppement) mais totalement stables et d j tr s largement utilis es.
Introduisent de nouvelles fonctionnalit s : ins rer des vid os, bordures arrondies, etc.
<!-- Slide number: 4 -->
El ments, balises et attributs
El ments :
D finissent des objets dans une page web
L l ment p d finit un paragraphe
L l ment a d finit un lien
Etc
G n ralement constitu s dune paire de balises
Balise ouvrante : <p>
Balise fermante : </p>
Exception : balises orphelines comme <br/>
<!-- Slide number: 5 -->
El ments, balises et attributs
Attributs :
Propri t s utilis es pour donner des indications suppl mentaires aux l ments
Ex: Indiquer la cible dun lien.
l ment a
Balise ouvrante
Balise fermante
<a href="http://www.youtube.fr">Le site YouTube</a>
attribut
<!-- Slide number: 6 -->
El ments de types Block et Inline
Tout l ment, en HTML, est soit un l ment de type block soit un l ment de type Inline
| El ments block | El ments inline |
| --- | --- |
| p | em |
| h1, h2, h3 , & | strong |
| Header, article, footer, div, & | mark |
| ol, u, dl | a |
| table | Img |
| & | & |
<!-- Slide number: 7 -->
El ments de types Block et Inline
Les l ments de type BLOCK
Commencent sur une nouvelle ligne
Occupent toute la largeur disponible
Peuvent tre imbriqu s les uns dans les autres
Peuvent contenir des l ments de type INLINE
Les l ments de type INLINE
Ne commencent pas sur une nouvelle ligne
Occupent seulement la largeur n cessaire
Peuvent contenir dautres l ments de type inline mais pas d l ments de type block
! (Picture2.jpg)
<!-- Slide number: 8 -->
Structure minimale dune page en HTML5
Doctype : <!DOCTYPE html>
Pour indiquer le type du document
El ments :
html : va contenir toute la page web
head : va contenir des informations sur la page
Title : le titre de la page
meta : pour les meta donn es (charset)
body : tout le contenu html de la page
<!-- Slide number: 9 -->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document sans nom</title>
</head>
<body>
</body>
</html>
<!-- Slide number: 10 -->
<!-- Slide number: 11 -->
Publicité
<!-- Slide number: 12 -->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document sans nom</title>
</head>
<body>
<p>un paragraphe</p>
</body>
</html>
<!-- Slide number: 13 -->
<!-- Slide number: 14 -->
<!-- Slide number: 15 -->
object HTMLParagraphElement
Attributs :
childNodes, children, className, currentStyle, dir, document, filters, id, innerHTML, innerText, lang, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, style, title, uniqueID, tagName &
M thodes :
getAttribute, getElementsByTagName, normalize, removeAttribute, setAttribute, appendChild, cloneNode, hasChildNodes, insertBefore, removeChild, removeNode, replaceChild
<!-- Slide number: 16 -->
XHTML
XHTML = eXtensible HTML
Version plus stricte, plus codifi e de HTML
Cr en 2000 pour succ der au HTML puis abandonn en 2009 (ou plus exactement int gr dans le HTML5)
<!-- Slide number: 17 -->
L diteur de texte
Pour coder en HTML ou en CSS, nous pouvons utiliser plusieurs outils :
NotePad++
Komodo
SublimeText
Dreamweaver
Microsoft Visual Studio
&
<!-- Slide number: 18 -->
Fonctionnalit s HTML5
Balises s mantiques
Nouvelle API de s lection
Nouveaux types de champs de saisie de formulaire
Int gration Audio et Vid o
Graphiques(canvas et SVG)
Drag & Drop
Web storage API de communications
G olocalisation
&
<!-- Slide number: 19 -->
Fonctionnalit s CSS3
Des nouveaux s lecteurs CSS
Les ombres et les coins arrondis
Les transitions et les transformations
Le contenu g n r (:before et :after)
Les Web Fonts
Les Media Queries
<!-- Slide number: 20 -->
Respectez la s mantique !
Exemple d'un span inutile :
On doit utiliser la balise <strong> qui sert indiquer l'importance !
Ceci est compl tement absurde puisqu'il existe des balises faites sp cialement pour les titres (<h1>, <h2>&).
<span class="important">
<div class="titre">.
<!-- Slide number: 21 -->
<!-- Slide number: 22 -->
Nouvelles balises s mantiques
<header> : en-t te de page ou de section
<section> : section de contenu
<article> : article de composition ind pendante
<nav> : liens de navigation
<figure> : regroupement des images et de leur description
<footer> : pied de page ou de section
<aside> : un contenu part (sans relation directe avec le contenu de la page). Exp: pub, etc.
<!-- Slide number: 23 -->
! (Espacer serv ducontenu4.jpg)
<!-- Slide number: 24 -->
! (Picture4.jpg)
<!-- Slide number: 25 -->
Nouvelles balises s mantiques
Ces balises peuvent tre imbriqu es les unes dans les autres.
Ainsi, une section peut avoir son propre en-t te.
Ces balises ne s'occupent pas de la mise en page.
Elles servent seulement indiquer l'ordinateur le sens du texte qu'elles contiennent.
<!-- Slide number: 26 -->
Nouvelles balises s mantiques
On pourrait tr s bien placer l'en-t te en bas de la page si on le souhaite.
l'heure actuelle ces balises ont encore assez peu d'utilit
Publicité
N anmoins, il est assez probable que, dans un futur proche, les ordinateurs commencent tirer parti intelligemment de ces nouvelles balises.
<!-- Slide number: 27 -->
Nouvelles balises s mantiques
Internet Explorer 8 et versions inf rieures n cessitent un code JavaScript afin de cr er au pr alable ces l ments dans leur DOM sous peine de ne rien afficher du tout
il suffira d'appeler un script externe d s le d but de la page de mani re sp cifique IE :
<!-- >
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<! -->
<!-- Slide number: 28 -->
Nouvelles balises HTML
<output> : r sultat dun calcul
<details> : un contenu extensible
<summary> : label for details
<meter> : % ou mesure dans un intervalle
Utilisez des % ou des fractions ou les attributs min max value
<progress max value> : laccomplissement des t ches
<figure> et <figcaption>
<!-- Slide number: 29 -->
Nouvelles balises HTML
L l ment output
repr sente le r sultat d'un calcul ou d'une sortie produite par le navigateur ou le serveur. Il accepte comme attribut : for, name, et form.
La valeur de l'attribut for de l' l ment <output> reprend les valeurs des id de chaque champ <input> n cessaire au calcul.
L'attribut form de l'<output> reprend la valeur de l'id du formulaire qui comprend les diff rents champs servant au calcul.
Ce dernier point est important car l' l ment output n'est pas forc ment enfant d'un l ment form.
<!-- Slide number: 30 -->
Nouvelles balises HTML
L l ment output - exemple
<form oninput="x.value=a.value">
<input type="text" id="a">
<output name="x" for="a"></output>
</form>
<!-- Slide number: 31 -->
Nouvelles balises HTML
L l ment progress
indique la progression d'une t che au cours du temps, sans que l'on ne s'attache une valeur pr cise mais plut t un pourcentage.
Par exemple d butant z ro et avan ant jusqu' atteindre les 100%
Il est souvent utilis en conjonction avec JavaScript pour afficher la progression d'une t che
<progress
id="avancement"
value="40"
max="100
>
</progress>
<!-- Slide number: 32 -->
Nouvelles balises HTML
L l ment meter
repr sente une jauge mesurant une valeur comprise entre un minimum et un maximum, soit dans un intervalle tabli,
Ainsi les valeurs n gatives peuvent tre utilis es, contrairement <progress>
Son usage est principalement destin indiquer un tat, stable ou voluant au cours du temps
| Attribut | Valeurs | R le |
| --- | --- | --- |
| name | texte | Nom cl de la paire cl /valeur la soumission du formualire |
| value | nombre virgule flottante | Valeur de la jauge |
| max | nombre virgule flottante | Limite maximale de l'intervalle |
| min | nombre virgule flottante | Limite minimale de l'intervalle |
| low | nombre virgule flottante | Limite haut du segment de l'intervalle qualifi de "bas" |
| high | nombre virgule flottante | Limite basse du segment de l'intervalle qualifi de "haut" |
| optimum | nombre virgule flottante | Point optimal de position dans l'intervalle |
<!-- Slide number: 33 -->
Nouvelles balises HTML
L l ment meter - exemples
<p>Nombre de personnes inscrites :
<meter min="0" max="100" value="50">50 places</meter>
</p>
<p>Espace utilis dans votre webmail :
<meter low="1000" high="6500" max="7500" value="6985">6 985 Mo</meter>
</p>
<!-- Slide number: 34 -->
Nouvelles balises HTML
L l ment details
permet de baliser un contenu quelconque (texte, image, listes, tableaux, formulaires, etc) ayant pour r le d'apporter une information ou des d tails suppl mentaires.
Le navigateur pourra masquer ces informations par d faut, et les d ployer la demande de l'utilisateur.
Une ic ne pourra indiquer l' tat de l' l ment : d ploy (visible) ou compact : seul le r sum reste visible.
Ce r sum , assimilable un titre ou une l gende, est apport par <summary>
Lattribut open sp cifie la visibilit initiale de l' l ment (visible ou non l'utilisateur)
<!-- Slide number: 35 -->
Nouvelles balises HTML
L l ment details - exemple
<details open>
Publicité
<summary>Caract ristiques techniques</summary>
<table>
<tr>
<th>Nom</th>
<th>D tails</th>
</tr>
<tr>
<td>Mati re</td>
<td>Inox alimentaire</td>
</tr>
<tr>
<td>Dimensions</td>
<td>140x120 mm, hauteur 30 mm</td>
</tr>
</table>
</details>
<!-- Slide number: 36 -->
Nouvelles balises HTML
L l ment datalist
Permet de lier une liste de choix un l ment input
Il fournit des fonctionnalit s d'auto-compl tion ou d'auto-suggestion, dans un formulaire classique ou un champ de recherche
<input list="pays" type="text" id="monPays" placeholder="Choisir votre pays" size="30" />
<datalist id="pays">
<option value="Tunisie">
<option value="Alg rie">
<option value="France">
<option value="USA">
</datalist>
<!-- Slide number: 37 -->
Figure et Figcaption
El ments cr s pour marquer s mantiquement du contenu (images, audio, vid o&)
Utiliser l l ment figure (type block) pour envelopper du contenu qui sert la compr hension.
Figcaption = accoler une l gende au contenu.
<!-- Slide number: 38 -->
Les formulaires
Principalement utilis s pour recueillir des donn es propos de vos utilisateurs.
Limites de HTML : on ne peut pas traiter les donn es issues dun formulaire en HTML ni les stocker.
<!-- Slide number: 39 -->
Les formulaires
Structure g n rale :
<form action="" method="post">
&. une suite de champs &.
<input >
<label>
&&.
</form>
<!-- Slide number: 40 -->
Les formulaires
INPUT
<input type= "valeur" />
Exemples
<input type="text" name="login" id="login">
<input type="password" name="mdp" id="mdp">
<!-- Slide number: 41 -->
Les formulaires
les Web Forms ou
HTML5 Forms
| Types standards |
| --- |
| Button |
| Checkbox |
| File |
| Hidden |
| Image |
| Password |
| Radio |
| Reset |
| text |
| Nouveaux Types HTML5 |
| --- |
| Color |
| Date |
| Datetime |
| Email |
| Month |
| Number |
| Range |
| Search |
| Tel |
| Time |
| url |
Publicité
| Week |
<!-- Slide number: 42 -->
HTML5 Forms
Champ de type tel
Il s'agit d'une d clinaison d'un champ de type text
Il n'y a donc pas de pattern pr cis qui v rifierait si au moins un chiffre est renseign .
sur certains navigateurs de SmartPhone, l'entr e du num ro de t l phone est facilit e par le basculement un clavier de type num rique.
Champ de type URL
Il s'agit d'une d clinaison d'un champ de type text
le navigateur attend cette fois un format bien sp cifique devant respect un pattern de type url.
Tous les types d'URL sont admis (ftp://, mailto:, http://, etc.).
<!-- Slide number: 43 -->
HTML5 Forms
Champ de type email
Il s'agit d'une d clinaison d'un champ de type text
Il est quivalent au type url, seul le format attendu change.
Ce champ attend au minium un caract re (caract re non accentu comprenant les s parateurs tiret ou underscore) suivi d'un @ suivi son tour d'un caract re.
Champ de type search
Ce type de champ est interpr t diff remment en fonction des navigateurs.
Seul Webkit lui conf re des fonctions suppl mentaires par rapport au champ text classique
<!-- Slide number: 44 -->
HTML5 Forms
Champ de type date
vous permet d'activer une aide au remplissage (type datepicker) pr sente uniquement sur quelques navigateurs et diff rente de l'un l'autre.
Les attributs min et max peuvent tre appliqu s sur ce type de champ pour offrir un intervalle pr cis de dates
<input type="date"
max="2015-12-31"
min="2015-01-01 "
/>
<!-- Slide number: 45 -->
HTML5 Forms
Champ de type time
permet de renseigner une heure, avec plus ou moins de pr cision.
Les attributs min et max peuvent tre appliqu s
Lattribut step permet dajouter un pas
Champ de type datetime
est une combinaison des deux type date et time.
Il permet de renseigner une date et une heure pr cise dans un m me champ (visuel)
<!-- Slide number: 46 -->
HTML5 Forms
Champ de type month
permet de renseigner un mois dans une ann e.
La liste des attributs compatibles reste la m me que pour le type date.
Le format attendu correspond cette syntaxe : aaaa-mm (ex: 2015-01).
Champ de type week
permet de renseigner une semaine dans une ann e.
Il attend un format de type 2015W05 qui correspond l'ann e et au num ro de semaine dans celle-ci.
<!-- Slide number: 47 -->
HTML5 Forms
Champ de type number
permet de renseigner une valeur num rique.
Lorsque ce type de champ est pris en charge par le navigateur, celui-ci renvoie la valeur num rique renseign e dans ce champ.
Si un autre type de contenu est renseign , aucune valeur n'est retourn e la soumission du formulaire.
Les attributs value, step, min et max peuvent tre utilis s
Champ de type range
Ce champ propose un contenu valu approximatif.
par d faut la valeur la plus basse est 0, la plus haute 100
Ce type de champ retourne une valeur num rique qui correspond la position du curseur.
Les attributs value, step, min et max peuvent tre utilis s
<!-- Slide number: 48 -->
HTML5 Forms
Champ de type color
permet de transformer le champ pour s lectionner un code couleur dans une palette.
Nest pas compatible avec tous les navigateurs
! (Picture2.jpg)
<!-- Slide number: 49 -->
Les attributs HTML5
placeholder
disabled
required
autocomplete
autofocus
list