Programmation Web HTML

(1)

Programmation Web HTML

Christophe Lecoutre lecoutre@cril.fr

IUT de Lens - CRIL CNRS UMR 8188 Universit´e d’Artois

France

D´epartement SRC – Septembre 2014

(2)

Plan

1 Introduction

2 El´éments et attributs élémentaires

3 Listes et Tables

4 Liens et images

5 Formulaires

6 Audio / Video (HTML5)

7 Encore plus de HTML5

(3)

Plan

1 Introduction

3 Listes et Tables

4 Liens et images

5 Formulaires

(4)

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.

(5)

Sites

Validation HTML

W3C Validator athttp://validator.w3.org HTML5 Validator athttp://html5.validator.nu Specifications/Ressources

alsacreations athttp://www.alsacreations.com (site fran¸cais) W3School athttp://www.w3schools.com

HTML5

caniuse athttp://caniuse.com moderniz athttp://modernizr.com

HTML5 polyfills on GitHub athttp://tinyurl.com/polyfill

(6)

Objectif

Ecrire des pages web avec :´

HTML : permet de d´efinir la structure des pages CSS : permet de d´efinir l’apparence des pages

Javascript : permet d’ajouter l’interactivit´e/le contrˆole Prendre en compte :

la simplicit´e d’utilisation : facilit´e de navigation pour les utilisateurs

l’accessibilit´e : rendre les sites utilisables `a autant d’utilisateurs que possible

(7)

Langages de balisage

Langages qui sp´ecifient 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)

´el´ements (elements) attributs (attributes)

(8)

Balises et ´ el´ ements

Description :

une balise est form´ee par un identifiant (identifier) et deux crochets d’angle (two enclosing angle brackets)

un élément est formé par un contenu (potentiellement vide) et deux balises de même identifiant l’encadrant

La balise gauche est appel´e la balise ouvrante tandis que la balise droite est appel´ee la balise fermante

La balise fermante poss`ede un “forward slash” apr`es le premier crochet d’angle

Exemple

<h1> A propos de HTML </h1>

Attention !

Une balisetagNamesans contenu peut s’´ecrire<tagName/>. On dit alors qu’elle estauto-fermante.

(9)

Attributs

Un attribut est form´e par : un nom

le symbole =

une valeur entre double apostrophes (quotes), ou simple apostrophes

Une liste (potentiellement vide) d’attributs séparés par des espaces est placé aprè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 ˆetre ´ecrits en lettres minuscules.

(10)

Tags, Elements, and Attributes

<h1 id="firstHeading"> A propos de XHTML </h1>

attribute name

attribute value

opening tag (with an attribute)

content of the element

closing tag

element

(11)

Tags, Elements, and Attributes

Exemple

<body>

<h1> Premier en-tete <\h1>

<p> coucou </p>

</body>

Remarque

Les commentaires sont plac´es entre des balises en utilisant la syntaxe

(12)

Versions de HTML

Histoire complexe : HTML 4.01

XHTML 1.0 (et XHTML 2) HTML5

De manière à valider un document HTML, une Document Type Declaration, ou DOCTYPE, doit être utilisée. Une DOCTYPE déclare au navigateur la Document Type Definition (DTD) à laquelle le document se conforme.

Remarque

Pour HTML5, on utilise simplement :

<!DOCTYPE html>

(13)

Squelette d’un document HTML5

<!DOCTYPE html>

<head>

</head>

<body>

...

</body>

</html>

(14)

Plan

1 Introduction

3 Listes et Tables

4 Liens et images

5 Formulaires

(15)

En-tˆ etes

HTML offre 6 niveaux d’en-tˆete (headings) : <h1>,<h2>,<h3>,<h4>,<h5>

et<h6>

Par d´efaut, les navigateurs affichent les contenus de :

<h1>,<h2>et<h3>en plus gros que la taille par d´efaut

<h4>avec la taille par d´efaut

<h5>et<h6>en plus petit que la taille par d´efaut

Remarque

On pourra avec CSS num´eroter automatiquement les en-tˆetes de section.

(16)

Exemple

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h3>Heading 3 bis</h3>

<h4>Heading 4 bis</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

(17)

Paragraphes et retours ` a la ligne

Deux éléments fréquents :

<p>est utilis´e pour construire des paragraphes

<br>est utilisé pour créer des retours à la ligne

Remarque

