Le web des années 90

Le web au début c'était purement académique, c'était pour partager des idées et quoi de mieux pour partager une idée simplement que du texte.

Le but du web est de mettre des machines en réseau et de les faire communiquer afin que l'on puisse accéder aux fichiers des uns et des autres.

Pour en faire l'expérience directement, je vais vous demander d'abord de suivre la procédure pour installer vos outils de développement puis de revenir sur ce document.

On va créer un fichier quelconque appelé "bienvenu" dans lequel on va mettre ceci:

Salut, ça gaz?
Moi c'est METTEZ_VOTRE_PRENOM_ICI

Et si vous activez votre LiveServer, il va se mettre à servir cette page web (et au passage il va vous ouvrir un onglet présentant la page courante).

À partir de là, avec votre LiveServer d'activé, vous pouvez aller sur cette page pour facilement connaître l'adresse de votre ordinateur sur le réseau.

Et maintenant que vous connaissez votre adresse, si votre ordinateur et votre téléphone sont sur le même réseau vous pouvez ouvrir votre navigateur favori sur votre téléphone et demander à votre ordinateur le fichier "bienvenu" en rentrant l'adresse suivante

X.X.X.X:5500/bienvenu

en remplaçant les X.X.X.X par votre adresse, truc comme 127.0.0.1.

optionnellement, vous pouvez l'écrire comme ceci

http://X.X.X.X:5500/bienvenu

mais le navigateur rajoutera le http:// si vous ne le mettez pas.

Ce que vous pouvez faire si vous êtes dans une classe, ou entre potes, et que vous êtes tous sur le même réseau, vous pouvez rentrer l'adresse de votre voisin dans votre navigateur et donc demander le fichier "bienvenu" de son ordinateur.

Vous pouvez changer le contenu du fichier et demander à votre voisin de rafraîchir la page et il verra les changements sur sa machine.

HTML

Bon ... le texte brut ça va bien 5 min mais le but c'est de s'envoyer des documents, pas des post-its.

Quand je vous dis le mot "document" vous pensez probablement à une feuille de papier imprimée, et dans le monde des documents informatiques vous penserez à Microsoft Word, Google Doc, ou à un PDF.

Et si je vous disais qu'on a mieux et depuis bien longtemps?

HTML, un format ouvert et standard.

L'une des forces d'HTML est qu'il s'agit d'un format libre, on peut l'éditer avec n'importe quel logiciel d'édition de texte, le bloc note de windows pourrait suffire. Pas non plus besoin de payer la suite Microsoft Office Office 365 Microsoft Copilot ou encore d'avoir un compte Google.

Ceci dit, il est préférable d'utiliser un éditeur de code et c'est pour cela que je vous ai demandé d'installer VSCode.

On va transformer notre fichier "bienvenu" en fichier HTML, pour ça on va commencer par le renommer en "bienvenu.html".

Si vous rafraîchissez votre page vous constaterez que tout continue de marcher parce que le texte brut est supporté dans HTML.

Mais maintenant nous pouvons mettre des éléments HTML dans notre page comme ceci

<h1>Salut c'est METTEZ_VOTRE_PRENOM_ICI</h1>
<p>Comment ça va?</p>

Un élément HTML est quasiment tout le temps composé de 3 morceaux.

Ici on voit l'utilisation de deux types de tag

<p>: un paragraphe

<h1> : un heading (titre) de première importance les headings existent de <h1> jusqu'à <h6> (je vous conseil de vous en tenir à <h1> jusqu'à <h3> )

Donc on peut commencer à faire un début de document comme ceci

<h1>Ma légendaire recette de tartiflette</h1>
<p>1.patates</p>
<p>2.lardons</p>
<p>3.fromage</p>
<p>??</p>
<p>retour à l'étape 1</p>

C'est un peu rare, mais certains éléments sont à utiliser ensemble comme

<ol>: Ordered List, une liste ordonnée <ul>: Unordered List, une liste non-ordonnée et <li>: List Item, un élément d'une liste

À utiliser en mettant les <li> dans un <ul> ou un <ol>

<h1>Ma légendaire recette de tartiflette</h1>
<ol>
  <li>patates</li>
  <li>lardons</li>
  <li>fromages</li>
  <li>retour à l'étape 1</li>
</ol>

Si vous essayez ce code, vous remarquerez que les éléments de la liste sont numérotés automatiquement.

Cette mécanique d'éléments qui vont ensemble était beaucoup plus utilisée à l'époque qu'aujourd'hui. C'est pas "ultra rare" non plus mais ce n'est plus une pierre angulaire du web comme ça pouvait l'être avant 2010.

