Technologie Web - HTML5

INSA - ASI TechnoWeb : HTML5 1/32

Technologie WebHTML5

Alexandre Pauchet

INSA Rouen - Département ASI

BO.B.RC.18, [email protected]


Plan

1 Introduction

2 Langage à balise

3 Éléments HTML5

4 Les formulaires


Introduction (1/4)Historique

Années 1990 : HTML est créé par Tim Berner-Lee au CentreEuropé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.02002-2006 : XHTML 2.0 en cours de spécification2007-maintenant : HTML5

Normalisation par le W3C 2 depuis 1996.

1. Internet Engineering Task Force2. World Wide Web Consortium http://www.w3c.org

http://www.w3c.org


Introduction (2/4)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’URL2 Le serveur retourne un flot typé de données3 Le navigateur interprète le flot de données et l’affiche

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 estlimitée au texte contenu entre la balise de début et la balise de fin.Extension HTML : .htm ou .html ; XHTML : .xhtmlBalise de début : <commande>Balise de fin : </commande>Balise auto-fermante : <commande/>Commentaires : 

Remarques :Les retours chariot, successions d’espaces et/ou de tabulations ne sontpas pris en compte.

Toute balise ouverte doit être fermée !


Introduction (4/4)Squelette d’un document HTML5

HTML5 (Hello.html)

<!DOCTYPE html><html>

<head>< t i t l e>Page HTML 5 Type</ t i t l e><meta http−equ i v=" content−t ype " con t en t=" t e x t / html ; c h a r s e t=ut f −8" />

</head><body>

<p>He l l o wor ld !</p></body>

</html>


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. Ilforme 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 etne 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 etfermante à la fois. Elle n’a donc pas de contenu. Ce sont soit desbalises de type bloc, soit de type inline.Synthaxe : <balise> ou <balise/>Exemples : saut de ligne, séparation horizontale ...

Éléments génériques Div/SpanBalises de bloc générique : <div> ... </div>Balises inline générique : <span> ... </span>


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 ligneStructuration d’un document : <section>, <article>, <header>,<footer>, <aside>, <nav>


Langage à balise (3/5)Exemple de document structuré

<header>

<footer>

<aside>

<section>

<article>

<article>

<article>

<nav>

<article>

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

<header>

<footer>

<aside>


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

RemarqueL’affichage se modifie au fur et à mesure du chargement de la page et deses composants (texte, images, etc.)


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


Éléments HTML5 (1/10)Titres (éléments bloc)

Il y a 6 niveaux de titre :<h1> ... </h1>

<h2> ... </h2>

<h3> ... </h3>

...<h6> ... </h6>


Éléments HTML5 (2/10)Paragraphes (éléments bloc)

l’élément de bloc <p> ... </p> permet de construire desparagraphes et par un attribut align de spécifier la justification.l’élément inline <br/> permet de contrôler les sauts de lignes.

Exemple


<head>< t i t l e>Paragraphe</ t i t l e><meta http−equ i v=" content−t ype " con t en t=" t e x t / html ; c h a r s e t=ut f −8" /><s t y l e type=" t e x t / c s s ">

p { tex t−a l i g n : j u s t i f y }</ s t y l e>

</head><body>

<p>parag raphe pa rag raphe pa rag raphe pa rag raphepa rag raphe pa rag raphe pa rag raphe pa rag raphe <br /> parag raphepa rag raphe pa rag raphe pa rag raphe pa rag raphe pa rag raphe</p>

</body></html>


Éléments HTML5 (3/10)Texte structuré (éléments inline)

em : mise en exerguestrong : mise en exergue plus importante

cite : extrait ou référence à une autre sourcecode : portion de code informatiquesamp : exemple de résultat issu d’un programmekbd : frappe au clavier devant être effectuée par l’utilisateurvar : instance d’une variable ou le paramètre d’un programmedfn : terme encadré a une définitionabbr : forme abrégée

...


Éléments HTML5 (4/10)Listes (éléments bloc)

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

