Upload
others
View
4
Download
0
Embed Size (px)
Citation preview
INSA - ASI TechnoWeb : HTML5 1/32
Technologie WebHTML5
Alexandre Pauchet
INSA Rouen - Département ASI
BO.B.RC.18, [email protected]
INSA - ASI TechnoWeb : HTML5 2/32
Plan
1 Introduction
2 Langage à balise
3 Éléments HTML5
4 Les formulaires
INSA - ASI TechnoWeb : HTML5 3/32
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
INSA - ASI TechnoWeb : HTML5 4/32
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
INSA - ASI 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 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 : <!--Ceci est un commentaire-->
Remarques :Les retours chariot, successions d’espaces et/ou de tabulations ne sontpas pris en compte.
Toute balise ouverte doit être fermée !
INSA - ASI TechnoWeb : HTML5 6/32
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>
INSA - ASI 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. 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>
INSA - ASI 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 ligneStructuration d’un document : <section>, <article>, <header>,<footer>, <aside>, <nav>
INSA - ASI TechnoWeb : HTML5 9/32
Langage à balise (3/5)Exemple de document structuré
<header>
<footer>
<aside>
<section>
<article>
<article>
<article>
<nav>
<article>
contenu(<p>, <div>, ...)
<header>
<footer>
<aside>
INSA - ASI 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
RemarqueL’affichage se modifie au fur et à mesure du chargement de la page et deses composants (texte, images, etc.)
INSA - ASI 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">System.out.println("Alerte");</code><br class="double" />
INSA - ASI 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>
INSA - ASI TechnoWeb : HTML5 13/32
É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
<!DOCTYPE html><html>
<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>
INSA - ASI TechnoWeb : HTML5 14/32
É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
...
INSA - ASI 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 :<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.
INSA - ASI TechnoWeb : HTML5 16/32
Éléments HTML5 (5/10)Exemples de liste
Exemple
<!DOCTYPE html><html>
<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>
INSA - ASI TechnoWeb : HTML5 17/32
É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
INSA - ASI TechnoWeb : HTML5 18/32
É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>
INSA - ASI 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’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).
INSA - ASI TechnoWeb : HTML5 20/32
É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>
INSA - ASI 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-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
INSA - ASI 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 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 ‘+’
INSA - ASI TechnoWeb : HTML5 23/32
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
INSA - ASI 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="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
INSA - ASI TechnoWeb : HTML5 25/32
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 "/>
INSA - ASI 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 >
INSA - ASI 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 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>
INSA - ASI 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>
INSA - ASI TechnoWeb : HTML5 29/32
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 />
. . .
INSA - ASI TechnoWeb : HTML5 30/32
Les formulaires (9/10)Exemple de formulaire
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>
INSA - ASI TechnoWeb : HTML5 32/32
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