Trois briques, un seul site : assembler HTML, CSS et PHP dans une distribution AMP

Un site web fonctionnel n'utilise presque jamais un seul de ces trois langages, mais bien leur combinaison, chacun apportant sa contribution propre au résultat final.

Le rôle de chaque langage dans l'ensemble

Le HTML fournit la structure du contenu, présente à chaque chargement de page. Le CSS habille cette structure d'une apparence cohérente sur l'ensemble du site. Le PHP génère dynamiquement tout ou partie du HTML, selon les données disponibles côté serveur.

Le rôle de la distribution AMP dans cet assemblage

Apache reçoit la requête du navigateur et déclenche l'exécution du script PHP correspondant à la page demandée.

PHP exécute la logique nécessaire, interroge éventuellement MySQL pour récupérer des données, puis génère le code HTML final, dans lequel les balises CSS de mise en forme sont incluses ou référencées.

Apache renvoie enfin ce résultat HTML complet au navigateur du client, qui l'affiche en appliquant la mise en forme CSS associée.

Un exemple concret complet : une page de résultats de recherche

Une page affichant les résultats d'une recherche produit combine du HTML pour structurer la liste des produits, du CSS pour la présentation visuelle (grille, couleurs), et du PHP pour interroger MySQL et générer dynamiquement la liste correspondant à la recherche de l'utilisateur.

Vérifier expérimentalement le fonctionnement du site

Observer les requêtes échangées entre le navigateur et le serveur, comme vu au chapitre précédent, permet de vérifier concrètement quelles données sont envoyées lors de la soumission d'un formulaire, et quel contenu HTML est renvoyé en réponse par le script PHP.

L'essentiel

HTML : structure du contenu. CSS : mise en forme visuelle. PHP : traitement dynamique côté serveur.
Distribution AMP : Apache reçoit la requête et déclenche PHP, PHP interroge éventuellement MySQL et génère le HTML final, Apache renvoie le résultat au client.
Un site web fonctionnel combine généralement les trois langages, chacun apportant une contribution distincte et complémentaire.

Choisir le bon sélecteur CSS pour mettre en forme une page produit