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.

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° Faire un double-clic sur le mot Informatique dans le code de l'inspecteur. 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. Voici un exemple de page qui fournit des liens vers des sites parlant de HTLM. Vous le trouverez dans le deuxième onglet nommé test_liens.html dans votre trinket.

Pour information, voici le contenu pre-rempli du trinket test_liens.html.

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>

16° Testez les liens en cliquant dessus. Comme les sites sur lesquels vous allez ne citent pas votre trinket, il faut le relancer (la flèche qui tourne) pour revenir sur la page des liens.

Je n'ai pas nécessairement mis les meilleurs tutos ici. J'ai surtout mis des sites qui acceptent de s'afficher dans ce trinket. Certains sites empêchent en effet d'afficher leurs propres pages au sein d'un autre site. C'est normal : on pourrait se faire passer pour un autre site ! Heureusement, l'URL permet de faire le tri mais c'est piégeux.

17° Question notée : choisir un thème que vous aimez et réaliser une page html comportant au moins trois liens vers des pages intéressantes vis à vis du thème.

Vous placerez votre code source HTML dans l'onglet mes_liens.html.

Appelez moi quand c'est fini.

Si vos liens ne parviennent pas à s'afficher dans trinket : rajouter l'attribut target="_blank" dans vos balises a. Voici un exemple :

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

Il est possible que certains liens semblent ne pas vouloir s'afficher en utilisant trinket. Si vous désirez néanmoins vérifier sous trinket que votre lien fonctionne bien, il faut simplement survoler le lien, faire un clic-droit et ouvrir le lien dans un nouvel onglet.

Si vous voulez vous créer une page temporaire,il faut cliquer sur le signe + :

enregistrement

Donnez un nom sans espace finissant par .html et validez avec la touche ENTREE.

Il serait néanmoins intéressant de relier la page de liens tuto HTML avec votre propre page de liens.

Adresse relative

Vous avez maintenant deux fichiers HTML au moins dans ce trinket :

  • test_liens.html
  • mes_liens.html et

Ils sont enregistrés dans le même répertoire ou dans le même dossier trinket.

Or, si vous ne placez pas de  /  dans votre adresse, vous signalez qu'il s'agit d'une adresse relative à la position actuelle. Comme les deux fichiers html sont au même endroit, voici un moyen simple de les joindre l'un à l'autre :

Pour aller sur la page de vos liens perso mes_liens.html depuis la page test_liens.html

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

Pour aller sur la page test_liens.html depuis la page mes_liens.html

1
<p>Vers les tutos HTML : <a href="test_liens.html">Les tutos</a></p>

18° Rajouter les liens avec adresse relative pour passer d'une page du trinket à l'autre.

ETAPE FINALE POUR LES RAPIDES – les pages que vous venez de créer ne sont pas atteignables autrement que via l'interface de trinket. Pour les récupérer en local, il faut :

  • les télécharger avec le bouton SHARE (celui avec 3 points, le 3e dans le menu) et dézipper le dossier obtenu.
  • cliquer sur l'un de vos fichiers HTML maintenant présent sur votre disque dur : votre navigateur devrait l'ouvrir et l'afficher.

Maintenant, vous pouvez télécharger chez vous un éditeur de code comme Notepad++ ( https://notepad-plus-plus.org/fr/ ) ou Atom (https://atom.io/) pour travailler directement le code en local !

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.