L’élément<br>est vide. On écrira plutôt<br />que<br/>ou<br>qui sont aussi autorisés maintenant.

Quelque soit le nombre d’espaces cons´ecutifs, seul un espace est affich´e. Cela est connus sous le terme dewhite space collapsing.

Exemple

<p>

ceci est un test de la balise p

avec retour a la ligne

</p>

(18)

Exemple

p { text-align:justify; }

<p>

Les chemin´ees crachaient

une puanteur de soufre, les tanneries

la puanteur de leurs bains corrosifs, ...

</p>

<p>

Les rivi`eres puaient, les places

puaient, les ´eglises puaient, cela

puait sous les ponts et dans les palais. <br />

Le paysan puait ...

</p>

(19)

Polices ` a espacement fixe

Le contenu d’un élément <pre>est écrit avec une police à espacement fixe, et préserve de plus à la fois les espaces et les retours à la ligne.

Exemple

<pre>

x | o | x ---

o | o | x ---

o | x | x

</pre>

(20)

Elements <em> et <strong>

Ces éléments ajoutent de l’information (structurelle) à des fragments de texte.

El´´ements 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 (plutôt que les éléments<i>et<b>) :

les outils tels que les lecteurs d’´ecran (destin´e aux personnes aveugles ou fortement malvoyantes) peuvent ajuster l’intonation

les programmes automatiques peuvent les extraire comme mots-cl´es (et/ou les indexer)

Remarque

Les éléments<i>et<b>sont réhabilités, mais juste pour la mise en forme. On peut nénamoins utiliser CSS à la place.

(21)

Exemple

<p> <strong> Fermer </strong> le gaz </p>

<p> En arrivant <em> t´el´ephoner </em> </p>

<br />

<p> Les mot-cl`es du document sont : <b>

HTML </b> et <b> CSS </b> </p>

<p> C’est peut-ˆetre plus beau ici <i> en italique </i> mais c’est un point de vue.</p>

(22)

Elements <dfn> et <address>

Comme “phrase elements”, nous trouvons ´egalement :

<dfn>indique que vous introduisez un terme sp´ecial ou nouveau, typiquement rendu en italique

<address>indique une adresse postale, habituellement `a la fin d’un document, ou encore une adresse de contact (cr´eateur d’une page web)

Exemple

<p> Une fonction est <dfn> recursive </dfn> ssi elle s’appelle dans son propre corps. </p>

IUT de Lens, <br />

Rue de l’universite, <br />

SP 16, 62307 LENS Cedex

</address>

(23)

Elements <abbr>, <cite>, <blockquote> et <q>

<abbr>indique une abr´eviation; si possible, `a accompagner d’un attribut title

<cite>contient une citation ou une référence à une autre source; souvent utilisé pour inclure des titres de livres, films ou chansons.

<blockquote>insère une longue citation (à l’intérieur d’un bloc) d’une autre source. A démarrer après une ligne vide et utiliser<p>à l’intérieur de

<blockquote>.

<q>insère une courte citation (à l’intérieur d’une phrase) d’une autre source.

Attention !

L’élément <cite>est à distinguer de l’attribut cite(dont la valeur doit être une URL) habituellement utilisé avec<blockquote>et<q>.

(24)

Exemple

<p> J’ai un ami appell´e <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 inspir´ees de <cite>

Beginning web programming with HTML, XHTML and CSS</cite> </p>

<p> Oscar Wilde a ´ecrit dans <cite lang="en">

The Picture of Dorian Gray</cite> :</p>

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

(25)

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 donn´e par l’utilisateur (d’un programme)

<samp>: le contenu d´esigne une sortie (d’un programme)

Exemple

int sum(int i, int j) { return i+j;

}

</code> </pre>

Attention !

Certains caractères sont réservés en HTML (voir diapositive suivante)

(26)

Caract` eres sp´ eciaux

Voici ces caract`eres :

Symbol Description Entity Name Number Code

& Ampersand & &

< Less than < <

> Greater than > >

" Double quote " "

Non-breaking    

space

Exemple

doit être écrit pour être affiché tel quel dans une page HTML sous la forme :

\<abbr title=\"Tim\"\>

(27)

Elements de pr´ esentation

Attention !

Lorsque cela est possible, pr´ef´erez une solution CSS

Ces éléments suivants peuvent s’avérer utiles :

<sup>: le contenu est ´ecrit en exposant

<sub>: le contenu est écrit en indice Autres éléments :

<wbr>pour g´erer les c´esures de mots longs (word breaking)

<b>pour caract`eres gras (bold).

