IST - RIT 2 TechnoWeb : HTML5 1/32
Technologie Web
HTML5
ILBOUDO Ibrahim
Institut Supérieur de Technologie (IST)
IST - RIT 2 TechnoWeb : HTML5 2/32
Plan
1 Introduction
2 Langage à balise
3 Éléments HTML5
4 Les formulaires
IST - RIT 2 TechnoWeb : HTML5 3/32
Introduction (1/4)
Historique
Années 1990 : HTML est créé par Tim Berner-Lee au Centre
Européen de Recherche Nucléaire (CERN)
1995 : HTML 2.0 normalisation par l’IETF 1
1996 : HTML 3.2 ajout des tables, des applets (Java), etc.
1998 : HTML 4.01 ajout des feuilles de styles, des frames, etc.
2000 : XHTML 1.0 reformulation de HTML 4 en XML 1.0
2002-2006 : XHTML 2.0 en cours de spécification
2007-maintenant : HTML5
Normalisation par le W3C 2 depuis 1996.
1. Internet Engineering Task Force
2. World Wide Web Consortium [Link]
IST - RIT 2 TechnoWeb : HTML5 4/32
Introduction (2/4)
Principe de fonctionnement (Rappel)
Requête (URL) Ressource ?
Réponse Ressource
Client Web
(navigateur) Serveur Web
1 Le navigateur effectue une requête spécifiée à travers l’URL
2 Le serveur retourne un flot typé de données
3 Le navigateur interprète le flot de données et l’affiche
IST - RIT 2 TechnoWeb : HTML5 5/32
Introduction (3/4)
Langages à balises
Un fichier HTML/XHTML est un fichier texte (cf. protocole HTTP)
contenant des balises appelant des commandes, dont l’action est
limitée au texte contenu entre la balise de début et la balise de fin.
Extension HTML : .htm ou .html ; XHTML : .xhtml
Balise de début : <commande>
Balise de fin : </commande>
Balise auto-fermante : <commande/>
Commentaires : <!--Ceci est un commentaire-->
Remarque : retours chariot, succession d’espaces et/ou de tabulations ne
sont pas pris en compte.
IST - RIT 2 TechnoWeb : HTML5 6/32
Introduction (4/4)
Squelette d’un document HTML5
HTML5 ([Link])
< !DOCTYPE h t m l>
<h t m l>
<h e a d>
< t i t l e >Page HTML 5 Type</ t i t l e >
<meta h t t p −e q u i v=" c o n t e n t −t y p e " c o n t e n t=" t e x t / h t m l ; c h a r s e t=u t f −8" />
</ h e a d>
<body>
<p> H e l l o w o r l d !</ p>
</ body>
</ h t m l>
IST - RIT 2 TechnoWeb : HTML5 7/32
Langage à balise (1/5)
3 types d’éléments
Élément bloc (div) : élément précédé et suivi d’un saut de ligne. Il
forme une boite dans lequel est inclus du texte ou d’autres éléments.
Exemples : les paragraphes, les tableaux, ...
Élément inline (span) : élément qui s’insère dans le fil du texte et
ne peut contenir que du texte ou d’autres éléments inlines.
Exemples : les éléments typographiques italique, gras, ...
Élément auto-fermant : élément qui est une balise ouvrante et
fermante à la fois. Elle n’a donc pas de contenu. Ce sont soit des
balises de type bloc, soit de type inline.
Synthaxe : <balise> ou <balise/>
Exemples : saut de ligne, séparation horizontale ...
IST - RIT 2 TechnoWeb : HTML5 8/32
Langage à balise (2/5)
Les balises
Apporte du sens
<title></title> : titre de la page
<h1></h1> : grand titre
<h2></h2> : titre de second niveau
<p></p> : paragraphe
<code></code> : portion de code informatique
Mise en forme
<br/> : génère un saut de ligne
Structuration d’un document : <section>, <article>, <header>,
<footer>, <aside>, <nav>
IST - RIT 2 TechnoWeb : HTML5 9/32
Langage à balise (3/5)
Exemple de document structuré
<header>
<section> <article>
<header>
<article>
contenu
<article> <aside> (<p>, <div>, ...)
<article> <aside>
<nav>
<footer>
<footer>
IST - RIT 2 TechnoWeb : HTML5 10/32
Langage à balise (4/5)
Notion de flux
Le flux HTML :
Les balises sont lues séquentiellement, ...
... sont affichées au fur et à mesure par le navigateur, ...
... les unes en dessous des autres
Remarque
L’affichage se modifie au fur et à mesure du chargement de la page et de
ses composants (texte, images, etc.)
IST - RIT 2 TechnoWeb : HTML5 11/32
Langage à balise (5/5)
Attributs
Il est possible de transmettre des informations à traiter aux balises :
Balise de début :
<balise[ attribut1=valeur1[ attribut2=valeur2 ...]]>
...
</balise>
Balise auto-fermante :
<balise[ attribut1=valeur1[ attribut2=valeur2 ...]]/>
Exemples
<code langage="java">[Link]("Alerte");</code>
<br class="double" />
IST - RIT 2 TechnoWeb : HTML5 12/32
Éléments HTML5 (1/10)
Titres (éléments bloc)
Il y a 6 niveaux de titre :
<h1> ... </h1>
<h2> ... </h2>
<h3> ... </h3>
...
<h6> ... </h6>
IST - RIT 2 TechnoWeb : HTML5 13/32
Éléments HTML5 (2/10)
Paragraphes (éléments bloc)
l’élément de bloc <p> ... </p> permet de construire des
paragraphes et par un attribut align spécifie la justification.
l’élément inline <br/> permet de contrôler les sauts de lignes.
Exemple
< !DOCTYPE h t m l>
<h t m l>
<h e a d>
< t i t l e >P a r a g r a p h e</ t i t l e >
<meta h t t p −e q u i v=" c o n t e n t −t y p e " c o n t e n t=" t e x t / h t m l ; c h a r s e t=u t f −8" />
< s t y l e t y p e=" t e x t / c s s ">
p { t e x t −a l i g n : j u s t i f y }
</ s t y l e>
</ h e a d>
<body>
<p>p a r a g r a p h e p a r a g r a p h e p a r a g r a p h e p a r a g r a p h e
p a r a g r a p h e p a r a g r a p h e p a r a g r a p h e p a r a g r a p h e <b r /> p a r a g r a p h e
p a r a g r a p h e p a r a g r a p h e p a r a g r a p h e p a r a g r a p h e p a r a g r a p h e</ p>
</ body>
</ h t m l>
IST - RIT 2 TechnoWeb : HTML5 14/32
Éléments HTML5 (3/10)
Texte structuré (éléments inline)
em : mise en exergue
strong : mise en exergue plus importante
cite : extrait ou référence à une autre source
code : portion de code informatique
samp : exemple de résultat issu d’un programme
kbd : frappe au clavier devant être effectuée par l’utilisateur
var : instance d’une variable ou le paramètre d’un programme
dfn : terme encadré a une définition
abbr : forme abrégée
...
IST - RIT 2 TechnoWeb : HTML5 15/32
Éléments HTML5 (4/10)
Listes (éléments bloc)
Chaque item d’une liste est déclaré par <li> ... </li>.
Liste simple : Liste numérotée :
< ul > < ol >
< li > item </ li > < li > item </ li >
< li > item </ li > < li > item </ li >
< li > item </ li > < li > item </ li >
</ ul > </ ol >
Il existe aussi des listes de définitions (<dl> ... </dl>), les items sont
déclarés par les balises <dt> pour le terme et <dd> pour la définition
associée.
IST - RIT 2 TechnoWeb : HTML5 16/32
Éléments HTML5 (5/10)
Exemples de liste
Exemple
< !DOCTYPE h t m l>
<h t m l>
<h e a d>
< t i t l e > L i s t e s</ t i t l e >
<meta h t t p −e q u i v=" c o n t e n t −t y p e " c o n t e n t=" t e x t / h t m l ; c h a r s e t=u t f −8" />
</ h e a d>
<body>
<h5> L i s t e 1</ h5>
< u l>
< l i >i t e m</ l i >
< l i >i t e m</ l i >
</ u l>
<h5> L i s t e 2</ h5>
< o l>
< l i >i t e m</ l i >
< l i >i t e m</ l i >
</ o l>
<h5> L i s t e 3</ h5>
< d l>
<d t>i t e m</ d t><dd> d é f i n i t i o n</ dd>
<d t>i t e m</ d t><dd> d é f i n i t i o n</ dd>
</ d l>
</ body>
</ h t m l>
IST - RIT 2 TechnoWeb : HTML5 17/32
Éléments HTML5 (6/10)
Tableaux (éléments bloc) : squelette général
< t a b l e>
<c a p t i o n>
< !−− t i t r e du t a b l e a u
−−>
</ c a p t i o n>
<t h e a d>
< !−− e n t e t e de t a b l e
−−>
</ t h e a d>
< t f o o t>
< !−− p i e d de t a b l e −−>
</ t f o o t>
<t b o d y>
< !−− c o r p s de l a t a b l e
−−>
</ t b o d y>
</ t a b l e>
Les éléments <thead> et <tfoot> permettent de répéter l’élément
dans les tableaux sur plusieurs pages (impression).
La balise <tr> déclare une ligne
Les balises <td> (cellule normale) ou <th> (cellule titre/grasse)
déclarent les cellule dans la ligne
Les attributs rowspan et colspan fusionnent les cellules
IST - RIT 2 TechnoWeb : HTML5 18/32
Éléments HTML5 (7/10)
Exemple de tableau
Exemple
< t a b l e b o r d e r=" 1 ">
<c a p t i o n>
<h2> T i t r e du t a b l e a u</ h2>
</ c a p t i o n>
<t h e a d>
< t r>
<t h> T i t r e 1</ t h><t h> T i t r e 2</ t h><t h> T i t r e 3</ t h>
</ t r>
</ t h e a d>
< t f o o t>
< t r>
<t h> T i t r e 1</ t h><t h> T i t r e 2</ t h><t h> T i t r e 3</ t h>
</ t r>
</ t f o o t>
<t b o d y>
< t r>
<t d> c e l l u l e 1</ t d><t d> c e l l u l e 2</ t d><t d> c e l l u l e 3</ t d>
</ t r>
< t r>
<t d> c e l l u l e 4</ t d>
<t d> c e l l u l e 5</ t d>
<t d r o w s p a n=" 2 "> c e l l u l e 6</ t d>
</ t r>
< t r>
<t d c o l s p a n=" 2 "> c e l l u l e 7</ t d>
</ t r>
</ t b o d y>
</ t a b l e>
IST - RIT 2 TechnoWeb : HTML5 19/32
Éléments HTML5 (8/10)
Images (éléments inline)
La balise <img/> permet d’insérer une image
Les attributs suivants sont obligatoires :
src : l’URI où se situe l’image
alt : courte description de l’image
Exemple
<img src="[Link]" alt="le logo Debian"/>
Remarque : en spécifiant la taille des images, on accélère le chargement
(attributs width et heigth).
IST - RIT 2 TechnoWeb : HTML5 20/32
Éléments HTML5 (9/10)
Liens (éléments inline)
L’élément <a href="...">...</a> permet d’insérer un lien
Le contenu de l’élément est celui qui sera affiché en tant que lien.
L’attribut href contient l’URI vers laquelle le lien pointe.
URL : [Link]
URL (mail) : [Link]
Fichier local avec chemin relatif : ./dossier/autre_page.html
Fichier local avec chemin absolu : /www/dossier/autre_page.html
Exemple
<a href="lien_vers_une_autre_page.html">Texte affiché</a>
IST - RIT 2 TechnoWeb : HTML5 21/32
Éléments HTML5 (10/10)
Encodage des caractères
Les anciennes versions d’HTML nécessitent l’utilisation d’entités :
é é è è ê ê
à à É É . . . . . .
Maintenant l’encodage est supporté. Bonne pratique : UTF-8
L’encodage doit être défini à plusieurs endroits :
HTML : <meta http-equiv="content-type" content="text
/html;charset=utf-8" />
HTTP : Content-Type: text/html; charset=utf-8
IST - RIT 2 TechnoWeb : HTML5 22/32
Les formulaires (1/10)
Déclaration d’un formulaire
L’élément <form> ... </form> déclare un formulaire
Les attributs :
action : URL spécifiant le traitement des données (script, mail, etc.)
method : spécifie la méthode d’acheminement des données (GET par
défaut ou POST)
enctype spécifie la méthode d’encodage pour un envoi en POST
application/x-www-form-urlencoded : encodage par défaut
multipart/form-data : aucun encodage, (utilisé notamment pour
le file-upload)
text/plain : seul les espaces sont remplacés par des ‘+’
IST - RIT 2 TechnoWeb : HTML5 23/32
Les formulaires (2/10)
Contenu d’un formulaire
L’élément <fieldset>...</fieldset> permet de définir un
regroupement dans un formulaire.
L’élément <legend>...</legend> permet de donner une légende à un
fieldset.
L’élément <label>...</label> permet de définir une étiquette.
L’élément <input/> contient les attributs suivant :
type : spécifie le type d’élément à utiliser
name : donne un nom à l’élément
value : donne une valeur à l’élément
IST - RIT 2 TechnoWeb : HTML5 24/32
Les formulaires (3/10)
Exemple de balises <input/>
< input type = " text " name = " champs " size = " 10 " value = " texte "/
>
< input type = " password " name = " mdp " size = " 10 " maxlength = " 8 "
/>
< input type = " hidden " name = " steak " value = " haché "/ >
< input type = " checkbox " name = " chk1 " value = " ok " / >
< input type = " checkbox " name = " chk2 " value = " ok " checked = "
checked "/ >
< input type = " radio " name = " choix " value = " rd1 " / >
< input type = " radio " name = " choix " value = " rd2 " checked = "
checked "/ >
< input type = " radio " name = " choix " value = " rd3 " / >
Remarques :
pour les types checkbox/radio si l’attribut value n’est pas spécifié,
la valeur par défaut est on
le type hidden permet de passer des valeurs d’une page à une autre
IST - RIT 2 TechnoWeb : HTML5 25/32
Les formulaires (4/10)
Boutons
Un élément <input/> de type :
submit : affiche un bouton et permet l’envoi des données du
formulaire au serveur
image : affiche une image et permet l’envoi des données du
formulaire au serveur
reset : affiche un bouton et permet de restaurer les valeurs par
défaut du formulaire
file : affiche un bouton permettant d’ouvrir une boite de recherche
de fichier
Exemple
<i n p u t t y p e=" s u b m i t " name=" a c t i o n " v a l u e=" I n s e r t " />
<i n p u t t y p e=" f i l e " name=" u n F i c h i e r " i d=" f i c h i e r " />
<i n p u t t y p e=" i m a g e " s r c=" i m a g e s / c r o i x . j p g " name=" a c t i o n " v a l u e=" D e l e t e " />
<i n p u t t y p e=" r e s e t " v a l u e=" R e s e t " />
IST - RIT 2 TechnoWeb : HTML5 26/32
Les formulaires (5/10)
Champs texte
Un élément <textarea> permet de créer un champs texte
Exemple
< textarea rows = " 4 " cols = " 50 " >
Ce texte est éditable et sera envoyé lors du submit
</ textarea >
IST - RIT 2 TechnoWeb : HTML5 27/32
Les formulaires (6/10)
Listes
La balise <select> permet de définir une liste
Attributs :
multiple : permet de sélectionner plusieurs éléments de la liste
code : si > 2 affiche un tableau, sinon un menu déroulant
Exemple
< s e l e c t name=" l a l i s t e " s i z e =" 3 " m u l t i p l e=" m u l t i p l e ">
<o p t i o n v a l u e=" 1 ">t o t o</ o p t i o n>
<o p t i o n s e l e c t e d=" s e l e c t e d " v a l u e=" 2 "> t i t i </ o p t i o n>
<o p t g r o u p l a b e l =" l e s a u t r e s ">
<o p t i o n v a l u e=" 3 ">t a t a</ o p t i o n>
<o p t i o n v a l u e=" 4 ">t u t u</ o p t i o n>
<o p t i o n v a l u e=" 5 "> t e t e</ o p t i o n>
</ o p t g r o u p>
</ s e l e c t>
IST - RIT 2 TechnoWeb : HTML5 28/32
Les formulaires (7/10)
Nom des champs
La balise <label> sert à nommer des champs
Attribut for indique champs décrit (attribut id)
Utile sur les radio et checkbox : augmente la surface d’activation
Exemple
< form >
< label for = " h " > Homme </ label >
< input type = " radio " name = " genre " id = " h " / >
< br / >
< label for = " f " > Femme </ label >
< input type = " radio " name = " genre " id = " f " / >
</ form >
IST - RIT 2 TechnoWeb : HTML5 29/32
Les formulaires (8/10)
Exemple de formulaire
[Link]
<f o r m a c t i o n="GET">
< f i e l d s e t>
<l e g e n d>E x e m p l e de f o r m u l a i r e</ l e g e n d>
< l a b e l>Nom :</ l a b e l> <i n p u t t y p e=" t e x t " name="monNom" i d="nom" />
< l a b e l>Prénom :</ l a b e l> <i n p u t t y p e=" t e x t " name="monPrenom " i d=" prenom " />
<h r />
<i n p u t t y p e=" c h e c k b o x " name=" m a N e w s l e t t e r " i d=" n e w s l e t t e r " /> < l a b e l f o r="
n e w s l e t t e r ">Une c h e c k b o x</ l a b e l>
<i n p u t t y p e=" r a d i o " name=" monSexe " i d="homme" />< l a b e l f o r="homme">Homme</
l a b e l>
<i n p u t t y p e=" r a d i o " name=" monSexe " i d="femme " />< l a b e l f o r=" femme ">Femme</
l a b e l><b r />
< l a b e l f o r=" p h o t o "> F i c h i e r :</ l a b e l> <i n p u t t y p e=" f i l e " name=" maPhoto " i d="
p h o t o " /><b r />
< s e l e c t name=" l a l i s t e " s i z e =" 3 " m u l t i p l e=" m u l t i p l e ">
<o p t i o n v a l u e=" 1 ">t o t o</ o p t i o n>
<o p t i o n s e l e c t e d=" s e l e c t e d " v a l u e=" 2 "> t i t i </ o p t i o n>
<o p t g r o u p l a b e l =" l e s a u t r e s ">
<o p t i o n v a l u e=" 3 ">t a t a</ o p t i o n>
<o p t i o n v a l u e=" 4 ">t u t u</ o p t i o n>
<o p t i o n v a l u e=" 5 "> t e t e</ o p t i o n>
</ o p t g r o u p>
</ s e l e c t>
<h r />
...
IST - RIT 2 TechnoWeb : HTML5 30/32
Les formulaires (9/10)
Exemple de formulaire
[Link]
...
< t e x t a r e a name=" t e x t e " r o w s=" 10 " c o l s=" 80 ">R a c o n t e−moi une h i s t o i r e . . . </
t e x t a r e a>
<h r />
<i n p u t t y p e=" s u b m i t " name=" m a S o u m i s s i o n " i d=" s o u m i s s i o n " />
<i n p u t t y p e=" s u b m i t " name=" a c t i o n " v a l u e=" I n s e r t " />
<i n p u t t y p e=" s u b m i t " name=" a c t i o n " v a l u e=" Up date " />
<i n p u t t y p e=" i m a g e " s r c=" I m a g e s / l o g o a s i . png " a l t =" l o g o a s i . png " name=" a c t i o n
" w i d t h=" 75 " />
<i n p u t t y p e=" r e s e t " v a l u e=" R e s e t " />
</ f i e l d s e t >
</ f o r m>
IST - RIT 2 TechnoWeb : HTML5 31/32
Les formulaires (10/10)
Exemple de formulaire
[Link]
IST - RIT 2 TechnoWeb : HTML5 32/32
Documentation et liens
HTML5
w2schools : [Link]
Toutes les balises :
[Link]
CSS
w2schools : [Link]
Balises :
[Link]
Validation
W3C (DTD based) : [Link]
[Link] (non-DTD) : [Link]
L’indispensable Firebug pour le débuggage !
Compatibilité navigateurs
[Link]