Aussi, j'ai dis "quasiment tout le temps composé de 3 morceaux" parce qu'il existe des éléments qui ne prennent pas de contenu et qui sont représentés par un tag "auto-fermant" comme <hr/> et <br/> et qui sont donc composés d'un seul morceau.

On remarquera qu'un tag auto-fermant ressemble à un tag fermant sauf que le slash / est à droite du nom du tag.

<hr/> représente une règle horizontale

exemple:

<p>en haut, en bas</p>
<hr />
<p>à gauche, à droite</p>

<br/> représente un saut de ligne. exemple, essayez:

<p>
  today is friday, <br />
  in california.
</p>

et essayez aussi:

<p>today is friday, in california.</p>

eh oui, la mise en forme de votre page web ne correspondra pas à la mise en forme de votre HTML, ce qui déçoit au début, mais au final ça veut aussi dire que vous êtes libre de ranger le code comme vous voulez sans impacter la mise en forme de la page.

CEPENDANT, le contenu d'un élément HTML n'est pas NÉCESSAIREMENT QUE du texte, ça peut être encore plus d'HTML.

On l'as bien vu avec l'élément <br/> mais ce n'est pas le propre des éléments auto-fermants.

On peut utiliser <b>, <i>, et <u> pour retomber sur notre expérience habituelle de Microsoft Word.

<h1>Un peu de modification de texte</h1>
<p>Le tag b sert à <b>mettre en gras</b></p>
<p>Le tag i sert à <i>mettre en italique</i></p>
<p>Le tag u sert à <u>souligner</u></p>

Challenge

Reproduisez cette page web

<h1><u>I.Thèse</u></h1>
<h2>A</h2>
<p>blah blah</p>
<h2>B</h2>
<p>blah blah</p>
<h2>C</h2>
<p>blah blah</p>

<hr />
<br />

<h1><u>II.Anti-thèse</u></h1>
<p>blah blah</p>

<hr />
<br />

<h1><u>III.synthèse</u></h1>
<p>blah blah</p>

Les hyperliens

Certains éléments HTML ne se limitent pas à une apparence par défaut et apportent une fonctionnalité par défaut. Le plus connu de ces éléments est l'hyperlien <a>.

Ceci dit si je met l'adresse d'un site web dans mon <a> comme ceci:

<a>lecolededesign.com</a>

Ça ne marche pas.

Les éléments qui ont un comportement ont besoin d'informations supplémentaires pour pouvoir agir. Pour fournir ces information, le principal moyen c'est l'ajout d'attributs.

Les attributs se mettent dans le tag ouvrant et sont de la forme nom="valeur".

Pour fonctionner, le <a> a besoin d'un attribut href étant égal à l'adresse vers laquelle on veut pointer le lien.

exemple:

<a href="https://www.youtube.com/watch?v=Nrk8sqZfsgI">
  eh ouais, c'était pas dans le contenu qu'il fallait le mettre
</a>

Il est possible d'avoir plusieurs attributs sur un même élément, il faut juste mettre un espace entre chaque.

Les <a> acceptent aussi un attribut target qui peut être égale à une liste de valeurs particulière dont je ne vous parlerais pas tout de suite, on va uniquement retenir la valeur _blank qui ouvrira le lien dans un nouvel onglet plutôt que l'onglet dans lequel on est.

exemple:

<a target="_blank" href="www.alexmurrell.co.uk/articles/the-age-of-average">
  je m'ouvre pas ici
</a>

Les images

Un autre élément qui n'est pas là pour des raisons textuelles est <img>. L'attribut src permet de spécifier le chemin de l'image à montrer, comme ceci :

<img src="https://picsum.photos/id/237/200/300" />

Notez d'ailleurs qu'un <a> rendra tout ce qu'il contient cliquable, on peut donc avoir une image-lien comme ceci:

<a href="https://picsum.photos">
  <img src="https://picsum.photos/id/237/200/300" />
</a>

Les chemins

Ça fait 2 fois qu'on parle de chemin et je vois régulièrement des débutants galérer là dessus, alors on va se faire un chapitre spécifiquement là dessus.

Notez que "lien" et "chemin" sont interchangeables.

"Lien" est plus souvent utilisé dans le contexte du web et de ses pages tandis que "chemin" est plus souvent utilisé pour se référer à l'emplacement d'un fichier, qu’il soit sur le réseau ou sur le disque dur de la machine. Et les équivalent anglais sont "link" == "lien" "path" == "chemin"

Il existe plusieurs types de chemins.

Chemin absolu