<i>pour caract`eres en italique.

<u>(underline) et<strike>sont dépréciés utiliser CSS plutôt que d’employer<big>

(28)

El´ ements revisit´ es en HTML5

Ce sont :

<hr>defines a thematic break in an HTML page (e.g. a shift of topic) ; c’est un élément vide, donc é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>My new car is silver.</p>

<hr />

(29)

Exercice

1 Pour avoir une police `a espacement fixe, on utilise : a)<pre> b)<b> c)<tt> d) CSS

2 Pour mettre du texte en gras, on utilise :

a)<b> b)<em> c)<strong> d) CSS

3 Est-ce que ce qui suit est bien form´e ?

<p> Je suis <em> content </p> </em>

<h1> Programmation Web </h1>

<p> Il faut respecter la syntaxe </p>

Toto, rue des g´eants de la frite, Trouville

</adresse>

(30)

Exercice

</adresse>

(31)

Exercice

</adresse>

(32)

Exercice

</adresse>

(33)

Exercice

</adresse>

(34)

Exercice

</adresse>

(35)

Exercice

</adresse>

(36)

Editer du texte ´

Pour montrer les modifications faites à du texte, utiliser : l’élément<ins>pour un ajout; le texte inséré est souligné;

l’élément<del>pour une suppression; le texte détruit est barré.

Exemple

<p> Le meilleur jeu vid´eo 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 d´eveloppement.

(37)

Attributs universels

Ce sont les 3 attributs qui peuvent être utilisés sur la majorité des éléments HTML :

id: utilisé pour donner un identifiant unique à un élément ; la valeur doit commencer par une lettre;

class: utilisé pour spécifier qu’un élément appartient à un groupe (classe) spécifique ; la valeur est une liste de noms de classe (habituellement, une seul) avec l’espace comme séparateur;

title: donne un titre à un élément ; habituellement affiché comme information contextuelle (tooltip).

Attention !

L’attributstyleest déprécié, et l’attributnameplus valide en HTML.

Remarque

