![Les langages de programmation du web](https://static.onlc.eu/blogOEU/optimised/172017066387.jpeg)
Technologie
Les langages de programmation du web
Raphaël |
Cela fait quelques articles que je tente de vous transmettre ce qui me passionne dans mon métier, de la manière la plus concrète possible. Nous avons vu quelques bases en CSS (pour modifier l'apparence de votre site), en JavaScript (pour le rendre plus dynamique), il y a quelque temps en HTML… J'aimerais vous proposer aujourd'hui un résumé.
Les trois langages du web
HTML, la structure
Vous le savez, en 1989, alors qu'Internet n'était qu'un réseau réservé à des usages très limités, Tim Berners-Lee et Robert Cailliau (deux chercheurs du CERN), ont imaginé un moyen d'échanger des documents et de les lier entre eux, de manière à pouvoir naviguer à travers l'information. C'est ainsi qu'est né le World Wide Web que nous utilisons chaque jour. Pour cela, Tim Berners-Lee développe le langage HTML (basé sur le SGML), qui permet de structurer les documents, de les lier entre eux, et de les afficher sur un écran.
Le principe du HTML est simple : écrire et structurer l'information. Par exemple, si votre site donne un bulletin météo, c'est en HTML que vous allez écrire la date, la température, le vent, etc.
Son écriture est simple, il suffit de comprendre le principe des balises : un mot-clé entre les caractères <
et >
qui indique le début d'une information, et ce même mot-clé entre les caractères </
et >
qui indique la fin de l'information. Par exemple, si vous voulez écrire un paragraphe de texte, vous encadrez ce texte avec les balises <p>
et </p>
. Il est par ailleurs possible d'écrire un commentaire : si vous encadrez un texte avec <!--
et -->
, celui-ci ne sera pas lu par le navigateur, ce qui peut être pratique pour conserver des notes dans votre code.
L'intérêt des dernières versions de ce langage est que non seulement vous pouvez écrire des informations lisibles par les humains, mais vous pouvez aussi ajouter des informations à destination des machines, pour les aider à comprendre le contenu de votre site. Par exemple, si dans votre code HTML, vous encadrez la date avec la balise <time>
, vous indiquez aux moteurs de recherche que ce contenu est une date ; si vous encadrez l'information la plus importante de votre bulletin avec la balise <strong>
, vous indiquez aux moteurs de recherche que cette information est plus importante que les autres. De même, il est possible de définir des titres, des sous-titres, des listes, des tableaux, des images, des vidéos, des liens, etc.
Voici un exemple du code HTML d'un corps de page web :
Code
Résultat
Ça fonctionne, l'information est structurée, mais pour dire les choses simplement, c'est moche, on se croirait revenu à l'informatique du siècle précédent.
J'ai conçu ces blocs de code pour que vous puissiez les modifier et observer le résultat en direct. C'est un véritable bac-à-sable, vous ne risquez rien à jouer, modifier ou même tout casser !
CSS, l'apparence
Nous l'avons vu dans un article précédent, le CSS définit l'apparence : couleurs, polices de caractère, positionnement, etc.
Ce langage peut être mêlé au HTML de trois façons : dans une balise à part, qui définit l'apparence de toute la page, dans un fichier séparé, qui définit l'apparence de plusieurs pages, ou directement dans les balises concernées.
On écrit le CSS de la manière suivante : balise-modifiée {propriété: valeur;}
. On peut ainsi modifier les caractéristiques de toutes les occurrences d'une balise, ou juste de certaines. Pour cela, on peut utiliser des identifiants uniques, que l'on ajoute aux balises avec l'attribut id
, ou des familles que l'on définit avec l'attribut class
.
Comme en HTML, on peut écrire des commentaires en encadrant le texte avec /*
et */
.
Ajoutons du CSS à notre exemple :
Code
Résultat
Malgré sa simplicité apparente, le CSS peut être d'une puissance folle : il peut être conditionné à la taille d'un écran, au support d'affichage (écran, papier, autre), il peut calculer certaines valeurs… Si le sujet vous intéresse, j'écrirai d'autres articles sur le sujet.
JavaScript, la dynamique
Jusqu'à maintenant, les langages présentés étaient uniquement descriptifs. Le JavaScript, lui, est un langage de programmation. Il peut réellement servir à écrire des programmes informatiques. Toutes les applications que vous utilisez au travers de votre navigateur web ont été écrites, tout ou en partie, en JavaScript. Par exemple, l'éditeur d'image Pixel•OnlineCreation est du code JavaScript.
Là encore, ce langage a été présenté dans un article précédent : Rendre votre site plus intelligent avec le JavaScript. D'ailleurs, merci pour vos retours !
Le JavaScript peut être intégré dans une page HTML, un peu comme le CSS, dans une balise dédiée, dans un fichier séparé ou directement dans les balises.
Les commentaires se font avec //
pour une ligne ou /*
et */
pour plusieurs lignes.
Ajoutons du JavaScript à notre exemple :
Code
Résultat
Rassurez-vous, l'objectif ici n'est pas que vous compreniez le code, mais que vous observiez à quel point le HTML, le CSS et le JavaScript sont imbriqués les uns dans les autres.
La programmation web me fait vibrer depuis mon enfance et j'espère, par cette série d'articles, vous donner envie de vous lancer. Dites-moi en commentaire, y a-t-il des choses que vous aimeriez apprendre à faire ? Une horloge ? Recherche une adresse sur une carte ? Un traducteur automatique de site web ? Ne soyez pas timide !