Partie 3 : Un peu plus fort

- » Les Liens
- » Insertion d'images
- » Les Formulaires

- - Les Zones de texte
- - Les éléments d'options

- » La balise "Map"
- » Q.C.M

Les liens

On distingue plusieurs types de liens :

• les liens relatifs : lorsque vous voulez passez d'une page à une autre sur votre site, vous utiliserez le plus souvent les liens relatifs. Ils s'écrivent sous cette forme :
dossier/cible.html

• les liens absolus : ils sont de la forme "http://www.monsite.fr/cible.html", ils commencent très souvent par http:// contrairement aux liens relatifs. On les utilisent en général pour renvoyer vers les pages d'autres sites.

• Les ancres : C'est un type de lien particulier, en effet il renvoie à un endroit précis de la page dans laquelle vous vous trouvez.

Avant de commencer à voux expliquer quel balise utilise t-on pour faire des liens , je dois vous expliquer la nuance entre liens relatifs / liens absolus.

Liens relatifs / absolus

Les liens les plus simples sont les liens absolus :
http://www.monsite.fr/cible.html
pas compliqué, mais un peu long à écrire.

Les liens relatifs sont un peu plus compliqués, car ils sont "déterminés" par le dossier dans lequel se trouve la page. (on va prendre pour l'exemple une page "source.html" page dans laquel nous nous trouvons et une autre page "cible.html" page où nous voulons aller) :

◊ Si la page "cible.html" se trouve dans le même dossier que la page "source.html", pas de problème on écrit : "cible.html"

◊ Si la page "source.html" est à la racine du dossier et la page "cible.html" dans un sous dossier (dossier1), on devra écrire : dossier1/cible.html (de même si c'est dans le sous-dossier d'un sous-dossier, on écrira : dossier1/dossier2/cible.html).

◊ Si votre page "cible.html" se trouve à la racine et que vous êtes dans un sous-dossier, alors pour remonter d'un dossier vous devez écrire : ../cible.html

C'est peut-être un peu abstrait pour le moment, mais vous verrez avec l'habitude, ça devient très simple.

Honnêtement, je vous conseille de n'utiliser que des liens relatifs car lorsque vous transférez un site d'un emplacement vers un autre, les liens absolus, eux, changent (sauf pour des des fichiers qui ne changeraient jamais de place par exemple).

En html

C'est quand même pour ça qu'on est là, nous allons voir comment faire un lien en html.

On utilise la balise <a></a>, on doit ajouter l'attribut href pour indiquer l'adresse de la page cible (relatif ou absolu).

<a href="http://www.monsite.fr/cible.html">site super génial</a>

Nous venons de faire un lien absolu, voyons maintenant ce que cela donnerai en lien relatif :

<a href="cible.html">site super génial</a>

simple non ? bon dans le cas du lien relatif les pages "source.html" et "cible.html" se trouvent dans le même dossier.

Vous pouvez ajouter l'attribut title à la balise <a> : Une bulle d'aide s'affichera lorsque vous pointerez le lien.

<a href="cible.html" tile="Site vraiment super génial">mon site</a>

Les ancres

Une ancre vous permet d'aller directement à un élément précis contenu dans la page, lorsque celle ci est grande sinon il n'y a pas vraiment d'intérêts.
Pour faire une ancre, il vous suffit de rajouter l'attribut id à une balise qui va vous servir de repère. Sachez que toutes les balises peuvent être un repère, ainsi vous pouvez mettre un repère à une balise paragraphe <p>, à une balise titre <h1> ...
<h1 id="une_ancre"> titre </h1>

Il vous suffit ensuite de faire un lien classique, mais en rajoutant un # devant le nom de l'ancre :
<a href="#une_ancre">aller à l'ancre</a>

<a href="#une_ancre">Aller à l'ancre</a>
<h1 id=une_ancre>titre</h1>

Il est aussi possible de faire un lien vers l'ancre d'une autre page, rien de bien compliqué, il vous suffira d'écrire :
<a href="http://monsite.fr/cible.html#ancre">aller à cette page</a>.

Dernière petite astuce : si vous faites un lien de ce type là :

<a href="#">aller en haut de la page</a>

Vous remarquez qu'il n'y pas de nom après le #, cela a pour effet de vous remonter tout en haut de votre page.

Insertion d'images

Pour insérer une image, on utilise la balise <img />. Elle peut prendre plusieurs attributs mais deux d'entre eux sont indispensables :

• src : c'est la balise qui permet d'indiquer où se trouve l'image. Tout comme l'attribut href pour la balise <a>, vous pouvez indiquer le chemin absolu ou relatif, d'ailleurs, on peut dire que src est le pendant de href pour la balise <img />.

• alt : en fait, cet attribut n'est pas indispensable, en revanche il est obligatoire. Cela siginifie "texte alternatif", on en a besoin dans le cas ou l'image ne peut pas être téléchargé ou sur les navigateurs de personnes handicapées (non-voyant). Donc pour des raisons d'accessibilité, on met toujours un texte alternatif à l'image. De plus si l'image ne possède pas cet attribut, la page ne sera plus valide.

<img src="Images/mon_image.png" alt="texte alternatif" />

Evitez à tout prix les espaces et accents dans vos nom d'images, préférez le "underscore" ("_")

Deux attributs peuvent vous servir également width et heigth, le premier permet de définir la taille de l'image , le second sa hauteur. (en px)

Mettez vos images dans un paragraphe ( <p></p> ) car comme pour alt, si vous ne le faites pas, la page s'affichera certes normalement, mais ne sera plus valide.

Comme pour les liens vous pouvez faire une bulle d'aide pour vos images, l'attribut est le même, pour rappel, c'est title.

Vous pouvez également faire des images cliquables, c'est très simple, nous allons voir ça de suite.

Images cliquables

Pour faire une image cliquable, c'est très simple nous allons mélanger ce que nous avons vu avant sur les liens et ce que nous venons de voir sur les images.

Entre les balises <a></a>, vous n'êtes pas obligés de mettre du texte, vous pouvez très bien mettre une image.

<a href="http://www.monsite.fr/cible.html"><img src="Images/mon_image.png" alt="texte alternatif" /></a>

Voilà, c'est pas très compliqué, vous savez désormais a peu près tout ce qu'il faut savoir sur l'insertion d'images.

Les Formulaires

Les formulaires permettent par exemple, de faire un sondage, d'envoyer des commentaires, même des menus déroulants ...

Pour réaliser un formulaire, vous devez obligatoirement créer une balise <form> </form>. C'est la balise principale du formulaire, elle permet d'en indiquer le début et la fin.

<form>
<p>Texte à l'intérieur du formulaire.</p>
</form>

Attention, si vous voulez écrire du texte à l'intérieur du formulaire, vous devez obligatoirement l'écrire entre des balises de type block (comme <p> </p>).

Un formulaire est fait pour être envoyé. Supposons que votre visiteur vienne de taper un commentaire dans votre formulaire. Ce message doit être envoyé pour que vous puissiez le recevoir.

Comment faire pour envoyer le formulaire ? Comment traiter les données envoyées ?

On doit indiquer 2 attributs à la balise <form> afin de répondre à ces deux questions.

• method : cet attribut indique par quel moyen les données vont être envoyées. Il existe 2 moyens pour envoyer des données sur le web :

◊ method="get" : c'est une méthode en général assez peu adaptée, car elle est limitée à 255 caractères. La particularité vient du fait que les informations seront envoyées dans l'adresse de la page (http://...). La plupart du temps, je vous recommande d'utiliser l'autre méthode : "post".

◊ method="post" : c'est la méthode la plus utilisée pour les formulaires car on peut rentrer un grand nombre d'informations grâce à elle.

• action : c'est l'adresse de la page qui va traiter les informations. Cette page se chargera de vous envoyer un mail avec le message si c'est ce que vous voulez, ou bien d'enregistrer le message avec tous les autres dans une base de données. Cela ne peut pas se faire en XHTML / CSS, on utilisera en général un autre langage dont vous avez peut-être entendu parler : le PHP.

On va donc maintenant compléter la balise <form> avec les 2 attributs qu'on vient de voir.

Pour method, vous l'aurez deviné nous allons mettre la valeur "post". Pour action, il nous faut taper le nom d'une page spéciale en PHP ("traitement.php"). C'est cette page qui sera appelée lorsque le visiteur cliquera sur le bouton "Envoyer le formulaire".

<form method="post" action="traitement.php">
<p>Texte à l'intérieur du formulaire.</p>
</form>

On ne verra pas comment traiter ici les données envoyées, car il s'agit d'un autre language. On voit dans ce cas, une des limites au langage html.

Voyons maintenant comment insérer des zones de texte, des cases à cocher, des boutons dans notre formulaire.

• La zone de texte à une ligne : comme son nom l'indique, on ne peut écrire qu'une seule ligne à l'intérieur. Elle sert pour rentrer des textes courts, comme par exemple : "Entrez votre pseudo".

• La zone de texte multiligne : cette zone de texte permet d'écrire une quantité importante de texte sur plusieurs lignes.

Les zones de texte

Zone de texte à une ligne

Voilà à quoi cela ressemble :

Pour insérer une zone de texte, on va utiliser la balise <input /> (vous remarquerez que c'est une balise "seule").
On la reverra plusieurs fois dans la suite de ce cours. A chaque fois, ce sera son attribut type qui va changer.

Pour une zone de texte à une ligne, vous devrez donc taper :
<input type="text" />

Mais ce n'est pas tout ! Il manque un attribut qui sera très important : c'est le nom de votre zone de texte.
Il faut donc donner un nom à cette zone de texte, grâce à l'attribut name. Ici, on va supposer qu'on demande au visiteur de rentrer son pseudo :
<input type="text" name="pseudo" />

Ce qui nous donne donc :

<form method="post" action="traitement.php">
<p><input type="text" name="pseudo" /></p>
</form>

Pensez à entourer votre balise <input /> par une balise block comme <p></p> car sinon votre page web ne sera pas valide (cela vous est expliqué dans l'annexe).

Les labels

Si vous testez le code un peu plus haut vous verrez que seulement une zone de texte apparait, bon allez je vous montre :

Ok, mais qu'est ce que je dois mettre dans cette zone de texte ?

Bonne remarque, eh bien, c'est à cela que va nous servir la balise <label>, elle s'ouvre avant la balise <input /> et se ferme après.
Grâce à cette balise, on va pouvoir indiquer au visiteur ce qu'il doit mettre dans la zone de texte.

<form method="post" action="traitement.php">
<p>
<label>Votre Pseudo: <input type="text" name="pseudo" /></label>
</p>
</form>

Votre Pseudo:

Si votre navigateur n'est pas Internet Explorer, essayez de cliquer sur le texte "Votre pseudo" : vous allez voir que le curseur se place automatiquement dans la zone de texte correspondante. On a "lié" le label avec sa zone de texte pour qu'on sache à quoi il correspond.

Malheureusement, internet explorer ne prend pas en compte cette fonctionnalité, je vous conseille donc d'autres navigateurs qui sont plus à jour qu' internet explorer (plus mis à jour depuis 1999).

Attributs supplémentaires sur la balise <input />

Il existe quelques autres attributs sur la balise <input /> qui vous intéresseront sûrement.

Il est ainsi possible, si vous en avez besoin, de donner une valeur par défaut à votre zone de texte. Pour faire cela, il vous suffit d'ajouter l'attribut value à <input /> en indiquant quelle valeur vous voulez mettre au départ. Exemple :
<input type="text" name="pseudo" value="bob" />

Autre chose : vous pouvez modifier la largeur de votre zone de texte ainsi que le nombre maximal de caractères que l'on peut mettre dedans.
La largeur se définit avec size.
Le nombre maximal de caractères se définit avec maxlength.

Dans l'exemple suivant, la zone de texte contient le pseudo "bob" par défaut, elle fait 30 caractères de long mais on ne peut mettre que 10 caractères maximum à l'intérieur :

<form method="post" action="traitement.php">
<p>
<label>Votre Pseudo: <input type="text" name="pseudo" value="bob" size="30" maxlength="10" /></label>
</p>
</form>

Votre Pseudo:

Zone de mot de passe

Pour faire une zone de mot de passe, il ne vous faut que changer la valeur de l'attribut type. Ainsi au lieu de mettre "text" comme valeur vous mettrez "password".

Donc si l'on complète notre formulaire, cela nous donne :

<form method="post" action="traitement.php">
<p>
<label>Votre Pseudo: <input type="text" name="pseudo" value="bob" size="30" maxlength="10" /></label>
<br />
<label>Pass: <input type="password" name="mot_de_passe" /></label>
</p>
</form>

Votre Pseudo:
Pass:

Essayez, et vous verrez que lorsque l'on met "password" pour l'attribut type, tout ce que l'on écrit dans la zone de texte apparait sous forme d'étoiles.

Vous pouvez également utilisez les attributs vu précédemment pour un password.

Zone de texte multiligne

Les zones de texte multiligne se construisent quasiment comme les zones de texte à une ligne, la seule différence vient de la balise, en effet on utilise plus <input /> mais la balise <textarea></textarea>, oui cette fois-ce c'est une balise par paire.

A elle aussi, il faut lui donner un nom avec name, et utiliser un label qui explique de quoi il s'agit.

<form method="post" action="traitement.php">
<p>
<label>
Laisser un commentaire sur mon site :<br /> <textarea name= "commentaires" > </textarea>
</label>
</p>
</form>

Laisser un commentaire sur mon site :

On peut modifier la taille du textarea grâce a ces deux attributs

• rows : modifie le nombre de lignes.
• cols : modifie le nombre de colonnes.

<form method="post" action="traitement.php">
<p>
<label>
Laisser un commentaire sur mon site :<br /> <textarea name= "commentaires" rows= "10" cols= "50" > </textarea>
</label>
</p>
</form>

Laisser un commentaire sur mon site :
Oui mais pourquoi, on utilise cette balise ,on pourrait très bien utiliser la balise <input /> ?.

Cette balise nous permet de pré-remplir le textarea, un peu comme le value pour <input />, sauf que là, on va pouvoir remplir sur plusieurs lignes. On va donc mettre la valeur par défaut du textarea comme cela :

<form method="post" action="traitement.php">
<p>
<label>
Laisser un commentaire sur mon site :<br /> <textarea name= "commentaires" rows= "10" cols= "50" > Laissez tous vos commentaires sur le site ici, qu'ils soient positifs ou négatifs cela me permettra de l'améliorer par la suite. </textarea>
</label>
</p>
</form>

Laisser un commentaire sur mon site :
Laissez tous vos commentaires sur le site ici, qu'ils soient positifs ou négatifs cela me permettra de l'améliorer par la suite.

Les éléments d'options

En plus des zones de saisies, html vous permet d'utiliser tout un tas d'éléments d'options dans votre formulaire. Nous allons voir ici les cases à cocher, les zones d'options, et les listes déroulantes.

C'est parti !

Les cases à cocher

Voilà des cases à cocher, vous en avez déjà vu, j'en suis sûr :

Cochez vos sports favoris :
Football
Golf
Curling
Sieste

Bon, ici, rien de plus difficile qu'auparavant, on utilise toujours la balise <input />, on va juste changer la valeur de l'attribut type pour mettre "checkbox".
<input type="checkbox" name="choix" />
On n'oublie pas le <label> et c'est fini, vous savez tout sur les cases à cocher !

<form method="post" action="traitement.php">
<p> Cochez vos sports favoris :<br />
<label><input type="checkbox" name="football" /> Football</label><br />
<label><input type="checkbox" name="golf" /> Golf</label><br />
<label><input type="checkbox" name="curling" /> Curling</label><br />
<label><input type="checkbox" name="sieste" /> Sieste</label>
</p>
</form>

Grâce aux label, vous n'êtes pas obligés de cliquer directement sur la case, vous pouvez aussi cliquer sur le texte juste à côté (enfin, ça ne marche pas sur IE comme je vous l'ai dit...).
N'oubliez pas aussi de donner un nom à chaque case à cocher, cela vous permettra d'identifier plus tard quelles cases le visiteur a coché.
Vous pouvez également faire en sorte qu'une case soit déjà cochée par défaut. Pour cela, il suffit de rajouter l'attribut checked avec pour valeur "checked".

<form method="post" action="traitement.php">
<p> Cochez vos sports favoris :<br />
<label><input type="checkbox" name="football" checked="checked" /> Football</label><br />
<label><input type="checkbox" name="golf" /> Golf</label><br />
<label><input type="checkbox" name="curling" /> Curling</label><br />
<label><input type="checkbox" name="sieste" /> Sieste</label>
</p>
</form>

Essayer

Les zones d'options

Les zones d'options permettent de faire un seul choix et un seul parmis une liste (vous l'aurez remarqué, pour les cases à cocher, vous pouviez en cocher plusieurs).

Dans quelle tranche d'âge vous situez vous ?
Moins de 15 ans
15-25 ans
25-40 ans
+40

Encore une fois, on va utiliser la balise ... (roulement de tambours) ...<input />, mais vous l'auriez devinez, c'est donc la valeur de l'attribut type que l'on va changer. On mettra la valeur "radio". Mais la principale différence avec les cases à cocher, c'est que les zones d'options fonctionnent par groupe. Je m'explique , tout groupe d'options a le même nom (attribut name) mais a un attribut value différent à chaque fois.

<form method="post" action="traitement.php">
<p> Dans quelle tranche d'âge vous situez vous ?<br />
<label><input type="radio" name="age" value="moins_15" /> moins de 15 ans</label><br />
<label><input type="radio" name="age" value="15_25" /> 15 - 25 ans</label><br />
<label><input type="radio" name="age" value="25_40" /> 25 - 40 ans</label><br />
<label><input type="radio" name="age" value="+40" /> +40 ans</label>
</p>
</form>

Essayer

Ici, le plus important est de comprendre pourquoi l'attribut name doit prendre la même valeur, c'est tout simplement pour que la navigateur sache dans quel "groupe" se trouve le bouton, et donc pour que l'on puisse cocher une seule case seulement.
Donc, en fait nous avons ici créer un groupe d'options, où vous ne pouvez cocher qu'une seule option, si vous voulez créer un autre groupe d'options vous devez maintenant obligatoirement changer la valeur de son atttribut name. Cette valeur doit être unique pour chaque groupe d'options.

<form method="post" action="traitement.php">
<p> Dans quelle tranche d'âge vous situez vous ?<br />
<label><input type="radio" name="age" value="moins_15" /> moins de 15 ans</label><br />
<label><input type="radio" name="age" value="15_25" /> 15 - 25 ans</label><br />
<label><input type="radio" name="age" value="25_40" /> 25 - 40 ans</label><br />
<label><input type="radio" name="age" value="+40" /> +40 ans</label>
</p>
<p> Sur quelle planète vivez vous ?<br />
<label><input type="radio" name="planete" value="terre" /> La Terre</label><br />
<label><input type="radio" name="planete" value="mars" /> 15 - Mars</label><br />
<label><input type="radio" name="planete" value="pluton" /> Pluton</label><br />
<label><input type="radio" name="planete" value="jupiter" /> Jupiter</label>
</p>
</form>

Essayer

Si vous aviez mis la même valeur pour l'attribut name, vous n'auriez pu cocher qu'une seule case, et non deux comme on le veut dans l'exemple.
De plus, pour avoir une case sélectionnée par défaut, il vous suffit simplement de rajouter, comme vu précedemment, l'attribut checked="checked".

Listes déroulantes

Vous en avez surement déjà vu, voilà à quoi cela ressemble :

Eh bien devinez quoi ? fini la balise <input />, cette fois-ci on va voir deux nouvelles balises pour la construction d'une liste déroulante. la première est <select></select>, la seconde <option></option>

• <select></select>: indique le début et la fin de la liste déroulante, on lui rajoute l'attribut name pour donner un nom à la liste.

• <option></option> : Cette balise se place entre les balises <select></select>, on en met pusieurs (en fait une pour chaque choix possible). on lui rajoute l'attribut value pour pouvoir identifier le choix.

<form method="post" action="traitement.php">
<p>
<label>Choisissez une planète.<br />
<select name="planètes">
<option value="mercure"> Mercure </option>
<option value="vénus"> Vénus </option>
<option value="la_terre"> La Terre </option>
<option value="mars"> Mars </option>
<option value="jupiter"> Jupiter </option>
<option value="saturne"> Saturne </option>
<option value="uranus"> Uranus </option>
<option value="neptune"> Neptune </option>
<option value="pluton"> Pluton </option>
</select
</label>
</p>
</form>

Essayer

Il faut savoir aussi que pour une sélection par défaut, il n'est plus question ici de checked="checked" mais de selected="selected".

<form method="post" action="traitement.php">
<p>
<label>Choisissez une planète.<br />
<select name="planètes">
<option value="mercure"> Mercure </option>
<option value="vénus"> Vénus </option>
<option value="la_terre" selected="selected"> La Terre </option>
...
</select
</label>
</p>
</form>

Essayer

On peut également dans les listes déroulantes, organiser des groupes d'options à l'intérieur de la liste grâce à la balise <optgroup></optgroup>. Vous devez lui ajouter l'attribut label qui permet de donner un nom au groupe (attention il ne faut pas confondre avec la balise <label>).

Dans notre exemple, séparons les planètes en fonction de leur taille.

<form method="post" action="traitement.php">
<p>
<label>Choisissez une planète.<br />
<select name="planètes">
<optgroup label="Petites">
<option value="mercure"> Mercure </option>
<option value="vénus"> Vénus </option>
<option value="la_terre"> La Terre </option>
<option value="mars"> Mars </option>
<option value="pluton"> Pluton </option>
</optgroup
<optgroup label="Moyennes">
<option value="uranus"> Uranus </option>
<option value="neptune"> Neptune </option>
</optgroup
<optgroup label="Grandes">
<option value="jupiter"> Jupiter </option>
<option value="saturne"> Saturne </option>
</optgroup
</select
</label>
</p>
</form>

Essayer

Faut envoyer maintenant !

Ok, on vient de voir comment faire un super formulaire, ouais mais bon pour le moment, on ne peut pas le valider.
Heureusement, ce n'est pas très compliqué, et puis on va utiliser une balise que vous connaissez déjà : <input />, décidemment elle sert à tout celle là !

On va encore utiliser l'attribut type de la balise <input />, il existe trois type de boutons :

• le bouton d'envoi : c'est lui qui déclenche l'envoi du formulaire, vous vous retrouvé à la page indiqué dans l'attribut action du formulaire (c'est à dire, dans notre exemple traitement.php).
Ce bouton est créé par l'attribut type="submit". Vous pouvez lui ajouter l'attribut value pour changer le nom du bouton.
<input type="submit" />

• le bouton "reset" : Ce bouton permet de remettre à zéro toutes les valeurs du formulaires. Cette fois ci, on utilise type="reset".
<input type="reset" />

• le bouton "qui sert à rien" : Il n'envoie pas le formulaire, ne remet pas à zéro. C'est un bouton générique qui n'effectue pas d'actions particulières. Il vous permettra par la suite par exemple de lancer des scripts (dans un autre langage que le html). On ne s'en servira pas mais je vous le met pour que vous sachiez qu'il existe.
<input type="button" />

<form method="post" action="traitement.php">
<p>
<label>Votre Nom: <input type="text" name="pseudo" /></label>
</p>
<p>
<label>Quel est votre année de naissance ?<br />
<select name="année">
<option value="1982"> 1982 </option>
<option value="1983"> 1983 </option>
<option value="1984"> 1984 </option>
<option value="1985"> 1985 </option>
<option value="1986"> 1986 </option>
<option value="1987"> 1987 </option>
<option value="1988"> 1988 </option>
</select
</label>
</p>
<p> Cochez vos sports favoris :<br />
<label><input type="checkbox" name="football" /> Football</label><br />
<label><input type="checkbox" name="golf" /> Golf</label><br />
<label><input type="checkbox" name="curling" /> Curling</label><br />
<label><input type="checkbox" name="sieste" /> Sieste</label>
</p>
<p>
<label>
Laisser un commentaire sur mon site :<br /> <textarea name= "commentaires" rows= "10" cols= "50" > Laissez tous vos commentaires sur le site ici, qu'ils soient positifs ou négatifs cela me permettra de l'améliorer par la suite. </textarea>
</label>
</p>
<input type="submit">
<input type="reset">
</form>

Essayer
Ne vous inquietez pas, le formulaire ne fait strictement rien ici, vos données n'ont pas été enregistrées.

En effet, lorsque vous cliquez sur le bouton "envoyer", vous êtes amenés à une page "traitement.php", page fictive puisque nous ne savons pas analyser les données, eh c'est bien là la principale limite de l'html comme je l'avais dit un peu plus haut, c'est que l'on sait faire un formulaire, on sait envoyer les données mais on ne sait pas traiter les données.

On arrive donc à la fin de la partie sur les formulaires, sachez que j'ai omis volontairement certains points commme l'accessibilité d'un formulaire (par exemple la tabulation qui nous permet de passer d'un champ à l'autre, ou encore les touches raccourcis), l'organisation en plusieurs zones (par exemple une zone coordonnées, une zone emploi, une zone loisirs ...). Comme je l'ai dis auparavant, tout un tas de sites vous permettent, si le désir vous en prend d'approfondir le langage html.

Voilà à ce que l'on peut arriver au bout du compte : Formulaire complet
Bon, ok c'est moche, mais c'était juste pour vous montrer.

La balise "Map"

La balise <map> permet de rendre la zone d'une image cliquable, c'est à dire que cette zone peut devenir un lien. La balise <map> doit être utilisé avec une autre balise : <area /> qui peut prendre trois attributs :

• shape :
◊ rect : pour un rectangle
◊ circle : pour un cercle
◊ poly : pour un polygonee

• coords :
◊ Indique les coordonnées des coins supérieurs gauche et inférieur droit de la zone pour un rectangle "rect".
◊ Indique les coordonnées de chaque angle du polygone si vous optez pour la valeur poly.
◊ Indique les coordonnées du centre du cercle et la dimension du rayon de ce même cercle pour la valeur circle.

• href : comme toujours indique le lien vers la page de destination.

<map name="test_balise_map" >
<area shape="rect" coords="7,13,20,17" href="cible.html" />
<area shape="circle" coords="7,13,20" href="cible.html" />
</map
<img src="Images/mon_image.png" alt="texte alternatif" usemap="test_balise_map" />

On remarque que l'attribut name de <map> et l'attribut usemap de <img /> ont la même valeur, c'est obligatoire, c'est pour les lier ensemble.

Toujours pour une raison d'accessibilité, si vous en venez à utiliser cette méthode, prévoyez une solution alternative car n'oubliez pas que certaines personnes pour certaines raisons ne verrons peut-être pas l'image.

## Q.C.M.

Quelle balise permet de créer un lien ?

- <ahah> </ahah>
- <href> </href>
- <a> </a>

Avec quel symbole fait-on une ancre ?

- $
- #
- €

Que fait ce bout de code :

<a href="http://unsite.fr#ancre">aller ici</a>

- vous êtes redirigés vers http://unsite.fr à l'ancre #ancre
- Vous êtes redirigés vers http://unsite.fr
- euh, c'est l'ancre de quel bateau au fait ?

Quelle balise permet d'insérer des images ?

- <image />
- <img />
- <img></img>

Quel attribut indique le chemin de l'image pour la balise d'insertion d'images ?

- href
- ins
- src

Quelle balise permet d'indiquer le début et la fin d'un formlumaire ?

- <formulaire> </formulaire>
- <form> </form>
- <form />

Si l'on met l'attribut type="radio" à la balise <input />, en quoi va t-il se transformer ?

- en option
- en case à cocher
- en liste déroulante

Pourquoi faut-il donner un nom (name) identique à chaque zone d'options, avec une valeur (value) différente pour chacune des options ?

- Parce que html ne supporte pas un trop grand nombre de zones d'options avec des noms différents
- Parce que sinon on pourrait sélectionner plusieurs valeurs là où un seul choix est normalement possible
- Parce que c'est comme ça et pis c'est tout

Lequel de ces boutons permet d'envoyer le formualire ?

- <input type="reset" />
- <input type="button" />
- <input type="submit" />

remonter en haut