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.

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

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

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.

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>

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

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.

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.

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.

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.

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

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

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.

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 :

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.

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.

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 :

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 :

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.

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.

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.

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 :

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 !

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

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 !

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

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

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.

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>

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

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.

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

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.

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

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

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.