Programmation Web HTML - CRIL

Transcription

Programmation Web
HTML
Christophe Lecoutre
[email protected]
IUT de Lens - CRIL CNRS UMR 8188
Université d’Artois
France
Département SRC – Septembre 2014
1
Plan
1
Introduction
2
Éléments et attributs élémentaires
3
Listes et Tables
4
Liens et images
5
Formulaires
6
Audio / Video (HTML5)
7
Encore plus de HTML5
2
Plan
1
Introduction
2
3
Listes et Tables
4
Liens et images
5
Formulaires
6
7
3
Bibliographie
Matthew MacDonald
HTML5, the missing manual,
2nd Edition, O’reilly. 2014
Rob Larsen
Begininning HTML and CSS,
Wrox, 2013
John Duckett.
Beginning Web Programming with HTML,
XHTML, and CSS,
2nd Edition, Wrox. 2008.
4
Sites
Validation HTML
W3C Validator at http://validator.w3.org
HTML5 Validator at http://html5.validator.nu
Specifications/Ressources
alsacreations at http://www.alsacreations.com (site français)
W3School at http://www.w3schools.com
HTML5
caniuse at http://caniuse.com
moderniz at http://modernizr.com
HTML5 polyfills on GitHub at http://tinyurl.com/polyfill
5
Objectif
Écrire des pages web avec :
HTML : permet de définir la structure des pages
CSS : permet de définir l’apparence des pages
Javascript : permet d’ajouter l’interactivité/le contrôle
Prendre en compte :
la simplicité d’utilisation : facilité de navigation pour les utilisateurs
l’accessibilité : rendre les sites utilisables à autant d’utilisateurs que possible
6
Langages de balisage
Langages qui spécifient la structure logique d’un document (page). Par exemple :
HTML: HyperText Markup Language, used for the web
Latex: used for professional elaboration of scientific documents
HTML + CSS + Javascript
HTML est construit sur les concepts de :
balises (tags)
éléments (elements)
attributs (attributes)
7
Balises et éléments
Description :
une balise est formée par un identifiant (identifier) et deux crochets d’angle
(two enclosing angle brackets)
un élément est formé par un contenu (potentiellement vide) et deux balises
de même identifiant l’encadrant
La balise gauche est appelé la balise ouvrante tandis que la balise droite est
appelée la balise fermante
La balise fermante possède un “forward slash” après le premier crochet
d’angle
Exemple
<h1> A propos de HTML </h1>
Attention !
Une balise tagName sans contenu peut s’écrire <tagName/>. On dit alors
qu’elle est auto-fermante.
8
Attributs
Un attribut est formé par :
un nom
le symbole =
une valeur entre double apostrophes (quotes), ou simple apostrophes
Une liste (potentiellement vide) d’attributs séparés par des espaces est placé après
l’identifiant de la balise ouvrante et avant le crochet d’angle de droite.
Exemple
<h1 id="firstHeading"> A propos de HTML </h1>
Attention !
Balises et attributs doivent être écrits en lettres minuscules.
9
Tags, Elements, and Attributes
attribute name
attribute value
<h1 id="firstHeading">
opening tag
(with an attribute)
A propos de XHTML </h1>
content of the element
closing tag
element
10
Tags, Elements, and Attributes
Exemple
<body>

<h1> Premier en-tete <\h1>
<p> coucou </p>
<a href="http://www.arte.fr">arte</a>

</body>
Remarque
Les commentaires sont placés entre des balises en utilisant la syntaxe

11
Versions de HTML
Histoire complexe :
HTML 4.01
XHTML 1.0 (et XHTML 2)
HTML5
De manière à valider un document HTML, une Document Type Declaration, ou
DOCTYPE, doit être utilisée. Une DOCTYPE déclare au navigateur la Document
Type Definition (DTD) à laquelle le document se conforme.
Remarque
Pour HTML5, on utilise simplement :
<!DOCTYPE html>
12
Squelette d’un document HTML5
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title> ... </title>
</head>
<body>
...
</body>
</html>
13
Plan
1
Introduction
2
3
Listes et Tables
4
Liens et images
5
Formulaires
6
7
14
En-têtes
HTML offre 6 niveaux d’en-tête (headings) : <h1>, <h2>, <h3>, <h4>, <h5>
et <h6>
Par défaut, les navigateurs affichent les contenus de :
<h1>, <h2> et <h3> en plus gros que la taille par défaut
<h4> avec la taille par défaut
<h5> et <h6> en plus petit que la taille par défaut
Remarque
On pourra avec CSS numéroter automatiquement les en-têtes de section.
15
Exemple
<h1>Heading
<h2>Heading
<h3>Heading
<h4>Heading
<h3>Heading
<h4>Heading
<h5>Heading
<h6>Heading
1</h1>
2</h2>
3</h3>
4</h4>
3 bis</h3>
4 bis</h4>
5</h5>
6</h6>
16
Paragraphes et retours à la ligne
Deux éléments fréquents :
<p> est utilisé pour construire des paragraphes
<br> est utilisé pour créer des retours à la ligne
Remarque
L’élément <br> est vide. On écrira plutôt <br /> que <br/> ou <br> qui sont
aussi autorisés maintenant.
Quelque soit le nombre d’espaces consécutifs, seul un espace est affiché. Cela est
connus sous le terme de white space collapsing.
Exemple
<p>
ceci est un test de la
balise p
avec retour a la ligne
</p>
17
Exemple
p { text-align:justify; }
<p>
Les cheminées
crachaient
une puanteur de soufre,
les tanneries
la puanteur de leurs bains corrosifs,
...
</p>
<p>
Les rivières puaient, les places
puaient, les églises puaient, cela
puait sous les ponts et dans les
palais. <br />
Le paysan puait ...
</p>
18
Polices à espacement fixe
Le contenu d’un élément <pre> est écrit avec une police à espacement fixe, et
préserve de plus à la fois les espaces et les retours à la ligne.
Exemple
<pre>
x | o | x
----------o | o | x
----------o | x | x
</pre>
19
Elements <em> et <strong>
Ces éléments ajoutent de l’information (structurelle) à des fragments de texte.
Éléments importants :
<em> ajoute une emphase (habituellement en italique)
<strong> ajoute une emphase plus forte que <em> (habituellement en gras)
De bonnes raisons de les utiliser (plutôt que les éléments <i> et <b>) :
les outils tels que les lecteurs d’écran (destiné aux personnes aveugles ou
fortement malvoyantes) peuvent ajuster l’intonation
les programmes automatiques peuvent les extraire comme mots-clés (et/ou
les indexer)
Remarque
Les éléments <i> et <b> sont réhabilités, mais juste pour la mise en forme. On
peut nénamoins utiliser CSS à la place.
20
Exemple
<p>
<p>
<br
<p>
<strong> Fermer </strong> le gaz </p>
En arrivant <em> téléphoner </em> </p>
/>
Les mot-clès du document sont : <b>
HTML </b> et <b> CSS </b> </p>
<p> C’est peut-être plus beau ici <i> en
italique </i> mais c’est un point de
vue.</p>
21
Elements <dfn> et <address>
Comme “phrase elements”, nous trouvons également :
<dfn> indique que vous introduisez un terme spécial ou nouveau,
typiquement rendu en italique
<address> indique une adresse postale, habituellement à la fin d’un
document, ou encore une adresse de contact (créateur d’une page web)
Exemple
<p> Une fonction est <dfn> recursive </dfn> ssi elle
s’appelle dans son propre corps. </p>
<address>
IUT de Lens, <br />
Rue de l’universite, <br />
SP 16, 62307 LENS Cedex
</address>
22
Elements <abbr>, <cite>, <blockquote> et <q>
<abbr> indique une abréviation; si possible, à accompagner d’un attribut
title
<cite> contient une citation ou une référence à une autre source; souvent
utilisé pour inclure des titres de livres, films ou chansons.
<blockquote> insère une longue citation (à l’intérieur d’un bloc) d’une
autre source. A démarrer après une ligne vide et utiliser <p> à l’intérieur de
<blockquote>.
<q> insère une courte citation (à l’intérieur d’une phrase) d’une autre source.
Attention !
L’élément <cite> est à distinguer de l’attribut cite (dont la valeur doit être
une URL) habituellement utilisé avec <blockquote> et <q>.
23
Exemple
<p> J’ai un ami appellé <abbr title="Samuel">
Sam</abbr> </p>
<p> Ceci est un cours sur <abbr title="
Hypertext Markup Language" lang="en">HTML<
/abbr> </p>
<p> Ces diapositives sont inspirées de <cite>
Beginning web programming with HTML, XHTML
and CSS</cite> </p>
<p> Oscar Wilde a écrit dans <cite lang="en">
The Picture of Dorian Gray</cite> :</p>
<blockquote cite="goodreads.com">
<p> Those who find ugly meanings in beautiful
things are corrupt without being
charming. This is a fault. Those who
find beautiful meanings in beautiful
things are the cultivated. For these
there is hope. They are the elect to
whom beautiful things mean only Beauty.
</p>
</blockquote>
<p> Oscar Wilde a aussi dit <q cite="goodreads.
com">Always forgive your enemies; nothing
annoys them so much.</q> </p>
24
Elements pour le code
<code>: le contenu est du code de programmation, habituellement rendu en
police à espacement fixe.
<var>: le contenu indique une variable (informatique)
<kbd>: le contenu indique du texte donné par l’utilisateur (d’un programme)
<samp>: le contenu désigne une sortie (d’un programme)
Exemple
<pre> <code>
int sum(int i, int j) {
return i+j;
}
</code> </pre>
Attention !
Certains caractères sont réservés en HTML (voir diapositive suivante)
25
Caractères spéciaux
Voici ces caractères :
Symbol
&
<
>
"
Description
Ampersand
Less than
Greater than
Double quote
Non-breaking
space
Entity Name
&
<
>
"
 
