SNT Web HTML

Identification

Infoforall

4 - HTML et hyperliens


Qu'est-ce que le Web ? Qu'est-ce qui le caractérise le plus ?

Nous avons vu qu'il s'agissait de la notion de documents hypertextes accessibles via des liens (ou hyperliens).

Mais comment parvient-on à créer ces liens ?

Nous allons avoir besoin de communiquer avec le navigateur et pour cela d'utiliser le langage qu'il comprend : le HTML.

Logo Html5

Nous allons devoir utiliser les URLs vues dans l'activité précédente ... Cela nous permettra également de montrer pourquoi il faut être vigilant lorsqu'on reçoit des liens par Email ou lorsqu'on clique sur un lien sur le Web.

1 - Gérer les liens dans un document HTML

01° Ouvrir une page du navigateur sur Wikipedia. Faire une recherche sur ce site et trouver la page Wikipédia présentant le HTML. Sélectionner avec la souris uniquement le texte langage de balisage comme sur l'image ci-dessous.

page wiki

02° Faire un clic droit avec cette sélection et sélectionner Code Source comme visualisé ci-dessus (sous Firefox). Si vous utilisez Chromium, sélectionner Inspecter.

Vous devriez obtenir ceci :

1
<a href="/wiki/Langage_de_balisage" title="Langage de balisage">langage de balisage</a>
Code source

On voit clairement que le code obtenu comporte le texte sélectionné (langage de balisage) mais également d'autres indications.

1
<a href="/wiki/Langage_de_balisage" title="Langage de balisage">langage de balisage</a>

C'est ce code étrange que reçoit le navigateur. Il le comprend et fournit en retour un visuel : vous avez donc sous les yeux un extrait du code source total de la page.

On constate qu'on parvient à séparer

  1. le texte ( langage de balisage ) à afficher de
  2. l'utilité qu'on lui donne ( un lien vers /wiki/Langage_de_balisage )
HTML

Le HTML est un langage descriptif : c'est le langage qu'on doit utiliser pour faire comprendre au navigateur ce que l'on veut précisément qu'il fasse. On sépare

  • les éléments à afficher
  • du sens qu'on veut leur donner

Pour cela, on utilise des balises (tags en anglais).

Les balises sont en vert dans ce document.

On utilise les chevrons  <  et  >  pour indiquer au navigateur qu'il a affaire à une balise. Ainsi <a> est une balise nommée a.

1
<a href="/wiki/Langage_de_balisage" title="Langage de balisage">langage de balisage</a>

On entoure donc le texte :

  • d'une balise d'ouverture ( <a> )
  • d'une balise de fermeture qui comporte un slash  /  en plus ( </a> ).

Si on simplifie le code en omettant certains termes, on obtient ceci :

1
<a>langage de balisage</a>

03° Quel est le nom de la balise qui sert visiblement à créer le lien hypertexte ?

...CORRECTION...

Il s'agit de la balise <a>, c'est la seule qu'on ai étudié pour l'instant.

Pourquoi a ? a comme anchor ou ancre.


Continuons à observer cette balise.

La balise d'ouverture <a>peut contenir des éléments descriptifs supplémentaires qu'on placera après le a et avant > :

<a ...... >

Dans le cas des balises a, on doit au moins fournir l'URL (Uniform Ressource Locator) du lien à l'aide de

  • l'attribut href suivi de
  • = suivi de
  • l'URL de la destination entre deux guillemets "..."
1
<a href="/wiki/Langage_de_balisage" title="Langage de balisage">langage de balisage</a>

04° Quelle est l'URL du document pointé par notre lien ?

...CORRECTION...

L'URL fournie sur href est /wiki/Langage_de_balisage.

Cette URL est clairement incomplète : il n'y a pas de nom de site !

Souvenez-vous : La présence de  /  au début de l'URL indique qu'il s'agit d'une adresse absolue : cela veut dire qu'on donne le chemin à suivre en partant de la racine du site sur lequel on se trouve.

Or, le code est situé sur fr.wikipedia.org.

05° Ecrire l'URL compléte qui sera envoyé avec la requête HTTP lorsqu'on cliquera sur le lien.

Vous pouvez vous aidez de ce qui est affiché en bas à gauche sur Firefox lorsqu'on survole un lien.

Vérifiez en l'utilisant le lien hypertexte.

...CORRECTION...

https://fr.wikipedia.org/wiki/Langage_de_balisage

06° Sélectionner le texte d'un des liens de cette page Wikipedia ( https://fr.wikipedia.org/wiki/Langage_de_balisage donc). En utilisant un clic droit, sélectionner Examiner l'Elément (Firefox) ou Inspecter (Chrome).

menu examiner l'élément

On obtient alors ceci, à savoir le bout de code du lien dans son contexte total 

visualisation du code

07° Nous allons modifier le code source HTML de la page pour vérifier que le navigateur modifie effectivement l'affichage. Deux modification à faire :

Modification d'affichage : faire un double-clic sur l'un des mots qui apparaît dans le code source. Modifier le texte et vérifier que l'affichage de la page est bien modifiée.