Les attributsidetclassseront particuli`erement utiles avec CSS.

(38)

Attributs d’internationalisation

Il y a 3 attributs d’internationalisation qui permettent à l’utilisateur d’écrire des pages dans différentes langues. Ils sont disponibles pour la plupart des éléments HTML.

dir: indique au navigateur dans quelle direction le texte est lu ; sa valeur peut ˆetre"ltr"ou"rtl".

lang: indique la langue principale ; gard´e pour des raisons de compatibilit´e.

Les valeurs delangsont 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’´el´ement html.

Toutefois, il est possible de les associer avec certains ´el´ements particuliers dans le corps du document.

(39)

Attributs d’´ ev´ enements

Les attributs d’événements permettent d’associer un scripte (programme) à un

´

ev´enement (e.g., un clic de souris ou l’appui d’une touche).

Il y a 10 attributs appelés collectivement attributs communs d’évènements : onclick,ondoubleclick

onmousedown, onmouseup,onmouseover,onmousemove, onmousepress

onkeypress, onkeydown,onkeyup

L’élément <body>accepte les évènements suivants : onload,onunload,

Les évènements associés aux formulaires sont :

onfocus,onblur,onsubmit, onreset,onselect,onchange

(40)

El´ ´ ements bloc et en ligne

Chaque élément appartient à l’une des deux catégories :

un élément bloc dé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 ´el´ements bloc.

un ´el´ement 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 ´el´ements en ligne.

Remarque

Les éléments bloc peuvent contenir d’autres éléments bloc ou en ligne Les

´

eléments en ligne ne peuvent apparaˆıtre qu’au sein d’éléments bloc, et ne peuvent pas contenir d’éléments bloc.

(41)

Grouper les ´ el´ ements avec <div> et <span>

Ces éléments permettent de grouper plusieurs éléments dans une page. Plus précisément,

<div>est utilisé pour grouper des éléments bloc

<span>est utilisé pour grouper des éléments en ligne

Exemple

<p> Lorsque l’alarme <span class="rouge" sonne </span> </p>

...

Remarque

Les éléments<div>et<span>n’affectent pas l’apparence de la page, mais sont communément utilisés avec CSS pour associer des styles à des sections de page.

(42)

Exemple

.gras { font-weight:bold; } .rouge { color:red; }

<p> En cas de danger, d’accident ...

... d’appel d’URGENCE : t´el xxxx. </p>

<p> Lorsque l’alarme d’´evacuation sonne

</p>

<ul>

<li> suivre les consignes </li>

<li> et surout ne <span class="rouge">

jamais pleurer </span> </li>

jamais paniquer </span> </li>

</ul>

</div>

(43)

Plan

1 Introduction

3 Listes et Tables

4 Liens et images

5 Formulaires

(44)

Listes

Unordered lists (<ul>) : sont des listes à puces Ordered lists (<ol>) : sont des listes numérotées

Definition lists (<dl>) : permettent de spécifier des termes et leurs définitions Chaque élément d’une liste est :

contenu dans un ´el´ement<li>pour les listes<ul>et<ol>;

composé d’un élément <dt>(le terme à définir) et d’un élément <dd>(la définition du terme) pour les listes<dl>.

Exemple

<ul>

</ul>

Remarque

Vous devez utiliser CSS pour contrˆoler la num´erotation des listes<ol>.

(45)

Exemple

<h3> Une liste non num´erot´ee </h3>

<ul>

</ul>

<h3> Une liste num´erot´ee </h3>

<ol>

</ol>

<h3> Une liste de d´efinitions </h3>

<dl>

<dd>Hypertext Markup Language</dd>

<dd>Cascading Style Sheet</dd>

<dd>Hypertext Preprocessor</dd>

</dl>

(46)

Listes imbriqu´ ees

Faire attention d’´ecrire proprement les listes imbriqu´ees. 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

(47)

Tables

Les tables sont constitu´ees de lignes et de colonnes. A chaque intersection d’une ligne et d’une colonne, on trouve une cellule. Une table est ´ecrite ligne par ligne.

Les éléments utilisé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-tˆete 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 être un élément <td>ou <th>, même si l’élément est vide.

(48)

Exemple

th,td { border: 1px solid black;

padding:10px; }

<table>

<tr>

<th>Charges</th>

<th>Revenus</th>

<th>Profit</th>

</tr>

<tr>

</tr>

...

<tr>

</tr>

</table>

(49)

Attributs pour <table> et <tr>

Pour l’´el´ement <table>:

summaryfournit une description succincte de la table (utile pour les lecteurs d’´ecran)

les autres attributs (autres que ceux qui sont universels ou d’évènement) sont dépréciés.

Pour l’´el´ement <tr>:

charis 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

charoffmay also be associated withchar;

les autres attributs (autres que ceux qui sont universels ou d’évenement) sont dépréciés.

(50)

Attributs pour <td> et <th>

colspanandrowspansp´ecifie combien de colonnes et de lignes une cellule doit enjamber

abbrest utilisé pour fournir une version abrégée du contenu de la cellule headersindicate (for voice browsers) which headers correspond to that cell;

its value is a space-separated list of the header cell’sidattribute values scopedefines a way to associate header cells and data cells in a table charandcharoff, defined as for<tr>

axisallows you to add conceptual categories to cells (to be used programmatically)

les autres attributs (autres que ceux qui sont universels ou d’évènement) sont dépréciés.

Remarque

Un attribut donné pour un élément<td>et<th>remplace un attribut similaire d’un élément contenant tel que<tr>ou<table>.

(51)

Enjambement de lignes et de colonnes

Notons que si la table possède 3 colonnes et qu’une cellule enjambe 2 colonnes dans une ligne, nous n’avons besoin que de 2 éléments<td>sur cette ligne.

Exemple

<table>

<tr>

...

Remarque

Si une cellule n’a pas de contenu, inclure   pour ´eviter des probl`emes avec certains navigateurs.

(52)

Exemple

<h3> colspan </h3>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

(53)

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.

(54)

Exemple

<table>

<thead>

<tr>

<td colspan="4">Tˆete de table</td>

</tr>

</thead>

<tfoot>

<tr>

<td colspan="4">Pied de table</td>

</tr>

</tfoot>

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

...

</table>

(55)

L´ egendes et groupes de colonnes

Pour ajouter une légende, il suffit d’insérer une élément<caption>avant la première ligne.

Pour formatter (avec CSS) des groupes de colonnes adjacentes, définir de tels groupes avec l’élément <colgroup>et l’attribut span.

Exemple

<table>

