< Exemple d'une narration hyperlien. >

Concept

Un narrateur attend un bus:

  1. Il ne sait pas depuis combien de temps.
  2. Il n’est pas sûr qu’un bus passe ici.
  3. Le paysage semble presque vide.
  4. Le temps est flou.
  5. Certaines pages reviennent presque identiques.

La navigation devient l’équivalent d’une pensée circulaire.

Structure possible

index.html        → “J’attends.”
route.html        → La route vide
horaire.html      → Les horaires incertains
souvenir.html     → Fragment de mémoire douteuse
retour.html       → Retour presque identique au début
css/style.css

Texte de départ

J’attends le bus.   
Il doit passer.  
On me l’a dit.  

Il n’y a personne d’autre.  
Peut-être que je suis en avance.  
Ou en retard.

Schema narratif

Exemple de code

index.html

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Attente</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>

<div class="container">
  <p>J’attends le bus.</p>
  <p>Il doit passer.</p>
  <p>On me l’a dit.</p>
  <p>Je ne sais plus quand.</p>

  <div class="links">
    <a href="route.html">Regarder la route</a>
    <a href="horaire.html">Vérifier les horaires</a>
  </div>
</div>

</body>
</html>

route.html

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>La route</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>

<div class="container">
  <p>La route est vide.</p>
  <p>Elle l’était déjà tout à l’heure.</p>
  <p>Ou peut-être est-ce une autre heure.</p>

  <div class="links">
    <a href="souvenir.html">Essayer de me rappeler</a>
    <a href="index.html">Revenir à l’arrêt</a>
  </div>
</div>

</body>
</html>

horaire.html

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Les horaires</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>

<div class="container">
  <p>Le panneau est effacé.</p>
  <p>Il y avait des chiffres.</p>
  <p>Je crois.</p>
  <p>Ils ont disparu.</p>

  <div class="links">
    <a href="retour.html">Continuer d’attendre</a>
  </div>
</div>

</body>
</html>

souvenir.html

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Souvenir</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>

<div class="container">
  <p>Je suis déjà monté dans ce bus.</p>
  <p>Il me semble.</p>
  <p>Il allait quelque part.</p>
  <p>Je ne me souviens pas où.</p>

  <div class="links">
    <a href="index.html">Retourner à l’arrêt</a>
  </div>
</div>

</body>
</html>

retour.html

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Attente</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>

<div class="container">
  <p>J’attends le bus.</p>
  <p>Il doit passer.</p>
  <p>On me l’a dit.</p>
  <p>Peut-être est-il déjà passé.</p>

  <div class="links">
    <a href="route.html">Regarder la route</a>
  </div>
</div>

</body>
</html>

style.css

body {
    background-color: #0f0f0f;
    color: #d8d8d8;
    font-family: Georgia, serif;
    font-size: 2em;
    margin: 0;
  }

  .container {
    text-align: center;
    max-width: 600px;
    margin: 10vh auto;
    padding: 2rem;
  }

  p {
    line-height: 1rem;
  }

  .links {
    margin-top: 2rem;
  }

  a {
    display: block;
    color: #777;
    text-decoration: none;
    margin-bottom: 1rem;
    transition: opacity 0.4s ease;
  }

  a:hover {
    opacity: 1;
    color: #fff;
  }