Créer son premier site web

Images et liens

Les images

Bon, le texte c’est bien gentil mais un dessin vaut souvent 100 fois mieux qu’un texte.
Voyons donc comment afficher une image sur une page web.

Il faut déjà savoir que tous les formats d’images ne sont pas affichables par les navigateurs. Les 3 grands formats compatibles sont le GIF, le JPEG et le PNG (pour les navigateurs les plus récents). Certains navigateurs, grace à des plugins peuvent afficher d’autres types comme les fichiers Photoshop mais ça reste marginal. Restez-en à ces 3 formats.

La balise pour afficher une image est <img>. Comme la balise <br>, celle-ci n’a pas besoin d’être fermée. Seulement si vous tapez <img>, ça ne suffit pas, il faut appliquer des paramètres à cette balise.

Exemple : 

donne :

Le seul paramètre obligatoire est le chemin de l’image (src=””)Vous verrez à la page suivante comment savoir quel chemin donner à votre image car ça marche comme les liens.
Voyons les autres paramètres :

• border : si vous voulez ajouter un bord à votre image. (en pixels)
• width et height : dimensions de l’image. Mieux vaut les indiquer, le navigateur pourra ainsi lors du chargement de la page garder la place pour l’image, c’est plus agréable pour le lecteur de la page. (en pixels)
• alt : si l’image n’est plus disponible ou que le visiteur a choisi de ne pas afficher les images, cela lui donne une indication sur l’image. C’est son titre si vous voulez.

Les liens

Voilà la partie la plus intéressante de l’HTML qui permet de lui ajouter du dynamisme par rapport à une page toute bête. La balise de liens est <a>.
Il y a 2 grands types de liens : les liens internes et les liens externes.

Les liens internes Commençons par les liens internes. On les appelle aussi des ancres. Ces liens pointent vers un autre emplacement dans la MÊME page. Ils sont le plus souvent utilisés pour faire un lien “back to top” dans les pages longues.

Exemple :
Si vous cliquez ici, vous irez tout en bas de la page.

Comment ça marche ?
D’abord il faut indiquer la cible au navigateur : <a name=”bas”>Bas de la page</a>. C’est ce que j’ai mis en bas de la page. J’ai donné à l’ancre le nom “bas”.
Ensuite je crée le lien : Si vous cliquez <a href=”#bas”>ici</a>. Comme vous le voyez, le principe est le même que pour la balise <font>, on enferme le texte (et/ou l’image) qui doit devenir le lien entre les balises <a>. Le # est important devant le nom du lien car il indique que c’est une ancre.

Les liens externes

Il y a plusieurs sortes de liens externes. Les liens http qui pointent vers une autre page ou un autre site, les liens ftp qui pointent vers un document sur un site ftp, et les liens mail qui pointent vers une adresse email.

Les liens http : Ce sont les plus utilisés. Ils servent à pointer vers une autre page de votre site ou vers celle d’un autre site.

Exemple : 

donne :
Zebulon.fr

Le paramètre title est facultatif. Comme son nom l’indique c’est le titre du lien, vous savez la petite bulle qui apparaît quand vous survolez un lien, et c’est cela…
Il y a d’autres paramètres.

donne :
Zebulon.fr

Si vous avez testé (ben sinon ils servent à quoi mes exemples ?), vous avez vu que le paramètre target=”_blank” ouvre le lien dans une nouvelle fenêtre.

Deux points importants :

1. à propos du paramètre href qui indique l’adresse du lien, il y a 2 façons de l’écrire.
   Soit vous faîtes un lien “absolu” et vous indiquez href=”http://…”. C’est obligatoire pour pointer vers un autre site mais ça peut être utilisé pour des pages sur votre propre site (ex: href=”http://monsite.com/images/images.html”)
   Soit vous faîtes un lien relatif. Seulement dans le cas d’un lien sur votre propre site vous pouvez mettre href=”/images/images.html” (dans cet exemple, le lien pointera vers le fichier images.html situé dans le répertoire images).
   Je recommande pour autant de toujours faire des liens absolus, c’est plus sûr.

2. il est recommandé de n’utiliser que les minuscules pour les noms de fichiers et de répertoires. Cela peut créer des problèmes au navigateur. Pour la même raison, évitez les espaces dans les noms. Remplacez-les par des _.

Les liens ftp : Ils fonctionnent comme les liens http en chemin absolu. On remplace http:// par ftp://.

Les liens mail : Regardons un exemple.

Exemple :

donne :
Adresse Email

Comme vous le voyez après href et avant l’adresse email, il faut mettre mailto:. ?subject=Tutorial HTMLindique le sujet du mail. C’est facultatif ainsi que title.

Dernière mise à jour le 2 décembre 2018