Créer une page Web est relativement simple si l’on a quelques rudiments de langage HTML. Réaliser des interactions et des calculs au moyen du langage Javascript est bien plus ardu. Pourquoi ne pas déléguer la tâche à ChatGPT ?

ChatGPT est particulièrement doué pour tout ce qui relève de la programmation informatique ou encore de la création de sites Web. Nous allons en avoir le cœur net avec un exemple précis.

Nous supposons ici que vous disposez d'une connaissance minimale de la création d'une page Web :

  • vous savez qu'une page Web est écrite dans un langage assez simple appelé l'HTML ;
  • vous savez probablement aussi qu'il est possible de définir la présentation de ladite page Web dans un autre langage, le CSS. Toutefois, pour une page Web simple, vous pouvez vous passer de CSS ;
  • vous savez peut-être aussi qu'il est possible de programmer certaines actions au moyen d'un langage tel que Javascript. Cette partie est clairement la plus complexe.

ChatGPT peut fortement vous aider à réaliser une page Web, avant tout en réalisant la programmation en Javascript, ce dont il s'acquitte fort bien.

Page Web de base

Ici, nous avons demandé à ChatGPT de réaliser une page qui puisse retrouver le n° du jour dans l'année d'une date, et aussi celui de la semaine.

Nous avons donc soumis cette requête à ChatGPT :

« Pourrais-tu créer une page Web qui, à partir d'une date, affiche quel est le jour de l'année (en nombre de jours écoulés) et le n° de la semaine en cours. Donc, l'application demande à l'utilisateur d'entrer une date et lui renvoie la réponse. Le design de la page doit être élégant, dans l'air du temps. »

ChatGPT a alors produit l'intégralité du code d'une page, avec du HTML, du CSS et du Javascript. C'est cette dernière partie qui aurait été la plus compliquée à définir et par conséquent, les instructions programmées par ChatGPT sont bien utiles.

ChatGPT produit le code intégral d’une page et il n’y a plus qu’à copier celui-ci. © OpenAI
ChatGPT produit le code intégral d’une page et il n’y a plus qu’à copier celui-ci. © OpenAI

Copions ce texte dans un éditeur HTML, donnons un nom à la page puis téléchargeons-la sur un site Web existant. Voici ce que nous obtenons.

Le site Web proposé par défaut par ChatGPT est fort basique. © D. Ichbiah
Le site Web proposé par défaut par ChatGPT est fort basique. © D. Ichbiah

Embellir le site

Le site que ChatGPT nous a proposé fonctionne comme prévu, mais il manque singulièrement de panache. Nous allons donc lui demander d'améliorer son aspect - pour rappel, ChatGPT se souvient de ce que l'on a écrit précédemment et il est ouvert au dialogue, comme indiqué dans cet article : « Comment bien utiliser ChatGPT ? »

Voici notre requête suivante :

« Mon site dispose d'une feuille de style appelée daniel.css, présente à la racine du site. Pourrais-tu utiliser cette feuiille de style ? »

Bien évidemment, si vous opérez une pareille requête, il faudrait remplacer « daniel.css » par une feuille de style CSS présente sur votre site. Voici ce que nous avons obtenu suite à cet échange.

La page Web est associée à une feuille de style existante. © D. Ichbiah
La page Web est associée à une feuille de style existante. © D. Ichbiah

Améliorer la présentation

Au niveau de la présentation, ce n'est pas encore cela, donc nous allons ajouter quelques instructions :

« Le site Web n'est pas très beau ainsi. Pourrais-tu centrer la demande de date et rendre la zone de saisie plus grande ? »

À présent, ChatGPT nous a proposé le code de la page qui suit.

Une présentation nettement améliorée. © D. Ichbiah
Une présentation nettement améliorée. © D. Ichbiah
La réponse de la page à l’entrée d’une date. © D.Ichbiah
La réponse de la page à l’entrée d’une date. © D.Ichbiah

Améliorer encore le style de la page

Allons plus loin encore dans l'embellissement d'une telle page, mais aussi dans son côté pratique, en l'amenant à proposer, par défaut l'année en cours - ce qui nécessite de produire là encore du code Javascript. Voici la nouvelle requête :

« C'est beaucoup mieux. À présent, pourrais-tu faire en sorte que, par défaut, la zone de saisie affiche l'année en cours ? Et aussi d'afficher le nombre de jours et le numéro de la semaine en gras et bien aligné ? »

Ici, ChatGPT a modifié le code Javascript afin de faire apparaître par défaut l’année en cours dans la zone de saisie. © D. Ichbiah
Ici, ChatGPT a modifié le code Javascript afin de faire apparaître par défaut l’année en cours dans la zone de saisie. © D. Ichbiah
Comme nous l’avons demandé, ChatGPT a modifié le code HTML afin d’afficher le nombre de jours et de semaines en bleu. © D. Ichbiah
Comme nous l’avons demandé, ChatGPT a modifié le code HTML afin d’afficher le nombre de jours et de semaines en bleu. © D. Ichbiah

Le code est présent dans ChatGPT. Mais, si nécessaire, rappelons que vous pouvez faire apparaître le code HTML de la page Web en opérant (depuis Chrome) un clic droit sous Windows ou bien avec Ctrl-clic sous Mac et en sélectionnant « Afficher le code source de la page ».

Un caractère didactique

Si vous souhaitez apprendre le Javascript ou améliorer vos connaissances en la matière, n'hésitez à demander à ChatGPT d'expliquer dans le détail chacune des instructions qu'il a utilisées.

ChatGPT se fait un plaisir d’expliquer le code Javascript qu’il a programmé. © OpenAI
ChatGPT se fait un plaisir d’expliquer le code Javascript qu’il a programmé. © OpenAI