4 - HTML et hyperliens

⏪

⏬

⏩

1 - html-lien

2 - structure

3 - liens

Comment parvient-on à faire afficher une page d'un site sur un navigateur Web ?

Réponse : en envoyant une requête HTTP au programme-serveur du site qui va alors vous répondre avec une réponse HTTP constituée en partie d'un texte vraiment bizarre : du code HTML.

Aujourd'hui, on se limitera à la question suivante : comment parvient-on à créer des liens en fournissant uniquement... du texte ?

Réponse : en fournissant un texte respectant le langage de description qui se nomme le HTML.

Cette activité est en deux temps :

Vous allez apprendre à modifier une page déjà existante
Vous allez apprendre à créer votre propre page

Questions notées ✎ : il faudra rendre ces questions sur papier.

Questions notées ✌ : il faudra me faire vérifier que cela marche en me demandant de venir.

1 - Gérer les liens dans un document HTML

⇩ ⇧ ⤊

Partie à faire ensemble

01° Voici un ensemble de liens permettant d'atteindre différents sites :

Lien vers la partie SNT de infoforall.fr
Lien vers l'ENT académique
Lien vers la page d'accueil d'infoforall.fr

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 : sans activer le lien, sélectionner avec la souris uniquement le texte du lien SNT de infoforall.fr.

ACTION 4 : faire un clic droit avec cette sélection et sélectionner Code Source de la Sélection (sous Firefox). Si vous utilisez Chromium (la version libre de Chrome), sélectionner Inspecter.

Vous devriez obtenir le code HTML permettant de générer ce lien à l'écran :

`1`	`<a href="https://www.infoforall.fr/activite/snt/" title="1er exemple de lien" target="_blank">SNT de infoforall.fr</a>`

Code source HTML

On voit que le code obtenu comporte plus d'informations que juste le texte sélectionné : il s'agit bien d'un hypertexte.

`1`	`<a href="https://www.infoforall.fr/activite/snt/" title="1er exemple de lien" target="_blank">SNT de infoforall.fr</a>`

Vous avez sous les yeux un extrait du code source HTML de cette page : un texte codifié qui indique au navigateur ce qu'il doit afficher.

Pas facile à lire, nous allons le décomposer sur plusieurs lignes.

<a href="https://www.infoforall.fr/activite/snt/"
   title="1er exemple de lien"
   target="_blank">
SNT de infoforall.fr
</a>

On parvient visiblement à séparer

LIGNE 1 : l'URL à laquelle se rendre si on clique sur le lien ("https://www.infoforall.fr/activite/snt/")
LIGNE 2 : le texte à afficher dans une bulle si on survole le lien à la souris ("1er exemple de lien")
LIGNE 4 : le texte qui servira de lien sur lequel cliquer ( SNT de infoforall.fr)

Balise HTML

Séparation des informations

HTML veut dire Hypertext Markup Language.

Le HTML est un langage descriptif à destination du navigateur Web.

C'est le serveur HTTP qui transmet le code HTML en le plaçant dans la partie "message" de la réponse HTTP.

L'idée principale du HTML est d'utiliser des balises pour séparer sans ambiguïté

le contenu d'un élément (un texte, une image...)
la signification qu'on veut donner à l'élément (un lien, un titre...)
des informations supplémentaires nécessaires au navigateur pour qu'il puisse faire son travail (la taille de l'image, l'URL de destination si c'est un lien...)

Les balises sont coloriées en vert sur ce cours. En anglais, les balises se traduisent par tags.

Elément en trois parties : ouverture-contenu-fermeture

`1`	`<a ...>SNT de infoforall.fr</a>`

La plupart des éléments HTML sont composés de trois parties jouant des rôles différents :

une balise d'ouverture qui signale qu'on commence à décrire un élément

<a ...> pour un lien
<p ...> pour un paragraphe
<h1 ...> pour un titre

le contenu interne donnant les informations brutes à afficher.
une balise de fermeture signalant qu'on a fini de transmettre les informations au sujet de cet élément.

</a> pour un lien
</p> pour un paragraphe
</h1> pour un titre

Attributs dans une balise d'ouverture <a>

Lorsqu'on transmet <a>SNT de infoforall.fr</a> 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 demandée ?

