Les Liens et les Images

Externe ou Interne ?

Un lien ou une image interne est un lien vers une page, ou une image, se situant sur votre espace/serveur.

De ce fait, vous n'avez pas besoin d'utiliser le 'http://www.domaine.com' !
Il vous suffit de faire 'dossier/fichier.jpg' !

Si vous mettez un / au début du chemin, cela s'applique à partir de la racine du site !
Si vous mettez un ./ au début du chemin, cela s'applique à partir du dossier courant !
Si vous mettez un ../ au début du chemin, cela s'applique à partir du dossier parent ! (../../ dossier parant du dossier parent ;-))

Un lien ou une image externe est un lien vers une page, ou une image, qui n'est pas sur votre serveur/espace.
De ce fait, il est impératif, que vous utilisez http://www.domaine.com !

Les Liens

Pour insérer un lien, nous utilisons la balise a. Voici les attributs les plus utiles :

href : Destination du lien (ex: http://www.softastuces.com, /index.php etc)
title : Nom du Lien (la bulle jaune)
target : Nom de la fenêtre dans laquelle le lien doit s'ouvrir - target="_blank" ouvrira le lien dans une nouvelle fenêtre.

Code HTML

//lien renvoyant vers la racine du site
<a href="/index.php">Texte du Lien</a>

//lien renvoyant vers la racine du site - dans une nouvelle fen&ecirc;tre - comme un lien externe
<a href="http://www.softastuces.com" target="_blank">Texte du Lien</a>

//avec une bulle d'aide
<a href="../../../index.php" title="Retourner &agrave; l'accueil">Texte du Lien</a>

Résultat

Texte du Lien

Texte du Lien

Texte du Lien

les Images

Les image s'affiche avec la balise img (Cette balise est particulière: elle ne se ferme pas !) Quelques attributs :

src : Chemin vers l'image
alt : Nom de L'image (sous IE, c'est la bulle jaune ;-))
width : Largeur de l'image
height : Hauteur de l'image
align : Alignements de l'image (absmiddle, left, right, top, bottom)

Code HTML

//une simple image - Fonctionne sans ALT, mais ce dernier est obligatoire (standart...)
<img src="../../../images/design/mauve/logo.gif" alt="Logo de SoftAstuces" />

//une image avec la largeur et hauteur de pr&eacute;cis&eacute; (permet de la modifier !)
<img src="/images/design/mauve/logo.gif" width="100" height="30" />

//testez les diff&eacute;rents valeurs possible pour align
<img src="/images/design/mauve/logo.gif" align="absmiddle" />

Résultat

Menu du tutorial :

Design