Important : si vous êtes sur une machine sous Windows, pensez à aller dans affichage et demander d'afficher les extensions de fichier.
01 ✔° Utiliser ce lien qui va ouvrir une toute petite page basique.
ACTION 1 : cliquer sur chacun des liens pour vérifier qu'ils fonctionnent correctement et qu'ils ouvrent un nouvel onglet vers la destination.
ACTION 2 : survoler l'un des liens à la souris et rester statique au dessus. Que constate-on ?
ACTION 3 : faire un clic droit et sélectionner Code-source de la page.
Vous devriez obtenir le code HTML permettant de générer ce lien à l'écran :
1
<ahref="https://www.infoforall.fr/activite/snt/"title="1er exemple de lien"target="_blank">SNT de infoforall.fr</a>
1.1 Code source HTML
A - Principe
Le HTML est un langage de description.
Il ne s'agit pas d'un langage de programmation, le code-source HTML est un texte très organisé qui exprime avec des mots l'affichage désiré.
Ce code-source HTML est placé dans la réponse HTTP que fournit le serveur au client. Le client va ensuite l'interpréter et réaliser l'affichage correspondant.
Requête - Traitement - Réponse
B - Exemple
1
2
3
4
5
6
7
<h1>INTRODUCTION AUX LIENS HTML</h1><ahref="https://www.infoforall.fr/act/snt"title="1er exemple de lien"target="_blank">SNT de infoforall.fr</a><ahref="https://py-rates.fr/"target="_blank"title="2e exemple de lien">Py-rates</a><ahref="https://www.w3schools.com/html/default.asp"target="_blank"title="Encore un exemple de lien">W3School</a>
Le navigateur interprète alors ce code-source pour savoir ce qu'il doit afficher à l'écran.
Visuel créé par le navigateur après analyse du code HTML
C - Voir le code-source
Un clic-droit sur une page Web permet de sélectionner l'affichage du code-source de la page.
1.2 Balise HTML
A - Séparation des informations
L'idée principale du HTML est d'utiliser des balises pour séparer sans ambiguïté
la signification qu'on veut donner à l'élément (un lien, un titre, une remarque annexe, une conclusion...)
le contenu d'un élément (un texte ?, une image ?, ...)
les informations supplémentaires nécessaires au navigateur pour qu'il puisse faire son travail.
En anglais, "balise" est traduit par tag.
B - Balise : structure classique en trois parties
La plupart des éléments HTML sont composés de trois parties jouant des rôles différents :
1
<h1>INTRODUCTION AUX LIENS HTML</h1>
une balise d'ouverture qui signale au navigateur qu'on commence à décrire un élément
<h1> signale qu'on veut créer un titre.
le contenu interne donnant les informations brutes à afficher.
<h1>INTRODUCTION AUX LIENS HTML
une balise de fermeture qui signale qu'on en a fini avec cette balise.
Lorsqu'on transmet la balise ci-dessus au navigateur, on l'informe
qu'on veut créer un lien (c'est la présence des deux balises a qui l'indique) et
que le texte faisant office de lien est le contenu interne (SNT de infoforall.fr)
Mais il manque une information fondamentale : quelle est l'URL de la ressource voulue ?
B - ATTRIBUTS de la balise d'OUVERTURE
Une balise d'ouverture peut contenir des éléments descriptifs supplémentaires qu'on nomme attributs.
La structure à respecter est :
1
<baliseattribut1="valeur1"attribut2="valeur2">
Nom de l'attribut
Signe =
Valeur de l'attribut entourée par des guillemets
Un espace entre les différents attributs
ERREUR TYPIQUE A EVITER : n'oubliez pas de signaler la fin de votre balise d'ouverture en plaçant le chevron >.
C - Attribut href : fournir l'URL de destination
L'attribut href permet de transmettre l'URL du lien qu'on veut créer.
Dans tous les exemples ci-dessous, on met en évidence le début de la balise d'ouverture et la fin de la balise d'ouverture.
1
<ahref="https://www.infoforall.fr/activite/snt/">SNT de infoforall.fr</a>
Version sur plusieurs lignes
1 Ouverture
2 Contenu interne
3 Fermeture
<ahref="https://www.infoforall.fr/activite/snt/">
SNT de infoforall.fr
</a>
Le navigateur sait qu'il doit chercher l'URL derrière la séquence de texte href=" et qu'elle est finie lorsqu'il retombe sur un ".
D - Attribut title pour le texte au survol
Cet attribut permet de transmettre le texte que vous voulez voir apparaître à l'écran en survolant le lien (mais attention : le texte doit être fourni entre des guillemets)
Version sur une ligne
1
<ahref="https://www.infoforall.fr/activite/snt/"title="1er exemple de lien">SNT de infoforall.fr</a>
<ahref="https://www.infoforall.fr/activite/snt/"title="1er exemple de lien"target="_blank">
SNT de infoforall.fr
</a>
Notez bien la présence du signe = et des guillemets.
Il faut les mettre, sinon le navigateur risque rapidement d'être perdu.
C'est vous le cerveau. L'ordinateur n'en a pas !
02° Quel est le nom de l'attribut qui permet de trouver l'URL de destination du lien ? Dans le lien ci-dessous, quelle est l'URL de destination ?
1
2
3
4
<ahref="https://fr.wikipedia.org/wiki/Langage_de_balisage"title="Langage de balisage">
langage de balisage
</a>
...CORRECTION...
C'est l'attribut href qui permet de fournir l'URL du lien.
L'URL est href est https://fr.wikipedia.org/wiki/Langage_de_balisage.
2.2 Compléter une adresse incomplète
Certaines URL présentes sur une page semblent parfois incomplètes : il n'y a pas de nom de site !
Imaginons que le site www.infoforall.fr vous envoie le code HTML suivant :
1
2
3
<ahref="/snt/">
page d'accueil de la SNT
</a>
Il s'agit d'une adresse absolue provenant du site www.infoforall.fr. Puisque le premier slash signifie "depuis la racine du site", c'est comme si nous avions envoyé ceci :
1
2
3
<ahref="https://www.infoforall.fr/snt/">
page d'accueil de la SNT
</a>
ACTION 2 : Localiser le bout de texte "langage de balisage" suivant au début du texte. Sélectionner le texte et cliquer sur Code Source de la Sélection.
04° Vérifier que le code HTML de ce lien est similaire à celui-ci :
<a href="/wiki/Langage_de_balisage" title="Langage de balisage"> langage de balisage </a>
L'URL n'est pas complète puisqu'elle n'indique pas le nom du site visé.
Question : quelle est l'URL réelle ?
...CORRECTION...
<a href="/wiki/Langage_de_balisage" title="Langage de balisage">langage de balisage</a>
L'URL derrière l'attribut href est /wiki/Langage_de_balisage"
Il manque le nom du site devant : https://fr.wikipedia.org
L'URL complète est donc
Il manque le nom du site devant : https://fr.wikipedia.org/wiki/Langage_de_balisage"
Dans cette partie, vous allez voir qu'il ne faut ABSOLUMENT jamais avoir confiance en la validité d'un lien affiché sur un site Web ou reçu via un email. Falsifier l'adresse de destination est extrêmement facile...
05 ✔° Sous Firefox, sélectionner le texte de n'importe lequel des liens présents sur la page Wikipédia. Sur l'exemple ci-dessous, j'ai sélectionné le lien INFORMATIQUE.
En utilisant un clic droit, sélectionner maintenant Examiner ou Inspecter en fonction de votre navigateur. Le choix se trouve normalement un peu en dessous de Code Source.
Vous devriez obtenir ceci : le bout de code du lien dans son contexte total
Il est possible qu'un site désactive sur sa vue le fait de réaliser des clics gauche ou droit (Pronote par exemple...). Que faire dans ce cas ?
Il faut ouvrir la console d'inspection à la main.
F12
Menu du navigateur, chercher outils supplémentaires/plus d'outils, outils de développements...
Nous allons maintenant nous amuser à modifier le code source HTML de la page pour vérifier que le navigateur modifie l'affichage.
Modifier le texte affiché
✌ 06° Dans la fenêtre du bas qui vient d'apparaître, faire un double-clic sur l'un des mots qui apparaît dans le code source (ici le informatique entouré par la balise d'ouverture et la balise de fermeture). Modifier le texte en le remplaçant par un autre texte, cliquer ailleurs sur la page et vérifier que l'affichage de la page est bien modifié.
✌ 07° Modification de la destination du lien : faire un double-clic sur le texte situé derrière href du lien dans le code de l'inspecteur visible ci-dessus. Modifier l'adresse fournie derrière href. Par exemple, href="/wiki/Chat".
Cette fois, vous devriez constater qu'en cliquant sur le mot indiquant le lien, on part vers la page... des chats.
Attention, nous ne venons pas de modifier la page de Wikipédia, ce serait de la dégradation !
La page HTML côté serveur est toujours fournie à l'identique par le serveur.
Le code que vous venez de modifier est simplement le code HTML côté client que votre navigateur est en train d'analyser et qui est stocké sur votre ordinateur après son envoi par le serveur HTTP de Wikipédia.
08° Question : peut-on faire une confiance aveugle aux liens qu'on trouve sur le Web ? Pourquoi les e-mails des banques ou autres précisent souvent que les e-mails officiels ne contiennent jamais de lien ?
Le lien devrait vous mener vers une page parlant de chat. Attention donc aux liens. Rien ne prouve qu'il vous mènera effectivement vers le site annoncé sur le texte du document.
Ne cliquez donc jamais sur un lien important sans vérifier sa validité avec l'inspecteur. Le mieux est encore de taper directement l'adresse dans la barre d'URL.
Alors comment peut-on vérifier la validité d'un lien ?
Le survoler à la souris est déjà un bon réflexe : en bas à gauche de la plupart des navigateurs la destination du lien apparaît. Le lien pourrait encore être changé à la volée une fois le clic effectué mais la plupart du temps, les arnaqueurs ne s'embêtent pas à être aussi sournois.
Activité publiée le 30 09 2019
Dernière modification : 25 09 2023
Auteur : ows. h.
