La page web

HTML et hyperliens

Internet ne peut fonctionner que dans un cadre normalisé (comme nous tous, d’ailleurs ; mais c’est une autre histoire). Mentionnons par exemple le protocole TCP/IP qui permet d’échanger les informations, les URL (adresses web) ou encore le système DNS qui transforme magistralement un nom de domaine en adresse IP. Cette normalisation de s’arrête pas à la transmission d’informations. Elle concerne aussi sa lecture. En d’autres termes, une page web doit pouvoir s’afficher de la même façon par n’importe quel navigateur, sur ordinateur comme sur smartphone.

Ce n’est pas vérifié à \(100\%.\) Selon les navigateurs il peut y avoir des différences sensibles d’affichage mais ce problème n’est pas l’objet de cette page. L’important est d’avoir un langage qui puisse être lu par tous les navigateurs. C’est le cas du HTML.

 

Le HTML

Le HTML (hypertext markup language) est un langage de balisage (ne pas confondre avec un langage de programmation !). Nous expliquerons un peu plus loin ce terme. Sa fonction est descriptive. Mais ce langage sert aussi à créer des liens entre pages.

On situe sa date de naissance en 1992. Après cet heureux évènement, le HTML a évolué et plusieurs versions se sont succédé. L’actuelle est HTML5. Il ne devrait pas y en avoir d’autres.

Il fut question d’abandonner HTML au profit de XHTML mais ce dernier a perdu la bataille en 2009. Précisons qu’il n’y a pas d’énormes différences entre les deux. Le site que vous consultez en ce moment avait été écrit en XHTML puis est passé au HTML5 quelques années plus tard sans que cela demande un travail de titan.

 

Le balisage

Le M de HTML signifie Markup, c’est-à-dire balisage.

Les balises sont des éléments de structuration de la page web. Tout élément est encadré par une balise de début et une balise de fin. Par exemple, au début d’un paragraphe se trouve la balise <p> et à la fin se trouve </p>. Une balise se présente toujours entre un symbole « inférieur » et un symbole « supérieur ». La balise de fin contient un slash.

Celle-ci n’est pas systématique. Pour un retour à la ligne, une seule balise suffit. En l’occurrence, <br>.

Mentionnons aussi le doctype. Ce n’est pas une balise mais l’instruction située au tout début de la page qui indique au navigateur quelle version de HTML il doit lire. Pour HTML5 il suffit d’écrire <!doctype html>.

HTML est insensible à la casse (au contraire de Python, par exemple). Vous pouvez aussi bien écrire <!DOCTYPE html>.

La deuxième instruction d’une page web est <html>. Elle englobe tout le document qui se termine bien sûr par </html>.

Une balise peut contenir un attribut. Par exemple, pour fixer le français comme langue de votre page, la balise définissant le langage devient <html lang = "fr">, la balise de fin étant inchangée. Nous verrons plus loin une balise qu’il est obligatoire de renseigner.

Si l’on excepte ces deux premiers éléments, la page web est divisée en deux parties. La première est l’en-tête (qui ne s’affiche pas) et la seconde est le corps qui apparaît à l’écran du client.

L’en-tête est défini par la balise <head>. Il comprend le titre (qui s’affiche dans la barre du navigateur), des liens avec d’autres pages (voir plus loin les pages CSS) et diverses métadonnées.

Le corps est défini par la balise <body>. Lui-même est subdivisé, en principe en trois parties : une partie d’en-tête (à ne pas confondre avec le head) qui comprend notamment un titre et un menu. Balise : <header>. Ensuite vient le corps du texte qui peut lui-même être subdivisé en colonnes. Balise : <main>. À la fin, un pied de page balisé par <footer>.

En résumé :

<!DOCTYPE html><html>
<head> … </head>
<body>
<header> … </header> <main> … </main> <footer> … </footer>
</body>
</html>

