Maintenant que nous avons collecté nos URLs, nous voulons les afficher de façon structurée dans une page Web. Nous allons donc créer un tableau HTML dans lequel on ajoutera au file du temps toutes les informations recueillies et les liens vers les fichiers générés lors de l’avancé du projet.
Voici le plan synthétisant le processus à mettre en place dans notre algorithme :
Vu la quantité de données dont nous disposons (environ 150 URLs dans trois langues différentes), il serait pénible de les insérer manuellement. Heureusement la machine nous permet de faciliter cette tâche et d’appliquer récursivement des séries d’instructions à toutes les données collectées (processus déterminé d’un algorithme). Pour le réaliser, nous allons écrire un script Bash, avec lequel nous pourrons créer un tableau HTML et y insérer automatiquement toutes nos données.
Générer un premier tableau :
Commençons par apprendre à créer un tableau simple dans un script Bash. Ce sera l’occasion pour nous d’apprendre quelques notions de HTML (notamment les balises concernant la création de tableau).
Cette suite de commandes echo permet d’imprimer du code html, tandis que l’opérateur de redirection (>) renvoie la sortie dans un nouveau fichier enregistré au format indiqué, ici html. Nous définirons chaque balise html dans la suite de l’article.
Comme déjà mentionné, nous aurions pu écrire ces lignes de code directement en HTML sans passer par le langage Bash. Nous réaliserons l’importance de cette méthode lorsque que nous l’appliquerons sur un grand ensemble de donnée, notamment sur nos 150 URLs qui représentent déjà un travail manuel bien trop pénible.
En informatique, HTML (HyperText Markup Language) est un langage de balisage d’hypertexte, créé pour la mise en forme et la mise en page de documents hypertextes. Il est caractérisé par sa structure en arbre ou en dépendance.
D’abord on distingue les balises d’ouverture <element> et les balise de fermeture </element>
Maintenant définissons les balises html utilisées dans notre script :
- <html> et </html> ce sont respectivement les balises d’ouverture et de fermeture de chaque fichier HTML. De là commence l’arborescence du fichier.
- <head> et </head> délimite ce qui est appelé le header. Il contient des informations (titre, encodage, etc) qui ne sont normalement pas affichées par le navigateur. Elle sont cependant prises en compte par le moteur de recherche. Par exemple pour l’indexation.
- <body> et </body> délimite le contenu des informations affichées, c’est-à-dire le texte, les images, les liens, etc qui constituent la partie affichée par le navigateur.
- <table border=”1”> et </table> permettent de créer le tableau. « border » définis l’épaisseur de la bordure.
- <tr> et </tr> forme les colonnes du tableau
- <td> et </td> forme les cellules du tableau. Elles sont intégrées dans les balises <tr></tr>
Afin de bien comprendre le fonctionnement du langage html nous avons décidé de suivre des tutoriels en ligne. Le site https://www.w3schools.com/html/default.asp propose plusieurs idées pour améliorer les tableaux.
Après quelques essaies, voici les premiers résultats :
Nous sommes maintenant familier du langage html et plus particulièrement de la syntaxe pour la création de tableau. Dans le prochain article, nous verrons comment insérer automatiquement l’ensemble de nos liens.
Stay tuned !
Meixin, Andrea et Pierre
Etude du syntagme "made in China" 