Sommaire

Liste complexe organisée par JavaScript et le CSS

En travaillant en tant que formateur, je suis amené à montrer des exemples de sites ou méthodes sur Internet. J’avais noté quelques liens que je montrais régulièrement à mes étudiants, et à force de mettre des liens qui se suivaient, j’ai décidé de faire une page qui organiserait tout cela, sans que j’aie à retoucher quoi que ce soit le jour où j’ajouterais un nouveau lien.

Regardons en détail le fonctionnement de cette page. Mais, tout d’abord, à quoi ressemble-t-elle. Vous avez les fichiers dans le dossier 10_6_listeLiens ou à la page demo.freelancetoulouse.com.

images/10-5-a.png

Par contre, si la fonction principale de JavaScript est désactivée, on perd les couleurs.

images/10-5-b.png

La page sans couleur est le résultat sans le fonctionnement de JavaScript, qui n’aura dans cet exemple que la fonction de colorier l’ensemble.

Passons au code HTML :

<!DOCTYPE html>  
<html>  
   
<head>  
  <title>Des p’tites démos en ligne</title>  
  <meta charset="UTF-8">  
  <meta name="viewport" content="width=device-width, 
initial-scale=1.0">  
   
  <link href="https://fonts.googleapis.com/css?family=Alegreya+Sans|
Josefin+Sans|Sedgwick+Ave+Display" rel="stylesheet">  
  <link href="https://fonts.googleapis.com/css?family=Frijole"  ...