Modification de lien : faire un double-clic sur le texte situé derrière le href du lien, /wiki/Informatique dans le code de l'inspecteur visualisable ci-dessus. Modifier l'adresse fournie derrière href. Par exemple, href="/wiki/Chat".

Attention, nous ne venons pas de modifier la page de Wikipédia, ce serait de la dégradation !

La page HTML originelle est toujours fournie à l'identique.

Le code que vous venez de modifier est simplement le code local 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.

Le code que vous voyez apparaître est donc le code HTML stocké côté client.

08° Tester maintenant le lien après votre modification.

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 ?

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

visualisation du mauvais url

Maintenant que vous savez comment fonctionnent les liens, nous allons créer un ensemble de pages et y créer des liens. Cela vous permettra de créer votre propre banque de liens.

2 - Structure d'une page HTML

Voici un code HTML minimaliste, n'affichant rien :

1 2 3 4 5 6 7 8 9 10
<!DOCTYPE html> <html> <head> </head> <body> </body> </html>

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

...CORRECTION...

On voit que <html> contient deux balises :

  1. une balise <head>
  2. 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. Il s'agit d'une balise particulière : elle est dite orpheline car elle ne comporte pas de balise de fermeture.

La balise <html> contient l'intégralité du document.

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 sur l'onglet par exemple.

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

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.

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

1 2 3 4 5 6 7 8 9 10
<!DOCTYPE html> <html> <head> </head> <body> </body> </html>

Trinket est un site permettant de tester du code HTML et CSS par exemple.

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

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

1 2 3 4 5 6 7 8 9 10
<!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 :

mauvais passage à la ligne

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

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

Première méthode : on force le passage à la ligne avec une balise orpheline nommée br. Comme la balise est seule, on l'écrivait avec un / à la fin avant HTML5 : <br />.

En HTML5, on ne s'embête plus. On note juste <br>.

13° Modifier le code suivant qui utilise déjà une balise orpheline <br> : rajouter quelques phrases avec passages à la ligne.

1 2 3 4 5 6 7 8 9 10 11
<!DOCTYPE html> <html> <head> <title>TITRE ONGLET</title> </head> <body> Premier test sur la première ligne.<br> Et hop, la deuxième ligne. </body> </html>

14° Actualiser la page si autorun n'est pas en route. Alors ? Les passages à la ligne sont-ils bons ?

passage à la ligne
Balise p

Deuxième méthode : on peut faire mieux. 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.

1 2 3 4 5 6 7 8 9 10 11
<!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>.

15° Modifier le code et visualiser le résultat. A-t-on bien des espaces avant et après plus marqués qu'avec la balise <br> ?

paragraphes

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.

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

  1. Ouvrir le logiciel Notepad++.
  2. Copier le code ci-dessous dans Notepad++.
  3. Dans Notepad++, chercher l'onglet Langage/Language et sélectionner H puis HTML pour indiquer que notre code est un code HTML.
  4. 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.
  5. Sélectionner Enregistrer Sous
  6. Chercher votre répertoire personnel sur le réseau
  7. Si vous n'avez toujours pas de dossier SNT, créer un dossier portant ce nom à l'aide d'un clic droit et nouveau dossier.
  8. Aller dans le dossier SNT
  9. Choisir comme nom d'enregistrement web4.html : attention à l'extension.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
<!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>

17° Ouvrir l'explorateur de fichier et se rendre dans votre dossier de travail pour trouver votre fichier HTML. Double-cliquer sur votre fichier web4.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 :

visuel du code

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

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>

19° Question notée : choisir un thème que vous aimez (loisirs, sports, animaux, études ou autres) et réaliser une page html comportant au moins trois liens vers des pages intéressantes vis à vis du thème.

Vos liens devront s'ouvrir dans un nouvel onglet et pas modifier l'apparence de l'onglet actuel (voir la remarque ci-dessus).

Vous enregistrerez le fichier sous le nom web4_exercice.html.

Appelez moi quand c'est fini.

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

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>

Comment sait-on qu'une adresse est relative ? C'est simple (et à retenir)

  • Une adresse est relative si le nom de la ressource ne commence pas par le nom d'un serveur et ne commence pas par un slash :
    • page_1.html est une adresse relative
    • page_2.html est une adresse relative
    • web4.html est une adresse relative
  • Une adresse est absolue si le nom de la ressource commence par le nom d'un serveur (le nom du serveur est alors clair...) ou commence par un slash (le navigateur va alors rajouter de lui-même le nom du serveur ayant fourni le code html)
    • www.infoforall.fr/page_1.html est une adresse absolue
    • /page_2.html est une adresse absolue
    • /www/web4.html est une adresse absolue

20° Enregistrer les deux pages suivantes au même endroit en respectant les noms affichés :

Premier fichier à enregistrer sous le nom page_1.html

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
<!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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
<!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.

L'activité suivante est une mini activité visant à vous montrer comment gérer les images en HTML. Avec une balise bien entendu !

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