HTML 3 : LIENS EXTERNES

La navigation sur le Web repose sur le fait de pouvoir passer d'une page internet à une autre à travers des liens. On appelle ces liens, des LIENS HYPERTEXTES.

Remarque : le lien hypertexte a été inventé pour la mise en place du World Wide Web ; cependant, il est maintenant utilisé dans beaucoup de logiciel (Pack Office, OpenDocument, etc.), permettant de lier un texte à une ressource extérieure.

Pour générer un lien, on utilise la balise :
                            
<a href="#"> Ancre textuelle </a>
                            
                        
A l'intérieur de la balise <a></a>, deux éléments sont nécessaires :
  • href demande le lien de la page (URL) vers lequel vous voulez être renvoyé, cela peut être une page web ou un fichier hebergé en local sur le serveur ;
  • L'ancre textuelle est l'élément (texte, photo, etc.) sur lequel il faut cliquer pour accéder à la page en lien.
S'il manque l'un ou l'autre de ces éléments, la balise ne fonctionnera pas. Cependant, le programme ne mettra pas d'erreur, le navigateur exécutera ce qu'il comprend.

Si vous voulez paramétrer une navigation à l'intérieur d'une page, (comme le menu de ce site ici à gauche) pour aller d'un bloc à l'autre, vous devez :
  1. Intégrer un identifiant unique (exemple id="truc") à l'intérieur de la balise du titre que vous voulez pointer ;
  2. Compléter le paramètre href par #[id] (exemple href="#truc").
Bien sûr, les deux éléments doivent nécessairement être dans la même page !
2. Insertion d'images
Image chargée correctement
Image chargée incorrectement
champ de lin
Il est bien évidemment possible d'insérer des images dans une page Web : un logo, une carte, une photo, un dessin, etc. sous tout type de format : .png, .gif, .jpg, etc.

La balise permettant cette intégration est :
                            
<img src="#" alt="#" style="width:# ; height:# ;">
                            
                        
C'est une balise orpheline qui ne nécessite pas de balise fermante.


A l'intérieur de la balise <img>, plusieurs paramètres sont possibles :
  • Le paramètre src renseigne l'image à intégrer.
    On doit renseigner : l'URL de la photo si elle est sur internet, ou le lien vers le fichier correspondant.
  • Le paramètre alt indique le message à afficher si le lien ne fonctionne pas.
  • Le paramètre style est en fait une intégration du langage CSS directement dans le langage html, en vue de renseigner la largeur (width) et la hauteur (height) (en pixel px, ou en pourcentage).
Dans cette balise, seul le paramètre src est nécessaire pour que la balise fonctionne, tous les autres sont facultatifs.
3. Insertion de vidéo (type Youtube)
Il n'est pas rare de vouloir intégrer des vidéos dans une page web.

Pour cela, je vous déconseille d'héberger directement la vidéo sur le serveur qui loge votre site internet. En effet, le flux vidéo nécessite une large bande passante (surtout si plusieurs personnes sont amenées à lire la vidéo en simultanée).
Le plus simple est encore d'héberger votre vidéo sur Youtube ou équivalent (Viméo par exemple), et d'aller chercher le lien hypertexte de la vidéo.
A partir de la vidéo que vous voulez intégrer, la procédure est la suivante :
  1. Cliquer sur le lien Partager ;
  2. Dans la fenêtre qui apparaît, cliquer sur Intégrer ;
  3. Une balise <iframe></iframe> apparaît, elle peut être paramétrée au timing souhaité.
  4. Il suffit de copier l'ensemble dans votre page web, et de régler les width et height pour que l'aperçu s'intégre à la mise en page de votre site.