Un lien absolu, c'est juste une adresse web. On peut pointer le lien n'importe où. C'est ce qu'on à fait dans les exemples des deux chapitres précédents.

En règle générale, on s'en sert pour pointer vers d'autres sites web.

On peut pointer avec un chemin absolu vers notre propre site web. En admettant que notre domaine est mon_site.com, je pourrais très bien avoir un lien http://mon_site.com/ma_page.html qui pointe vers ma_page.html. Mais c'est proprement inutile si on considère un chemin relatif à la racine.

Chemins relatifs

Un chemin relatif se fait toujours "à partir de quelque part", d'où son nom.

On va prendre en exemple le projet ci-dessous pour les explications qui suivent.

Relatif à la racine

Un chemin relatif a la racine démarre forcément par un / et part du dossier contenant tout le projet.

Si on est dans le fichier index.html et que l'on veut afficher l'image hero.png on peut l'écrire relatif à la racine comme ceci,

<img src="/assets/images/hero.png" />

Si on est dans un fichier un peu plus profond dans le projet comme bertrant.html on l'écrira comme ceci

<img src="/assets/images/hero.png" />

Vous remarquerez que le lien est strictement identique pour les deux. Évidemment, parce que c'est relatif à la racine, pas au fichier dans lequel on est.

Au final c'est comme un lien absolu qui pointe sur notre propre domaine sauf qu'on peut remplacer le domaine par /.

Relatif au fichier courant

Un chemin relatif au fichier courant commence directement par le dossier dans lequel on veut aller et continue comme un chemin relatif à la racine.

Par exemple, si je suis dans index.html et que je veux montrer l'image hero.png, je devrais écrire ceci.

<img src="assets/images/hero.png" />

Mais si on est dans un fichier un peu plus profond dans le projet comme bertrant.html on l'écrira comme ceci

<img src="../assets/images/hero.png" />

.. est un nom spécial pour dire "mon parent". Un dossier peut contenir plusieurs fichiers. Par contre, un fichier ne peut être contenu que par un seul dossier. Donc si on spécifie un nom c'est pour descendre dans un dossier et .. est pour remonter d'un niveau.

<img src="../../../../assets/images/dog.jpg" />

<img src="/assets/images/dog.jpg" />

Est-ce que les liens relatifs au fichier courant sont utiles?

Absolument, voici un extrait de la structure du site sur lequel vous êtes.

(Oui je sais qu'il y a plus de dossiers qu'il n'y a de cours publiés, mais honnêtement, qui a le temps de ses ambitions 😂 ?)

Vous remarquerez que tous les cours ont un dossier assets. Ces dossiers contiennent les fichiers ressources qui sont propres au cours dans lequel ils sont.

Donc pour pointer vers une image d'un cours depuis une page du même cours, j'ai juste besoin d'écrire

<img src="assets/images/MON_IMAGE" />

Quand j'écris c'est donc clair que si le chemin démarre par un slash / c'est un chemin relatif à la racine et donc une ressource commune. Si le chemin NE COMMENCE PAS par un slash / , c'est un chemin relatif au fichier et donc une ressource propre au cours.

Ce qui fait aussi que tout un cours tient presque dans un seul dossier, si je limite les imports de ressources globales.

Ceci dit c'est une préférence et j'ai vu beaucoup de gens avoir un gros dossier assets à la racine du site et découper son contenu en dossiers, un par cours.

Pourquoi les débutants sont confus

Quand on est dans un fichier à la racine du projet, comme index.html, un lien relatif au fichier courant et un lien relatif à la racine on le même effet et sont différents de seulement un caractère, ce qui fait qu'on peut facilement rater les nuances qui deviendront importante dès que le projet aura des sous-dossiers.

404 Not Found

index.html

index.html est un nom de page spécial qui veut dire "la page par défaut du dossier", autrement dit, une url qui pointe vers un dossier plutôt qu'une page spécifique recevra la page index.html du dossier.

Si on considère ce projet

<a href="/profiles"> et <a href="/profiles/index.html"> sont la même chose

<a href="/"> et <a href="/index.html"> sont la même chose

<a href="/profiles/ajani"> et <a href="/profiles/ajani/index.html"> sont la même chose

Pour ce qui est d'écrire des liens qui pointent vers d'autres pages il faudra bel et bien renseigner le nom du fichier à la fin du lien.

Challenge

Reproduisez ce site web

Aide: l'élément <center> est un élément qui centre horizontalement son contenu. Il ne faut plus l'utiliser de nos jours et on verra dans le chapitre suivant par quoi le remplacer, à partir de là ce sera VERBOTEN!!)

Solution : nyan5.zip