<caption>This is the caption</caption>

<tr>

...

Remarque

Il est possible d’affiner le concept de groupes de colonnes en utilisant l’´el´ement

<col>.

(56)

Exercice

Ecrire le code HTML pour reproduire le tableau suivant :´

(57)

Plan

1 Introduction

3 Listes et Tables

4 Liens et images

5 Formulaires

(58)

Hyperliens

Les hyperliens permettent au visiteur de naviguer entre des sites web distants en cliquant sur des mots, phrases et images.

Pour créer un lien vers un autre document, utiliser l’élément<a>. La syntaxe minimale pour son utilisation est :

Il est de bon usage de :

rendre le contenu de vos liens concis et pr´ecis

utiliser l’attributtitle, affich´e 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.

(59)

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.

(60)

URL

La plupart du temps, une URL est une simple URLabsolue: http://host/path

Elle peut aussi ˆetre une URLrelative(i.e. la machine hˆote 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 d´efaut (e.g. index.html), ou un message d’erreur.

(61)

Ancres

Il y a 2 types d’ancre qui peuvent être créés avec<a>: les ancres sources, qui sont construites en utilisant

<a>avec l’attributhref

les ancres destinations, qui sont construites en utilisant<a>avec l’attributid

Remarque

Les ancres sources sont celles auxquelles pensent les gens lorsqu’on ´evoque les hyperliens. C’est quelque chose sur lequel on clique et qui nous am`ene quelque part ailleurs.

(62)

Ancres destinations

Une ancre destination permet au créateur d’une page de marquer des points spécifiques dans une page qu’il est possible d’accéder par des ancres sources.

Usages communs :

Liens “Back to top” au bas de (sections de) longues pages

Tables des matières permettant à l’utilisateur d’accéder à la section voulue Liens vers des notes de bas de pages ou définitions

La valeur de l’attributhrefd’une ancre source qui établit un lien vers une ancre destination doit être la valeur de l’attributidde l’ancre destination précédée du caractère #.

Remarque

Il est possible pour une ancre source de créer un lien avers n’importe quel élément possédant un attributid.

(63)

Ancres sources et destinations

Exemple

<a id="pagetop">Navigation</a>

...

Attention !

Le contenu de l’ancre destination ne doit pas ˆetre vide.

(64)

Exemple

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

(65)

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

coordsandshape: to deal with image maps relandrel: see documentation

(66)

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:

Remarque

It is possible to specify the subject, the body, the cc and the bcc of the message.

For example,

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.

(67)

Images

En HTML, nous pouvons :

ajouter des images aux documents utiliser les images comme hyperliens

diviser une image en sections associées à différents hyperliens; ceci est appelé image map

Attention !

Attention `a la taille des fichiers d’image.

Attention !

Les images sont soumises `a des copyright.

(68)

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)

(69)

L’´ el´ ement <img>

Pour inclure une image, utiliser<img>avec au moins 2 attributs :

src: nécessaire pour spécifier l’URL de l’image à charger ; l’URL peut être absolue ou relative

alt: nécessaire pour spécifier une alternative textuelle à l’image au cas où l’utilisateur ne pourrait la voir.

Exemple

Remarque

Il est important que la valeur de l’attributaltdécrive réellement l’image. Une image peut ne pas être visible pour 2 raisons :

le fichier n’a pas été trouvé par le navigateur l’utilisateur est malvoyant

Cependant, si l’image est seulement utilis´ee pour am´eliorer la mise en place de la page (et donc ne fournit aucune information), utiliser simplementalt="".

(70)

L’´ el´ ement <img>

In addition to the universal and UI event attributes,<img>can also carry the following attributes:

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

ismapandusesmap: used with image maps

align,border,hspace,vspaceandname, 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 usingwidthand/or heightattributes.

(71)

Exemple

<p>

Taille originale : width 311 height

300 <br />

<img src="penguin2.png" alt="penguin"

width="311" height="300" />

</p>

<p>

R´etr´ecissement : height 150 (sans

width) <br />

height="150" />

</p>

<p>

D´eformation : width 300 height 150 <

br />

width="300" height="150" />

</p>

(72)

Images comme liens et Image Maps

Pour convertir une image en hyperlien, plutˆot que de placer du texte au sein d’un

´

el´ement<a>, il suffit de placer une image.

Exemple

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 thealtattribute of the image.

(73)

Server-side Image Maps

The image is put inside a<a>element. A special attributeismapis used, which tells the browser to send the server the coordinatesx,y where the user’s mouse was when he/she clicked.

Exemple

<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

(74)

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 attributeusemap. The value of this attribute is the value of thenameattribute of the element<map>preceded by #.

The element<map>carries the attributenameand contains several<area>

elements.

Exemple

<img src="images/gallery_map.gif" alt="Gallery Map"

width="500" height="300" usemap="#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.

(75)

Exemple

(76)

Plan

1 Introduction

3 Listes et Tables

4 Liens et images

5 Formulaires

(77)

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 cr´eer 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 utilisé uniquement pour présenter le formulaire à l’utilisateur; il ne permet pas de traiter directement les données du formulaire.

(78)

Formulaires

Une fois que l’utilisateur a rempli le formulaire, il doit typiquement cliquer sur un bouton pour envoyer les données vers un serveur. Les données sont envoyé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 entrée ou sélectionnée

Exemple

<form action="http://www.totosa.fr/search.php"

method="get"

id="idSearch">

...

</form>

Attention !

Chaque élément<form>doit être accompagné au mois des 2 attributsaction etmethod.

(79)

Attributs pour l’´ el´ ement <form>

actionspécifie où envoyer les données du formulaire ; la valeur est une URL correspondant à une page/programme sur une serveur web.

methodspécifie la méthode à employer pour envoyer les données ; cela peut être"get"ou "post"

enctypespécifie la manière dont les données doivent être encodées avant d’être envoyées ; utiliser"multipart/form-data"comme valeur quand un composant de formulaire est un “file upload control”

onsubmitetonresetpeuvent être utilisées pour lancer une procédure de contrôle (e.g. avec Javascript) quand l’utilisateur clique sur un bouton de type submit ou reset

Attention !

Un formulaire peut contenir des éléments tels que des paragraphes, des en-têtes ...

mais ne peut pas contenir un autre formulaire.

(80)

Zones de saisie et boutons

Il y a 3 types de composants zones/champs de saisie :

champ de saisie (simple-ligne) en utilisant l’élément <input>avec l’attribut typefixé à la valeur"text"

champ mot-de-passe en utilisant l’élément<input>avec l’attributtype fixé à la valeur"password"

zone de saisie (multi-ligne) en utilisant l’´el´ement<textarea>

Il ya 3 fa¸cons de cr´eer un bouton :

en utilisant l’élément<input>avec l’attributtypefixé à la valeur

"submit","reset"ou "button";

en utilisant l’élément<input>avec l’attributtypefixé à la valeur

"image";

en utilisant l’élément<button>avec l’attributtypefixée à la valeur

"submit","reset"ou "button".

(81)

Champ de saisie

Un tel composant est créé avec l’élément<input>dont l’attribut typevaut

"text". En plus des attributs universels, les autres attributs de<input>sont : name: donne le nom du couple nom/valeur qui est envoy´e au serveur value: fournit une valeur initiale

size: spécifie la largeur du champ en terme de caractères pouvant être affichés

maxlength: sp´ecifie le nombre maximal de caract`eres qu’un utilisateur peut entrer

disabled,readonly, tabindexetaccesskey

Exemple

<p> Search the site:

</p>

(82)

Exemple

<form action="http://..." method="get">

<p> Search the site:

<input type="text"

name="txtSearch" size="20"/>

</p>

<input type="submit" value="Search"/>

</form>

(83)

Champ mot-de-passe

Un tel composant est créé avec l’élément<input>dont l’attribut typevaut "password". Le champ masque les caractères tapés en les rempla¸cant par un point ou une astérisque.

Exemple

<input type="password" name="pwdPassword"

size="20" maxlength="20" />

Attention !

Les mot-de-passes sont cachés à l’écran mais envoyés au serveur en texte clair. De manière à les rendre sécurisés, il faut une connexion SSL entre le client et le serveur.

(84)

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>

(85)

Zones de saisie

Un tel composant est créé avec l’élément<textarea>. Il permet à l’utilisateur d’entrer plus d’une ligne de texte.

Exemple

Please, tell us what you think: <br />

Enter your feedback here.

</textarea>

Remarque

Les attributsrowsetcolssp´ecifient le nombre de lignes et de colonnes du composanttextarea.

Attention !

Vous avez toujours besoin d’une balise ouvrante et d’une balise fermante pour

<textarea>, mˆeme si le contenu est vide (`a cause de certains navigateurs).

(86)

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>

(87)

Boutons avec <input>

Avec l’élément<input>, le type de bouton que vous créez est spécifié à l’aide de l’attributtype. Ses valeurs possibles sont :

"submit": cr´ee un bouton qui soumet automatiquement les donn´ees du formulaire (lorsqu’on clique dessus)

"reset": crée un bouton qui réinitialise automatiquement les composants à leurs valeurs initiales

"button": crée un bouton qui peut être utilisé pour exécuter un script coté client

Exemple

Remarques

L’attributvaluespécifie le texte affiché sur le bouton. Les attributsonclick, onfocusetonblurpeuvent être utilisés pour lancer une procédure de contrôle.

(88)

Utiliser des images pour les boutons

Vous pouvez utiliser une image pour un bouton plutôt que d’utiliser un bouton standard. Un tel composant est créé avec <input>dont l’attribut typevaut"image". Nous avons besoin de 2 attributs supplémentaires :

"src": sp´ecifie 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 coordonnées x et y de l’endroit où l’utilisateur a cliqué sont envoyées au serveur.

(89)

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>

(90)

L’´ el´ ement <button>

L’élément <button>est un ajout plus récent (que<input>) qui permet de spécifier le texte figurant sur le bouton entre les balises ouvrantes et fermantes.

Exemple

<button type="submit"> Submit </button>

<strong> Clear this form </strong>

</button>

<button type="button"> Compute something </button>

</button>

Attention !

Faire attention à cet élément car les navigateurs le traitent différemment.

(91)

Exemple

<button type="submit">Submit</button>

<br />

<strong> Clear this form </strong> I want to start again

</button>

<br />

Compute something

</button>

<br />

<img src="fig.gif" alt="submit" />

</button>

</form>

(92)

Cases ` a cocher

L’utilisateur peut basculer entre les positions on et off en cliquant sur la case à cocher. Un tel composant est créé avec<input>dont l’attribut typevaut

"checkbox". Ce composant est id´eal pour :

fournir une simple réponse oui/non avec une case à cocher sélectionner plusieurs items d’une liste d’options possibles

Exemple

I accept the terms ... <br />

Remarques

En l’absence de l’attributvalue, la valeur est automatiquement"on".

Plusieurs cases `a cocher peuvent partager le mˆeme nom.

(93)

Exemple

<b> Quelles sont vos comp´etences ? </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>

(94)

Boutons radios

L’utilisateur peut sélectionner une seule option à un moment donné dans un groupe qui a été déclaré. Un tel composant est créé avec<input>dont l’attributtypevaut"radio".

Exemple

<input type="radio" name="radClass"

value="First"/> First class

<input type="radio" name="radClass"

value="Business"/> Business class

Remarque

Un groupe de boutons radios correspond `a tous les boutons radio partageant la mˆeme valeur de l’attributname.

Attention !

Vous devez fournir au moins 2 boutons radios dans chaque groupe.

(95)

Exemple

<b> En quelle classe voulez-vous voyagez ? </b> <br />

<input type="radio" name="radClass"

value="First"/> Premi`ere <br />

value="Biz"/> Business <br />

value="Eco"/> Economie <br />

<input type="submit" value="Send" />

</form>

(96)

Exercice

On souhaite écrire le formulaire suivant qui comporte un champ de saisie, trois cases à cocher et un bouton submit. Pour chaque case à cocher, la description est donnée ici par une image. Les images sont des icônes de taille 32x32 pixels et ont pour nomjava.png,python.pngetphp.png.

Attention !

Dans la “vraie vie”, on ´evitera d’utiliser une image plutˆot que du texte pour une utilisation aussi sensible.

(97)

Listes ` a choix multiple

Une liste `a choix multiple permet de s´electionner un item dans une liste

d´eroulante, et peut prendre bien moins de place qu’un groupe de boutons radios.

Un tel composant est créé avec<select>contenant plusieurs éléments

<option>.

Exemple

<option value="green"> Green </option>

...

</select>

Parmi les attributs pour<select>, on trouve :

size: spécifie le nombre de lignes de la liste pouvant être visibles à un instant donné; on peut alors obtenir une liste avec un ascenseur multiple: permet de sélectionner plusieurs items dans la liste

(98)

Exemple

<option selected value="">Select color

</option>

<option value="green"> Green </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>