Number Code
&
<
>
"
 
Exemple
<abbr title="Tim">
doit être écrit pour être affiché tel quel dans une page HTML sous la forme :
\<abbr title=\"Tim\"\>
26
Elements de présentation
Attention !
Lorsque cela est possible, préférez une solution CSS
Ces éléments suivants peuvent s’avérer utiles :
<sup>: le contenu est écrit en exposant
<sub>: le contenu est écrit en indice
Autres éléments :
<wbr> pour gérer les césures de mots longs (word breaking)
<b> pour caractères gras (bold).
<i> pour caractères en italique.
<u> (underline) et <strike> sont dépréciés
utiliser CSS plutôt que d’employer <big>
27
Eléments revisités en HTML5
Ce sont :
<hr> defines a thematic break in an HTML page (e.g. a shift of topic) ;
c’est un élément vide, donc écrire <hr />.
<small> defines smaller text (and other side comments).
<s> specifies text that is no longer correct, accurate or relevant. This tag
should not be used to define replaced or deleted text, use <del> to define
replaced or deleted text.
Exemple
<p><s>My car is blue.</s></p>
<p>My new car is silver.</p>
<hr />
<p><small>Copyright 2013 by Toto</small></p>
28
Exercice
1
2
3
4
5
6
Pour avoir une police à espacement fixe, on utilise :
a) <pre>
b) <b>
c) <tt>
d) CSS
Pour mettre du texte en gras, on utilise :
a) <b>
b) <em>
c) <strong>
d) CSS
Est-ce que ce qui suit est bien formé ?
<p> Je suis <em> content </p> </em>
<h1> Programmation Web </h1>
<h2> HTML <h2>
<p> Il faut respecter la syntaxe </p>
<adresse>
Toto, rue des géants de la frite, Trouville
</adresse>
<p> <abbr title="Mademoiselle">Mlle </abbr> </p>
29
Exercice
1
2
3
4
5
6
a) <pre>
b) <b>
c) <tt>
d) CSS
a) <b>
b) <em>
c) <strong>
d) CSS
<h2> HTML <h2>
<adresse>
</adresse>
29
Exercice
1
2
3
4
5
6
a) <pre>
b) <b>
c) <tt>
d) CSS
a) <b>
b) <em>
c) <strong>
d) CSS
<h2> HTML <h2>
<adresse>
</adresse>
29
Exercice
1
2
3
4
5
6
a) <pre>
b) <b>
c) <tt>
d) CSS
a) <b>
b) <em>
c) <strong>
d) CSS
<h2> HTML <h2>
<adresse>
</adresse>
29
Exercice
1
2
3
4
5
6
a) <pre>
b) <b>
c) <tt>
d) CSS
a) <b>
b) <em>
c) <strong>
d) CSS
<h2> HTML <h2>
<adresse>
</adresse>
29
Exercice
1
2
3
4
5
6
a) <pre>
b) <b>
c) <tt>
d) CSS
a) <b>
b) <em>
c) <strong>
d) CSS
<h2> HTML <h2>
<adresse>
</adresse>
29
Exercice
1
2
3
4
5
6
a) <pre>
b) <b>
c) <tt>
d) CSS
a) <b>
b) <em>
c) <strong>
d) CSS
<h2> HTML <h2>
<adresse>
</adresse>
29
Éditer du texte
Pour montrer les modifications faites à du texte, utiliser :
l’élément <ins> pour un ajout; le texte inséré est souligné;
l’élément <del> pour une suppression; le texte détruit est barré.
Exemple
<p> Le meilleur jeu vidéo de tous les
temps est <del>Starcraft 2</del> <ins
datetime="2010-07-27T17:08:00"
cite="http://www.mamedb.com/game/pengo"
title="c’est trop bien">Pengo</ins> </p>
Attention !
A n’utiliser que pour un site en cours de développement.
30
Attributs universels
Ce sont les 3 attributs qui peuvent être utilisés sur la majorité des éléments
HTML :
id: utilisé pour donner un identifiant unique à un élément ; la valeur doit
commencer par une lettre;
class: utilisé pour spécifier qu’un élément appartient à un groupe (classe)
spécifique ; la valeur est une liste de noms de classe (habituellement, une
seul) avec l’espace comme séparateur;
title: donne un titre à un élément ; habituellement affiché comme
information contextuelle (tooltip).
Attention !
L’attribut style est déprécié, et l’attribut name plus valide en HTML.
Remarque
Les attributs id et class seront particulièrement utiles avec CSS.
31
Attributs d’internationalisation
Il y a 3 attributs d’internationalisation qui permettent à
l’utilisateur d’écrire des pages dans différentes langues. Ils
sont disponibles pour la plupart des éléments HTML.
dir: indique au navigateur dans quelle direction le
texte est lu ; sa valeur peut être "ltr" ou "rtl".
lang: indique la langue principale ; gardé pour des
raisons de compatibilité.
Les valeurs de lang sont des codes ISO-639 standard (fr pour french, en pour
english, en-us pour U.S. english, ...)
Remarque
Typiquement, vous utiliserez ces attributs avec seulement l’élément html.
Toutefois, il est possible de les associer avec certains éléments particuliers dans le
corps du document.
32
Attributs d’événements
Les attributs d’événements permettent d’associer un scripte (programme) à un
événement (e.g., un clic de souris ou l’appui d’une touche).
Il y a 10 attributs appelés collectivement attributs communs d’évènements :
onclick, ondoubleclick
onmousedown, onmouseup, onmouseover, onmousemove,
onmousepress
onkeypress, onkeydown, onkeyup
L’élément <body> accepte les évènements suivants :
onload, onunload,
Les évènements associés aux formulaires sont :
onfocus, onblur, onsubmit, onreset, onselect, onchange
33
Éléments bloc et en ligne
Chaque élément appartient à l’une des deux catégories :
un élément bloc démarre sur une nouvelle ligne, et est suivi par une nouvelle
ligne; par exemple, <p>, <h1>, <h2>, <h3>, <ul>, <ol>, <dl>, <pre>,
<blockquote>, et <address> sont des éléments bloc.
un élément en ligne peut apparaı̂tre au sein de phrases; par exemple, <em>,
<strong>, <sup>, <sub>, <big>, <small>, <ins>, <del>, <code>,
<cite>, et <dfn> sont des éléments en ligne.
Remarque
Les éléments bloc peuvent contenir d’autres éléments bloc ou en ligne Les
éléments en ligne ne peuvent apparaı̂tre qu’au sein d’éléments bloc, et ne peuvent
pas contenir d’éléments bloc.
34
Grouper les éléments avec <div> et <span>
Ces éléments permettent de grouper plusieurs éléments dans une page. Plus
précisément,
<div> est utilisé pour grouper des éléments bloc
<span> est utilisé pour grouper des éléments en ligne
Exemple
<div class="gras">
<p> Lorsque l’alarme <span class="rouge" sonne </span> <
...
Remarque
Les éléments <div> et <span> n’affectent pas l’apparence de la page, mais sont
communément utilisés avec CSS pour associer des styles à des sections de page.
35
Exemple
.gras { font-weight:bold; }
.rouge { color:red; }
<p> En cas de danger, d’accident ...
... d’appel d’URGENCE : tél xxxx. </p>
<div class="gras">
<p> Lorsque l’alarme d’évacuation sonne
</p>
<ul>
<li> suivre les consignes </li>
<li> et surout ne <span class="rouge">
jamais pleurer </span> </li>
<li> ni <span class="rouge">
jamais paniquer </span> </li>
</ul>
</div>
36
Plan
1
Introduction
2
3
Listes et Tables
4
Liens et images
5
Formulaires
6
7
37
Listes
Unordered lists (<ul>) : sont des listes à puces
Ordered lists (<ol>) : sont des listes numérotées
Definition lists (<dl>) : permettent de spécifier des termes et leurs définitions
Chaque élément d’une liste est :
contenu dans un élément <li> pour les listes <ul> et <ol>;
composé d’un élément <dt> (le terme à définir) et d’un élément <dd> (la
définition du terme) pour les listes <dl>.
Exemple
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
Remarque
Vous devez utiliser CSS pour contrôler la numérotation des listes <ol>.
38
Exemple
<h3> Une liste non numérotée </h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ul>
<h3> Une liste numérotée </h3>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ol>
<h3> Une liste de définitions </h3>
<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheet</dd>
<dt>PHP</dt>
<dd>Hypertext Preprocessor</dd>
</dl>
39
Listes imbriquées
Faire attention d’écrire proprement les listes imbriquées. Par exemple,
Exemple
<ul>
<li>Deux roues</li>
<li>Quatre roues
<ol>
<li>Automobiles</li>
<li>Camions</li>
</ol>
</li>
</ul>
. Deux roues
. Quatre roues
1. Automobiles
2. Camions
40
Tables
Les tables sont constituées de lignes et de colonnes. A chaque intersection d’une
ligne et d’une colonne, on trouve une cellule. Une table est écrite ligne par ligne.
Les éléments utilisés pour construire des tables sont :
<table>
<tr> (table row): pour construire une ligne
<td> (table data): pour construire une cellule
<th> (table heading): pour construire une cellule en-tête pour une ligne ou
colonne ; habituellement rendu en gras.
Exemple
<table>
<tr> <th>Quarter 1 (Jan-Mar)</th>
<td>11200.00</td> ...
Attention !
Chaque cellule doit être un élément <td> ou <th>, même si l’élément est vide.
41
Exemple
th,td { border: 1px solid black;
padding:10px; }
<table>
<tr>
<th></th>
<th>Charges</th>
<th>Revenus</th>
<th>Profit</th>
</tr>
<tr>
<th>Jan-Mar</th>
<td>112</td>
<td>218</td>
<td><em>106</em></td>
</tr>
...
<tr>
<th>Oct - Dec</th>
<td>118</td>
<td>229</td>
<td><em>110</em></td>
</tr>
</table>
42
Attributs pour <table> et <tr>
Pour l’élément <table>:
summary fournit une description succincte de la table (utile pour les lecteurs
d’écran)
les autres attributs (autres que ceux qui sont universels ou d’évènement) sont
dépréciés.
Pour l’élément <tr>:
char is used to specify that the content of each cell within the row must be
aligned around the first instance of a particular character known as an axis
separator; currently, not really supported by browsers
charoff may also be associated with char;
les autres attributs (autres que ceux qui sont universels ou d’évenement) sont
dépréciés.
43
Attributs pour <td> et <th>
colspan and rowspan spécifie combien de colonnes et de lignes une
cellule doit enjamber
abbr est utilisé pour fournir une version abrégée du contenu de la cellule
headers indicate (for voice browsers) which headers correspond to that cell;
its value is a space-separated list of the header cell’s id attribute values
scope defines a way to associate header cells and data cells in a table
char and charoff, defined as for <tr>
axis allows you to add conceptual categories to cells (to be used
programmatically)
les autres attributs (autres que ceux qui sont universels ou d’évènement) sont
dépréciés.
Remarque
Un attribut donné pour un élément <td> et <th> remplace un attribut similaire
d’un élément contenant tel que <tr> ou <table>.
44
Enjambement de lignes et de colonnes
Notons que si la table possède 3 colonnes et qu’une cellule enjambe 2 colonnes
dans une ligne, nous n’avons besoin que de 2 éléments <td> sur cette ligne.
Exemple
<table>
<tr>
<td class="col1" colspan="3"> </td>
...
Remarque
Si une cellule n’a pas de contenu, inclure   pour éviter des problèmes avec
certains navigateurs.
45
Exemple
<h3> colspan </h3>
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
</table>
46
Head, Body and Foot
A table can be divided into three portions:
a header, using the element <thead>
a body using the element <tbody>
a foot using the element <tfoot>
The separation of the parts of the table allows for richer formatting of tables by
browsers (e.g., for aural browsers, or when printing a table).
Remarque
A table may contain several <tbody> elements to indicate different ”pages”.
Attention !
The <tfoot> element must appear before the <tbody> element in the code.
47
Exemple
<table>
<thead>
<tr>
<td colspan="4">Tête de table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">Pied de table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
...
</table>
48
Légendes et groupes de colonnes
Pour ajouter une légende, il suffit d’insérer une élément <caption> avant la
première ligne.
Pour formatter (avec CSS) des groupes de colonnes adjacentes, définir de tels
groupes avec l’élément <colgroup> et l’attribut span.
Exemple
<table>
<caption>This is the caption</caption>
<colgroup span="4" />
<colgroup span="2" />
<tr>
...
Remarque
Il est possible d’affiner le concept de groupes de colonnes en utilisant l’élément
<col>.
49
Exercice
Écrire le code HTML pour reproduire le tableau suivant :
50
Plan
1
Introduction
2
3
Listes et Tables
4
Liens et images
5
Formulaires
6
7
51
Hyperliens
Les hyperliens permettent au visiteur de naviguer entre des sites web distants en
cliquant sur des mots, phrases et images.
Pour créer un lien vers un autre document, utiliser l’élément <a>. La syntaxe
minimale pour son utilisation est :
<a href="URL"> </a>
Il est de bon usage de :
rendre le contenu de vos liens concis et précis
utiliser l’attribut title, affiché comme information contextuelle lorsque
l’utilisateur passe sur le lien
Exemple
<a href="http://www.google.com/" title="Search the Web
with Google">Google</a> is a very popular search engine.
52
URL
URL stands for Uniform Resource Locator. The general syntax is:
protocol://user:pass@host:port/path?query#anchor
Elements of a URL
The protocole, or scheme name, identifies the type of URL you are linking;
typically, this is http, but it may be https, ftp, file, ...
The username and password are optional (required for a password-protected
part of a site).
The host (name) or IP address gives the destination location for the URL.
The port number is optional; if omitted, the default for the scheme
(protocol) is used.
The path is used to find the resource specified; it is case-sensitive.
The query string contains data to be passed to web applications.
The anchor part when used with HTTP specifies a precise location on the
page.
53
URL
La plupart du temps, une URL est une simple URL absolue :
http://host/path
Elle peut aussi être une URL relative (i.e. la machine hôte est absente) :
path
Exemple
http://www.lemonde.fr/international/
page2.html
http://www.arte.tv/fr/70.html
Remarque
Quand le chemin ne se termine pas par un nom de fichier, le serveur web retourne
un fichier par défaut (e.g. index.html), ou un message d’erreur.
54
Ancres
Il y a 2 types d’ancre qui peuvent être créés avec <a> :
les ancres sources, qui sont construites en utilisant
<a> avec l’attribut href
les ancres destinations, qui sont construites en
utilisant <a> avec l’attribut id
Remarque
Les ancres sources sont celles auxquelles pensent les gens lorsqu’on évoque les
hyperliens. C’est quelque chose sur lequel on clique et qui nous amène quelque
part ailleurs.
55
Ancres destinations
Une ancre destination permet au créateur d’une page de marquer des points
spécifiques dans une page qu’il est possible d’accéder par des ancres sources.
Usages communs :
Liens “Back to top” au bas de (sections de) longues pages
Tables des matières permettant à l’utilisateur d’accéder à la section voulue
Liens vers des notes de bas de pages ou définitions
La valeur de l’attribut href d’une ancre source qui établit un lien vers une ancre
destination doit être la valeur de l’attribut id de l’ancre destination précédée du
caractère #.
Remarque
Il est possible pour une ancre source de créer un lien avers n’importe quel élément
possédant un attribut id.
56
Ancres sources et destinations
Exemple
<a id="pagetop">Navigation</a>
...
...
<a href="#pagetop">Page
top</a>
Attention !
Le contenu de l’ancre destination ne doit pas être vide.
57
Exemple
<h1><a id="top">Wrox Cafe Menu</a></h1>
<nav>
<a href="#starters">Starters</a> |
<a href="#mains">Main Courses</a> |
<a href="#desserts">Desserts</a>
</nav>
<p>Welcome </p>
<h2><a id="starters">Starters</a></h2>
<ul>
<li>Chestnut and Mushroom Goujons
(<a href="#vege">v</a>)</li>
<li>Goat Cheese Salad
(<a href="#vege">v</a>)</li>
<li>Honey Soy Chicken Kebabs</li>
<li>Seafood Salad</li>
</ul>
<p><small><a href="#top">Back to top</a><
/small></p>
<h2><a id="desserts">Desserts</a></h2>
...
<p><a id="vege">Items with a (v) are
suitable for vegetarians.</a></p>
58
Attributs pour <a>
In addition to the universal attributes (i.e. core and internationalization
attributes) and the UI event attributes, we find:
accesskey: provides a keyboard shortcut on a source anchor to activate a
link; ALT + SHIFT + accesskey for Firefox (≥ 2)
target: specifies in which window/frame the linked document will be
opened; use " blank" to open it in a new window and " self" for the
same window
tabindex: specifies the order in which, when the TAB key is pressed, the
links (or form controls) obtain focus
charset: indicates the character encoding of the linked document (e.g.,
UTF-8 or ISO-8859-1)
hreflang: specifies the language of the linked document (e.g., fr)
type: specifies the MIME type of the linked document
coords and shape: to deal with image maps
rel and rel: see documentation
59
Linking to E-mail Addresses
To open a new e-mail in the user’s default e-mail program, with a given e-mail
address, the syntax is:
<a href="mailto:[email protected]">E-mail me</a>
Remarque
It is possible to specify the subject, the body, the cc and the bcc of the message.
For example,
<a href="mailto:[email protected]?subject=XHTML&[email protected]">...</a>
Attention !
The address can be retrieved to be spammed. Use e-mail forms (with a server-side
scripting language such as JSP or PHP) or Javascript to protect it.
60
Images
En HTML, nous pouvons :
ajouter des images aux documents
utiliser les images comme hyperliens
diviser une image en sections associées à différents hyperliens; ceci est appelé
image map
Attention !
Attention à la taille des fichiers d’image.
Attention !
Les images sont soumises à des copyright.
61
Images
Les navigateurs tendent à supporter trois formats d’images bitmap :
GIF (Graphics Interchange Format) using 256 colors (8-bit GIF) or 16 colors
(4-bit GIF)
JPEG (Joint Photographic Experts Group Format)
PNG (Portable Network Graphics) using 256 colors (8-bit PNG) or many
more (24-bit PNG)
62
L’élément <img>
Pour inclure une image, utiliser <img> avec au moins 2 attributs :
src: nécessaire pour spécifier l’URL de l’image à charger ; l’URL peut être
absolue ou relative
alt: nécessaire pour spécifier une alternative textuelle à l’image au cas où
l’utilisateur ne pourrait la voir.
Exemple
<img src="logo-IUT.gif" alt="logo IUT de Lens" />
Remarque
Il est important que la valeur de l’attribut alt décrive réellement l’image. Une
image peut ne pas être visible pour 2 raisons :
le fichier n’a pas été trouvé par le navigateur
l’utilisateur est malvoyant
Cependant, si l’image est seulement utilisée pour améliorer la mise en place de la
page (et donc ne fournit aucune information), utiliser simplement alt="".
63
L’élément <img>
In addition to the universal and UI event attributes, <img> can also carry the
following attributes:
width and height: specify the width and height of the image (in pixels);
it allows the browser to lay out the image quicker
longdesc: used to indicate the URL of a document containing a detailed
description of the image
ismap and usesmap: used with image maps
align, border, hspace, vspace and name, which are deprecated
Attention !
If you want to display the image a lot smaller, you should create a new
reduced-size version of the image (thumbnail), instead of using width and/or
height attributes.
64
Exemple
<p>
Taille originale : width 311
height
300 <br />
<img src="penguin2.png" alt="penguin"
width="311" height="300" />
</p>
<p>
Rétrécissement : height 150 (sans
width) <br />
height="150" />
</p>
<p>
Déformation : width 300
height 150 <
br />
width="300" height="150" />
</p>
65
Images comme liens et Image Maps
Pour convertir une image en hyperlien, plutôt que de placer du texte au sein d’un
élément <a>, il suffit de placer une image.
Exemple
<a href="index.html" title="click to return home">
<img src="images/banana.gif" alt="Banana" /> </a>
On the other hand, image maps allow you to specify several links that correspond
to different clickable areas, called hotspots, of one single image. There are two
types of image maps:
Server-side image maps
Client-side image maps
Attention !
The hotspots shouldn’t be too small. Besides, you should put text links at the
bottom of the page, and indicate this with the alt attribute of the image.
66
Server-side Image Maps
The image is put inside a <a> element. A special attribute ismap is used, which
tells the browser to send the server the coordinates x, y where the user’s mouse
was when he/she clicked.
Exemple
<a href="map.php">
<img src="images/states.gif"
alt="Map of U. States"
ismap />
</a>
If the user clicks the image at position (50,75)
then the browser will send the following query
to the server:
http://www.example.org/map.php?50,75
67
Client-side Image Maps
To build one, we use the elements <map> and <area>. The image that forms
the map is an element <img> with an attribute usemap. The value of this
attribute is the value of the name attribute of the element <map> preceded by #.
The element <map> carries the attribute name and contains several <area>
elements.
Exemple
<img src="images/gallery_map.gif" alt="Gallery Map"
width="500" height="300" usemap="#gallery" />
<map id="idGallery" name="gallery">
<area shape="circle" coords="154,150,59"
href="foyer.html" alt="Gallery foyer" />
...
Remarque
There is another way of building an image map with an element <map> inside an
<object> element.
68
Exemple
69
Plan
1
Introduction
2
3
Listes et Tables
4
Liens et images
5
Formulaires
6
7
70
Formulaires (forms)
Chaque fois que vous souhaitez collecter des informations de la part d’un visiteur
de votre site, un formulaire est requis. Vous pouvez créer un formulaire en
combinant un certain nombre de composants :
zones/champs de saisie (Text fields)
bouttons (Buttons)
cases à cocher (Checkboxes)
listes à choix multiple (Select lists)
...
Attention !
HTML est utilisé uniquement pour présenter le formulaire à l’utilisateur; il ne
permet pas de traiter directement les données du formulaire.
71
Formulaires
Une fois que l’utilisateur a rempli le formulaire, il doit typiquement cliquer sur un
bouton pour envoyer les données vers un serveur. Les données sont envoyées au
serveur sous la forme de couples nom/valeur, un couple par composant du
formulaire :
le nom corresponds au nom du composant du formulaire
la valeur est celle que l’utilisateur a entrée ou sélectionnée
Exemple
<form action="http://www.totosa.fr/search.php"
method="get"
id="idSearch">
...
</form>
Attention !
Chaque élément <form> doit être accompagné au mois des 2 attributs action
et method.
72
Attributs pour l’élément <form>
action spécifie où envoyer les données du formulaire ; la valeur est une
URL correspondant à une page/programme sur une serveur web.
method spécifie la méthode à employer pour envoyer les données ; cela peut
être "get" ou "post"
enctype spécifie la manière dont les données doivent être encodées avant
d’être envoyées ; utiliser "multipart/form-data" comme valeur quand
un composant de formulaire est un “file upload control”
onsubmit et onreset peuvent être utilisées pour lancer une procédure de
contrôle (e.g. avec Javascript) quand l’utilisateur clique sur un bouton de
type submit ou reset
Attention !
Un formulaire peut contenir des éléments tels que des paragraphes, des en-têtes ...
mais ne peut pas contenir un autre formulaire.
73
Zones de saisie et boutons
Il y a 3 types de composants zones/champs de saisie :
champ de saisie (simple-ligne) en utilisant l’élément <input> avec l’attribut
type fixé à la valeur "text"
champ mot-de-passe en utilisant l’élément <input> avec l’attribut type
fixé à la valeur "password"
zone de saisie (multi-ligne) en utilisant l’élément <textarea>
Il ya 3 façons de créer un bouton :
en utilisant l’élément <input> avec l’attribut type fixé à la valeur
"submit", "reset" ou "button";
en utilisant l’élément <input> avec l’attribut type fixé à la valeur
"image";
en utilisant l’élément <button> avec l’attribut type fixée à la valeur
"submit", "reset" ou "button".
74
Champ de saisie
Un tel composant est créé avec l’élément <input> dont l’attribut type vaut
"text". En plus des attributs universels, les autres attributs de <input> sont :
name: donne le nom du couple nom/valeur qui est envoyé au serveur
value: fournit une valeur initiale
size: spécifie la largeur du champ en terme de caractères pouvant être
affichés
maxlength: spécifie le nombre maximal de caractères qu’un utilisateur peut
entrer
disabled, readonly, tabindex et accesskey
Exemple
<p> Search the site:
<input type="text" name="txtSearch" />
</p>
75
Exemple
<form action="http://..." method="get">
<p> Search the site:
<input type="text"
name="txtSearch" size="20"/>
</p>
<input type="submit" value="Search"/>
</form>
76
Champ mot-de-passe
Un tel composant est créé avec l’élément <input> dont
l’attribut type vaut "password". Le champ masque les
caractères tapés en les remplaçant par un point ou une
astérisque.
Exemple
<input type="password" name="pwdPassword"
size="20" maxlength="20" />
Attention !
Les mot-de-passes sont cachés à l’écran mais envoyés au serveur en texte clair. De
manière à les rendre sécurisés, il faut une connexion SSL entre le client et le
serveur.
77
Exemple
<p> Username:
<input type="text"
name="txtUser" size="20" />
</p>
<p> Password:
<input type="password"
name="pwdPass" size="20" />
</p>
<input type="submit" value="Log in" />
</form>
78
Zones de saisie
Un tel composant est créé avec l’élément <textarea>. Il permet à l’utilisateur
d’entrer plus d’une ligne de texte.
Exemple
Please, tell us what you think: <br />
<textarea name="txtFeedback" rows="10" cols="50" >
Enter your feedback here.
</textarea>
Remarque
Les attributs rows et cols spécifient le nombre de lignes et de colonnes du
composant textarea.
Attention !
Vous avez toujours besoin d’une balise ouvrante et d’une balise fermante pour
<textarea>, même si le contenu est vide (à cause de certains navigateurs).
79
Exemple
Please, tell us your opinion: <br />
<textarea name="txtFeedback"
rows="10" cols="50" >
Enter your feedback here.
</textarea>
<br />
<input type="submit" value="Submit" />
</form>
80
Boutons avec <input>
Avec l’élément <input>, le type de bouton que vous créez est spécifié à l’aide de
l’attribut type. Ses valeurs possibles sont :
"submit": crée un bouton qui soumet automatiquement les données du
formulaire (lorsqu’on clique dessus)
"reset": crée un bouton qui réinitialise automatiquement les composants à
leurs valeurs initiales
"button": crée un bouton qui peut être utilisé pour exécuter un script coté
client
Exemple
<input type="submit" value="Soumission" />
<input type="reset" value="Clear" />
<input type="button" value="Calcul" onclick="calculer()" /
Remarques
L’attribut value spécifie le texte affiché sur le bouton. Les attributs onclick,
onfocus et onblur peuvent être utilisés pour lancer une procédure de contrôle.
81
Utiliser des images pour les boutons
Vous pouvez utiliser une image pour un bouton plutôt que
d’utiliser un bouton standard. Un tel composant est créé
avec <input> dont l’attribut type vaut "image". Nous
avons besoin de 2 attributs supplémentaires :
"src": spécifie la source du fichier contenant l’image
"alt": fournit une alternative textuelle à l’image
Exemple
<input type="image" name="btnPanic"
src="imagePanic.gif" alt="submit" />
Remarque
Un bouton image est un bouton de type submit. En outre, les coordonnées x et y
de l’endroit où l’utilisateur a cliqué sont envoyées au serveur.
82
Exemple
input, button { margin-bottom:10px; }
<p> Name
<input type="text" name="txtName" />
</p>
<input type="submit" name="btnVoteRed"
value="Vote for reds" />
<input type="submit" name="btnVoteBlue"
value="Vote for blues" />
<br />
<input type="reset" value="Clear" /> <br>
<input type="button" value="Calculate"
onclick="calculate()" /> <br />
<input type="image" name="btnImage"
src="submit.gif" alt="submit" />
</form>
83
L’élément <button>
L’élément <button> est un ajout plus récent (que <input>) qui permet de
spécifier le texte figurant sur le bouton entre les balises ouvrantes et fermantes.
Exemple
<button type="submit"> Submit </button>
<button type="reset">
<strong> Clear this form </strong>
</button>
<button type="button"> Compute something </button>
<button type="button">
<img src="images/submit.gif" alt="Another submit" />
</button>
Attention !
Faire attention à cet élément car les navigateurs le traitent différemment.
84
Exemple
<button type="submit">Submit</button>
<br />
<button type="reset">
<strong> Clear this form </strong> I
want to start again
</button>
<br />
Compute something
</button>
<br />
<img src="fig.gif" alt="submit" />
</button>
</form>
85
Cases à cocher
L’utilisateur peut basculer entre les positions on et off en cliquant sur la case à
cocher. Un tel composant est créé avec <input> dont l’attribut type vaut
"checkbox". Ce composant est idéal pour :
fournir une simple réponse oui/non avec une case à cocher
sélectionner plusieurs items d’une liste d’options possibles
Exemple
<input type="checkbox" name="chkAccept" checked />
I accept the terms ... <br />
<input type="checkbox" name="chkSkills" value="css"/> CSS <br />
<input type="checkbox" name="chkSkills" value="php"/> PHP <br />
Remarques
En l’absence de l’attribut value, la valeur est automatiquement "on".
Plusieurs cases à cocher peuvent partager le même nom.
86
Exemple
<b> Quelles sont vos compétences ? </b>
<input type="checkbox" name="chkSkills"
value="html" /> HTML <br />
...
<input type="checkbox" name="chkSkills"
value="php" /> PHP <br />
</form>
<br />
<input type="checkbox" name="ack"
checked />
I accept the conditions <br />
< input type="submit" />
</form>
87
Boutons radios
L’utilisateur peut sélectionner une seule option à un moment donné dans un
groupe qui a été déclaré. Un tel composant est créé avec <input> dont
l’attribut type vaut"radio".
Exemple
<input type="radio" name="radClass"
value="First"/> First class
value="Business"/> Business class
Remarque
Un groupe de boutons radios correspond à tous les boutons radio partageant la
même valeur de l’attribut name.
Attention !
Vous devez fournir au moins 2 boutons radios dans chaque groupe.
88
Exemple
<b> En quelle classe voulez-vous
voyagez ? </b> <br />
value="First"/> Première <br />
value="Biz"/> Business <br />
value="Eco"/> Economie <br />
<input type="submit" value="Send" />
</form>
89
Exercice
On souhaite écrire le formulaire suivant qui comporte un champ de saisie, trois
cases à cocher et un bouton submit. Pour chaque case à cocher, la description est
donnée ici par une image. Les images sont des icônes de taille 32x32 pixels et ont
pour nom java.png, python.png et php.png.
Attention !
Dans la “vraie vie”, on évitera d’utiliser une image plutôt que du texte pour une
utilisation aussi sensible.
90
Listes à choix multiple
Une liste à choix multiple permet de sélectionner un item dans une liste
déroulante, et peut prendre bien moins de place qu’un groupe de boutons radios.
Un tel composant est créé avec <select> contenant plusieurs éléments
<option>.
Exemple
<select name="selColor">
<option value="red"> Red </option>
<option value="green"> Green </option>
...
</select>
Parmi les attributs pour <select>, on trouve :
size: spécifie le nombre de lignes de la liste pouvant être visibles à un
instant donné; on peut alors obtenir une liste avec un ascenseur
multiple: permet de sélectionner plusieurs items dans la liste
91
Exemple
<select name="selColor">
<option selected value="">Select color
</option>
<option value="red"> Red </option>
<option value="green"> Green </option>
<option value="blue"> Blue </option>
</select>
<input type="submit" value="Choose" />
</form>
<select name="selDay" size="4" >
<option value="Mon">Monday</option>
<option value="Tue">Tuesday</option>
...
<option value="Sun">Sunday</option>
</select>
</form>
92
Grouping Options
It is possible to group options using the <optgroup> element which acts as a
container for several options. The <optgroup> element can carry a label
attribute.
Exemple
<select name="sellInformation">
<optgroup label="Hardware">
<option value="Desktop"> Desktop computers </option>
<option value="Laptop"> Laptop computers </option>
</optgroup>
...
Remarque
To initially have one option selected, you must write
<option selected ...
93
File Upload Controls
You can propose a form control in order to allow the user to upload a file to the
server. Such a control is created by an element <input> with an attribute type
whose value is "file".
Exemple
<form enctype="multipart/form-data" ...>
<input type="file" name="fileUpload" accept="image/*" />
...
Remarque
The enctype attribute of the <form> alement indicates here that only files with
an image format can be uploaded; but this is partially supported by browsers.
Attention !
The method and enctype attributes of the <form> element must be given the
values "post" and "multipart/form-data", repectively.
94
Composants cachés
Pour passer de l’information entre différentes pages
sans que l’utilisateur ne le voie, vous pouvez utiliser
un composant caché. Un tel composant est créé avec
<input> dont l’attribut type est fixé à "hidden".
Exemple
<input type="hidden" name="hidName" value="toto" />
Attention !
L’information contenue dans le composant caché ne doit pas être confidentielle
car elle est visible dans le code source.
95
Exemple
<form action="http://..." method="post"
enctype="multipart/form-data">
<input type="file" name="fileUpload"
accept="image/*" /> <br /> <br />
</form>
<p>
<strong>
NB : Il est nécessaire d’utiliser
method="post".
</strong>
</p>
<br />
<input type="hidden" name="secret"
value="coucou" />
<input type="submit" value="Click here.
" />
</form>
96
L’élément <label>
Pour tout composant de formulaire n’ayant pas un attribut label, il est de
bonne pratique d’utiliser l’élément <label>. La valeur de l’attribut for de
l’élément <label> doit être la valeur de l’attribut id d’un composant.
Exemple
<tr>
<td> <label for="idName"> User name </label> </td>
<td> <input type="text" id="idName" name="txtName" /> </td>
Remarque
Pour un champ de saisie, il est habituel de placer le label à gauche, tandis que
pour les cases à cocher et les boutons radios c’est à droite.
Remarque
Une alternative est d’utiliser l’élément <label> en tant que conteneur, mais cela
ne permet pas de contrôler complètement l’endroit où le label sera positionné.
97
Elts <fieldset> and <legend>
Pour de grands formulaires, les éléments
<fieldset> et <legend> peuvent aider à grouper
les composants :
<fieldset> crée une bordure
<legend> ajoute une légende
Exemple
<fieldset>
<legend> <em> Contact Information </em> </legend>
<label> First name: <input type="text" name="txtFName" />
...
Attention !
Lorsqu’il est utilisé, l’élément <legend> doit toujours être le premier fils de
l’élément <fieldset>.
98
Exemple
<form>
<fieldset>
<legend> <em> Connectez vous </em>
</legend>
<table>
<tr>
<td> <label for="idName">
User name </label> </td>
<td> <input type="text" id="idName"
name="txtUserName" /> </td>
</tr>
<tr>
<td> <label for="idPwd"> Password </
label> </td>
<td> <input type="password" id="idPwd"
name="pwdPassword" /> </td>
</tr>
</table>
</fieldset>
<p> <input type="submit" value="Send" /> </p>
</form>
<p>
<strong> NB : Ne pas utiliser methood="get"
dans la vraie vie car le mot de passe est
visible lors de l’envoi.
</strong>
</p>
99
Contrôler le focus
Les éléments avec lesquels l’utilisateur peur interagir peuvent recevoir le focus.
Pour contrôler l’ordre dans lequel les éléments peuvent obtenir le focus, utiliser
l’attribut tabindex avec une valeur comprise entre 0 et 32767.
Exemple
<input type="checkbox" name="chkN" value="1" tabindex="3"
<input type="checkbox" name="chkN" value="2" tabindex="7"
Remarque
0 est pour les éléments sans l’attribut tabindex.
Attention !
Un élément désactivé (disabled) ne peut obtenir le focus.
100
Access Keys
Access keys représentent des raccourcis clavier.
Exemple
<legend accesskey="c">
Contact Information (SHIFT + ALT + C)
</legend>
...
<input accesskey="e" type="submit" value="Enter" />
Les éléments suivants peuvent être accompagnés de l’attribut accesskey :
<a>, <area>, <button>, <input>, <label>, <legend>,
<textarea>
les éléments suivants peuvent être accompagnés de l’attribut tabindex :
<a>, <area>, <button>, <input>, <object>, <select>,
<textarea>
101
Composants désactivés et en lecture seule
Certains composants de formulaire peuvent porter les attributs disabled et
readonly.
readonly: spécifie que l’utilisateur ne peut changer la valeur du composant
(mais un scripte peut). Un couple nom/valeur pour le composant est envoyé
lorsque le formulaire est soumis.
disabled: spécifie que l’utilisateur ne peut changer la valeur du composant
(mais un scripte peut réactiver le composant). Un couple nom/valeur pour le
composant n’est pas envoyé au serveur lorsque le formulaire est soumis.
102
Attribut placeholder
Cet attribut permet de placer une indication au niveau de certains éléments
<input>, disparaissant dés que l’utilisateur entre une information.
Exemple
<input type="text" name="query" placeholder="Recherche">
<button type="submit">OK</button>
<input type="text" name="lgn" placeholder="Nom d’utilisateur">
<input type="password" name="pwd" placeholder="Mot de passe">
<button type="submit">Se connecter</button>
103
Validation : HTML
Un test de validation est effectué à chaque soumission (bouton submit) pour tout
controle ayant l’attribut required Pour une validation instantanée (c’est-à-dire,
dés que l’utilisateur quitte un champ), il faut utiliser Javascript.
Remarque
Pour désactiver (temporairement) la validation au niveau d’un formulaire, il faut
utiliser novalidate au niveau de l’élément <form>. Une alternative est
d’utiliser formnovalidate au niveau d’un bouton (submit).
Exemple
<form ... novalidate>
<input type="text" name="login" required>
<input type="text" name="mail" required>
...
104
Validation : CSS
Il est possible d’utiliser les pseudo-classes suivantes pour accompagner la gestion
de validation :
:required, pour tout élément <input> ayant l’attribut required
:optional, pour tout élément <input> n’ayant pas l’attribut required
:valid et :invalid pour tout élément valide et invalide couramment
:in-range et :out-of-range pour les éléments qui utilisent les
attributs min et max
Exemple
input:required:invalid {
background-color:lightyellow;
}
105
Validation : expressions régulières et attribut pattern
Il est possible d’utiliser l’attribut pattern pour forcer le texte tapé à respecter
une certain forme, donnée par une expression régulière.
Exemple
<label for="promoCode">Promotion Code</label>
<input id="promoCode" placeholder="QRB-001" title=
"Your promotion code is three uppercase letters, a dash,
then three numbers" pattern="[A-Z]{3}-[0-9]{3}">
Remarque
Certaines
106
Validation : Javascript
Il est possible d’utiliser la fonction setCustomValidity de Javascript pour
controler la validité du texte tapé.
Exemple
<script>
function validerCommentaire(control) {
if (control.value.length < 20)
control.setCustomValidity("Commentaire trop court.");
else
control.setCustomValidity(""); // pas d’erreur
}
</script>
<textarea oninput="validerCommentaire(this)" required>
</textarea>
107
Validation : Polyfill
Pour gérer les problèmes rencontrés avec les navigateurs anciens (type IE), étudier
les solutions sur http://tinyurl.com/polyfills, comme par exemple
http://tinyurl.com/html5forms.
Exemple
<script src="shared/js/modernizr.com/Modernizr-2.5.3.forms.j
</script>
<script src="shared/js/html5Forms.js"
data-webforms2-support="all"
data-webforms2-force-js-validation="true">
</script>
Remarque
On peut simplement énumérer les fonctionnalités dont on a besoin comme par
exemple :
data-webforms2-support="validation,placeholder"
108
Attributs autofocus et autocomplete
autofocus permet de placer le focus sur un controle <input> donné.
autocomplete permet d’éviter l’auto-completion lorsque cela est sensible
(login, etc.) ; valeurs on/off.
Exemple
<form ... autocomplete="off">
<input type="text" name="login" autofocus>
...
Remarque
Il n’est possible d’utiliser autofocus qu’une seule fois par formulaire.
109
Attributs autocorrect, autocapitalize ...
Il peut etre pertinent de régler certains de ces attributs, notamment pour certains
mobiles.
autocorrect pour la correction automatique (on/off).
autocapitalize pour la mise en majuscule automatique (on/off).
spellcheck (true/false)
Exemple
<form autocomplete="off" autocapitalize="off" autocorrect="off">
<input name="name" placeholder="Please enter your name"><br>
<input name="street" placeholder="Please enter street"><br>
<textarea cols="10" rows="8" ></textarea>
</form>
110
Nouveaux controles (HTML5)
Nouvelles valeurs de type pour <input> :
email, adresse unique ou liste (avec la virgule comme séparateur) si
l’attribut multiple est positionné
tel
url
number, nombre avec la possibilité d’encadrer celle-ci avec les attributs min
et max et de gérer les parties fractionnaires avec step
range, pour choisir un nombre à l’aide d’un slider
color, pour choisir une couleur à l’aide d’une boite de dialogue
search
Exemple
<label for="email">Email <em>*</em></label>
<input id="email" type="email" required>>
<label for="age">Age<em>*</em></label>
<input id="age" type="number" min="0" max="120" step="0.5">
111
Nouveaux controles (HTML5)
Pour entrer une date ou heure, nous disposons des valeurs suivantes de type
pour <input> :
date, pour choisir une couleur à l’aide d’une boite de dialogue ; format
YYYY-MM-DD
datetime; format YYYY-MM-DDTHH:mm:ss (secondes optionnelles)
datetime-local
month ; format YYYY-MM
week, format YYYY-Www (par exemple, 2014-W02)
time ; format HH:mm:ss.ss (secondes optionnelles).
Remarque
Possibilité d’utiliser les attributs min et max. Par exemple :
<input type=”date” min=”2014-01-01” max=”2014-12-31”>
Remarque
Utiliser polyfill, par exemple la librairie HTML5Forms pour les navigateurs qui
n’implantent pas ces éléments
112
Exemple
Telephone Number:<br>
<input type="tel" name="txtTel">
Email:<br>
<input type="email" name="txtEmail">
Favorite Color:<br>
<input type="color" name="txtColor">
Date of Birth:<br>
<input type="date" name="txtDate">
113
Suggestions avec datalist
Pour créer une liste de suggestions, il faut créer un élement <datalist> en y
plaçant des <option> et l’associer à un autre élément à l’aide de l’attribut
list.
Exemple
<datalist id="animaux">
<option value="zebre">
<option value="chat">
<option value="caribou">
...
<option value="crabe">
</datalist>
...
<input list="animaux">
Remarque
Il est possible d’utiliser l’attribut label en plus de value ; le label sera affiché,
la veleur sera envoyée.
114
Elements <progress> et <meter>
L’élément <progress> affiche une barre de progression palpitante, sauf si une
valeur est donnée à l’attribut value. L’élément <meter> affiche une barre
(jauge) indiquant une valeur relative par rapport à un intervalle.
Exemple
<progress>Task in progress...</progress>
<progress value=0.50>50%</progress>
<progress max=200 value=100>50%</progress>
<meter min="5" max="70" value="28">28 pounds</meter>
<meter min="5" max="100" high="70" value="79">79 pounds</meter>
Remarque
Un jeu de couleurs est utilisé pour les jauges selon que les valeurs soient jugées
basses ou élevées par rapport aux valeurs des attributs low and high.
115
Plan
1
Introduction
2
3
Listes et Tables
4
Liens et images
5
Formulaires
6
7
116
Technologies
Encore à venir pour HTML5 :
gestion copyright (HTML 5.1 ?)
audio/video recording (element <device> ?)
controle fin du streaming et buffering
gestion dynamique pour l’audio
117
Element <audio>
Grande simplicité.
Exemple
<audio controls src="song.mp3">
</audio>
Remarque
Il est nécessaire d’utiliser une balise ouvrante et une balise fermante
118
Attributs pour <audio>
autoplay specifies that the audio will start playing as soon as it is ready
controls specifies that audio controls should be displayed (such as a
play/pause button etc)
loop specifies that the audio will start over again, every time it is finished
muted specifies that the audio output should be muted
preload avec 3 valeurs possibles :
I
I
I
auto : the browser should load the entire audio file when the page loads
metadata : the browser should load only metadata when the page loads
none the : browser should NOT load the audio file when the page loads
src specifies the URL of the audio file
119
Element <video>
Grande simplicité.
Exemple
<video controls src="film.mp4">
</video>
Remarque
Il est nécessaire d’utiliser une balise ouvrante et une balise fermante
120
Attributs pour <video>
Les mêmes que pour <audio>, et aussi :
height
width
poster qui indique le nom d’un fichier contenant une image utilisée si :
I
I
I
la première image de la video n’a pas encore été téléchargée
si l’attribut preload a comme valeur none
si le fichier video n’est pas trouvé (ou reconnu)
Exemple
<video src="video.mp4" poster="image.jpg">
</video>
Remarque
Si la boite est plus grande (valeurs explicites de heigth et width) que la video,
celle-ci est élargie dans la mseure du possible (pas de déformation)
121
Oui mais différents formats
Pour l’audio
Format
MP3
OGG Vorbis
WAV
Description
format classique
standard libre
audio brut
Extension
.mp3
.ogg
.wav
MIME
audio/mpeg
audio/ogg
audio/wav
Description
standard de l’industrie
standard libre
nouveau format (VP8)
Extension
.mp4
.ogv
.webm
MIME
video/mp4
video/ogg
video/webm
Pour la video
Format
H.264
OGG Theoria
WebM
122
Fichiers videos
Ils utilisent trois formats :
le codec video (H.264, Theoria ou WebM par exemple)
le codec audio (MP3 ou Vorbis par exemple)
le format global du container qui encapsule le tout (avec aussi par exemple
des fichiers pour les sous-titres et/ou des images)
Le type .mkv est un format qui peut utiliser du H.264 ou du Theoria.
123
Fallback
Devant le problème d’absence de standard, une solution de repli est de proposer
plusieurs formats :
Exemple
<audio controls>
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
Votre navigateur n’accepte pas l’element audio.
</audio>
<video controls>
<source src="film.webm" type="video/webm">
<source src="film.mp4" type="video/mp4">
Votre navigateur n’accepte pas l’element video.
</video>
Remarque
le problème, c’est qu’il faut encoder la même séquence audio ou video de
124
Autres solutions de repli
Pour une solution hénergée (Dailymotion, Youtube, etc.), il faut uploader la video
et récupérer la ligne de code qui correspond à un élément <iframe>.
Exemple
<iframe width="420" height="315"
src="http://www.youtube.com/embed/J---aiyznGQ"
allowfullscreen>
</iframe>
Pour une solution Flah, on utilise un élément <object>.
Remarque
Possibilité d’intégrer une solution de repli Flash au sein d’un élement HTML5, ou
le contraire (non présenté ici).
125
Avec Javascript pour l’audio
Exemple
<audio id="song" src="song.mp3"></audio>
...
var audio = document.getElementById("song");
audio.play();
...
audio.pause();
audio.currentTime = 0; // pause() et cette instruction = sto
...
audio.volume=5;
alert(audio.volume + " " + audio.duration);
...
var audiobis = document.createElement("audio");
if (audiobis.canPlayType("audio/ogg"))
audiobis.src = "song2.ogg";
else if (audiobis.canPlayType("audio/mp3"))
audiobis.src = "song2.mp3";
126
Avec Javascript pour la video
Exemple
<video id="film" src="film.mp4" ontimeupdate="progress()"></
<progress id="prg" value="0"></progress>
<p id="time">0 seconde.</p>
...
var video = document.getElementById("video");
video.play();
video.playbackRate = 2;
...
function progress() {
var newValue=video.currentTime / video.duration;
document.getElementById("prg").value = newValue;
document.getElementById("time").innerHTML=video.currentTim
}
127
Sous-titres
De nombreux formats pour timed text tracking :
WebVTT (Web Video Text Tracks Format) ; extension .vtt ; voir
http://dev.w3.org/html5/webvtt/
TTML (Timed Text Markup Language) ; W3C standard mais en perte de
vitesse
...
Exemple
00:00:03.000 --> 00:00:7.000
apparaı̂t après 3 secondes jusque 7 secondes
00:01:00.000 --> 00:01:10.000
dure 10 secondes à partir d’une minute
00:01:10.000 --> 00:01:12.000
<i> sous-titre </i> en italique juste après le précédent
Remarque
Il existe des outils pour créer les sous-titres. Par exemple
http://ie.microsoft.com/testdrive/Graphics/CaptionMaker/
128
Sous-titres : élément <track>
Exemple
<video controls width="600" height="400">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<track src="movie.vtt" srclang="en" kind="subtitles"
label="English" default>
<track src="movieFr.vtt" srclang="fr" kind="subtitles"
label="French">
</video>
Remarque
Il existe un polyfill pour les sous-titres, tel que par exemple http://captionatorjs
129
Plan
1
Introduction
2
3
Listes et Tables
4
Liens et images
5
Formulaires
6
7
130
Compatibilité avec HTML5
Pour connaitre le support HTML5 de votre navigateur : http://html5test.com/
131
Pour connaitre le support HTML5 des différents navigateurs : http://caniuse.com
132
Pour connaitre les statistiques des navigateurs : http://gs.statcounter.com
133
Pour connaitre les propriétés supportées par le navigateur (client), télécharger
modernizr depuis http://modernizr.com
Exemple
<head>
...
<script src="modernizr-latest.js"></script>
</head>
<body>
<p>The verdict is... <span id="result"></span></p>
<script>
var result = document.getElementById("result");
if (Modernizr.draganddrop)
result.innerHTML = "drag-and-drop supported !";
else
result.innerHTML = "drag-and-drop not supported !";
</script>
</body>
134
Nouveaux éléments sémantiques en HTML5
Plutot que d’utiliser des éléments <div> pour structurer les pages, lorsque c’est
approprié, on utilisera :
<header> : pour l’en-tete de page (et aussi de parties)
<footer> : pour le bas de page (et aussi de parties) ; typically contains the
author of the document, copyright information, links to terms of use, contact
information, etc.
<nav> : définit un ensemble de liens de navigation
<aside> : définit du contenu juxtaposé à un autre élément (sidebar)
<main> : définit le contenu principal de la page ; un seul élément par page
<article> : définit du contenu autonome (pouvant etre distribué tel quel)
<section> : définit une section de la page (normalement contient un
heading)
135
Illustration
header
header
aside
main
article
nav
header
article
nav
section
section
div
article
aside
article
footer
footer
136
Element <time>
L’élement <time> est un autre élément sémantique, nouveau en HTML5, qui
permet d’indiquer une date ou un heure, voire les deux. On utilisera l’attribut
datetime.
Exemple
Il
Il
Il
Il
joue
joue
joue
joue
à <time>10:00</time>.
à <time datetime=10:00>10 heures</time>.
le <time datetime=2014-02-25>25 Février</time>.
le <time datetime=2014-02-25 10:00>25 Février à 10 h
Remarque
Il est aussi possible d’utiliser T comme séparateur
137
Element <time>
On peut préciser le fuseau horaire (voir http://en.wikipedia.org/wiki/Time zone)
Exemple
<time datetime=2014-02-25 10:00+01:00>25 Février à 10 heures
138
Autres éléments sémantiques en HTML5
<figure> et <figcaption> pour les illustrations ; <figcaption> doit
etre placé comme premier ou dernier fils
<output> : remplace <span> lorsque l’élément correspond au résultat
d’un calcul (effectué par Javascript)
<mark> : pour attirer l’attention sur du texte qui est devenu important.
<details> et <summary>
Exemple
<p> Le résultat est : <output id="result"></output> </p>
<figure>
<img src="pulpit.jpg" alt="The Pulpit Rock" />
<figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>
139
Editer du contenu
L’attribut <contenteditable> permet d’éditer le contenu d’un élément.
Exemple
function startEdit() {
document.getElementById("test").contentEditable = true;
}
function stopEdit() {
document.getElementById("test").contentEditable = false;
alert("Your edited content: " + element.innerHTML);
}
<div id="test" contenteditable="true">You can edit this.</di
<button onclick="startEdit()">Start Editing</button>
<button onclick="stopEdit()">Stop Editing</button>
Remarque
L’attribut designmode de document peut rendre tout le document éditable.
140
Web sémantique
Ajouter du sens à vos pages avec des meta-data !
Plusieurs standards :
ARIA (Accessible Rich Internet Applications) pour les screen readers
RDFa (Resource Description Framework), qui est complexe
Microformats, qui exploite l’attribut class
Microdata, qui exploite ses propres attributs
Remarque
microdata est supporté par Microsoft, Google, Yahoo, and Yandex. Voir
http://schema.org
141
Microdata
Attributs importants :
itemscope, pour commencer à définir un nouvel objet sémantique
itemtype, pour indiquer le type de l’objet à définir, comme par exemple
http://schema.org/Person
itemprop, pour indiquer un attribut de l’objet à définir
Remarque
La définition d’un objet sémantique peut mener à la définition interne d’un autre
objet.
Exemple
<p> Laurent Dupont </p>
<ul>
<li> 3 rue de paris 92100 Belvil </li>
<li> 03 34 54 21 89 </li>
<li> [email protected] </li>
</ul>
142
Microdata
Exemple
<p itemscope itemtype="http://schema.org/Person"
itemprop="name"> Laurent Dupont </p>
<ul>
<li itemprop="address"
itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress"> 3 rue de paris </span>
<span itemprop="postalCode">92100 </span>
<span itemprop="addressLocality"> Belvil <span>
</li>
<li itemprop="telephone"> 03 34 54 21 89 </li>
<li itemprop="email"> [email protected] </li>
</ul>
Remarque
Il faut parfois introduire des éléments <div> ou <span> supplémentaires.
143
Microdata
Il est possible de construire automatiquement et de manière conjointe les élements
HTML et microdata. Par exemple, à l’aide d’un site comme :
http://schema-creator.org
www.microdatagenerator.com
Intéret des meta-data :
information utilisable par les navigateurs ; pour le moment, peu avéré sauf
avec un plug-in tel que http://krofdrakula.github.io/microdata-tool
search engine optimization. Google supporte nombre de meta-data ; voir
http://tinyurl.com/GoogleRichSnippets.
Pour tester comment cela rend sous Google, voir
http://www.google.com/webmasters/tools/richsnippets
144
Canvas
Un objet permettant de dessiner des figures.
Exemple
canvas {
border: 1px dashed black;
}
<canvas id="test" width="500" height="300"></canvas>
Remarque
Il ne faut pas utiliser CSS pour définir les valeurs de width et height
145
Context
Il faut un objet context pour dessiner avec un canvas.
Exemple
window.onload = function() {
var canvas = document.getElementById("test");
var context = canvas.getContext("2d");
// dessiner ici avec l’objet context
}
Le système de coordonnées que l’on va utiliser est classique :
146
Exemple
Deux traits d’épaisseur 10 tracés séparément
Exemple
context.lineWidth = 10; context.strokeStyle = "rgb(205,40,40
// premier segment avec terminaison classique (butt)
context.moveTo(10,50);
context.lineTo(400,50); context.lineCap = "butt";
context.stroke();
// second segment avec terminaison arrondi (round)
context.beginPath();
context.lineTo(400,120); context.lineCap = "round";
context.stroke();
Remarque
La méthode beginPath permet de commencer la description d’un nouveau tracé
et la méthode stroke permet de réaliser ce tracé.
147
Exemple
Un triangle
Exemple
context.lineTo(50,250); context.lineTo(450,250);
context.closePath(); // dernier trait automatique
// Paint the inside.
context.fillStyle = "blue";
context.fill();
// Draw the outline.
context.lineWidth = 10;
context.strokeStyle = "red";
context.stroke();
Remarque
La méthode fill permet de remplir la dernière forme décrite.
148
Exemple
strokeRect(x,y,width,height)
fillRect(x,y,width,height)
arc(x,y,radius, startingAngle,endingAngle) ; utiliser 0 et 2*Math.PI pour un
cercle
arcTo
bezierCurveTo
quadraticCurveTo
149

Programmation Web HTML - CRIL

Transcription

Documents pareils

Formular Flugreisen

Demande d`un Extrait du Casier Judiciaire

JavaScript 5

Formulaire d`inscription/ Registration Form

Dátum narodenia

des explications sur la procédure utilisée

C:\Documents and Settings\000125694\Local Settings\Temp

FedEx Ground shipments only