1. Insérer un lien

Il est facile de reconnaître les liens sur une page : ils sont écrits d'une façon différente (par défaut en bleu souligné) et un curseur en forme de main apparaît lorsqu'on pointe dessus.
En cliquant sur ce lien, on est redirigé vers une autre adresse (appelée "URL", pour Uniform Ressource Locator).

Les moteurs de recherche affichent les résultats sous forme de liens

1.1. Voici un premier lien :

• <a> est la balise.
• href="..." est un attribut évidemment obligatoire: il indique la destination lors du clic.
• </a> est la balise de fin de lien.
• Le texte "Free pour la vie" est celui qui est visible, sur lequel on va cliquer. On y écrit ce que l'on veut (on peut même mettre un image cliquable).
• Le chemin est dit "absolu" car on indique l'url complète.
• L'attribut facultatif target="_blank" permet d'ouvrir le lien dans un nouvel onglet.

1.2. Voici un second lien :

• La destination est, cette fois-ci, un fichier "page2.html" qui se situe dans le même dossier que le fichier actuel.
• Il aurait fallu utiliser un chemin relatif (ex: ./dossier2/page2.html) si la destination avait été située dans un sous-dossier (comme pour les images).

2. Les ancres

Une ancre est une sorte de point de repère que vous pouvez mettre dans vos pages HTML. En effet, si la page est très grande, il peut être utile de faire un lien amenant plus bas dans la même page pour que le visiteur puisse sauter directement à la partie qui l'intéresse, sans avoir à scroller !.
Pour créer une ancre, il suffit de rajouter l'attribut "id" à une balise qui va alors servir de repère. Ce peut être n'importe quelle balise, un titre par exemple.

Ensuite, il suffit de faire un lien comme d'habitude, mais cette fois l'attribut href contiendra un dièse (#) suivi du nom de l'ancre. Exemple :



Si on veut "pointer" vers une ancre située sur une autre page, on combine les deux notions ci-dessus. Exemple :

3. Les images cliquables

Tout est cliquable !! Le texte, évidemment, mais aussi les images, ou même des boites vides. Il suffit de remplacer le texte visible (sur lequel on clique) par ce qu'ont veut.

En cliquant sur l'image tom.png, on ira sur le site de Free

4. Travail à réaliser

4.1. Créez un second fichier html nommé page2.html et mettez-y le texte "Accueil", en plus du code "de base" (voir HTML, Partie 1, 5.5)

4.2. Sur cette page2.html, insérez un lien de retour vers la page principale "index.html" lorsqu'on clique sur le mot "Accueil".

4.3. Modifiez/complétez votre code pour que le mot "Stuart" mène à la page de Stuart sur le site officiel "minions.fr", dans un nouvel onglet :

4.4. Modifiez/complétez votre code pour que l'image de Kevin mène à la page https://minions.fr/personnage/kevin/, dans un nouvel onglet

4.5. Modifiez/complétez votre code pour que tout le bloc "figure" du bas de page devienne un lien qui mène à la page2.html.

4.6. Sur la page index.html, ajoutez une ancre et un lien pour accéder au paragraphe "Les autres minions", comme ci-dessous :

4.7. Effectuez la validation/correction W3C. Vérifiez l'indentation, l'orthographe, la grammaire, les commentaires.

4.8. Répondez au questionnaire ici