AlexandrePauchet HTML5 TechnologieWeb

Technologie Web

HTML5

Alexandre Pauchet

INSA Rouen - Département ASI

BO.B.RC.18,pauchet@insa-rouen.fr

Plan

1 Introduction

2 Langage à balise

3 Éléments HTML5

4 Les formulaires

Introduction

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¹

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² depuis 1996.

1. Internet Engineering Task Force

2. World Wide Web Consortiumhttp://www.w3c.org

Introduction

Principe de fonctionnement (Rappel)

Client Web

(navigateur) Serveur Web

Requête (URL) Réponse

Ressource ? Ressource

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

Introduction

Un fichier HTML/XHTML est un fichiertexte (cf.protocole HTTP) contenant des balises appelant des commandes, dont l’action est limitée au texte contenu entre labalise de débutet labalise 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-->

Remarques :

Les retours chariot, successions d’espaces et/ou de tabulations ne sont pas pris en compte.

Toute balise ouverte doit être fermée !

Introduction

HTML5 (Hello.html)

< !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>

<b o d y>

<p>H e l l o w o r l d!</p>

</b o d y>

</h t m l>

Langage à balise

É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 : mise en exergue, ...

É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 ...

Éléments génériques Div/Span

Balises de bloc générique :<div> ... </div>

Balises inline générique :<span> ... </span>

Langage à balise

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>

Langage à balise

<header>

<footer>

<aside>

<section>

<article>

<article>

<article>

<nav>

<article>

contenu (<p>, <div>, ...)

<header>

<footer>

<aside>

Langage à balise

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.)

Langage à balise

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">System.out.println("Alerte");</code>

<br class="double" />

Éléments HTML5

Il y a 6 niveaux de titre :

<h1> ... </h1>

<h2> ... </h2>

<h3> ... </h3>

...

<h6> ... </h6>

Éléments HTML5

l’élément de bloc <p> ... </p> permet de construire des paragraphes et par un attributalign de spécifier 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>

<b o d y>

<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>

</b o d y>

</h t m l>

Éléments HTML5

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 ...

Éléments HTML5

Chaque item d’une liste est déclaré par <li> ... </li>.

Liste simple :

<ul>

<li> i t em < /li>

<li> i t em < /li>

<li> i t em < /li>

< /ul>

Liste numérotée :

<ol>

<li> i t e m < /li>

<li> i t e m < /li>

<li> i t e m < /li>

< /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.

Éléments HTML5

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>

<b o d y>

<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>

</b o d y>

</h t m l>

Éléments HTML5

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 d e t a b l e −−>

</t h e a d>

<t f o o t>

< !−− p i e d d e t a b l e −−>

</t f o o t>

<t b o d y>

< !−− c o r p s d e 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 rowspanet colspan fusionnent les cellules

Éléments HTML5

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>

Éléments HTML5

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="debian.png" alt="le logo Debian"/>

Remarque : en spécifiant la taille des images, on accélère le chargement (attributs widthet heigth).

Éléments HTML5

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’attributhrefcontient l’URI vers laquelle le lien pointe.

URL :http://www.google.com

URL (mail) :mailto:alexandre.pauchet@insa-rouen.fr 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>

Éléments HTML5

Les anciennes versions d’HTML nécessitent l’utilisation d’entités : é &eacute; è &egrave; ê &ecirc;

à &agrave; É &Eacute; . . . .

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

Les formulaires

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 enPOST 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 ‘+’

Les formulaires

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

Les formulaires

<i n p u t t y p e=" t e x t " n a m e=" c h a m p s " s i z e=" 10 " v a l u e=" t e x t e "/ >

<i n p u t t y p e=" p a s s w o r d " n a m e=" mdp " s i z e=" 10 " m a x l e n g t h=" 8 "/ >

<i n p u t t y p e=" e m a i l " v a l u e=" s a i s i r un e m a i l v a l a b l e "/ >

<i n p u t t y p e=" h i d d e n " n a m e=" s t e a k " v a l u e=" h a c h é "/ >

<i n p u t t y p e=" c h e c k b o x " n a m e=" c h k 1 " v a l u e=" ok "/ >

<i n p u t t y p e=" c h e c k b o x " n a m e=" c h k 2 " v a l u e=" ok " c h e c k e d=" c h e c k e d "/ >

<i n p u t t y p e=" r a d i o " n a m e=" c h o i x " v a l u e=" rd1 "/ >

<i n p u t t y p e=" r a d i o " n a m e=" c h o i x " v a l u e=" rd2 " c h e c k e d=" c h e c k e d "/ >

<i n p u t t y p e=" r a d i o " n a m e=" c h o i x " v a l u e=" rd3 "/ >

Remarques :

pour les typescheckbox/radiosi l’attribut valuen’est pas spécifié, la valeur par défaut eston

le type hiddenpermet de passer des valeurs d’une page à une autre

Les formulaires

Un élément <input/>de type :

submit: bouton d’envoi des données du formulaire au serveur image : bouton avec image pour l’envoi des données du formulaire reset : bouton de restauration les valeurs par défaut du formulaire file: bouton d’ouverture de boite de recherche de fichiers

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 "/>

Les formulaires

Un élément <textarea> permet de créer un champs texte Exemple

<t e x t a r e a r o w s=" 4 " c o l s=" 50 ">

Ce t e x t e est é d i t a b l e et s e r a e n v o y é l o r s du s u b m i t

< /t e x t a r e a>

Les formulaires

La balise <select> permet de définir une liste

Attributs :

multiple: permet de sélectionner plusieurs éléments de la liste size: 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>

Les formulaires

La balise<label> sert à nommer des champs

Attributfor indique champs décrit (attribut id)

Utile sur les radio et checkbox : augmente la surface d’activation Exemple

<f o r m>

<l a b e l for=" h ">H o m m e< /l a b e l>

<i n p u t ty p e=" r a d i o " n a m e=" g e n r e " id=" h " / >

<br / >

<l a b e l for=" f ">F e m m e< /l a b e l>

<i n p u t ty p e=" r a d i o " n a m e=" g e n r e " id=" f " / >

< /f o r m>

Les formulaires

Formulaire.html

<f o r m a c t i o n=" m a i l t o : t r u c @ i n s a−r o u e n . f r " method="POST">

<f i e l d s e t>

<l e g e n d>E x e m p l e d e 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/>

. . .

Les formulaires

Formulaire.html . . .

<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 u n e 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=" U p d a t e "/>

<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>

Les formulaires

Formulaire.html

Documentation et liens

HTML5

w2schools :http://www.w3schools.com/html5/

Toutes les balises :

http://www.w3schools.com/html5/html5_reference.asp CSS

w2schools :http://www.w3schools.com/html5/

Balises :

http://www.w3schools.com/html5/html5_reference.asp Validation

W3C (DTD based) :http://validator.w3.org

Validator.ne (non-DTD) :http://html5.validator.nu L’indispensable Firebug pour le débuggage !

Compatibilité navigateurs http://caniuse.com