Liste simple :<ul>

<li> item </li><li> item </li><li> item </li>

</ul>

Liste numérotée :<ol>

<li> item </li><li> item </li><li> item </li>

</ol>

Il existe aussi des listes de définitions (<dl> ... </dl>), les items sontdéclarés par les balises <dt> pour le terme et <dd> pour la définitionassociée.


Éléments HTML5 (5/10)Exemples de liste

Exemple


<head>< t i t l e>L i s t e s</ t i t l e><meta http−equ i v=" content−t ype " con t en t=" t e x t / html ; c h a r s e t=ut f −8" />

</head><body><h5>L i s t e 1</h5><u l>

< l i>item</ l i>< l i>item</ l i>

</ u l><h5>L i s t e 2</h5><o l>

< l i>item</ l i>< l i>item</ l i>

</ o l><h5>L i s t e 3</h5><d l>

<dt>item</dt><dd>d é f i n i t i o n</dd><dt>item</dt><dd>d é f i n i t i o n</dd>

</ d l></body>

</html>


Éléments HTML5 (6/10)Tableaux (éléments bloc) : squelette général

<t a b l e><cap t i o n>

<!−− t i t r e du t a b l e a u −−></ cap t i o n><thead>

<!−− e n t e t e de t a b l e −−></ thead><t f o o t>

<!−− p i ed de t a b l e −−></ t f o o t><tbody>

<!−− co rp s de l a t a b l e −−></ tbody>

</ t a b l e>

Les éléments <thead> et <tfoot> permettent de répéter l’élémentdans les tableaux sur plusieurs pages (impression).La balise <tr> déclare une ligneLes balises <td> (cellule normale) ou <th> (cellule titre/grasse)déclarent les cellule dans la ligneLes attributs rowspan et colspan fusionnent les cellules


Éléments HTML5 (7/10)Exemple de tableau

Exemple

<t a b l e bo rde r="1"><cap t i o n>

<h2>T i t r e du t a b l e a u</h2></ cap t i o n><thead>

<t r><th>T i t r e 1</ th><th>T i t r e 2</ th><th>T i t r e 3</ th>

</ t r></ thead><t f o o t>

<t r><th>T i t r e 1</ th><th>T i t r e 2</ th><th>T i t r e 3</ th>

</ t r></ t f o o t><tbody>

<t r><td>c e l l u l e 1</ td><td>c e l l u l e 2</ td><td>c e l l u l e 3</ td>

</ t r><t r>

<td>c e l l u l e 4</ td><td>c e l l u l e 5</ td><td rowspan="2">c e l l u l e 6</ td>

</ t r><t r>

<td co l s p an="2">c e l l u l e 7</ td></ t r>

</ tbody></ t a b l e>


É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’imagealt : 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 width et heigth).


Éléments HTML5 (9/10)Liens (éléments inline)

L’élément <a href="...">...</a> permet d’insérer un lienLe 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 : http://www.google.comURL (mail) : mailto:[email protected] local avec chemin relatif : ./dossier/autre_page.htmlFichier local avec chemin absolu : /www/dossier/autre_page.html

Exemple<a href="lien_vers_une_autre_page.html">Texte affiché</a>

http://www.google.com

mailto:[email protected]

./dossier/autre_page.html

/www/dossier/autre_page.html


É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-8L’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 (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 pardéfaut ou POST)enctype spécifie la méthode d’encodage pour un envoi en POST

application/x-www-form-urlencoded : encodage par défautmultipart/form-data : aucun encodage, (utilisé notamment pourle file-upload)text/plain : seul les espaces sont remplacés par des ‘+’


Les formulaires (2/10)Contenu d’un formulaire

L’élément <fieldset>...</fieldset> permet de définir unregroupement dans un formulaire.

L’élément <legend>...</legend> permet de donner une légende à unfieldset.

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 à utilisername : donne un nom à l’élémentvalue : donne une valeur à l’élément


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="email" value="saisir un email valable"/><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 onle type hidden permet de passer des valeurs d’une page à une autre