À quoi ressemble une page de code ? Avec un ordinateur connecté à Internet, c’est très facile à voir. Faites un clic droit sur la page que vous visitez (dans le texte, pas dans une image) puis, dans le menu contextuel qui s’affiche, choisissez View Page Source ou Afficher le code source de la page ou quelque indication approchante (le texte dépend du navigateur). En revanche, sur smartphone il vous faut télécharger une appli pour goûter ce plaisir. Si vous vous amusez à le faire sur plusieurs sites, vous constaterez que certaines pages sont codées de façon très claire tandis que d’autres sont incompréhensibles !

 

Les liens hypertextes

Vous avez tous expérimenté le lien hypertexte (le HT de HTML) ou hyperlien. Vous cliquez sur un mot ou un groupe de mots, repérable par une couleur spéciale ou un soulignement, et vous êtes téléporté ailleurs : soit à un autre endroit de la même page, soit sur une autre page du même site, soit sur un autre site (lien externe). Vous pouvez ainsi atterrir sur une page HTML, une photo, un fichier PDF, etc.

La balise qui permet cette prouesse est <a>. Mais évidemment elle ne peut s’employer seule puisqu’il faut préciser l’adresse où le lien conduit. La fin du ou des mots qui forment le lien est marquée par une balise </a>, cette fois sans autre précision.

Pour créer un lien dans une même page, il faut placer une « ancre » à l’endroit où doit conduire le lien. Supposons que l’on nomme cette ancre « maths ». À l'endroit où il faut arriver on l’écrit <a id = "maths"> et l’hyperlien est indiqué par <a href = "maths">. Voir par exemple le code de la page seconde.

Cette dernière fait partie du même site que la présente page mais elle n’est pas placée dans le même classeur (comme ce site comporte plus de mille pages, il serait ingérable de ne pas les classer). Le lien n’a pas besoin d’ancre puisqu’il vous conduit en début de page. Le code de la phrase ci-dessus est le suivant :

Voir par exemple la page <a href = "../a_general/niveaudetudes/second.html">seconde</a>.

C’est le même principe qui est employé pour un lien externe, à savoir <a href = "URL du site">.

Vous l’avez peut-être remarqué, lorsqu’un lien vous conduit sur une autre page, soit cette dernière remplace la page sur laquelle vous vous trouviez, soit elle s’ajoute (un onglet vous permet de revenir à la page de départ). Sans précision dans le HTML, la page est remplacée. C’est le cas pour tous les liens internes de ce site. Sinon, il faut préciser target = "_blank". Visualisez par exemple le code de la page webographie. Comme un auteur préfère que vous puissiez revenir très vite sur son site plutôt que partir sans dire au revoir, il est fréquent que les liens externes comportent cet attribut.

 

Hors HTML

Jusqu’au milieu des années 90, HTML suffisait pour coder une page. Mais de nouveaux besoins apparurent : mises en page plus sophistiquées et adaptées à des tailles d'écrans très variables, formulaires, animations… HTML devenait trop limité.

Aujourd’hui, un langage complémentaire est utilisé pour la mise en forme : le CSS (cascading style sheets).

Les instructions en CSS peuvent figurer sur la même page que sur la page HTML. Cette option se rencontre rarement car l’un des intérêts du CSS est de le placer dans des fichiers séparés. Ainsi la présentation est écrite une seule fois et s’applique à toutes les pages HTML. Si par exemple vous décidez de changer la couleur du texte d’un site qui comporte cent pages de contenu, vous pouvez le faire en quelques secondes alors que si la couleur du texte figurait dans chaque page, il faudrait toutes les modifier. Il est donc difficile de trouver du CSS en hasardant un clic droit en naviguant sur le web ! Sur ce site, une seule page contient à la fois HTML et CSS : la page de ressources par niveaux d’études.

JavaScript et PHP sont des langages de programmation. Ils rendent les pages web interactives (notamment pour commander un article sur un site marchand). Pas d’exemple à vous proposer sur ce site qui ne fait décidément aucun effort pour être interactif.

D’autres fichiers peuvent être « appelés » par HTML sans figurer dans la page. Ce sont des photos, des fichiers PDF, des vidéos, etc.

Selon le rendu souhaité par le webmaster, le choix peut exister entre un fichier à part ou un codage HTML. Sur ce site, certains tableaux et quelques formules mathématiques sont des images PNG tandis que d’autres sont écrits dans le code…