HTML, CSS, JavaScript, PHP, MySQL : petites explications des technologies Web

XP-Infos n° 6 – décembre 2009

Article

Il est difficile de comprendre les technologies Web lorsqu’on ne met pas soi-même les mains dans le cambouis. Voici quelques explications de différentes technologies utilisées dans la mise en œuvre d’un site Internet.

(X)HTML : langage de structuration des pages Web

Le HTML et sa variante plus stricte XHTML sont des langages de balisage des pages Web. Il n’y a pas si longtemps, le HTML servait à définir aussi bien la structure des pages que leur présentation visuelle. Aujourd'hui, ces deux aspects doivent être bien distincts et le X/HTML est destiné uniquement à représenter la structure d’une page : titres, sous-titres, paragraphes, images, formulaires de saisie, liens hypertextes, etc.
C’est la base d’une page Web, parfois la seule considérée et utilisée par le logiciel qui visite cette page, comme les moteurs de recherche ou les navigateurs textuels.

On qualifie de « statiques » les pages dont le code X/HTML n’est modifié ni par JavaScript, ni par PHP avant ou après l’affichage dans le navigateur.

CSS : langage de présentation des pages Web

Le code CSS (Cascading Style Sheets, ou feuilles de styles en cascade) permet de modifier la présentation des éléments X/HTML : couleur, taille, police de caractères, mais aussi position sur la page, largeur, hauteur, empilement, bref tout ce qui touche à la mise en page d’un document X/HTML.
Ainsi, un même document X/HTML pourra changer d’apparence sans changer de structure, grâce uniquement à la modification des règles CSS qui lui sont appliquées.
La séparation de la structure et de la présentation facilite ainsi la construction, mais aussi la maintenance et l’évolution des pages Web.

JavaScript : langage de programmation côté client

Le JavaScript est un langage qui est lu et exécuté par votre navigateur – le client – (donc directement sur votre ordinateur) et qui permet de créer des réactions en réponse à des événements sur la page ou à des actions de l’utilisateur. Par exemple :

  • un clic sur un lien qui affiche un texte masqué progressivement
  • un compteur qui défile
  • l’apparition renouvelée d’actualités sans que le navigateur ne demande à nouveau la page au serveur
  • etc.

Auparavant, le code JavaScript était souvent intégré au code HTML, mais là encore, on préconise aujourd’hui la séparation des deux langages pour des raisons d’organisation du code, mais aussi d’accessibilité du site.
Le JavaScript est capable lui-même d’écrire du code X/HTML ou CSS, et donc de modifier totalement la base d’une page Web.

PHP : langage de programmation côté serveur

Le PHP est un langage qui est lu et exécuté sur le serveur où se trouve la page X/HTML, avant que celle-ci ne soit envoyée au navigateur (le client) qui en demande l’affichage. Par exemple, vous avez rempli un formulaire et cliqué sur le bouton, le serveur reçoit les données envoyées par le navigateur, le code PHP traite ces données et écrit le X/HTML de la nouvelle page Web que le serveur Web renvoie ensuite au navigateur.
Le code XHTML d’une page peut ainsi être entièrement écrit à l’aide de code PHP, ou bien le code PHP peut être inséré à un endroit précis d’une page, pour compléter le code X/HTML, CSS, voire JavaScript.

Il existe de nombreux autres langages côté serveur, comme ASP.NET ou Coldfusion.

On qualifie de « dynamiques » les pages dont toutes ou certaines parties sont écrites par PHP (par exemple, un panier de commande au sein d’une page d’un site de commerce), car un langage de programmation modifie ou complète le code X/HTML « statique » de la page.

MySQL : système de base de données

MySQL est un système de base de données, souvent couplé au langage PHP. Ce système utilise le langage SQL (Structured Query Language, langage structuré de requêtes) pour interroger, alimenter ou mettre à jour les bases de données. Ainsi, dans le cas d’un site Web, le langage PHP va établir la connexion à la base de données, puis envoyer le code SQL nécessaire aux opérations sur la base de données. En retour, MySQL va renvoyer des données ou des informations, qui seront traitées par le code PHP.

Il existe de nombreux autres systèmes de base de données, comme Oracle ou Microsoft SQL Server.

Dans les numéros de XP-Infos à venir, nous verrons un peu plus en détail chacune de ces technologies Web, afin que vous puissiez mieux les identifier, mieux les comprendre et mieux juger de la pertinence de leur utilisation sur votre site Internet .

Trucs et astuces

Voici quelques éditeurs de code gratuits :

Le mois prochain

Le X/HTML : initiation et indices de qualité du code.