Les formulaires (4/10)Boutons

Un élément <input/> de type :submit : bouton d’envoi des données du formulaire au serveurimage : bouton avec image pour l’envoi des données du formulairereset : bouton de restauration les valeurs par défaut du formulairefile : bouton d’ouverture de boite de recherche de fichiers

Exemple

<inpu t type=" submit " name=" a c t i o n " v a l u e=" I n s e r t "/><inpu t type=" f i l e " name=" unF i c h i e r " i d=" f i c h i e r " /><inpu t type=" image" s r c=" images / c r o i x . j pg " name=" a c t i o n " v a l u e=" De l e t e "/><inpu t type=" r e s e t " v a l u e=" Reset "/>


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 >


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 listesize : 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" mu l t i p l e=" mu l t i p l e "><op t i on v a l u e="1">to to</ op t i on><op t i on 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</ op t i on><optgroup l a b e l=" l e s a u t r e s ">

<op t i on v a l u e="3">ta t a</ op t i on><op t i on v a l u e="4">tutu</ op t i on><op t i on v a l u e="5">t e t e</ op t i on>

</ optgroup></ s e l e c t>


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>


Les formulaires (8/10)Exemple de formulaire

Formulaire.html

<form a c t i o n=" ma i l t o : t r u c@ in sa−rouen . f r " method="POST"><f i e l d s e t>

<legend>Exemple de f o rmu l a i r e</ l egend><l a b e l>Nom :</ l a b e l> <inpu t type=" t e x t " name="monNom" i d="nom" /><l a b e l>Prénom :</ l a b e l> <inpu t type=" t e x t " name="monPrenom" i d="prenom" /><hr /><inpu t type=" checkbox " name=" maNews le t te r " i d=" n ew s l e t t e r " /> <l a b e l f o r="

n ew s l e t t e r ">Une checkbox</ l a b e l><inpu t type=" 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><inpu t type=" 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><br /><l a b e l f o r="photo ">F i c h i e r :</ l a b e l> <inpu t type=" f i l e " name="maPhoto" i d="photo " /><br />

<s e l e c t name=" l a l i s t e " s i z e="3" mu l t i p l e=" mu l t i p l e "><op t i on v a l u e="1">to to</ op t i on><op t i on 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</ op t i on><optgroup l a b e l=" l e s a u t r e s ">

<op t i on v a l u e="3">ta t a</ op t i on><op t i on v a l u e="4">tutu</ op t i on><op t i on v a l u e="5">t e t e</ op t i on>

</ optgroup></ s e l e c t><hr />

. . .



Formulaire.html. . .

<t e x t a r e a name=" t e x t e " rows="10" c o l s="80">Raconte−moi une h i s t o i r e . . .</t e x t a r e a>

<hr /><inpu t type=" submit " name="maSoumiss ion " i d=" soum i s s i o n " /><inpu t type=" submit " name=" a c t i o n " v a l u e=" I n s e r t "/><inpu t type=" submit " name=" a c t i o n " v a l u e="Update"/><inpu t type=" image" s r c=" Images / 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" width="75"/>

<inpu t type=" r e s e t " v a l u e=" Reset "/></ f i e l d s e t>

</ form>



Formulaire.html


Documentation et liens

HTML5w2schools : http://www.w3schools.com/html5/Toutes les balises :http://www.w3schools.com/html5/html5_reference.asp

CSSw2schools : http://www.w3schools.com/html5/Balises :http://www.w3schools.com/html5/html5_reference.asp

ValidationW3C (DTD based) : http://validator.w3.orgValidator.ne (non-DTD) : http://html5.validator.nuL’indispensable Firebug pour le débuggage !Compatibilité navigateurshttp://caniuse.com

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

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

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

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

http://validator.w3.org

http://html5.validator.nu

http://caniuse.com

Technologie Web - HTML5

Documents

Transcript of Technologie Web - HTML5