Du tableau en HTML

Cet article est la suite de l’article précédent, c’est à dire la suite des exercices d’application du cours de Programmation et Projet Encadré.

Les consignes de la deuxième partie étaient de créer un fichier texte qui contiendrait le nom du blog et le mot étudié, puis un fichier HTML qui contiendrait un tableau de deux cellules sur deux lignes avec ces mêmes informations. Ensuite, il fallait programmer un scripts shell permettant de créer de manière automatique ce même tableau. Pris au jeu, j’ai décidé de ne faire qu’un seul script qui s’occuperait des deux premières tâches.

html
Script entier

Le script est séparé en deux blocs, la partie création du fichier texte et la partie création du fichier HTML.

shebang
Shebang

La première ligne qui commence par #!, le « shebang », est un en-tête du fichier qui indique au système d’exploitation que le fichier est un script et quel interpréteur utiliser pour l’exécuter.

Création du fichier .txt
Création du fichier .txt

Le premier bloc va donc créer un fichier contenu.txt dans le dossier DUMP-TEST. Ainsi, il demande à l’utilisateur via la console d’entrer le nom de son blog et le mot qu’il étudie. La commande read va assigner aux variables $NOM et $MOT les réponses de l’utilisateur pour pouvoir les écrire dans contenu.txt immédiatement avec echo, et pour remplir le tableau plus tard.

Création du fichier .html
Création du fichier .html

Le second bloc quant à lui va créer le fichier tableau.html dans le dossier TABLEAUX. Pour écrire chaque ligne du fichier HTML, il faut encore une fois utiliser echo. On remarque que là aussi, on se sert des variables associées avec read.

Parlons maintenant un peu plus précisément de la structure du fichier du tableau. HTML est un langage de balisage, c’est-à-dire qu’il est composé de balises au format <balise>contenu</balise>. Le premier mot entre chevrons indique que le contenu entre les balises va avoir des propriétés particulières à l’affichage, comme par exemple qu’il s’agit d’un titre, d’un texte en gras, d’un lien hypertexte…  Il doit absolument être suivi après son contenu de sa balise fermante, écrite avec un slash après le premier chevron. Une balise peut comprendre dans son contenu d’autres balises.

Le fichier HTML assez simple qui est présenté ici peut-être décomposé en trois parties.

doctype
Doctype

Comme le script shell, le fichier HTML commence par un en-tête qui indique au navigateur qu’il est bien écrit en HTML, <!DOCTYPE html>. Il est suivi de l’élément <html>, qui comprend comme son nom l’indique tout le code HTML.

head

L’élément qui suit est <head>, qui contient les méta-données du fichier. Il peut par exemple indiquer l’encodage du fichier, définir les styles pour les différents types de paragraphes du fichier, ou même les importer d’un fichier CSS. Ici, on s’en sert pour pouvoir afficher le titre de la page web dans la barre d’onglets du navigateur avec la balise <title> qui contient la variable $NOM, le nom du blog que l’on a demandé à l’utilisateur plus tôt avec read.

body et table
body et table

La dernière partie de ce fichier est <body>, le contenu affiché de la page web. Elle contient le corps du document, son contenu. Dans notre cas, il ne contient que le tableau.

Le tableau commence par la balise <table>. Cependant, utiliser la balise nue de cette façon donne une organisation en lignes et en colonnes, mais sans bordures. Si on en veut une, on y rajoute donc l’argument border= »1″ pour obtenir une bordure de largeur 1. Chaque ligne du tableau est délimitée par les balises <tr>, et chaque cellule par <td>.

Maintenant, vérifions que le script fonctionne bien. D’abord, on entre les réponses demandées par la machine.

read enregistre les valeurs entrées dans les variables $NOM et $MOT
read enregistre les valeurs entrées dans les variables $NOM et $MOT

Le script tourne, regardons si les fichiers ont bien été écrits comme on le souhaitait.

Cet output a été obtenu grâce à la commande less
Cet output a été obtenu grâce à la commande less
tableau.html
tableau.html

Le script a donc bien fonctionné, on a obtenu les deux fichiers qu’on voulait créer. Maintenant, il faut encore voir si tableau.html s’affiche correctement dans un navigateur.

firefox
tableau.html sous Firefox

Le tableau n’est pas très beau, mais il contient bien les bonnes informations, le bon nombre de lignes et de cellules et porte le bon titre.

Ainsi s’achèvent les premiers exercices d’application du cours de PPE. N’hésitez pas à nous indiquer si vous repérez des erreurs dans les exercices, elles seront corrigées aussi vite que possible.

Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s