Heureusement, la balise d'ouverture <a> peut contenir des éléments descriptifs supplémentaires :

Dans le cas des balises a, on peut fournir par exemple

l'attribut href suivi de l'URL à joindre (mais attention : l'URL doit être fournie entre des guillemets)

Version sur une ligne

`1`	`<a href="https://www.infoforall.fr/activite/snt/">SNT de infoforall.fr</a>`

Version sur plusieurs lignes

1
2
3

<a href="https://www.infoforall.fr/activite/snt/">
SNT de infoforall.fr
</a>

l'attribut title suivi du 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`	`<a href="https://www.infoforall.fr/activite/snt/" title="1er exemple de lien">SNT de infoforall.fr</a>`

Version sur plusieurs lignes

<a href="https://www.infoforall.fr/activite/snt/"
   title="1er exemple de lien">
SNT de infoforall.fr
</a>

l'attribut target permet de de demander d'ouvrir la ressource dans un nouvel onglet.

Version sur plusieurs lignes

<a href="https://www.infoforall.fr/activite/snt/"
   title="1er exemple de lien"
   target="_blank">
SNT de infoforall.fr
</a>

02° Quel est le nom de l'attribut qui permet de trouver l'URL de destination du lien ? Sur cet exemple, quelle est l'URL de destination ?

1
2
3

<a href="https://fr.wikipedia.org/wiki/Langage_de_balisage" title="Langage de balisage">
    langage de balisage
</a>

Correction ?

...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.

Complèter une adresse incomplète

Certaines URL présentes sur une page semblent parfois incomplète : 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

<a href="/snt/">
    page d'accueil de la SNT
</a>

Il s'agit donc d'une adresse absolue provenant du site www.infoforall.fr. C'est comme si nous avions envoyé ceci :

1
2
3

<a href="https://www.infoforall.fr/snt/">
    page d'accueil de la SNT
</a>

03° Réaliser les actions ci-dessous :

ACTION 1 : aller sur cette page page wikipedia.

ACTION 2 : Localiser le bout de texte "langage de balisage" suivant au début du texte.

ACTION 3 : Sélectionner le texte et cliquer sur Code Source de la Sélection.

ACTION 4 : 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>

ACTION 5 : L'URL n'est pas complète puisqu'elle n'indique pas le nom du site visé. Quelle est l'URL réelle ?

Correction ?

...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"

04° 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

Nous allons maintenant nous amuser à modifier le code source HTML de la page pour vérifier que le navigateur modifie l'affichage.

✌ 05° Modification d'affichage : 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é.

<a href="/wiki/Informatique" title="Informatique">informatique</a>

<a href="/wiki/Informatique" title="Informatique">alors ?</a>

✌ 06° 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".

<a href="/wiki/Informatique" title="Informatique">informatique</a>

<a href="/wiki/Chat" title="Informatique">informatique</a>

Cette fois, vous devriez constater qu'eun 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.

07° Question : peut-on faire une confiance aveugle au lien qu'on trouve sur le Web ? Pourquoi les emails des banques ou autres précisent souvent que les emails officiels ne contiennent jamais de lien ?

Le lien ci-dessous est-il le bon ?

Cliquer ici pour payer sur paypal.

Correction ?

...CORRECTION...

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.

2 - Structure d'une page HTML

⇩ ⇧ ⤊

Voici un code HTML minimaliste, n'affichant rien :

<!DOCTYPE html>
<html>
 
    <head>
    </head>
 
    <body>
    </body>
 
</html>

08° Quelles sont les deux balises contenues entre la balise <html> d'ouverture et la balise de fermeture </html> ?

Correction ?

...CORRECTION...

On voit que <html> contient deux balises :

une balise <head>
une balise <body>

Signification de ces balises fondamentales

La première ligne <!DOCTYPE html> permet de signaler que le document est réalisé en HTML.

La balise <html> contient l'intégralité du document HTML. Le contenu interne de la balise HTML est composé de deux autres balises.

La balise <head> va contenir des données qu'on veut transmettre au navigateur mais qui ne seront pas affichées sur la page : le titre à mettre dans l'onglet, la langue utilisée ou l'auteur par exemple.

La balise <body> va contenir ce qu'on désire voir s'afficher sur la page.

Tabulation et notion de balises-conteneurs

La notion de balises contenues intégralement dans d'autres balises est extrêmement importante. Pour visualiser facilement ce qui est contenu dans quoi, on utilise le système de tabulation : on décale de 4 espaces vers la droite la balise contenue dans une autre balise ou on appuie sur la touche TAB (celle à gauche du A).

Ainsi, on voit bien que <head> est contenue dans <html> car <head> est tabulée vers la droite par rapport à <html>.

<!DOCTYPE html>
<html>
 
    <head>
    </head>
 
    <body>
    </body>
 
</html>

09° Utiliser le lien suivant :

https://formation.infoforall.fr/vide.html

Trinket est un site permettant de tester du code HTML et CSS par exemple. Son intérêt est de permettre de visualiser le résultat en direct :

à gauche, on a le code,
à droite, le résultat.

Vous devriez aboutir à une page vide nommée index.html vous permettant de taper du code HTML.

10° Copier-coller le code HTML ci-dessous dans la partie code du trinket (à gauche). Lancer le code avec la flèche qui tourne sur elle-même si l'autorun n'est pas activé.

<!DOCTYPE html>
<html>
    <head>
        <title>TITRE ONGLET</title>
    </head>
    <body>
        Premier test sur la première ligne.
        Et hop, la deuxième ligne.
    </body>
</html>

Bel affichage ?

Et oui, c'est moche :

11° Est-ce que le navigateur a bien géré le passage à la ligne ?

Correction ?

...CORRECTION...

Non. Le passage à la ligne n'a pas été pris en compte du tout...

En HTML, le passage à la ligne dans le code source n'est pas transposé à l'écran.

Attention, c'est d'ailleurs la même chose pour les espaces multiples.

Alors, comment passer à la ligne ?

Balise p

Le HTML possède une balise qui exprime le fait qu'on désire créer un paragraphe : un texte séparé des autres textes par un espace au dessus et un espace en dessous.

<!DOCTYPE html>
<html>
    <head>
        <title>TITRE ONGLET</title>
    </head>
 
    <body>
        <p>Premier test sur la première ligne.</p>
        <p>Et hop, la deuxième ligne.</p>
    </body>
</html>

Comme vous pouvez le voir, il suffit d'entourer vos paragraphes par une balise d'ouverte <p> et une balise de fermeture </p>.

12° Modifier le code et visualiser le résultat.

3 - Page avec liens

⇩ ⇧ ⤊

Il est temps de créer notre première page de liens. Nous allons passer à autre chose que Trinket car la sauvegarde est plutôt compliquée sur ce site lorsqu'on est pas inscrit.

13° Réaliser les opérations ci-dessous sans en oublier une seule :

Ouvrir le logiciel Notepad++ qui se trouve sans doute sur votre bureau.
Copier le code ci-dessous dans Notepad++.

<!DOCTYPE html>
<html>
    <head>
        <title>HTML</title>
    </head>
 
    <body>
        <h1>Trois sites pour apprendre le HTML</h1>
 
        <p>Numéro 1 : <a  href="https://www.alsacreations.com/apprendre/">Alsacreations</a></p>
 
        <p>Numéro 2 : <a  href="https://www.w3.org/Style/Examples/011/firstcss.fr.html">w3.org</a></p>
 
        <p>Numéro 3 : <a  href="https://j-willette.developpez.com/tutoriels/html/les-bases-du-html/?page=page_1">developpez.com</a></p>
 
    </body>
</html>

Dans Notepad++, chercher l'onglet Langage/Language et sélectionner H puis HTML pour indiquer que notre code est un code HTML.
Si UTF-8 n'est pas indiqué en bas à droite de la fenêtre de Notepad++, chercher l'onglet Encodage/Encoding et sélectionner Convertir en UTF-8. Sinon, rien à faire.
Sélectionner Enregistrer Sous

Chercher votre répertoire personnel sur le réseau
Aller dans le dossier SNT (si vous n'avez pas de dossier SNT, créez ce dossier à l'aide d'un clic droit et nouveau dossier).
Choisir comme nom d'enregistrement web_liens.html : attention à l'extension .html.

14° Ouvrir l'explorateur de fichiers et se rendre dans votre dossier de travail pour trouver votre fichier HTML. Double-cliquer sur votre fichier web_liens.html : votre navigateur devrait réussir à ouvrir automatiquement le fichier, le lire et vous présenter le résultat visuel de ce code.

Exemple de visuel possible :

Testez maintenant les liens en cliquant dessus. Utiliser le bouton Revenir en arrière du navigateur pour revenir en arrière. Vous devriez voir qu'on parvient à indiquer au navigateur que certains mots sont des liens. Lequels ? Ceux contenus entre une balise <a> d'ouverture et une balise </a> de fermeture.

Ne passez pas à la suite tant qu'aucune image ne s'affiche dans le navigateur. Demandez de l'aide au besoin.

Ouvrir un lien dans un nouvel onglet

Vous voulez que le lien s'ouvre dans un nouvel onglet ? Il suffit de savoir comment demander à votre navigateur !


<p>Numéro 1 : <a  target="_blank" href="https://www.alsacreations.com/apprendre/">Alsacreations</a></p>

15 (à faire vérifier et valider)° Question notée : choisir un thème que vous aimez (loisirs, sports, animaux, études ou autres) et réaliser une première page HTML. Votre création devra comporter :

Un titre incorporer dans une balise <h1>.
Une courte description de votre thème (dans au moins deux balises <p>).
Au moins trois liens vers des pages intéressantes vis à vis du thème (vous pourrez récupérer leurs URL en allant sur ces sites et en copiant l'URL visible dans la barre d'adresses).
Entourer l'un des mots d'une balise <em> pour montrer qu'il est un peu important dans le contexte de votre texte (em pour emphase).
Entourer l'un des mots d'une balise <strong> pour montrer qu'il est encore plus important.
Entourer un autre mot d'une balise <mark> pour montrer qu'il est vraiment très très important.

Vos liens devront s'ouvrir dans un nouvel onglet (voir la remarque ci-dessus).

Appelez moi quand c'est fini.

Si vous avez le temps...

Il reste encore une chose à faire. Vous savez maintenant réaliser des liens vers des pages situées sur un site extérieur. Mais comment pourriez-vous indiquer au navigateur d'aller chercher une page dont le code html est stocké au même endroit que la première ?

Adresse relative

Définition

Une adresse relative est une adresse qu'on donne par rapport à la localisation d'une autre ressource.

Une adresse relative est une adresse qui ne contient pas le nom du site et qui ne commence pas par un slash.

Application au Web

Imaginons que vous ayez deux pages HTML situées au même endroit.

📁 SNT

📄 page_1.html

📄 page_2.html

Elles sont donc enregistrées dans le même répertoire.

Pour créer un lien vers page_2.html depuis le code de page1.html, il suffit d'insérer une adresse relative et non pas une URL totale : on reste au même endroit, pas la peine de donner une adresse externe.

Code à placer dans page1.html

`1`	`<p>Liens perso : <a href="page_2.html">Perso</a></p>`

Code à placer dans page2.html

`1`	`<p>Liens perso : <a href="page_1.html">Perso</a></p>`

✌ 16 (à faire vérifier et valider)° Enregistrer les deux pages suivantes au même endroit en respectant les noms affichés :

Premier fichier à enregistrer sous le nom page_1.html

<!DOCTYPE html>
<html>
    <head>
        <title>Page n°1</title>
    </head>
 
    <body>
        <h1>Ma super page 1 !</h1>
 
        <p>Et j'ai même fait une page 2. Vous pouvez y aller en cliquer sur le lien ci-dessous.></p>
 
        <p>Mon super-lien : <a  href="page_2.html">Aller en page 2</a></p>
 
    </body>
</html>

Deuxième fichier à enregistrer sous le nom page_2.html

<!DOCTYPE html>
<html>
    <head>
        <title>Page n°1</title>
    </head>
 
    <body>
        <h1>Ma page 2</h1>
 
        <p>Si vraiment vous voulez retourner à l'accueil, suivez le lien ci-dessous.></p>
 
        <p>Vers l'accueil : <a  href="page_1.html">Accueil de mon super site</a></p>
 
    </body>
</html>

Tester l'une des pages et vérifier qu'on parvient bien à naviguer de l'une à l'autre en utilisant le lien.

Activité publiée le 30 09 2019
Dernière modification : 30 09 2019
Auteur : ows. h.

⏪

⏫

⏩