Html & Css

Naviguer hors de son propre site

Un chemin absolu décrit l'emplacement exact d'un fichier dans une arborescence. Ce chemin est affiché dans un navigateur. Cependant, il suffit que le dossier contenant le fichier soit déplacé pour que ce fichier ne soit plus accessible.

Par exemple, l'adresse absolue de cette page sur mon ordinateur personnel est affichée ci-dessous. Lit-on le même chemin dans la barre d'adresse (en haut) du navigateur ?

On utilisera donc une URL absolue pour accéder à un fichier qui se trouve à l'extérieur de son site. Pour les fichiers de son propre site, il faudra utiliser des liens relatifs.

Compléter le code Html ci-dessous (en remplaçant le point d'interrogation) pour que le logo de l'académie de Lyon apparaisse dans la fenêtre d'affichage : .
Il fauda se rendre sur le site de l'académie de Lyon pour récupérer l'URL de de cette image.

  • Une piste ?
  • Affichage à obtenir ?
  • Une solution ?
Une petite astuce pour trouver les url absolues des images avec Firefox : faire un clic droit sur la page web, sélectionner [Informations sur la page] puis l'onglet [Médias]. Copier le lien de l'image choisie.

Modifier le code précédent afin que l'image serve d'ancre pour un lien externe vers le site de l'académie de Lyon. Ce site doit s'afficher dans une nouvelle fenêtre.

  • Une piste ?
  • Affichage à obtenir ?
  • Une solution ?
Il faut encadrer la balise image par une balise «ancre».
De plus, pour ouvrir la page-cible dans une nouvelle fenêtre (ou nouvel onglet), on peut voir les valeurs possibles de l'attribut target sur w3schools.

Reprendre le fichier favoris.html avec un éditeur de texte.

  1. Dans ce fichier, ajouter les liens hypertextes vers :
    • Espace Numérique de Travail (lien à trouver) ;
    • Le site d'exercices en HTML/CSS & Python (lien à trouver) ;
    • Mattermost (https://portail.lyc-la-martiniere-diderot.ac-lyon.fr/).
  2. Ouvrir favoris.html à l'aide du navigateur pour constater le rendu. Ne pas hésiter à appeler le professeur pour vérification.